JavaScript Applications for the Enterprise: Building for Production Randy Jones Jackie Roberts @randysjones @webdevjackie Reduce Image Size gzip

Always and Forever Best Practices

Blocking Elements

http://www.docnrolla.com/codex/css-image-sprites-google-best-practice.php https://tse2.mm.bing.net/th?id=OIP.a2zYlvdmT2zDiTQFHCjlqQHaEK&pid=Api PageSpeed Insights Lighthouse https://developers.google.com/speed/ https://developers.google.com/web/tools/ pagespeed/insights/ lighthouse/#devtools H5BP Server-Configs https://github.com/h5bp/server-configs Apache (GAE) Internet Information Services (IIS) lighttpd Nginx Node.js

HTTP/2 Protocol Apache httpd Configuration Binary protocol IIS since 10.0 Apache httpd since 2.4.17 Can get benefit w/o Server Push LoadModule http2_module modules/mod_http2.so LoadModule headers_module modules/mod_headers.so Tomcat 9.x * Use for HTTPS only Tomcat 8.5.x * Might be faster, might not TEST Protocols h2 h2c http/1.1 And More!

* Be sure to disable ajp or be at 9.0.31 or 8.5.51 & httpd 2.4.42 if being used as a reverse proxy JavaScript Applications for the Enterprise: Building for Production • Jackie Roberts • @webdevjackie If you build it they will come… https://developers.arcgis.com/javascript/latest/guide/webpack/

https://github.com/esri/arcgis-webpack-plugin "devDependencies": { "clean-webpack-plugin": "^2.0.0", "copy-webpack-plugin": "^5.1.1", "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.3.6", "webpack": "^4.29.6", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.2.1" }, "dependencies": { "@arcgis/webpack-plugin": "^4.14.1" } Legacy App Integration Tips and Tricks

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

• Old School Templated Widgets

• Static Config • Use CopyWebpackPlugin Setup Your Apps with a CLI https://github.com/Esri/arcgis-js-cli https://github.com/Esri/jsapi-resources/tree/master/4.x/webpack/ https://developers.arcgis.com/javascript/latest/guide/react https://developers.arcgis.com/javascript/latest/guide/esri-loader/index.html/ What About Web AppBuilder?

https://github.com/Esri/esri-wab-build Now supports 2.15! Separate Your Code

generate create git

Copy watch Web AppBuilder widget Dev Edition

https://github.com/Esri/generator-esri-appbuilder-js Source Control the Right Things

generate Widget create Project gitgit

Copy watch watch Web AppBuilder widget Dev Edition

Config Copy Project git configs

https://github.com/Esri/generator-esri-appbuilder-js Continuous Integration Web AppBuilder Pipeline

Template Widget Submodule Config App w/All create Project git Project git git Widgets

Web AppBuilder Copy to app directory Dev Edition

App to App.zip deploy build

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

• 2019 Dev Summit Building for Production Talk: • https://youtu.be/-Xtf1TSYZVw

• 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/webpack/

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

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

JavaScript Applications for the Enterprise: Test More, Work Less • Thursday // 10:30 – 11:30 • Catalina / Madera • Randy Jones / Jackie Roberts

JavaScript Applications for the Enterprise: Test More, Work Less • Friday // 1:00 – 2:00 • Pasadena / Sierra / Ventura • Randy Jones / Jackie Roberts