How NOT to get lost in the current JS...
Transcript of How NOT to get lost in the current JS...
![Page 1: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/1.jpg)
How NOT to get lost in the current JS landscape
@rscheibinger
![Page 2: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/2.jpg)
Radosław Scheibinger
@rscheibingercodeabroad.com
Software Engineer at
![Page 3: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/3.jpg)
This talk is about
![Page 4: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/4.jpg)
In the context of
Progressive enhancement
Single Page Applications
![Page 5: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/5.jpg)
2015
● HTML5 certified last year● IE8 Usage ~ 2%● CSS3● EcmaScript 6● NodeJS● HTTP2● Users expect page load time < 1 second
![Page 6: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/6.jpg)
Seriously?
● JSP
● JSF
● *** Faces
● XHTML
● Google Web Toolkit
![Page 7: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/7.jpg)
Embrace The Web
![Page 8: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/8.jpg)
How do we build web apps nowadays?
![Page 9: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/9.jpg)
Traditional Page lifecycle
ServerClient
HTML
Initial request
User Action - Post Request
HTML & Page Reload
![Page 10: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/10.jpg)
Single page application
...
ServerClient
HTML
Initial request
User Action - Ajax Request
JSON
![Page 11: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/11.jpg)
![Page 12: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/12.jpg)
Feeling fast?
0 -100ms Instant Perception100 - 300ms Small perceptible delay300 -1000ms Machine is not working1000+ ms Likely mental context switch10000+ ms Task is abandoned
![Page 13: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/13.jpg)
Permanent abandonment rate
People who never come back- Outage 9%- Slow performance 28%
source: Akamai: The impact of Web Performance on E-Retail Success
![Page 14: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/14.jpg)
Taking step back toProgressive Enhancement
![Page 15: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/15.jpg)
Progressive Enhancement
● Content (HTML)● Presentation (CSS)● Behaviour (JavaScript)
![Page 16: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/16.jpg)
Progressive Enhancement
is important:● Improving web performance● page load < 1s● SEO
![Page 17: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/17.jpg)
SPA How to
![Page 18: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/18.jpg)
SPA Checklist
- do I need SEO?- is your app behind a login?- is my app content driven?
- learning curve- frameworks
- do I need first page load performance?- is my app small enough for SPA?
![Page 19: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/19.jpg)
SPA Frameworks
- AngularJS- Backbone - ember
![Page 20: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/20.jpg)
SPA Frameworks
Metric AngularJS Backbone.js Ember.js
Stars on Github 27.2k 18.8k 11k
Third-Party Modules 800 ngmodules 236 backplugs 21 emberaddons
StackOverflow Questions 49.5k 15.9k 11.2k
YouTube Results ~75k ~16k ~6k
GitHub Contributors 928 230 393
Chrome Extension Users 150k 7k 38.3k
![Page 21: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/21.jpg)
![Page 22: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/22.jpg)
Cannot afford SPA?
Build your App with:• Traditional Page Lifecycle model• progressive enhancement
![Page 23: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/23.jpg)
Fixing Traditional Page Lifecycle problems
- Reloading entire pages when submitting forms causes Flash of the content
- Apps are not interactive- Feels slow
![Page 24: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/24.jpg)
Hijax
only using AJAX techniques to 'hijack' form submissions and responses
![Page 25: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/25.jpg)
HIJAX
ServerClient
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
![Page 26: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/26.jpg)
Hijax problems
- back button issue- abuse of hashbangs: #!/no/more- I like to share links to stuff I see- can’t bookmark without proper url
We need proper URLs - why?
![Page 27: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/27.jpg)
HTML5 History Apiand PJAX
![Page 28: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/28.jpg)
PJAX
ServerClient
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
+ History pushState
![Page 29: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/29.jpg)
![Page 30: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/30.jpg)
![Page 31: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/31.jpg)
Code duplication Problem
- Localization- Rendering Templates- Date/Currency formatting- Form Validation- Routing Logic
![Page 32: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/32.jpg)
![Page 33: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/33.jpg)
Isomorphic JavaScript
- JavaScript on the Frontend- JavaScript on the Backend
![Page 34: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/34.jpg)
http://nerds.airbnb.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-07-at-10.29.32-AM.png
![Page 35: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/35.jpg)
REST Services
Web Browsers - Multiscreen
Mobile Apps
UI Backend
PresentationLogic
Business Logic
![Page 36: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/36.jpg)
Need for tools
● No one likes writing plain CSS?● Reduce boilerplate code● Reduce manual work● Sprites, fonts etc...● Optimization, Website has to load super fast.
![Page 37: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/37.jpg)
Hold on ?
Best ecosystem for frontend tooling
![Page 38: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/38.jpg)
Getting Started with nodejs tooling
meet Yeoman
![Page 39: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/39.jpg)
![Page 40: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/40.jpg)
![Page 41: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/41.jpg)
module.exports = function (grunt) {require('load-grunt-tasks')(grunt);var pkgConfig = grunt.file.readJSON('package.json');grunt.initConfig({
pkg: pkgConfig,
webpack: {...},'webpack-dev-server': {...},connect: {...},open: {...},karma: {...},copy: {...},clean: {...}
});grunt.registerTask('serve', function (target) {});grunt.registerTask('test', ['karma']);grunt.registerTask('build', ['clean', 'copy', 'webpack']);grunt.registerTask('default', []);
};
Gruntfile.js ?
![Page 42: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/42.jpg)
Build tools
● gulp ☆ 13006● grunt ☆ 9381● brunch ☆ 4018● broccoli ☆ 2092
![Page 43: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/43.jpg)
GRUNT
![Page 44: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/44.jpg)
Grunt(trial)
Grunt is rapidly becoming the de facto JavaScript build tool with high adoption and a growing ecosystem. While slower than newer alternatives, such as Gulp, in terms of file processing, Grunt covers a broader set of build-related activities, has a proliferation of plugins and makes it easy to author and publish self-written plugins to npm.
![Page 45: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/45.jpg)
![Page 46: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/46.jpg)
https://github.com/osscafe/gulp-cheatsheet
![Page 47: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/47.jpg)
https://github.com/osscafe/gulp-cheatsheet
![Page 48: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/48.jpg)
Grunt - Intermediary files issue
source: http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
![Page 49: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/49.jpg)
Fast incremental Builds
gulp.task('scripts', function () {return gulp.src('src/**/*.js')
.pipe(cache('scripts'))
.pipe(header('(function () {'))
.pipe(footer('})();'))
.pipe(remember('scripts'))
.pipe(concat('app.js'))
.pipe(gulp.dest('public/'))});
![Page 50: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/50.jpg)
Gulp
In the last radar we called out Gulp as a strong competitor to Grunt, with a clean API and fast builds thanks to its streaming approach.
...
We do see some teams successfully using Gulp inside Grunt, when the speed of intermediate result caching is required, but we are not recommending it as the default JavaScript build tool.
![Page 51: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/51.jpg)
Gulp vs Grunt
- No intermediary files- Fast builds- Code over Configuration- Streaming api
![Page 52: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/52.jpg)
Structuring your code
![Page 53: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/53.jpg)
Sock Drawer
+ Good for medium size project
+ Easy to decide where to put each file
+ Well known pattern
![Page 54: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/54.jpg)
Modular
- easy to identify dependencies from specific domain
![Page 55: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/55.jpg)
Modular with assets
+ everything in one place- need for advanced code
bundling tools
![Page 56: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/56.jpg)
Module Pattern
![Page 57: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/57.jpg)
Namespace pattern
helloWorld.js
var app = app || {};var thing1 = app.thing1;var thing2 = app.thing2;var thing3 = app.thing3;
app.helloWorld = function () {console.log(thing1, thing2, thing3);
}
Gruntfile.js
uglify: {dist: {
files: {'dest/output.min.js': [
'src/thing1.js''src/thing2.js''src/thing3.js''src/helloWorld.js'
]...
![Page 58: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/58.jpg)
AMD
require(['./thing1','./thing2','./thing3'
], function(thing1, thing2, thing3) {// Tell the module what to return/exportreturn function() {
console.log(thing1, thing2, thing3);};
});
Asynchronous module definition
![Page 59: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/59.jpg)
CommonJS
var thing1 = require('./thing1');var thing2 = require('./thing2');var thing3 = require('./thing3');
// Tell the module what to return/exportmodule.exports = function() {
console.log(thing1, thing2, thing3);};
![Page 60: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/60.jpg)
- CommonJS modules support
- First step to isomorphic JS
- works with dependency managers like npm
Webpack
![Page 61: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/61.jpg)
Manage your dependencies
- npm- Bower- WebJars
![Page 62: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/62.jpg)
npm install calendar-widgetnpm install date-formatternpm install dropdown-widget
Modular payoff
![Page 63: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/63.jpg)
Asset Bundling Optimize Web Performance
- concat- minify- gzip- cache-busting
![Page 64: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/64.jpg)
Simple asset bundling with Grunt
● grunt● uglify● gzip● browser cache busting
![Page 65: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/65.jpg)
Advanced Asset Bundling
Tools that support:- code splitting- CommonJS syntax- pluggable transforms
- e.g. precompiling templates
![Page 66: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/66.jpg)
● webpack ☆ 4922● browserify ☆ 7274● lasso-js ☆ 69
Advanced Asset Bundlers
![Page 67: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/67.jpg)
Test runners
● karma● jsdom + mocha● phantomjs + mocha
![Page 68: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/68.jpg)
Choosing the right tech
For progressive enhancement
![Page 69: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/69.jpg)
Build your tech incrementally
Avoid Technology Lock-in
![Page 70: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/70.jpg)
{dust}
Easy Medium Advanced
![Page 71: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/71.jpg)
Frontend Technology Radar 2015
![Page 72: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/72.jpg)
Adopt
● HTML5 History Api● PJAX● Grunt/Gulp● CommonJS● Asset Bundlers● karma● AngularJS for SPA
![Page 73: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/73.jpg)
Consider
● NodeJS as a UI Backend● Isomorphic JS● ReactJS
![Page 74: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/74.jpg)
Stop
● AMD● JSF● WebJars● GWT
![Page 75: How NOT to get lost in the current JS landscapepresentations2015.s3.amazonaws.com/50_presentation.pdf · Presentation (CSS) Behaviour (JavaScript) Progressive Enhancement is important:](https://reader034.fdocuments.net/reader034/viewer/2022042222/5ec8477f7f13ff00bc616d63/html5/thumbnails/75.jpg)
Q/A