Two word about Ember.js

Here is presentation for my speech at epamjsopen at Vinnitsya. I talked about frontend history, today's frameworks, ember.js, its history, components structure, relations, nesting and tools for development. Just in two words.

Transcript

1. ‹#› CONFIDENTIAL MAY 16, 2015 Two words about Ember.js
2. ‹#› CONFIDENTIAL vitaliy ribachenko @SA1EN VITALIY RIBACHENKO
3. ‹#› CONFIDENTIAL
4. ‹#› CONFIDENTIAL
5. ‹#› CONFIDENTIAL
6. ‹#› CONFIDENTIAL
7. ‹#› CONFIDENTIAL BackboneJS is another popular partial framework which developers use to build their own framework
8. ‹#› CONFIDENTIAL Holywars
9. ‹#› CONFIDENTIAL idea
10. ‹#› CONFIDENTIAL Convention over Configuration
11. ‹#› CONFIDENTIAL Update: 4x models, 1x DOM
12. ‹#› CONFIDENTIAL Logic-less Templates Handlebars {{ }} <input value={{name}}>
13. ‹#› CONFIDENTIAL Data-binding
14. ‹#› CONFIDENTIAL Components {{my-super-input value=somevalue}} {{#my-super-textarea}} Some content {{/#my-super-textarea}}
15. ‹#› CONFIDENTIAL Data Access
16. ‹#› CONFIDENTIAL
17. ‹#› CONFIDENTIAL EMBER.APPLICATION Namespace 1 Resolver 2 Starts Router 3 Render application template 4 Application Router Route Model Controller Template
18. ‹#› CONFIDENTIAL EMBER.ROUTER Application state as URL 1 Route initialization 2 Code generation 3 Application Router Route Model Controller Template
19. ‹#› CONFIDENTIAL EMBER.ROUTER Look for model 1 Controller initialization 2 Template rendering 3 Application Router Route Model Controller Template
20. ‹#› CONFIDENTIAL DS.MODEL Keep typified attributes of incoming JSON 1 Default values 2 Dependencies 3 Application Router Route Model Controller Template
21. ‹#› CONFIDENTIAL EMBER.CONTROLLER Decorate the model 1 Keep session-range model data 2 Toggle attributes for UI manipulation 3 Application Router Route Model Controller Template
22. ‹#› CONFIDENTIAL TEMPLATE Keeps layout 1 Repeat {{#each}} 2 Conditional {{#if}} 3 Application Router Route Model Controller Template Components {{my-comp}} 4 {{outlet}} 5
23. ‹#› CONFIDENTIAL INHERITANCE Ember.Object 1 Ember.Object.extend(mixin, mixin, { }) 2 Ember.Object.reopen({ }) 4 this._super 6 Ember.Object.create({ }); 5 Ember.Mixin 3
24. ‹#› CONFIDENTIAL OBSERVABLE Ember.computed (alias, equal, filter etc) 1 Function.property 2 Function.observes 3 a: true, b: function() { return !this.get(‘a’); }.property(‘a’)
25. ‹#› CONFIDENTIAL MASTER-DETAIL /posts Great post Other great One more /posts/:id Lorem ipsum TL;DR Like Other great
26. ‹#› CONFIDENTIAL ROUTER Router.map(function() { this.resource('posts', function(){ this.route('post', { path: ':id' }) }) })
27. ‹#› CONFIDENTIAL ROUTER Router.map(function() { this.resource('posts', function(){ this.resource('post', { path: ':id' }, function(){ this.route(‘delete’); }) }) })
28. ‹#› CONFIDENTIAL CODE GENERATION this.resource('posts', function(){ this.route('post', { path: ':id' }) }) Post (Route | Controller | Template) Posts (Route | Controller | Template)
29. ‹#› CONFIDENTIAL CODE GENERATION this.resource('posts', function(){ this.route('post', { path: ':id' }) }) })
30. ‹#› CONFIDENTIAL CODE GENERATION this.resource('posts', function(){ this.route('post', { path: ':id' }) }) this.resource(‘mysuperapp’, function(){ this.route(‘index’, { path: ‘/‘ }) })
31. ‹#› CONFIDENTIAL CODE GENERATION Mysuperapp (Route | Controller | Template)
32. ‹#› CONFIDENTIAL POSTS TEMPLATE {{#foreach post in model}} <span>{{post.title}}</span> {{/#foreach}}
33. ‹#› CONFIDENTIAL POSTS ROUTE Ember.Route.extend({ model: function(){ return [ { title: ‘One’ }, { title: ‘Two’ } ] } })
34. ‹#› CONFIDENTIAL POSTS ROUTE model: function(){ return [ { title: ‘One’ }, { title: ‘Two’ } ] }, setupController: function(controller, model) { controller.set(‘model’, model) }
35. ‹#› CONFIDENTIAL NESTING resource ‘application’ resource ‘posts’ route ‘post’ / /posts /posts/1 http://superapp.com/posts/1
36. ‹#› CONFIDENTIAL NESTING template ‘application’ template ‘posts’ template ‘post’ {{ outlet }} {{ outlet }} http://superapp.com/posts/1
37. ‹#› CONFIDENTIAL NESTING: APPLICATION TEMPLATE <h1>My super app</h1> {{ outlet }}
38. ‹#› CONFIDENTIAL POSTS CONTROLLER notEmptyTitle: function() { return this.model.filterBy(‘title’, true); }.property(‘@each.title’)
39. ‹#› CONFIDENTIAL POSTS TEMPLATE: LINKING {{#foreach post in model}} <span {{link-to “posts.post” post}}>{{post.title}}</span> {{/#foreach}}
40. ‹#› CONFIDENTIAL ACTIONS <input {{action “updateField” on=“keyup”}}> <button {{action “fireForm”}}>Button</button>
41. ‹#› CONFIDENTIAL ACTIONS Ember.Controller.extend({ actions: { fireForm: function(){ } } })
42. ‹#› CONFIDENTIAL ACTIONS NESTING PARENT ROUTE (3) PARENT ROUTE (2) PARENT ROUTE ROUTE CONTROLLER TEMPLATE
43. ‹#› CONFIDENTIAL TOOLS Testing (QUnit) 1 Ember Inspector 2 Ember CLI 3
44. ‹#› CONFIDENTIAL GZIP REQUIRED 600kb vs ~<50kb
45. ‹#› CONFIDENTIAL 2.0 ES6 1 Web components 2 Fast as hell UI 3 Routable components 4 Much much more 5
46. ‹#› CONFIDENTIAL