The JavaScript framework show down

In a bid to tame the world of app development, many front-end frameworks have been developed, but only a few have risen to become solid, stable and proven. Choosing the right framework for your project can have a huge impact on your ability to deliver on time, and your ability to maintain your code in the future. But they also come at a cost with each having a particularly steep learning curve.

At this talk James Carter will take you through the journey of the major JavaScript frameworks with a showdown of Angular, Ember and React. Learn what each framework offers, when to consider using it, its pros and cons and how to get started.

Transcript

1. Javascript Framework Shootout | James Carter | 2016-08-25 | slide 1/23
2. About Me • James Carter, freelance database and occasional UX developer • Interest in language / new media and web history About this talk Difficult questions From thick web-server to thick client web As we saw recently, if the "Web Component" is to become the defacto cross platform user-interface, it needs to be stable and fast 'enough'. Is jquery dead? Not really before IE6-9 and the rest and if you do maintenance, It has helped develop a lot of clunky web apps for good reason, here are the other, newer options. Learning to live with nodejs, does this mean you only need 'javascript developers' who can do everything? Is the web too developer orientated? Javascript Framework Shootout | James Carter | 2016-08-25 | slide 2/23
3. What you will learn Some idea of what the DOM might be Javascript frameworks are intimidating but 'just' javascript underneath Comparing frameworks is like comparing 'apples for pears'. Frameworks/libraries are not directly in competition with each other. ES5 == ECMA3?, ES6 == ECMA2015, ES7 == ECMA2016 Microsoft invented the 'XHR' XMLHttpRequest in Outlook Web Access for M$ Exchange 2000. Maintenance is a problem, there's always new software to make. Basically, enough to bullshit your way through some techspeak on the matter "Reinventing the wheel is necessary. If you disagree, then I challenge you to attach to your car the first wheels ever invented" Jesse Harlin, Foreword, Mastering React Javascript Framework Shootout | James Carter | 2016-08-25 | slide 3/23
4. Web 'apps' Web 1.0 library/documentation/search - the original, no js necessary. You can still make a decent web app without javascript. js provided only a sprinkling of interactivity. Multimedia ended up being provided by Macromedia Flash. Web 2.0 Rich database forms (aka 'enterprise' apps?) multimedia animations, stunning stuff now avilable outside flash including games? Web 3.0 Single Page Apps and 'fake' native apps? Frameworks and libraries are definitely needed to help development. Advantages of webapps Accessible anywhere in the world over http/https on any device quickly, no permissions to run/install. Centrally controlled data, kept 'safe' somewhere, the key to good data management! Offline usage and syncing is possible but not obvious yet. Javascript Framework Shootout | James Carter | 2016-08-25 | slide 4/23
5. Vocabulary MVC: Model View Controller, software design pattern for user interfaces used since the 1970's especially in Smalltalk MVVM: Model View View Model, of course. MVW: Model View Whatever (Angular.js) Dependency Injection: Software design pattern that deals with how components get hold of their dependencies eg. services availble to an object. Used extensively in angular.js. Polyfills: are JavaScript code included to port features into browsers that do not yet support them natively Preprocesors: Extensions to javascript that need to be pre-processed to work in the browser, mist can be pre-processed within the browser itself. CoffeeScript, LiveScript, Typescript, and ArnoldC! DOM: The in-browser data representation of a rendered web page Babel: successor of 6to5 and traceur (google) transpiler, converts to ES5 but can plugin other conversions. Javascript Framework Shootout | James Carter | 2016-08-25 | slide 5/23
6. Framework Cornerstones This can apply to any framework DATA BINDING/MODEL TESTABILITY/MOCKING CONTROL/ROUTING TEMPLATING Libraries and frameworks are different Javascript Framework Shootout | James Carter | 2016-08-25 | slide 6/23
7. Scorecard .js jquery backbone angular1 angular2 react ember knockout aurelia released 2006 2010 2010 rc.5 2013 late 2011 2010 2016 (1.0) website jquery.com backbonejs.org www.angularjs.org facebook.github.io/react/ knockoutjs.com aurelia.io predecessor cssQuery GetAngular angular1 XHP (fb/php) SproutCore Microsoftie durandal library? library library framework library framework library framework uses jquery is optional jqlite no no! yes not encouraged no sales pitch write less/ do more MVP, minimal superheroic V in MVC "Ambitious Web Applications" MVVM! the most powerful Javascript Framework Shootout | James Carter | 2016-08-25 | slide 7/23
8. .js jquery backbone angular1 angular2 react ember knockout aurelia features small quick dev testability community? mobile first DOM diffing state based conventions large libs pure ES6 bugbears needed? no structure? complex ts ? commerical fork Microsoft devs new-age? adopters a lot Pinterest,AirBNB not google ? Instagram,fb see Apple languages es5 es5 es6,ts es5/es6/jsx es5, es6? es5,es6 es6 min core size <85k (v3) 6.5k 157k <600k!? 146k 419k 59k ~300k net min size 85k 43k (underscore) ? Javascript Framework Shootout | James Carter | 2016-08-25 | slide 8/23
9. Demos /nojs.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> <style> /* css selector ~ see also + */ .navbar-toggler:focus ~ .collapse { display: block; } </style> </head> <body> <nav class="navbar navbar-dark bg-inverse"> <button class="navbar-toggler btn btn-primary hidden-sm-up" type="button" Javascript Framework Shootout | James Carter | 2016-08-25 | slide 9/23
10. aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation"> &#9776; </button> <div class="collapse navbar-toggleable-xs" id="nav1"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> </body> </html> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 10/23
11. /jquery.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <nav class="navbar navbar-dark bg-inverse"> <button class="navbar-toggler btn btn-primary hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav1" aria-controls="nav1" aria-expanded="false" aria-label="Toggle na &#9776; </button> <div class="collapse navbar-toggleable-xs" id="nav1"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 11/23
12. <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <h1>Text Underneath Here</h1> </body> </html> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 12/23
13. /purejs.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <nav class="navbar navbar-dark bg-inverse"> <button class="navbar-toggler btn btn-primary hidden-sm-up" type="button" onclick="openCloseNav()" aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation"> &#9776; </button> <div class="collapse navbar-toggleable-xs" id="nav1"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 13/23
14. <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <script> var navOpen = false; function openCloseNav() { if (navOpen == false) { /* html5 method classList, no <IE8 or Opera Mini! document.getElementById("nav1").display = "none"; slower method? */ document.getElementById("nav1").classList.remove('collapse'); navOpen = true; } else { document.getElementById("nav1").classList.add('collapse'); navOpen = false; } } </script> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 14/23
15. </body> </html> /purejquery.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <nav class="navbar navbar-dark bg-inverse"> <button class="hidden-sm-up navbar-toggler btn btn-primary" type="button" onclick="openCloseNav()" aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation"> &#9776; </button> <div class="collapse navbar-toggleable-xs" id="nav1"> <ul class="nav navbar-nav"> <li class="nav-item active"> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 15/23
16. <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <script src="jquery.min.js"></script> <script> function openCloseNav() { $('#nav1').toggleClass('collapse'); // slow jquery method? } </script> </body> </html> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 16/23
17. /angular1.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="angular.min.js"></script> </head> <body> <nav ng-app class="navbar navbar-dark bg-inverse"> <button class="navbar-toggler btn btn-primary hidden-sm-up" type="button" ng-init="navOpen = false" ng-click="navOpen = !navOpen" aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation"> &#9776; </button> <div class="collapse navbar-toggleable-xs" ng-class="{'collapse': !navOpen}"> <ul class="nav navbar-nav"> <li class="nav-item active"> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 17/23
18. <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> </body> </html> /angular-list.html Javascript Framework Shootout | James Carter | 2016-08-25 | slide 18/23
19. /knockout.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="knockout.min.js"></script> </head> <body> <nav class="navbar navbar-dark bg-inverse"> <button class="navbar-toggler btn btn-primary hidden-sm-up" type="button" data-bind="click: navOpenToggle" aria-controls="nav1" aria-expanded="false" aria-label="Toggle navigation"> &#9776; </button> <div class="navbar-toggleable-xs" data-bind="css: { collapse: !navOpen() }"> <ul class="nav navbar-nav"> <li class="nav-item active"> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 19/23
20. <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </nav> <script type="text/javascript"> var viewModel = { navOpen : ko.observable(false), navOpenToggle : function() { this.navOpen(!this.navOpen() ); } }; ko.applyBindings(viewModel); </script> </body> </html> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 20/23
21. /react.html <!DOCTYPE html> <html lang="en-GB"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="react.js"></script> <script src="react-dom.min.js"></script> <script src="browser.min.js"></script> </head> <body> <div id="nav"></div> </body> <script type="text/babel"> var Nav = React.createClass({ getInitialState: function(){ return { navOpen: "false" /* nb. only works if quoted */ }; Javascript Framework Shootout | James Carter | 2016-08-25 | slide 21/23
22. }, handleClick: function(){ this.setState( { navOpen : !this.state.navOpen } ); }, render: function() { // JSX, this is generating virtual-DOM in js and is not html return ( <nav className="navbar navbar-dark bg-inverse"> <button onClick={this.handleClick} className="navbar-toggler btn-primary hidden-sm-up" type="button" aria-con &#9776; </button> <div className={`${this.state.navOpen ? "collapse" : false} navbar-toggleable-xs`}> <ul className="nav navbar-nav"> <li className="nav-item active"> <a className="nav-link" href="#">Home</a> </li> <li className="nav-item"> <a className="nav-link" href="#">Pricing</a> </li> <li className="nav-item"> <a className="nav-link" href="#">About</a> </li> Javascript Framework Shootout | James Carter | 2016-08-25 | slide 22/23
23. </ul> </div> </nav>); } }); ReactDOM.render(<Nav />, document.getElementById("nav")); </script> </html> Further demos of building a reactjs app in es6 and webpack with 'npm run dist' END Javascript Framework Shootout | James Carter | 2016-08-25 | slide 23/23