Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ember.js - ответ на почти все вопросы
Search
fwdays
April 29, 2014
Programming
0
2.2k
Ember.js - ответ на почти все вопросы
Андрей Листочкин
fwdays
April 29, 2014
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
2.1k
Beyond Testing Михаил Боднарчук
fwdays
0
770
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.9k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
960
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.8k
Phalcon. Что нового? Александр Торош
fwdays
0
1.1k
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.4k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
770
Функциональный тулчейн Nix
fwdays
1
460
Other Decks in Programming
See All in Programming
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
990
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
CDK引数設計道場100本ノック
badmintoncryer
2
480
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.3k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Fireside Chat
paigeccino
37
3.5k
Embracing the Ebb and Flow
colly
86
4.8k
Being A Developer After 40
akosma
90
590k
Optimizing for Happiness
mojombo
379
70k
Practical Orchestrator
shlominoach
189
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Transcript
None
Привет, я Андрей! Программирую на чем угодно, люблю JavaScript и
веб-технологии Соведущий Frontend UA Hangout Архитектор в очках и с бородой
None
Холивары!
DOM + Эффекты + Ajax jQuery Prototype DOMAssistant MooTools
Модули + Widgets Yahoo UI Google Closure jQuery UI Ext
JS
Desktop UI
MVC / MVP / MV* Backbone Knockout Angular Ember React/Om
HTML
Ajax
Острова интерактива
None
Моностраничные приложения
Поле Боя MV*
Веб-клиенты
None
None
None
None
2011
Yehuda Katz
C V M
C V M DAO DAO UNIT 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>
None
None
Tom Dale
Идея - 2011 Run Loop - SprouteCore MVC - Cocoa
Logic-less Templates + Helpers - Handlebars Data-binding - Metamorph Convention over Configuration - Rails
None
Идея - 2011 Run Loop Cocoa MVC Logic-less Templates +
Helpers Data-binding Convention over Configuration
Идея - 2013 Run Loop Cocoa MVC Logic-less Templates +
Helpers Data-binding Convention over Configuration Routing and Application State Data Access Components
None
MVC Route Model Controller View Template
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 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <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 PostsRoute PostsController <posts> {{outlet}} PostRoute PostController <post>
MVC Init View Templat e Model Route Controller
MVC Init View Templat e Model Route Controller
MVC Init View Templat e Model Route Controller
MVC Init View Templat e Model Route Controller
MVC Data View Templat e Model Route Controller Controller View
MVC Events View Templat e Model Route Controller DOM Actions
Actions Actions
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
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, Firefox
Ember-CLI ember new myapp Broccoli ES6, HTMLBars, JSON API
Заблуждения Не может быть встроен, все или ничего Не имеет
DI Нельзя тестировать Сложно начинать Монолитный
А холивар? голос из зала
Angular JS Routing / Nested Views Консистентное API Простые компоненты
Меньше граблей Большие Open-Source проекты Angular 2.0 догонит Эмбер по ряду пунктов :) но будет несовместим с Angular 1.x :(
Backbone + React/OM сравнимая с HTMLBars производительность общая структура проекта,
не “островки архитектуры в море плохого кода” Эмбер начинают использовать с персистентными структурами данных
Не повторяет ошибок других Принимает решения за вас BB Reasonable
Defaults for 95% case BB ng DI с барьерами ng Понятные директивы ng Одноразовая загрузка данных all Свой рендерринг-пайплайн Knockout ng
Модель разработки - PostgreSQL Tilde, Yapp, Prototypal, Adepar, Instructure, etc.
Релизы по расписанию
Компании 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
Проекты 1. Discource 2. Ballanced 3. Travis CI 4. Ghost
None
?