web appbuilder for arcgis -...

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@esri.com

/gbochenek/bosshenek

grehkemper@esri.com

/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

Tools: - - Yeoman Grunt Babel

11 / 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!

grehkemper@esri.com @gavinrehkemper

gbochenek@esri.com @bosshenek

esriurl.com/wabtools2017

39 / 40

40 / 40