Ember.js ответ на почти все вопросы - java script frameworks day 2014
0 likes739 views
Документ представляет собой технический обзор различных аспектов разработки веб-приложений, включая принципы MVC, асинхронность и внедрение зависимостей, с акцентом на фреймворк Ember.js. Обсуждаются компоненты, кодогенерация и объектные модели, а также сравнения с другими библиотеками, такими как Angular и Backbone. В документе также упоминаются примеры кода и практические применения указанных техник.
Ember.js ответ на почти все вопросы - java script frameworks day 2014
- 2. Привет, я Андрей! Программирую на чем угодно, люблю JavaScript и веб-технологии Соведущий Frontend UA Hangout Архитектор в очках и с бородой
- 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
- 14. Поле Боя MV*
- 15. Веб-клиенты
- 20. 2011
- 21. Yehuda Katz
- 22. C V M
- 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>
- 31. Tom Dale
- 32. Идея - 2011 Run Loop - SprouteCore MVC - Cocoa Logic-less Templates + Helpers - Handlebars Data-binding - Metamorph Convention over Configuration - Rails
- 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
- 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'}); }); });
- 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({ … });
- 50. Promises var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); } });
- 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({});
- 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
- 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.
- 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
- 84. ?