Choosing a Javascript Framework
3 likes1,039 views
The document discusses the evaluation and comparison of major JavaScript frameworks including Backbone, Angular, Ember, and newer frameworks like Polymer and React. It covers the strengths, weaknesses, and key components of these frameworks, as well as guidance on how to make an informed choice based on project requirements. Additionally, there are resources provided for further learning and exploration of each framework.
![MODULES
Every Angular app has 1+ module definition
var
realtorsapp
=
angular.module('realtorsapp',
[]);
<html
ng-‐app="realtorsapp">](https://image.slidesharecdn.com/atochoosing-a-js-framework-151120145919-lva1-app6892/85/Choosing-a-Javascript-Framework-50-320.jpg)
![DIRECTIVES
Modify the behavior of the DOM (custom)
angular.module('myapp',
[])
.directive('unicorn',
function()
{
return
{
restrict:
'E',
link:
function(scope,
element,
attrs)
{
element.html('Unicorn')
}
};
});
<unicorn></unicorn>](https://image.slidesharecdn.com/atochoosing-a-js-framework-151120145919-lva1-app6892/85/Choosing-a-Javascript-Framework-51-320.jpg)
![DIRECTIVES
Modify the behavior of the DOM (built in)
<table
ng-‐init="properties=['123
Iris
Lane',
'234
Sunflower
Blvd','923
Azalea
Rd']">
<tr
ng-‐repeat="property
in
properties">
<td><a
href="#">{{
property
}}</a></td>
<td>20001</td>
<td>$1M</td>
</tr>
</table>](https://image.slidesharecdn.com/atochoosing-a-js-framework-151120145919-lva1-app6892/85/Choosing-a-Javascript-Framework-52-320.jpg)
Choosing a Javascript Framework
- 1. CHOOSING A JAVASCRIPT FRAMEWORK with Pam Selle @pamasaur // thewebivore.com // turing.cool AllThings Open 2015
- 2. SO… WE WROTETHIS THING me,Tim Ruffles, Christopher Hiller, and Jamie White
- 3. I will not tell you what to do. SPOILERS!
- 4. What I will do, however
- 5. is walk you through each of the major frameworks
- 6. in the hope that you can make an informed choice for a project, for additional learning, or general knowledge
- 7. AGENDA • What is a JavaScript framework? • Major frameworks: • Backbone • Angular • Ember
- 8. AGENDA • Rising stars: • Polymer • React • Framework evaluation techniques
- 9. WHAT IS A FRAMEWORK?
- 10. LONG AGO …
- 11. PEOPLE MADE WEB APPS
- 12. Okay, not that different from now
- 13. BUT
- 14. (that hasn’t changed much either) There wasn’t “one way”
- 15. Most of the major JavaScript frameworks started in 2009/2010 As a result, frameworks emerged
- 16. –Johnny Appleseed “Type a quote here.” http://xkcd.com/927/
- 17. Still, JS frameworks are a very GOOD thing
- 18. Because you shouldn’t have to write a router.
- 19. Ask yourself:What’s your 15%?
- 20. MAJOR FRAMEWORKS
- 21. MAJOR FRAMEWORKS • Backbone • Angular • Ember Overview, strengths/weaknesses + a little code
- 22. BACKBONE
- 23. BASICS • Origin story: DocumentCloud, Rails • “Core” of an application • “Unopinionated”
- 24. OPINIONATED?
- 25. Opinionated: there’s an obvious (or best practices- driven) way to solve the problem.
- 26. Unopinionated:“Choose your own adventure,” generally more flexible, ex. if incorporating other libraries into the project.
- 27. WHATYOU GET • Core MVC components • Nudge in an event-driven application design
- 28. DEPENDENCIES • Underscore • jQuery or jQuery alternative (ex. Zepto)
- 29. STRENGTHS • Unopinionated • Integrates well with many libraries and backends • Events system
- 30. WEAKNESSES • Unopinionated • “… that’d be your problem”
- 31. BACKBONE COMPONENTS • Models • Views • Collections • Routing
- 32. WALK-THROUGH • Basic Model +View setup
- 33. BACKBONE MODELS Make a model subclass using .extend( ) var Property = Backbone.Model.extend({ star: function() { this.set("starred", !this.get("starred")); this.save(); } }); (code in this presentation is from the book, & final versions of sample apps are @ github.com/pselle/choosing-javascript-framework)
- 34. BACKBONEVIEWS .extend(), define DOM properties, render var PropertyShowView = Backbone.View.extend({ tagName: 'div', className: 'property', template: loadTemplate("property-‐show"), render: function() { this.el.innerHTML = this.template(this.model.attributes); return this; } });
- 35. BACKBONEVIEWS .extend(), define DOM properties, render var PropertyShowView = Backbone.View.extend({ tagName: 'div', className: 'property', template: loadTemplate("property-‐show"), render: function() { this.el.innerHTML = this.template(this.model.attributes); return this; } });
- 36. BACKBONEVIEWS .extend(), define DOM properties, render var PropertyShowView = Backbone.View.extend({ tagName: 'div', className: 'property', template: loadTemplate("property-‐show"), render: function() { this.el.innerHTML = this.template(this.model.attributes); return this; } });
- 37. BACKBONEVIEWS .extend(), define DOM properties, render var PropertyShowView = Backbone.View.extend({ tagName: 'div', className: 'property', template: loadTemplate("property-‐show"), render: function() { this.el.innerHTML = this.template(this.model.attributes); return this; } });
- 38. BACKBONEVIEWS Using a view with a model var myHouse = new Property({ location: "middle of our street", noiseLevel: "usually quite loud" }); var propertyView = new PropertyView({ model: myHouse }); propertyView.render() document.body.appendChild(propertyView.el);
- 39. BACKBONEVIEWS <div class="property"> <h1>1123 Sunny Road</h1> <h2>37890</h2> <img src="/shared/images/ andrewmalone_house.jpg"> <p>This is a fantastic house!</p> <p>Asking price: 230000</p> <button class="pure-‐button star">Save as favorite</button> </div>
- 40. OTHER COMPONENTS • Collections • Groups of models • Router • Read/write the URL without reloading the page
- 41. OTHER COMPONENTS • Events • Views trigger updates to model, vice versa • Core component of Backbone
- 42. RESOURCES • http://backbonetutorials.com/ • http://addyosmani.github.io/backbone- fundamentals/ • Annotated source: http://backbonejs.org/docs/backbone.html
- 43. ANGULAR
- 44. BASICS • Fastest growing JavaScript framework • Write behavior in your markup (directives) • Google!
- 45. WHATYOU GET • Strongly defined building components (directives, controllers, services) • Two-way data binding • Dependency injection • Auxiliary tools available: Karma, Protractor
- 46. DEPENDENCIES • None • Loads its own smaller jQuery (will use your copy if provided on page, supports 2.1+)
- 47. STRENGTHS • Short/low-context setup • Long feature list • Module-friendly • Major industry backing
- 48. WEAKNESSES • Recent rise to prominence = less time in prod • High lock-in with writing behavior in markup • Skeptics for future roadmap/Google backing • 1.3 dropped IE8 support, some teams stuck in older version now (abandonware fears)
- 49. ANGULAR KEY COMPONENTS • Modules • Directives • Services • Controllers
- 50. MODULES Every Angular app has 1+ module definition var realtorsapp = angular.module('realtorsapp', []); <html ng-‐app="realtorsapp">
- 51. DIRECTIVES Modify the behavior of the DOM (custom) angular.module('myapp', []) .directive('unicorn', function() { return { restrict: 'E', link: function(scope, element, attrs) { element.html('Unicorn') } }; }); <unicorn></unicorn>
- 52. DIRECTIVES Modify the behavior of the DOM (built in) <table ng-‐init="properties=['123 Iris Lane', '234 Sunflower Blvd','923 Azalea Rd']"> <tr ng-‐repeat="property in properties"> <td><a href="#">{{ property }}</a></td> <td>20001</td> <td>$1M</td> </tr> </table>
- 53. SERVICES • Singleton to inject into any Angular component • Lazily instantiated angular.module('realtorsApp') .factory('Properties', function ($http) { var getProperties = function getProperties() { return $http.get('data.json') .then(function (res) { return res.data.properties; }); }; return { getProperties: getProperties }; });
- 54. CONTROLLERS • Controllers augment scope ($scope) • Bind business logic to the view angular.module('realtorsApp').controller('PropertiesController', function ($scope, Properties, $window) { Properties.getProperties() // chain w/ the promise returned by getProperties() .then(function success(properties) { $scope.properties = properties; }, function failure(err) { $window.alert(err); }); }); });
- 55. CONTROLLERS • Controllers augment scope ($scope) • Bind business logic to the view <table ng-‐controller="PropertyController"> <tr class="property-‐item" ng-‐repeat="property in properties"> <td> <h1><a ng-‐href="#/detail/ {{ property.id }}">{{ property.streetAddress }}</a></h1> <p>Asking Price: {{ property.price | currency }}</p> <p>{{ property.zipCode }}</p> </td> </tr> </table>
- 56. OTHER COMPONENTS • Filters • Animations • i18n l10n • Accessibility with ngAria • Testing (Karma, Protractor)
- 57. (BIG) CAVEAT • Angular 2: https://angular.io/ • TypeScript
- 58. RESOURCES • https://docs.angularjs.org/guide/ • https://docs.angularjs.org/api/ • https://docs.angularjs.org/tutorial/
- 59. RESOURCES • https://egghead.io (great short videos, ~$20/mo.) • http://angular-air.com/ (live video podcast)
- 60. EMBER
- 61. BASICS • Most complete JS framework • Built completely on modular OSS components • Community super-powered
- 62. WHATYOU GET • Very strongly defined MVC components • Data binding • Ember Components • Great routing support • Dependency injection
- 63. WHATYOU GET • Code generation with Ember CLI • Debugging tools with Ember Inspector
- 65. STRENGTHS • Community! • Convention-driven • Commonalities with every other Ember app • Generation tools and templates
- 66. WEAKNESSES • SometimesTOO much information • “Right” way to do things = difficult to get up to speed quickly • Not as pervasive as other two major frameworks
- 67. KEY COMPONENTS • Templating via Handlebars • Models • Routes • Components • Controllers
- 68. WALK-THROUGH • Getting started • Routes • Models • Components
- 69. GETTING STARTED you@xyz$ npm install -‐g ember-‐cli you@xyz$ ember new new-‐app you@xyz$ cd new-‐app you@xyz$ ember server
- 70. GETTING STARTED
- 71. GETTING STARTED • Dependencies • Git • Ready to go!
- 73. ROUTES ember generate route index // routes/index.js import Ember from 'ember'; export default Ember.Route.extend({ model: function() { return $.getJSON('/shared/data.json'); } });
- 74. MODELS export default Ember.Route.extend({ model: function() { return $.getJSON('/shared/data.json'); } });
- 75. MODELS ember generate model post title:string body:string // models/post.js import DS from 'ember-‐data'; export default DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string') });
- 76. COMPONENTS Web components! Contain: • Template (presentation/markup) • Behavior (JavaScript)
- 77. DETOUR Web components are comprised of multiple standards that are not yet implemented across browsers: Custom elements, HTML imports, templates, and shadow DOM http://webcomponents.org/
- 78. COMPONENTS // ember generate component my-component --pod // components/my-component/template.hs // components/mycomponent/component.js {{my-component}}
- 79. RESOURCES • Ember Guides (guides.ember.com) • Ember Watch (emberwatch.com) • Ember CLI 101(leanpub.com/ember-cli-101)
- 80. RISING STARS
- 81. POLYMER
- 82. POLYMER • Web components! • Also see: x-tags.org, from Mozilla
- 83. DETOUR: RESUMED! • Specs • Custom elements • HTML imports • Templates • Shadow DOM
- 84. DETOUR: RESUMED! • Webcomponents.js polyfills • Polymer vs. web components
- 86. POLYMER COMPONENT // my-‐component.html <link rel="import" href="../components/polymer/ polymer.html"> <polymer-‐element name="my-‐component"> <template> <style></style> <h2>My Custom Component!</h2> </template> <script>Polymer({is:'my-‐component'})</script> </polymer-‐element> <my-‐component></my-‐component>
- 87. POLYMER COMPONENT // my-‐component.html <link rel="import" href="../components/polymer/ polymer.html"> <polymer-‐element name="my-‐component"> <template> <style></style> <h2>My Custom Component!</h2> </template> <script>Polymer({is:'my-‐component'})</script> </polymer-‐element> <my-‐component></my-‐component>
- 88. POLYMER COMPONENT // my-‐component.html <link rel="import" href="../components/polymer/ polymer.html"> <polymer-‐element name="my-‐component"> <template> <style></style> <h2>My Custom Component!</h2> </template> <script>Polymer({is:'my-‐component'})</script> </polymer-‐element> <my-‐component></my-‐component>
- 89. POLYMER COMPONENT // my-‐component.html <link rel="import" href="../components/polymer/ polymer.html"> <polymer-‐element name="my-‐component"> <template> <style></style> <h2>My Custom Component!</h2> </template> <script>Polymer({is:'my-‐component'})</script> </polymer-‐element> <my-‐component></my-‐component>
- 90. RESOURCES • Docs (polymer-project.org/1.0/docs) • Web Components Weekly (webcomponentsweekly.me) • Polymer Slack (polymer-slack.herokuapp.com) • Polymer Podcast (www.polymerpodcast.com) • More links (http://bit.ly/1Gc5ccI)
- 91. REACT
- 92. REACT • Only view layer • Shadow DOM • Super performant
- 93. REACT COMPONENT var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); ReactDOM.render( <CommentBox />, document.getElementById('content') );
- 94. REACT COMPONENT var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); ReactDOM.render(<CommentBox />, document.getElementById('content'));
- 95. SEE ALSO • Flux - Architecture pattern • Om - React with ClojureScript
- 96. RESOURCES • http://reactjsnewsletter.com/ • http://reactpodcast.com/ • http://www.reactiflux.com/ :(
- 99. EVALUATIONTOOLS • Spreadsheet for ranking: http://bit.ly/1g6kDSS • Rank frameworks according to business, technical, and team criteria • Wharton DevTap: http://technology.wharton.upenn.edu/devtap/
- 100. THANKYOU! @pamasaur // thewebivore.com // turing.cool
- 101. 50% OFF CHOOSING A JS FRAMEWORK BOOK https://gum.co/OAOI/allthingsopen