Ember.js - ответ на почти все вопросы

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
April 29, 2014

Ember.js - ответ на почти все вопросы

Андрей Листочкин

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

April 29, 2014
Tweet

Transcript

  1. None
  2. Привет, я Андрей! Программирую на чем угодно, люблю JavaScript и

    веб-технологии Соведущий Frontend UA Hangout Архитектор в очках и с бородой
  3. None
  4. Холивары!

  5. DOM + Эффекты + Ajax jQuery Prototype DOMAssistant MooTools

  6. Модули + Widgets Yahoo UI Google Closure jQuery UI Ext

    JS
  7. Desktop UI

  8. MVC / MVP / MV* Backbone Knockout Angular Ember React/Om

  9. HTML

  10. Ajax

  11. Острова интерактива

  12. None
  13. Моностраничные приложения

  14. Поле Боя MV*

  15. Веб-клиенты

  16. None
  17. None
  18. None
  19. None
  20. 2011

  21. Yehuda Katz

  22. C V M

  23. C V M DAO DAO UNIT TESTABLE

  24. C V M

  25. C V M

  26. C ? M

  27. M C ?

  28. Logic-less Templates 2009 Chris Wanstrath - Mustache.rb Jan Lehnardt -

    Mustache.js <h1>Hello, {{username}}</h1>
  29. None
  30. None
  31. Tom Dale

  32. Идея - 2011 Run Loop - SprouteCore MVC - Cocoa

    Logic-less Templates + Helpers - Handlebars Data-binding - Metamorph Convention over Configuration - Rails
  33. None
  34. Идея - 2011 Run Loop Cocoa MVC Logic-less Templates +

    Helpers Data-binding Convention over Configuration
  35. Идея - 2013 Run Loop Cocoa MVC Logic-less Templates +

    Helpers Data-binding Convention over Configuration Routing and Application State Data Access Components
  36. None
  37. MVC Route Model Controller View Template

  38. 1. URL - царь горы

  39. URL Смена URLа - событие

  40. URL Смена URLа - событие URL - модуль

  41. URL Смена URLа - событие URL - модуль URL -

    глобальное состояние
  42. URL https://myapp.com/posts/1 App.Router.map(function () { this.resource('posts', function () { this.resource('post',

    { path: ':post_id'}); }); });
  43. URL https://myapp.com/posts/1 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <post>

  44. URL var Post = DS.Model.extend({ title: DS.attr('string') body: DS.attr('string') published:

    DS.attr('date') });
  45. URL var PostsRoute = Ember.Router.extend({ model: function () { return

    this.store.find('post'); } }); var PostsController = Ember.ArrayController.extend({ … });
  46. URL <ul> {{! posts.hbs }} {{#each post in model}} <li>

    {{#link-to 'post' post}} {{post.title}} {{/link-to}} </li> {{/each}} </ul> {{outlet}}
  47. URL var PostRoute = Ember.Router.extend({ model: function (params) { return

    this.store.find('post', params.post_id); } }); var PostController = Ember.ObjectController.extend({ … });
  48. URL {{! post.hbs}} <h2>{{title}}</h2> <p>{{format-date published}}</p> <div> {{body}} </div>

  49. 2. Асинхронность Promise

  50. Promises var PostRoute = Ember.Router.extend({ model: function (params) { return

    this.store.find('post', params.post_id); } });
  51. 3. Dependency Injection

  52. Dependency Injection var PostRoute = Ember.Router.extend({ model: function (params) {

    return this.store.find('post', params.post_id); } });
  53. Dependency Injection var Session = Ember.Object.extend({...}); App.register('session:main', Session); App.inject('session:main', 'store',

    'store:main'); App.inject('controller', 'session', 'session:main'); App.inject('route:app', 'session', 'session:main'); // внутри PostEditController this.session.get('isLoggedIn')
  54. 4. Кодогенерация

  55. URL var PostsRoute = Ember.Router.extend({ model: function () { return

    this.store.find('post'); } }); var PostsController = Ember.ArrayController.extend({});
  56. 5. Объектная модель

  57. Объектная модель Наследование Миксины Прокси-объекты Зависимые свойства Геттеры-сеттеры Алиасы ...

  58. Объектная модель Uniform access principle: obj1 = { inner: {

    prop: 'value' } }; obj2 = Ember.Object.create({ inner: { prop: 'value' } }); Ember.get(obj1, 'inner.prop'); Ember.get(obj2, 'inner.prop'); obj2.get('inner.prop'); someOtherObject.get(computed.property')
  59. Объектная модель var Person = DS.Model.extend({ first: DS.attr('string'), last: DS.attr('string'),

    full: function () { return this.get('first') + ' ' + this.get('last') }.property('first', 'last') }); tom.get('full') // => 'Tom Dale'
  60. 6. MVC

  61. MVC https://myapp.com/posts/1 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <post>

  62. MVC Init View Templat e Model Route Controller

  63. MVC Init View Templat e Model Route Controller

  64. MVC Init View Templat e Model Route Controller

  65. MVC Init View Templat e Model Route Controller

  66. MVC Data View Templat e Model Route Controller Controller View

  67. MVC Events View Templat e Model Route Controller DOM Actions

    Actions Actions
  68. MVC Model Controller Route Application Route Route Route Route View

    View View View View Model Controller Model Controller View View View View View View View View View View
  69. MVC

  70. 7. Компоненты

  71. Компоненты {{#my-tag param=value}} … {{/my-tag}} {{! components/my-tag.hbs}} ... {{yield}} …

    MyTagComponent = Ember.Component.extend
  72. Angular's bi-directionally bound isolate scope, transcluded, element restricted directives Ember

    Components
  73. За кадром Поддержка тестирования Инструменты Ember Inspector - Chrome, Firefox

    Ember-CLI ember new myapp Broccoli ES6, HTMLBars, JSON API
  74. Заблуждения Не может быть встроен, все или ничего Не имеет

    DI Нельзя тестировать Сложно начинать Монолитный
  75. А холивар? голос из зала

  76. Angular JS Routing / Nested Views Консистентное API Простые компоненты

    Меньше граблей Большие Open-Source проекты Angular 2.0 догонит Эмбер по ряду пунктов :) но будет несовместим с Angular 1.x :(
  77. Backbone + React/OM сравнимая с HTMLBars производительность общая структура проекта,

    не “островки архитектуры в море плохого кода” Эмбер начинают использовать с персистентными структурами данных
  78. Не повторяет ошибок других Принимает решения за вас BB Reasonable

    Defaults for 95% case BB ng DI с барьерами ng Понятные директивы ng Одноразовая загрузка данных all Свой рендерринг-пайплайн Knockout ng
  79. Модель разработки - PostgreSQL Tilde, Yapp, Prototypal, Adepar, Instructure, etc.

  80. Релизы по расписанию

  81. Компании 1. Apple 2. Google 3. Yahoo 4. Twitter 5.

    Microsoft 6. Groupon 7. Square 8. Zendesk 9. Ballanced 10. Nitrous.io 11. USPO 12. DoD 13. NBCNews 14. Netflix
  82. Проекты 1. Discource 2. Ballanced 3. Travis CI 4. Ghost

  83. None
  84. ?