Barnaby Cotter - Single Page Applications (The Good, The Bad and The Ugly)

Presented at Hey! #15 on 3rd March, 2015.

Transcript

1. SINGLE PAGE APPLICATIONS The Good, the Bad and the Ugly Barnaby Cotter
2. ME Barnaby Cotter Developer at Parallax @brnctr
3. WHAT’S A SPA?
5. NOPE, NOT THIS EITHER
6. 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.
7. 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…
8. 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
9. THE BIRTH OF THE LIBRARY Prototype, Dojo, Mootools, ExtJS, jQuery
10. $.AJAX(“EVERYTHING”) My god… the power
11. Unwitting Developers “Cool Web Application” v9.31.15
12. WITH GREAT POWER… With big web applications becoming a thing, suddenly multiple developers need to work together.
13. MAIN.JS
14. 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?
15. CONVENTION • Convention over configuration • Models live in /models, views live in /views • Controllers live in /views/models/docs/bin (not really)
16. THE BIRTH OF THE MV* FRAMEWORK Backbone, Angular, Ember… React?
17. 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.
18. 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 } });
19. USE CASE • New to SPAs? Usable for small projects - no crazy requirements • Experienced devs? More complex projects. Will go awry if you are undisciplined.
20. ANGULAR • Google - 2012 • ‘Monolithic’ framework • 2 way data binding • Declarative code for UI, Imperative code for Models
21. EXAMPLE http://jsfiddle.net/U3pVM/13770
22. USE CASE Rapid prototyping of a SPA Complex, multilayered UIs Large development teams Easy -> Confusing and Difficult -> Not Too Bad After All
23. 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
24. 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.
25. COMMON THEMES • Component based development. <my-date-picker><my-date-picker> <stock-tracker></stock-tracker> • Previous versions approximated web components • Self contained units of functionality - their own HTML, CSS, JS.
26. THE FUTURE • Moving towards component based architecture • e.g. Angular 2 removes controllers entirely • Modular frameworks • Pick and choose what you want
27. PICKING THE NEXT BIG JS FRAMEWORK
28. IT DOESN’T MATTER THEY’RE ALL GOOD Principles remain the same - they all help you build clean, convention based applications with reusable elements.
29. THANKS!