Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build...
Transcript of Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build...
![Page 1: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/1.jpg)
Creating Optimized Builds of the ArcGIS
API for JavascriptLloyd Heberlie
Rene Rubalcava
![Page 2: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/2.jpg)
Agenda
• Introductions
• Web Optimizer
• Bower
• Other considerations
• Questions
![Page 3: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/3.jpg)
Web OptimizerLloyd Heberlie
![Page 4: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/4.jpg)
Lloyd Heberlie
Web Optimizer
![Page 5: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/5.jpg)
Summary
• Build options
• Publish to CDN
• Application benefits
![Page 6: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/6.jpg)
Bower PowerRene Rubalcava
![Page 7: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/7.jpg)
What is Bower?
• A JavaScript package manager
• https://github.com/esri/arcgis-js-api
• bower install arcgis-js-api
![Page 8: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/8.jpg)
Why Bower?
• Easier to manage the dependencies
• Tooling fits with the build system
![Page 9: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/9.jpg)
What do I get?
• Minified, but unbuilt JavaScript API
• Source Sass files for 4.0
• Unminified source for Widget Views
![Page 10: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/10.jpg)
Custom builds
• Demystifying the Dojo build system... *kinda*
• Using RequireJS for custom builds
• Key points you should know
![Page 11: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/11.jpg)
Frustrations
• Why can’t I just …
- npm install the API
- Use Webpack
• Why is the download so big?
![Page 12: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/12.jpg)
Pros / Cons
• Over optimization
• HTTP2 benefits
• CDN hosted on HTTP2 server
![Page 13: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/13.jpg)
Rene Rubalcava
Show me the
goods
![Page 14: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/14.jpg)
Other considerations
• Data generalization
• Gzip compression
• File minification
![Page 15: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/15.jpg)
Questions?
• https://github.com/Esri/jsapi-resources/tree/master/bower
• https://github.com/lheberlie/web-optimizer-js
• https://developers.arcgis.com/javascript/jshelp/inside_web_
optimizer.html
• https://developers.arcgis.com/javascript/jshelp/inside_bowe
r_custom_builds.html
• https://github.com/Esri/enterprise-build-sample-js
• https://github.com/gbochenek/web-app-builder-build
![Page 16: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/16.jpg)
Session Feedback
![Page 17: Creating Optimized Builds of the ArcGIS API for JavaScript · •Tooling fits with the build system. What do I get? •Minified, but unbuilt JavaScript API •Source Sass files for](https://reader031.fdocuments.in/reader031/viewer/2022011911/5f8e4b157986be0a230f2081/html5/thumbnails/17.jpg)