web appbuilder for arcgis -...
TRANSCRIPT
Web AppBuilder for ArcGIS:Advanced Development Tools and Techniques
George Bochenek and Gavin Rehkemper
esriurl.com/wabtools2017
1 / 40
George Bochenek and Gavin Rehkemper
/gbochenek/bosshenek
/gavinr/gavinrehkemper
2 / 40
What is Web AppBuilder?
3 / 40
Your browser does not support the video tag.
4 / 40
When to use Web AppBuilderGood for:
Multi-purpose apps that need to run on multiple devicesCreating a suite of custom apps with consistent style/behaviorEmpowering non-devlopers to create apps
Other frameworks/templates might be better for:Specific, custom web apps, with specialized workflowsWhen there is a template that does almost all of app functionality
5 / 40
What's new in Web AppBuilder
6 / 40
Your browser does not support the video tag.
7 / 40
Development Patterns and Tools
8 / 40
Patterns are the same ...
Tools have improved
9 / 40
Patterns1. Keep your source code outside of the WAB folders2. Don't write WAB widgets from scratch3. WAB widgets wrap your own widgets4. Test your code outside the WAB5. Build your applications for production
10 / 40
Do I Really Need These Tools?
12 / 40
Builder experience is powerful
13 / 40
WSIWG builder adds complexity
14 / 40
Easy for configurators = harder for developers
15 / 40
Generators automate this extra work for us
16 / 40
Scaffold out boilerplate code
17 / 40
Install / configure tools to automate tasks
18 / 40
WAB is an opinionated framework on top of JSAPI
19 / 40
Heavy use of convetion - influenced by Rails
20 / 40
Ideal for a generator: yo esri-appbuilder-js
21 / 40
Installs tools to transpile and copy to WAB folder
22 / 40
Subgenerator to scaffold out widget files
23 / 40
New Features: SASS styling, custom themes
24 / 40
Patterns Review1. Keep your source code outside of the WAB folders2. Don't write WAB widgets from scratch3. WAB widgets wrap your own widgets4. Test your code outside the WAB5. Build your applications for production
25 / 40
Pattern:
Source Code
26 / 40
Web AppBuilder Folder Structure
27 / 40
Only Keep YOUR Code in Source Control
28 / 40
Demo: App Generator
29 / 40
Pattern:
Do Not Write Widgets from Scratch
30 / 40
Demo: Widget Sub Generator
31 / 40
Pattern:
Wrap Your Widgets
....maybe
32 / 40
How do I test all this Web App Builder code?
33 / 40
34 / 40
Pattern:
Build for Production
35 / 40
Demo: Build it!
36 / 40
Coming Soon3D Builds
Fewer Dependencies
Better Performance
37 / 40
ResourcesWidget Generator: Build Tool: Finding Great Widgets
Geonet:
ArcScripts SearchDocumentation, Download, and Support:
https://github.com/Esri/generator-esri-appbuilder-jshttps://github.com/gbochenek/esri-wab-build
Web AppBuilder Custom Widgets GroupWAB Widget Search
developers.arcgis.com/web-appbuilderdevelopers.arcgis.com/javascript
38 / 40
Thank You! Any Questions? -
-
These slides, sample code, and links are at:
Please rate this session in the Esri Events mobile app!
[email protected] @gavinrehkemper
[email protected] @bosshenek
esriurl.com/wabtools2017
39 / 40
40 / 40