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

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

Nov 21, 2014

Download

Documents

Artem Suschev

Код примеров -- https://github.com/H1D/ember-ios-notes-example
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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=

Related Documents
знакомство с компьютером

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

Category: Education
Знакомство с платформой Thingworx

Знакомство с платформой Thingworx

Category: Technology
Знакомство с Tizen - fruct.org · Знакомство с Tizen Кирилл Чувилин Менеджер Российского Сообщества Tizen Корпорация

Знакомство с Tizen - fruct.org ·...

Category: Documents
знакомство с разными животными

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

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

ЗНАКОМСТВО С 3SL CRADLE 7.0 ПЕРВЫЕ...

Category: Documents
Знакомство с английскими звуками

Знакомство с английскими...

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

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

Category: Education
Знакомство пользователя с системой

Знакомство пользователя с...

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

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

Category: Documents
знакомство с SLIDESHARE

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

Category: Education
Знакомство с Windows Phone

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

Category: Technology
ЗНАКОМСТВО С БРЕШИЕЙ

ЗНАКОМСТВО С БРЕШИЕЙ

Category: Documents