16
Знакомство с ember.js или при чем тут хомяки? Артём Сущев ведущий фронтенд разработчик

Знакомство с ember.js

Embed Size (px)

DESCRIPTION

Код примеров -- https://github.com/H1D/ember-ios-notes-example

Citation preview

Page 1: Знакомство с ember.js

Знакомство с ember.jsили при чем тут хомяки?

Артём Сущев ведущий фронтенд разработчик

Page 2: Знакомство с ember.js

Кратко• как хорошо было без JS

• как плохо было с голым JS

• что можно теперь

62

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 3: Знакомство с ember.js

до ~2006

63

<HTML>

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 4: Знакомство с ember.js

до ~2011

64

<HTML>

<HTML>

<HTML>

<HTML>

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 5: Знакомство с ember.js

после ~2011

65

<JS>

<JSON>

<JSON>

<JSON>

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 6: Знакомство с ember.js

66

Хомячим!

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 7: Знакомство с ember.js

67

Bindings

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 8: Знакомство с ember.js

68

Computed properties

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 9: Знакомство с ember.js

69

что общего?

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 10: Знакомство с ember.js

610

App.Router

App.NoteRoute

App.NoteController

App.NoteView

App.NoteModel

URL

“декорирует”

является “контекстом”

шаблон “note.hbs”

передает

создает

создает

создает

JSON

AJAX / localStorage / web sockets

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 11: Знакомство с ember.js

611

DEMO

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
https://github.com/H1D/ember-ios-notes-example
Page 12: Знакомство с ember.js

612

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
Page 13: Знакомство с ember.js

613

DEMO

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
https://github.com/H1D/ember-ios-notes-example
Page 14: Знакомство с ember.js

В продакшне все структурировано!

Page 15: Знакомство с ember.js

615

Код примера github.com/H1D/ember-ios-notes-example Эти слайды: slideshare.net/artemsuschev/hello-ember Буду рад помочь: twitter.com/asuschev или [email protected] !emberjs.com/guides/getting-started/ - стартовая точка coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/ - большой, хороший туториал codeschool.com/courses/warming-up-with-emberjs - приятный курс с видео (платный) emberwatch.com/ - агрегатор видео, слайдов, примеров, книг…. emberweekly.com/ - еженедельник “что нового в ember.js тусовке” emberjs.com/api/ - документация по всем классам ember.js embercasts.com - скринкасты от создателей ember.js discourse.org - громадное open source приложение на ember eviltrout.com/ - блог автора Discourse, много мудростей =)

Follow up

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
https://github.com/H1D/ember-ios-notes-example
http://www.slideshare.net/artemsuschev/hello-ember
https://twitter.com/asuschev
mailto:[email protected]?subject=
http://emberjs.com/guides/getting-started/
http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/
https://www.codeschool.com/courses/warming-up-with-emberjs
http://emberwatch.com/
http://emberweekly.com/
http://emberjs.com/api/
http://embercasts.com
http://discourse.org
http://eviltrout.com/
Page 16: Знакомство с ember.js

616

Разводим хомяков!

[email protected]

http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
http://stepic.org/
mailto:[email protected]?subject=

Знакомство с TestComplete 7

Знакомство с TestComplete 7

Documents
Знакомство с SISEL

Знакомство с SISEL

Documents
первое знакомство с Moodle

первое знакомство с Moodle

Documents
Знакомство с Papervision3d

Знакомство с Papervision3d

Documents
SN/SX - BSH Hausgeräteru Знакомство с прибором 12 * Знакомство с прибором Знакомство сприбором Иллюстрации пaн

SN/SX - BSH Hausgeräteru Знакомство с прибором 12 * Знакомство с прибором Знакомство сприбором Иллюстрации пaн

Documents
TriggMine: Знакомство с сервисом

TriggMine: Знакомство с сервисом

Marketing
знакомство с Prezi.com (готовое)

знакомство с Prezi.com (готовое)

Education
знакомство с пожарным

знакомство с пожарным

Education
знакомство с воробышком

знакомство с воробышком

Documents
знакомство с Prezi.com

знакомство с Prezi.com

Education
Знакомство с МФЦ

Знакомство с МФЦ

Documents
знакомство с библиотекой

знакомство с библиотекой

Documents
Знакомство с chikipuki

Знакомство с chikipuki

Design
Знакомство с BB

Знакомство с BB

Documents
знакомство с Prezi.com(исправ.)

знакомство с Prezi.com(исправ.)

Education
ЗНАКОМСТВО С 3SL CRADLE 7.0 ПЕРВЫЕ ШАГИsaturs.ru/elfiles/3SL_Cradle_start_here.pdf · С чего начать знакомство с 3SL Cradle? Запустить

ЗНАКОМСТВО С 3SL CRADLE 7.0 ПЕРВЫЕ ШАГИsaturs.ru/elfiles/3SL_Cradle_start_here.pdf · С чего начать знакомство с 3SL Cradle? Запустить

Documents
Знакомство с КМ Школа

Знакомство с КМ Школа

Travel
знакомство с интернет

знакомство с интернет

Education
Знакомство с 1а

Знакомство с 1а

Art & Photos
Знакомство с Perl 6

Знакомство с Perl 6

Technology
Знакомство с приложением PTC PDM EssentialsTM€¦ · Управление данными об изделии Знакомство с приложением

Знакомство с приложением PTC PDM EssentialsTM€¦ · Управление данными об изделии Знакомство с приложением

Documents
Знакомство с библиотекой

Знакомство с библиотекой

Education
знакомство с

знакомство с

Documents
Знакомство с XSLT

Знакомство с XSLT

Technology
знакомство с сибирью

знакомство с сибирью

Documents
знакомство с куриным семейством

знакомство с куриным семейством

Documents
знакомство с библиотекой

знакомство с библиотекой

Business
Знакомство с Windows Phone

Знакомство с Windows Phone

Technology
Знакомство с Tizen

Знакомство с Tizen

Technology
Знакомство с MiniQ

Знакомство с MiniQ

Software