Make JavaScript Lean, Mean, and Clean
•Download as PPTX, PDF•
1 like•349 views
This document summarizes a presentation on making JavaScript applications lean, mean and clean using Gulp and RequireJS Optimizer. It discusses using Gulp for task automation like linting, minification and image optimization. It also covers using the RequireJS Optimizer to concatenate JavaScript files into a single file to improve load performance. The document provides examples of Gulp and RequireJS Optimizer configuration and usage.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (6)
Similar to Make JavaScript Lean, Mean, and Clean
Similar to Make JavaScript Lean, Mean, and Clean (20)
More from Blue Raster
More from Blue Raster (20)
Recently uploaded
Recently uploaded (20)
Make JavaScript Lean, Mean, and Clean
- 1. Robert Winterbottom @RWinter85 Aamir Suleman @iSpatial Slides: http://bit.ly/1Fb5ZHk Make JavaScript Lean, Mean, and Clean Mesquite C March 11th , 2:30pm
- 2. Overview • Gulp • RequireJS Optimizer • Other considerations
- 3. Gulp • Task Automation • Simple and Efficient
- 4. Gulp – Common Uses 1. JSLint 2. Code Minification 3. Image Optimization 4. FTP 5. Watch files
- 5. Gulp – What is needed? • Install NodeJS • Install Gulp • Get the Ingredients gulp-* plugins • Make the Recipe gulpfile.js
- 7. Gulp – More Plugins • gulp-concat • gulp-autoprefixer • gulp-minify-html • gulp-imagemin • gulp-uglify • http://gulpjs.com/plugins/
- 9. development workflow • Jade HTML • Stylus CSS on edit • JavaScript JSLint on edit
- 10. • Minify • Port only require files (no jade, stylus, etc) • FTP the build build workflow
- 11. Demo : GulpJS
- 12. Build Option 2 • Concatenate JS files to a single file using RequireJS Optimizer
- 13. RequireJS Optimizer • Simple to use !!! • Open source • Optimize your AMD modules • Works easily with your favorite task runner or directly in node.js
- 14. What can the optimizer do for you? • Make your app load faster • require your css and have it inlined into the bundle. • Generate multiple bundles, or layers, for single or multi page applications, including shared bundles. • Minimize the number of http requests made when your app loads.
- 16. src folder build folder ~ 20 items ~ 100 KB ~ 3 items ~ 44 KB
- 17. Getting Started • Grunt • npm install grunt-contrib-requirejs --save • Gulp • npm install gulp-requirejs --save • Node.js • npm install requirejs --save Installation Dependencies • node.js • or Java (although I have not used this approach) • or Browser (new way to generate bundles)
- 18. Simple example with Grunt
- 19. Simple example with Gulp
- 20. Build Profile
- 21. Build Profile Explained • baseUrl - base directory for the project • paths - these are the packages you configured in dojoConfig or require config • empty: - special reserved word for empty or CDN modules, such as esri, dijit, dojo, etc. • name - name of your entry file (minus the .js extension), this is where the optimizer will start looking for dependencies • out - Where to put the bundled file
- 22. Gotchas • plugins • dojo/text!myTemplate.html • CDN or empty resources • must be specified as empty: in the build profile • Aliases • full path specified in build profile, not relative to packages. • Example: 'MainModel': 'app/js/models/Main' as opposed to: 'MainModel': 'models/Main' source: http://i.verylol.com/
- 23. Additional Considerations • Gzip • CloudFront, CloudFlare • AppCache – several gotchas! • Service Workers – coming soon…
- 24. Resources • https://developers.arcgis.com/javascript/ • https://github.com/requirejs/example-multipage/ • http://requirejs.org • https://github.com/requirejs/ • http://gruntjs.com/ • http://gulpjs.com/
- 25. Questions Github Code example http://bit.ly/1A6JXzR http://bit.ly/1Fb5ZHk • @RWinter85 • @iSpatial
Editor's Notes
- Dsfrswf fsfsr
- Streaming Build System, Task runner Gulp.js makes use of pipes for streaming data that needs to be processed. Easier than Grunt Several Plugins Easy to use By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable. Efficient Using the power of node streams, gulp gives you fast builds that don't write intermediary files to disk. High Quality By enforcing strict plugin guidelines, we ensure that plugins stay simple and work as expected. Easy to Learn Using node best practices and maintaining a minimal API surface, your build works exactly as you would imagine.
- It's a JavaScript Worker, so it can't access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed. Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled. It will be terminated when not in use, and restarted when it's next needed, so you cannot rely on global state within a service worker's onfetch andonmessage handlers. If there is information that you need to persist and reuse across restarts, service workers do have access to the IndexedDB API. Service workers make extensive use of promises, so if you're new to promises, then you should stop reading this and check out Jake Archibald's article.