Tweet
Tweet

Slide 1

Slide 1 text

« Модульный подход к разработке клиентской « Модульный подход к разработке клиентской / части веб мобильных приложений на базе / части веб мобильных приложений на базе Backbone.JS driven » фреймворков Backbone.JS driven » фреймворков Сухарев Кирилл Сухарев Кирилл

Slide 2

Slide 2 text

Как оно бывает. Варианты.

Slide 3

Slide 3 text

AngularJS

Slide 4

Slide 4 text

Rails application.ham application.ham Controller Controller Action Action Scope (Context) Scope (Context) controller#action_view.haml controller#action_view.haml + partials.haml + partials.haml + helpers() + helpers()

Slide 5

Slide 5 text

Django View Index1.html Index1.html Templ1.html Templ1.html Context Context Layout.html Layout.html Templ2.html Templ2.html Templ3.html Templ3.html Index2.html Index2.html include1.html include1.html include2.html include2.html

Slide 6

Slide 6 text

Backbone.View().el Backbone.View().el Backbone.JS
Static HTML page part Static HTML page part
… … Client HTML Template Template Context ?

Slide 7

Slide 7 text

=? View View Context Context Контекст везде! Контекст везде!

Slide 8

Slide 8 text

Что за MVC/MVP/MVT? Все это о данных на каком-то сервере и как с ними обращаться. Реальная структура и содержание клиента шире чем просто набор вьюх в системе MVC.

Slide 9

Slide 9 text

Модульность. Паттерны.

Slide 10

Slide 10 text

Компоненты в структуре клиента Компоненты в структуре клиента CSS + HTML + JS CSS + HTML + JS Less + Jade/Jqote + Coffee/Backbone.View Less + Jade/Jqote + Coffee/Backbone.View

Slide 11

Slide 11 text

.your_component { position: relative; background-color: blue; color: yellow } <![CDATA[ .your_component p! <%= this.attribute %> a(href='/some/link') Some Link ]]> YourComponent = Backbone.View.extend { template: «#your_component» events: {...} } Модуль. Один. Модуль. Один.

Slide 12

Slide 12 text

Scaffolding/Markup Scaffolding/Markup Layout Stack Group/Grid Pages (формируют структуру сайта) Application (index.html) Buttons/Action Groups, Add Block, …

Slide 13

Slide 13 text

Data Presentaion View Data Presentaion View Model Collection Pagination

Slide 14

Slide 14 text

Acitve/Passive elements Acitve/Passive elements Modals ... ...

Slide 15

Slide 15 text

Action 1 Action 2 Action 3 Action 4 Application Layout Application Layout Page 1 | Page 2 | ... | Basket | Contacts Last Viewed cleaners Бла-бла-бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла-бла Купите супер пылесос Характеристики бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла- бла-бла-бла-бла-бла-бла- бла-бла-бла- Footer block Header block

Slide 16

Slide 16 text

Взаимодействия.

Slide 17

Slide 17 text

Взаимодействия Backbone.View.extend { Backbone.View.extend { … … events: { events: { «click button.btn#ok»: «submit» «click button.btn#ok»: «submit» «click button.btn#cancel»: «reject» «click button.btn#cancel»: «reject» }, }, submit: → submit: → // Submit // Submit reject: → reject: → // Reject // Reject } } muon.LayoutView.extend { … events: { «submit .comment_action»: «submit» «hide .comment_action»: «hide» }, submit: → // Post new comment hide: → // Hide comment box } Pure Backbone View Pure Backbone View Modular Backbone Views Modular Backbone Views

Slide 18

Slide 18 text

Спасибо.