Привет, я Андрей!

Программирую на чем угодно, люблю 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

?