Extinguish the Fire with Ember.js

Transcript

1. EXTINGUISH THE FIRE
 WITH EMBER.JS BTVWAG - Feb 12, 2014


   Presented by Peter Brown

2. WEB DEVELOPER @beerlington

3. PROBLEMS ‣ Client side development is challenging ‣ Expectations about

   how websites should work ‣ Single page applications aren’t always that ‣ Lack of conventions

4. HYPOTHESIS As browsers become more capable and JS enables us

   to do more, the applications we build will become more ambitious and require better tools. Complexity Capability

5. A framework for creating
 ambitious web applications
 Write dramatically less

   code
 Built for productivity
 
 Don't reinvent the wheel
 EMBER.JS

6. WHAT DOES EMBER LOOK LIKE?

7. ROUTER Maps a URL to a Route App.Router.map(function() {! this.resource('posts');!

   this.resource('post', { path: '/post/:post_id' });! });!

8. ROUTER /posts → PostsRoute /post/123 → PostRoute App.Router.map(function() {! this.resource('posts');!

   this.resource('post', { path: '/post/:post_id' });! });!

9. ROUTER Nested Routes App.Router.map(function() {! this.resource('post', { path: '/post/:post_id' },

   function() {! this.route('edit');! this.resource('comments', function() {! this.route('new');! });! });! });!

10. ROUTER /post/123 → PostRoute /post/123/edit → PostEditRoute /post/123comments → CommentsRoute

    /post/123/comments/new → CommentsNewRoute App.Router.map(function() {! this.resource('post', { path: '/post/:post_id' }, function() {! this.route('edit');! this.resource('comments', function() {! this.route('new');! });! });! });!

11. ROUTE Responsible for loading data, displaying templates and setting up

    application state. App.PostRoute = Ember.Route.extend({! model: function(params) {! return this.store.find('post', params.post_id);! }! });!

12. CONTROLLER Acts as a proxy to the model and handles

    events from the template App.PostController = Ember.ObjectController.extend({! actions: {! publishPost: function() {! this.toggleProperty('isPublished');! }! }! });!

13. TEMPLATE Handlebars = HTML + embedded expressions Hello, <strong>{{firstName}}</strong>!!

14. TEMPLATE Hello, App.ApplicationController = Ember.Controller.extend({! firstName: "Peter"! });! The PostRoute

    “glues” these together

15. TEMPLATE Automatically bound to controller’s state {{#if isPublished}}! <span>! This

    post is published!! </span>! {{else}}! <span>! This post is NOT published!! </span>! {{/if}}!

16. MODEL Defines schema and relationships App.Post = DS.Model.extend({! title: DS.attr('string'),!

    publishedAt: DS.attr('date'),! author: DS.belongsTo('author')! });!

17. VIEW When you need more control, used less frequently, always

    associated with a controller var view = Ember.View.create({! templateName: 'say-hello',! name: "Bob"! });!

18. COMPONENT Custom HTML elements, like views without controller <script type="text/x-handlebars"

    id="components/blog-post">! <h1>Blog Post</h1>! <p>Lorem ipsum dolor sit amet.</p>! </script>!

19. DATA AND EVENT RELATIONSHIPS

20. DATA BINDING Route View Model Controller Template

21. EVENT BUBBLING View Model Controller Template Route

22. UPDATING DATA View Controller Template Model Route

23. EMBER’S ADVANTAGES

24. ARCHITECTURE ‣ Supports application growth via: • Organization • Eliminating

    boilerplate • Sensible conventions ‣ Encapsulation • Loose coupling between components

25. APPLICATION SPEED ‣ 100% of HTML rendering is in browser

    ‣ Server is responsible for data via API Requests

26. OBJECT MODEL ‣ Computed properties • with and without aggregate

    data ‣ Observers ‣ Bindings • two-way default, one-way for performance

27. MASTER-DETAIL INTERFACE

28. MASTER-DETAIL INTERFACE

29. FRIENDLY DOCUMENTATION

30. RAILS INFLUENCE ‣ Convention over configuration • Naming conventions (code

    + files) • If it feels painful, you’re likely doing it wrong ‣ REST architecture

31. EMBER’S DISADVANTAGES

32. LEARNING CURVE Frustration Time

33. SPRINKLES OF JAVASCRIPT

34. HANDLEBARS

35. EMBER DATA BETA!

36. WHAT’S COMING?

37. EMBER DATA 1.0

38. BUILD TOOLS ‣ Modules as first-class citizens (ES6 modules) ‣

    Built-in Bower support ‣ CLI commands • $ ember server • $ ember test

39. HTMLBARS ‣ Performance gains ‣ Faster Rendering (comparable to React)

    ‣ Will build DOM instead of strings

40. HTMLBARS <img {{bind-attr src=imageUrl}}> Before After <img src="{{imageUrl}}">!

41. OTHER FUN STUFF ‣ Slimming down the codebase ‣ Removing

    jQuery dependency ‣ Continued support for IE8

42. HONORABLE MENTION

43. HONORABLE MENTION

44. “What kind of application are you building?” Tom Dale -

    Ember co-creator