SINGLE PAGE APPLICATIONS The Good, the Bad and the Ugly Barnaby Cotter

ME Barnaby Cotter Developer at Parallax @brnctr

WHAT’S A SPA?

No content

NOPE, NOT THIS EITHER

SO WHAT ARE THEY? “Single Page” refers to a single browser refresh It does not mean that there is only one ‘page’. Because that wouldn’t make for a very good application.

SO WHY… ARE THEY? Imagine the year is 1999 - Javascript is a different beast. • Awesome cursor trailers • … • … • … not much else. But even then we pretty much had the XMLHTTPRequest But it didn’t get much use until…

GUESS WHO? •Pioneered a bunch of cool web tech •Now a megalomaniac company bent on world dominion •Set the bar for large scale web applications

THE BIRTH OF THE LIBRARY Prototype, Dojo, Mootools, ExtJS, jQuery

$.AJAX(“EVERYTHING”) My god… the power

Unwitting Developers “Cool Web Application” v9.31.15

WITH GREAT POWER… With big web applications becoming a thing, suddenly multiple developers need to work together.

MAIN.JS

TAKING A CUE FROM THE SERVER SIDE • A big tangled web of concerns. • Didn’t they invent that MVC thing in like, the 80s? • Can we apply those principles to the browser?

CONVENTION • Convention over configuration • Models live in /models, views live in /views • Controllers live in /views/models/docs/bin (not really)

THE BIRTH OF THE MV* FRAMEWORK Backbone, Angular, Ember… React?

BACKBONE • Released in 2010, maker of Coffeescript and underscore.js • lightweight - 6.3kb minified, 850 lines. • Vanilla JS • MV Framework • Flexible & Extensible - not just SPAs.

app.TodoView = Backbone.View.extend({ template: _.template($('#item-template').html()), events: { 'click .destroy': 'clear', }, initialize: function () { this.listenTo(this.model, 'destroy', this.remove); }, render: function () { this.$el.html(this.template(this.model.toJSON())); } clear: function() { //etc etc } });

USE CASE • New to SPAs? Usable for small projects - no crazy requirements • Experienced devs? More complex projects. Will go awry if you are undisciplined.

ANGULAR • Google - 2012 • ‘Monolithic’ framework • 2 way data binding • Declarative code for UI, Imperative code for Models

EXAMPLE http://jsfiddle.net/U3pVM/13770

USE CASE Rapid prototyping of a SPA Complex, multilayered UIs Large development teams Easy -> Confusing and Difficult -> Not Too Bad After All

EMBER IN BRIEF • In essence very similar to Angular • Strict adherence to web standards, future-proofed • Good routing • Automagically wires up everything • Use case similar to angular

REACT • 2014 Project from Facebook and Instagram • Described as just the V in MVC. • Quickly build UIs • Virtual DOM & server-side rendering • Elements written as .jsx files - inline JS and HTML. • Can be combined with Flux - FB’s architecture.

COMMON THEMES • Component based development. • Previous versions approximated web components • Self contained units of functionality - their own HTML, CSS, JS.

THE FUTURE • Moving towards component based architecture • e.g. Angular 2 removes controllers entirely • Modular frameworks • Pick and choose what you want

PICKING THE NEXT BIG JS FRAMEWORK

IT DOESN’T MATTER THEY’RE ALL GOOD Principles remain the same - they all help you build clean, convention based applications with reusable elements.

THANKS!