how not to get lost in the current javascript landscape
TRANSCRIPT
How NOT to get lost in the current JS landscape
@rscheibinger
Radosław Scheibinger
@rscheibingercodeabroad.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 lifecycleServer
Client
HTML
Initial request
User Action - Post Request
HTML & Page Reload
Single page application
...
ServerClient
HTML
Initial request
User Action - Ajax Request
JSON
Feeling fast?
0 -100ms Instant Perception100 - 300ms Small perceptible delay300 -1000ms Machine is not working1000+ ms Likely mental context switch10000+ 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 toProgressive 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
HIJAXServer
Client
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
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?
HTML5 History Apiand PJAX
PJAXServer
Client
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
+ History pushState
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/wp-content/uploads/2013/11/Screen-Shot-2013-11-07-at-10.29.32-AM.png
REST Services
Web Browsers - Multiscreen
Mobile Apps
UI Backend
PresentationLogic
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
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 ?
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/gulp-cheatsheet
https://github.com/osscafe/gulp-cheatsheet
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
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' ]...
AMD
require([ './thing1', './thing2', './thing3'], function(thing1, thing2, thing3) { // Tell the module what to return/export return function() { console.log(thing1, thing2, thing3); };});
Asynchronous module definition
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);};
- CommonJS modules support
- First step to isomorphic JS
- works with dependency managers like npm
Webpack
Manage your dependencies
- npm- Bower- WebJars
npm install calendar-widgetnpm install date-formatternpm install dropdown-widget
Modular payoff
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
● webpack 4922☆● browserify 7274☆● lasso-js 69☆
Advanced Asset Bundlers
Test runners
● karma● jsdom + mocha● phantomjs + mocha
Choosing the right tech
For progressive enhancement
Build your tech incrementally
Avoid Technology Lock-in
{dust}
Easy Medium 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