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 Google 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 Google App Engine (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 Files • 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.