George Bochenek Randy Jones@bosshenek @randysjones

JavaScript Applications for the Enterprise: Building for Production3D Visualization with the ArcGIS API for JavaScript

Always and Forever Best Practices

gzip

http://www.docnrolla.com/codex/css-image-sprites-google-best-practice.php https://tse2.mm.bing.net/th?id=OIP.a2zYlvdmT2zDiTQFHCjlqQHaEK&pid=Api

Google LighthousePageSpeed Insights

H5BP Server-Configshttps://github.com/h5bp/server-configs

https://developers.google.com/speed/pagespeed/insights/

Apache

Google App Engine (GAE)

Internet Information Services (IIS)

lighttpd

Nginx

Node.js

If you build it they will come…

https://developers.arcgis.com/javascript/latest/guide/using-webpack/

https://github.com/esri/arcgis-webpack-plugin

"devDependencies": {"clean-webpack-plugin": "^2.0.0","copy-webpack-plugin": "^5.0.0","css-loader": "^2.1.0","html-loader": "^0.5.5","html-webpack-plugin": "^3.2.0","mini-css-extract-plugin": "^0.5.0","raw-loader": "^1.0.0","uglifyjs-webpack-plugin": "^2.1.2","webpack": "^4.29.6","webpack-cli": "^3.2.3","webpack-dev-server": "^3.2.1"

},"dependencies": {

"@arcgis/webpack-plugin": "^4.10.5"}

Legacy App Integration Tips and Tricks

• Relative Paths Are Easier• require(“buildProject/buildProject”) becomes require(“./buildProject”)

• Old School Templated Widgets

• Static Config Files• Use CopyWebpackPlugin

Setup Your Apps with a CLI

https://github.com/Esri/arcgis-js-cli

What About Web AppBuilder?

https://github.com/gbochenek/esri-wab-build

Continuous Integration

Separate Your Code

https://github.com/Esri/generator-esri-appbuilder-js

Web AppBuilderDev Edition

generate

watch Copywidget

git

create

Source Control the Right Things

https://github.com/Esri/generator-esri-appbuilder-js

Web AppBuilderDev Edition

generate

watch Copywidget watch

Config ProjectCopy

configs

git

git

createWidget Project git

Web AppBuilder Pipeline

https://github.com/rsjones/wab-config

Web AppBuilderDev Edition

Config Projectgit git

createWidget Project git

Template App w/All Widgets

App to build

Copy to app directory

App.zip deploy

https://github.com/rsjones/wab-widget

Submodule

Related Talks

Web AppBuilder for ArcGIS: Advanced Development Tools and Techniques• Thursday // 5:30 – 6:30• Catalina / Medera• George Bochenek / Gavin Rehkemper

Unit Testing with the JavaScript API• Thursday // 1:00 – 2:00• Catalina / Medera• George Bochenek / Randy Jones

Resources• 2018 Dev Summit Building for Production Talk:

• https://www.youtube.com/watch?v=KGJs4au30Zk

• Google Lighthouse:• https://developers.google.com/web/tools/lighthouse/

• ArcGIS WebPack Plugin: • https://github.com/esri/arcgis-webpack-plugin• https://developers.arcgis.com/javascript/latest/guide/using-webpack/

• Building Web AppBuilder:• https://github.com/gbochenek/esri-wab-build

• @arcgis/cli• https://github.com/Esri/arcgis-js-cli

Complete answersand select “Submit”

Scroll down to find the feedback section

Select the session you attended

Download the Esri Events app and find your event

Please Take Our Survey on the App