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
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Music & Morning Musume
bryan
46
6.2k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Writing Fast Ruby
sferik
628
61k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Six Lessons from altMBA
skipperchong
27
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k

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