How NOT to get lost in the current JS landscape

How NOT to get lost
in the current
JS landscape
@rscheibinger
Radosław Scheibinger
@rscheibinger
codeabroad.com
Software Engineer at
This talk is about
In the context of
Progressive enhancement
Single Page Applications
2015
●
●
●
●
●
●
●
HTML5 certified last year
IE8 Usage ~ 2%
CSS3
EcmaScript 6
NodeJS
HTTP2
Users expect page load time < 1 second
Seriously?
● JSP
● JSF
● *** Faces
● XHTML
● Google Web Toolkit
Embrace The Web
How do we build
web apps nowadays?
Traditional Page lifecycle
Client
Initial request
HTML
User Action - Post Request
HTML & Page Reload
Server
Single page application
Client
Initial request
HTML
User Action - Ajax Request
...
JSON
Server
Feeling fast?
0 -100ms Instant Perception
100 - 300ms Small perceptible delay
300 -1000ms Machine is not working
1000+ ms Likely mental context switch
10000+ ms Task is abandoned
Permanent abandonment rate
People who never come back
- Outage 9%
- Slow performance 28%
source: Akamai: The impact of Web Performance on E-Retail Success
Taking step back to
Progressive Enhancement
Progressive Enhancement
● Content (HTML)
● Presentation (CSS)
● Behaviour (JavaScript)
Progressive Enhancement
is important:
● Improving web performance
● page load < 1s
● SEO
SPA How to
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?
SPA Frameworks
- AngularJS
- Backbone
- ember
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
Cannot afford SPA?
Build your App with:
• Traditional Page Lifecycle model
• progressive enhancement
Fixing Traditional Page Lifecycle
problems
- Reloading entire pages when submitting
forms causes Flash of the content
- Apps are not interactive
- Feels slow
Hijax
only using AJAX techniques to 'hijack' form
submissions and responses
HIJAX
Client
Initial request
HTML
User Action - Ajax Request
JSON/ HTML Partial
Server
Hijax problems
We need proper URLs - why?
-
back button issue
abuse of hashbangs: #!/no/more
I like to share links to stuff I see
can’t bookmark without proper url
HTML5 History Api
and PJAX
PJAX
Client
Initial request
HTML
User Action - Ajax Request
JSON/ HTML Partial
+ History pushState
Server
Code duplication Problem
-
Localization
Rendering Templates
Date/Currency formatting
Form Validation
Routing Logic
Isomorphic JavaScript
- JavaScript on the Frontend
- JavaScript on the Backend
http://nerds.airbnb.com/wpcontent/uploads/2013/11/ScreenShot-2013-11-07-at-10.29.32AM.png
UI Backend
Presentation
Logic
Web Browsers - Multiscreen
Mobile Apps
REST
Services
Business
Logic
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.
Hold on
?
Best ecosystem for frontend tooling
Getting Started with nodejs tooling
meet Yeoman
Gruntfile.js ?
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', []);
};
Build tools
●
●
●
●
gulp ☆ 13006
grunt ☆ 9381
brunch ☆ 4018
broccoli ☆ 2092
GRUNT
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.
https://github.com/osscafe/gulpcheatsheet
https://github.com/osscafe/gulpcheatsheet
Grunt - Intermediary files issue
source: http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
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/'))
});
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.
Gulp vs Grunt
-
No intermediary files
Fast builds
Code over Configuration
Streaming api
Structuring your code
Sock Drawer
+ Good for medium size
project
+ Easy to decide where to
put each file
+ Well known pattern
Modular
- easy to identify
dependencies from specific
domain
Modular with assets
+ everything in one place
- need for advanced code
bundling tools
Module Pattern
Namespace pattern
helloWorld.js
Gruntfile.js
var app = app || {};
var thing1 = app.thing1;
var thing2 = app.thing2;
var thing3 = app.thing3;
uglify: {
dist: {
files: {
'dest/output.min.js': [
'src/thing1.js'
'src/thing2.js'
'src/thing3.js'
'src/helloWorld.js'
]
...
app.helloWorld = function () {
console.log(thing1, thing2, thing3);
}
AMD
Asynchronous module definition
require([
'./thing1',
'./thing2',
'./thing3'
], function(thing1, thing2, thing3) {
// Tell the module what to return/export
return function() {
console.log(thing1, thing2, thing3);
};
});
CommonJS
var thing1 = require('./thing1');
var thing2 = require('./thing2');
var thing3 = require('./thing3');
// Tell the module what to return/export
module.exports = function() {
console.log(thing1, thing2, thing3);
};
Webpack
- CommonJS modules support
- First step to isomorphic JS
- works with dependency managers like npm
Manage your dependencies
- npm
- Bower
- WebJars
Modular payoff
npm install calendar-widget
npm install date-formatter
npm install dropdown-widget
Asset Bundling
Optimize Web Performance
-
concat
minify
gzip
cache-busting
Simple asset bundling with Grunt
●
●
●
●
grunt
uglify
gzip
browser cache busting
Advanced Asset Bundling
Tools that support:
- code splitting
- CommonJS syntax
- pluggable transforms
- e.g. precompiling templates
Advanced Asset Bundlers
● webpack ☆ 4922
● browserify ☆ 7274
● lasso-js ☆ 69
Test runners
● karma
● jsdom + mocha
● phantomjs + mocha
Choosing the right tech
For progressive enhancement
Build your tech incrementally
Avoid Technology Lock-in
Easy
Medium
{dust}
Advanced
Frontend Technology Radar 2015
Adopt
●
●
●
●
●
●
●
HTML5 History Api
PJAX
Grunt/Gulp
CommonJS
Asset Bundlers
karma
AngularJS for SPA
Consider
● NodeJS as a UI Backend
● Isomorphic JS
● ReactJS
Stop
●
●
●
●
AMD
JSF
WebJars
GWT
Q/A