Ember pitch

This presentation tries to answer four questions:

1. What is Ember.js?
2. Why does it seem hard to learn?
3. What makes it shine?
4. How can Ember.js help you?

Transcript

1. 1. What is Ember.js? 2. Why does it seem hard to learn? 3. What makes it shine? 4. How can Ember.js help you?
2. What is Ember.js?
3. Some history 2007 SproutCore ◦ Developed by Apple ◦ Borrowed ideas from Cocoa ◦ Kicked off the JS-MVC movement 2011 Ember ◦ Forked from Sproutcore 2.0 ◦ Developed by ▪ Tom Dale & Yehuda Katz
4. Dependencies • Cross-platform JS library • Semantic web template system • A Mustache superset • HTMLBars
5. Bonus: Lots of tools Ember data A data persistence library for Ember.js Ember Inspector Understand and debug Ember.js apps
6. Ember.js vs Angular JS?
7. “AngularJS is a tool set for building the framework most suited to your application development.” - AngularJS Homepage “Angular is not a framework, it’s an HTML compiler.” - Misko Hevery, creator of Angular
8. Ember Angular Birth 2011 2009 Minified and gzipped 67kb 35kb Un-gzipped 238kb 96kb Github stars 13,101+ 36,400+ Maintained Community Google + Community Tool type JS Framework HTML Compiler Using JS Adds its own object model Embraces POJOs Getting stuff done Many conventions (more high level) Highly granular API (more low level) MVC MVVM flavored Model View Whatever (close to MVVM)
9. What makes it hard to learn?
10. In a nutshell: Object oriented The Ember object model ◦ Ember.Route ◦ Ember.Controller ◦ Ember.View Uniform access principle ◦ get() & set() ▪ handle asynchrony
11. What does MVC mean? • MVC refers to a family of patterns, not the classical MVC pattern. • Also: Client MVC !== Server MVC
12. Object oriented & MVC $(function() { $('.error').hide(); $(".button").click(function() { // validate and process form here $('.error').hide(); var name = $("input#name").val(); if (name == "") { $("label#name_error").show(); $("input#name").focus(); return false; } var email = $("input#email").val(); if (email == "") { $("label#email_error").show(); $("input#email").focus(); return false; } var phone = $("input#phone").val(); if (phone == "") { $("label#phone_error").show(); $("input#phone").focus(); return false; } }); }); Routes - finds data Controllers - data processing and decoration View - Handle UI
13. Opinionated For any particular task, there’s a default way of doing it.
14. Route handler • URL paths to routes • Finds or generates: ◦ Controller ◦ View
15. Freebies • Application Route • Index Route
16. What makes it shine?
17. Killer features • Declarative two way data binding • Auto-updating templates • Computed properties • Routes
18. Models Each Route provides a model through the model hook. May return a JS promise
19. Short answers What is Ember.js? • An opinionated MVC-flavored Javascript framework. Why is it “hard” to learn? Is not hard, its a big chunk at once: • The Ember object model • MVC refers to a family of patterns • Ember is closer to MVVM • Asynchrony & JS Promises What makes it shine? • Two way data binds • Auto-updating templates • Computed Properties • Routes
20. How can Ember.js help you? ★ Avoid “trivial” choices (ego depletion) ★ Easier maintainability ★ Avoid boilerplate code for: ◦ UI elements ◦ Asynchrony ★ HTML prototyping
21. Ember.js in production more examples: builtwithember.io
22. To know more • AngularJS from an Ember.js perspective, NYC Ember.js meet up - Nov, 2013 (https://docs.google. com/presentation/d/1e0z1pT9JuEh8G5DOtib6XFDHK0GUFtrZrU3IfxJynaA /preview#slide=id.p) • The Java Origins of Angular JS: Angular vs JSF vs GWT (http://blog. jhades.org/the-java-origins-of-angular-js-angular-vs-jsf-vs-gwt/) • Tom Dale talks frameworks, standards and open source (http: //insideintercom.io/tom-dale-talks-frameworks-standards-and-open- source/) • An In-Depth Introduction To Ember.js By Julien Knebel (http://www. smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/)