how not to get lost in the current javascript landscape

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