Upload
andrey-listochkin
View
244
Download
10
Embed Size (px)
DESCRIPTION
Citation preview
Привет, я Андрей!
Программирую на чем угодно, люблю JavaScript и веб-технологии
Соведущий Frontend UA Hangout
Архитектор в очках и с бородой
Холивары!
DOM + Эффекты + Ajax
jQueryPrototypeDOMAssistantMooTools
Модули + Widgets
Yahoo UIGoogle ClosurejQuery UIExt JS
Desktop UI
MVC / MVP / MV*
BackboneKnockoutAngularEmberReact/Om
HTML
Ajax
Острова интерактива
Моностраничные приложения
Поле Боя MV*
Веб-клиенты
2011
Yehuda Katz
C
V
M
C
V
M
DAO
DAOUNIT TESTABLE
C
V
M
C
V
M
C
?
M
M
C
?
Logic-less Templates
2009 Chris Wanstrath - Mustache.rb
Jan Lehnardt - Mustache.js
<h1>Hello, {{username}}</h1>
Tom Dale
Идея - 2011
Run Loop - SprouteCoreMVC - CocoaLogic-less Templates + Helpers - HandlebarsData-binding - MetamorphConvention over Configuration - Rails
Идея - 2011
Run LoopCocoa MVCLogic-less Templates + HelpersData-bindingConvention over Configuration
Идея - 2013
Run LoopCocoa MVCLogic-less Templates + HelpersData-bindingConvention over ConfigurationRouting and Application StateData AccessComponents
MVC
RouteModelControllerViewTemplate
1. URL - царь горы
URL
Смена URLа - событие
URL
Смена URLа - событие
URL - модуль
URL
Смена URLа - событие
URL - модуль
URL - глобальное состояние
URL
https://myapp.com/posts/1
App.Router.map(function () { this.resource('posts', function () { this.resource('post', { path: ':post_id'}); });});
URL
https://myapp.com/posts/1
PostsRoutePostsController<posts> {{outlet}}
PostRoutePostController<post>
URL
var Post = DS.Model.extend({ title: DS.attr('string') body: DS.attr('string') published: DS.attr('date')});
URL
var PostsRoute = Ember.Router.extend({ model: function () { return this.store.find('post'); }});
var PostsController = Ember.ArrayController.extend({ … });
URL
<ul> {{! posts.hbs }}{{#each post in model}}
<li> {{#link-to 'post' post}} {{post.title}} {{/link-to}} </li>
{{/each}}</ul> {{outlet}}
URL
var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); }});
var PostController = Ember.ObjectController.extend({ … });
URL
{{! post.hbs}}<h2>{{title}}</h2>
<p>{{format-date published}}</p>
<div>{{body}}
</div>
2. АсинхронностьPromise
Promises
var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); }});
3. Dependency Injection
Dependency Injection
var PostRoute = Ember.Router.extend({ model: function (params) { return this.store.find('post', params.post_id); }});
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')
4. Кодогенерация
URL
var PostsRoute = Ember.Router.extend({ model: function () { return this.store.find('post'); }});
var PostsController = Ember.ArrayController.extend({});
5. Объектная модель
Объектная модель
НаследованиеМиксиныПрокси-объектыЗависимые свойстваГеттеры-сеттерыАлиасы...
Объектная модель
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')
Объектная модель
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'
6. MVC
MVC
https://myapp.com/posts/1
PostsRoutePostsController<posts> {{outlet}}
PostRoutePostController<post>
MVC
Init
ViewTemplateModel
Route
Controller
MVC
Init
ViewTemplateModel
Route
Controller
MVC
Init
ViewTemplateModel
Route
Controller
MVC
Init
ViewTemplateModel
Route
Controller
MVC
Data
ViewTemplateModel
Route
Controller
Controller View
MVC
Events
ViewTemplateModel
Route
Controller
DOMActions
Actions
Actions
MVC
ModelController
Route
Application Route
RouteRoute Route
ViewView View
View View
ModelControllerModelController
ViewView View
View ViewView
View View
View View
MVC
7. Компоненты
Компоненты
{{#my-tag param=value}} …{{/my-tag}}
{{! components/my-tag.hbs}}... {{yield}} …
MyTagComponent = Ember.Component.extend
Angular's bi-directionally bound isolate scope, transcluded, element restricted directives
Ember Components
За кадром
Поддержка тестированияИнструменты
Ember Inspector - Chrome, FirefoxEmber-CLI
ember new myappBroccoli
ES6, HTMLBars, JSON API
Заблуждения
Не может быть встроен, все или ничегоНе имеет DIНельзя тестироватьСложно начинатьМонолитный
А холивар?голос из зала
Angular JS
Routing / Nested ViewsКонсистентное APIПростые компонентыМеньше граблейБольшие Open-Source проекты
Angular 2.0догонит Эмбер по ряду пунктов :)но будет несовместим с Angular 1.x :(
Backbone + React/OM
сравнимая с HTMLBars производительностьобщая структура проекта, не “островки архитектуры в море плохого кода”
Эмбер начинают использовать с персистентными структурами данных
Не повторяет ошибок других
Принимает решения за вас BBReasonable Defaults for 95% case BB ngDI с барьерами ngПонятные директивы ngОдноразовая загрузка данных allСвой рендерринг-пайплайн Knockout ng
Модель разработки - PostgreSQL
Tilde, Yapp, Prototypal, Adepar, Instructure, etc.
Релизы по расписанию
Компании
1. Apple2. Google3. Yahoo4. Twitter5. Microsoft6. Groupon7. Square8. Zendesk
9. Ballanced10. Nitrous.io11. USPO12. DoD13. NBCNews14. Netflix
Проекты
1. Discource2. Ballanced3. Travis CI4. Ghost
?