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

Modular Web-clients building upon BackboneJS-dr...

Kreees
June 25, 2013
1
84

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
Designing the Hi-DPI Web
ddemaree
280
34k
Writing Fast Ruby
sferik
627
61k
Navigating Team Friction
lara
183
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Side Projects
sachag
452
42k
Code Reviewing Like a Champion
maltzj
520
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The Language of Interfaces
destraynor
154
24k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Thoughts on Productivity
jonyablonski
67
4.3k
Documentation Writing (for coders)
carmenintech
65
4.4k

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. Спасибо.