Downloaded 21 times
![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)
![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/75/Choosing-a-Javascript-Framework-50-2048.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/75/Choosing-a-Javascript-Framework-51-2048.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/75/Choosing-a-Javascript-Framework-52-2048.jpg)
Uploaded byAll Things Open
Choosing a Javascript Framework
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.
More Related Content
![[1D1]신개념 N스크린 웹 앱 프레임워크 PARS](https://cdn.slidesharecdn.com/ss_thumbnails/1d1n-screenpars-140928071352-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Bristol WordPress] Supercharging WordPress Development](https://cdn.slidesharecdn.com/ss_thumbnails/superchargingwordpressdevelopment-190807094518-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Choosing a Javascript Framework
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Choosing a Javascript Framework
- 1. CHOOSING A JAVASCRIPT FRAMEWORK withPam 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 nottell you what to do. SPOILERS!
- 4. What I willdo, however
- 5. is walk youthrough each of the major frameworks
- 6. in the hopethat you can make an informed choice for a project, for additional learning, or general knowledge
- 7. AGENDA • What isa JavaScript framework? • Major frameworks: • Backbone • Angular • Ember
- 8. AGENDA • Rising stars: •Polymer • React • Framework evaluation techniques
- 9. WHAT IS AFRAMEWORK?
- 10.
- 11. PEOPLE MADE WEBAPPS
- 12. Okay, not thatdifferent from now
- 13.
- 14. (that hasn’t changedmuch either) There wasn’t “one way”
- 15. Most of themajor JavaScript frameworks started in 2009/2010 As a result, frameworks emerged
- 16. –Johnny Appleseed “Type aquote here.” http://xkcd.com/927/
- 17. Still, JS frameworksare a very GOOD thing
- 18. Because you shouldn’thave to write a router.
- 19.
- 20.
- 21. MAJOR FRAMEWORKS • Backbone •Angular • Ember Overview, strengths/weaknesses + a little code
- 22.
- 23. BASICS • Origin story:DocumentCloud, Rails • “Core” of an application • “Unopinionated”
- 24.
- 25. Opinionated: there’s anobvious (or best practices- driven) way to solve the problem.
- 26. Unopinionated:“Choose your ownadventure,” generally more flexible, ex. if incorporating other libraries into the project.
- 27. WHATYOU GET • CoreMVC components • Nudge in an event-driven application design
- 28. DEPENDENCIES • Underscore • jQueryor jQuery alternative (ex. Zepto)
- 29. STRENGTHS • Unopinionated • Integrateswell 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 amodel 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 DOMproperties, 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 DOMproperties, 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 DOMproperties, 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 DOMproperties, 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 viewwith 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.
- 44. BASICS • Fastest growingJavaScript framework • Write behavior in your markup (directives) • Google!
- 45. WHATYOU GET • Stronglydefined building components (directives, controllers, services) • Two-way data binding • Dependency injection • Auxiliary tools available: Karma, Protractor
- 46. DEPENDENCIES • None • Loadsits 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 riseto 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 apphas 1+ module definition var realtorsapp = angular.module('realtorsapp', []); <html ng-‐app="realtorsapp">
- 51. DIRECTIVES Modify the behaviorof 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 behaviorof 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 toinject 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 augmentscope ($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 augmentscope ($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 • Angular2: 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 (greatshort videos, ~$20/mo.) • http://angular-air.com/ (live video podcast)
- 60.
- 61. BASICS • Most completeJS framework • Built completely on modular OSS components • Community super-powered
- 62. WHATYOU GET • Verystrongly defined MVC components • Data binding • Ember Components • Great routing support • Dependency injection
- 63. WHATYOU GET • Codegeneration with Ember CLI • Debugging tools with Ember Inspector
- 64.
- 65. STRENGTHS • Community! • Convention-driven •Commonalities with every other Ember app • Generation tools and templates
- 66. WEAKNESSES • SometimesTOO muchinformation • “Right” way to do things = difficult to get up to speed quickly • Not as pervasive as other two major frameworks
- 67. KEY COMPONENTS • Templatingvia 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.
- 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 arecomprised of multiple standards that are not yet implemented across browsers: Custom elements, HTML imports, templates, and shadow DOM http://webcomponents.org/
- 78. COMPONENTS // ember generatecomponent 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.
- 81.
- 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.jspolyfills • Polymer vs. web components
- 85.
- 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.
- 92. REACT • Only viewlayer • 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/ :(
- 97.
- 99. EVALUATIONTOOLS • Spreadsheet forranking: 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 CHOOSINGA JS FRAMEWORK BOOK https://gum.co/OAOI/allthingsopen