Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular Web-clients building upon BackboneJS-driven frameworks.

Kreees
June 25, 2013
1
69

Modular Web-clients building upon BackboneJS-driven frameworks.

It's another view for programming and markup your super site/service/app client part. Make client side programmig nativeapplike.

Kreees

June 25, 2013
Tweet

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
Side Projects
sachag
451
41k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
4 Signs Your Business is Dying
shpigford
175
21k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Making Projects Easy
brettharned
108
5.5k
Fireside Chat
paigeccino
21
2.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Practical Orchestrator
shlominoach
182
9.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Building Adaptive Systems
keathley
31
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k

Transcript

  1. « Модульный подход к разработке клиентской « Модульный подход к

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

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

  3. AngularJS

  4. 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()

  5. 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

  6. Backbone.View().el Backbone.View().el Backbone.JS <!- index.html -> <!- index.html -> <html>

    <html> <body> <body> <div> <div> Static HTML page part Static HTML page part </div> </div> <div#place_to_render> <div#place_to_render> … … </div> </div> </body> </body> </html> </html> Client HTML Template Template Context ?

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

  8. Что за MVC/MVP/MVT? Все это о данных на каком-то сервере

    и как с ними обращаться. Реальная структура и содержание клиента шире чем просто набор вьюх в системе MVC.

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

  10. Компоненты в структуре клиента Компоненты в структуре клиента CSS +

    HTML + JS CSS + HTML + JS Less + Jade/Jqote + Coffee/Backbone.View Less + Jade/Jqote + Coffee/Backbone.View

  11. <!-- Внешний вид --> <style type='text/less' data-module='your_component'> .your_component { position:

    relative; background-color: blue; color: yellow } </style> <!-- Верстка --> <script type='text/jade-template' data-module='your_component' id='your_component'> <![CDATA[ .your_component p! <%= this.attribute %> a(href='/some/link') Some Link ]]> </script> <!-- JS-Обработчики --> <script data-module='your_component' type='text/coffeescript'> YourComponent = Backbone.View.extend { template: «#your_component» events: {...} } </script> Модуль. Один. Модуль. Один.

  12. Scaffolding/Markup Scaffolding/Markup Layout Stack Group/Grid Pages (формируют структуру сайта) Application

    (index.html) Buttons/Action Groups, Add Block, …

  13. Data Presentaion View Data Presentaion View Model Collection Pagination

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

  15. 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

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

  17. Взаимодействия 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

  18. Спасибо.