SlideShare a Scribd company logo
1 of 28
Download to read offline
MVC в JavaScript
90-е
2000-е
                Adobe flash




   JavaScript
JavaScript
Кроссбраузерные библиотеки
● jQuery
● Prototype
● ....
JQuery может предоставить нам следующее
"Пластилиновая" Архитектура

У меня в проекте такая архитектура что ее понимаю только ...
Как решить эту проблему?
MVC
MVC Frameworks

●   JavaScriptMVC
●   Backbone.JS
●   Ember.JS
●   Spine.JS
●   SproutCore
●   .....
Backbone.JS
Backbone.JS !== jQuery
Джереми Ашкенас

●   CoffeScript
●   UnderscoreJS
●   BackboneJS
●   DocumentCloud
●   ....
Кто использует BackboneJS ?
DocumentCloud
LinkedIn Mobile
Knah Academy
Groupon
BackboneJS MVC
●   Models
●   Collections
●   Views
●   Routers
Model
Collections
Views
Routes
Demo
Хотите узнать больше о BackboneJS ?
●   backbonejs.org
●   backbonejs.ru
●   backbonetutorials.com
●   coenraets.org/blog/
●   backbonescreancasts.com
●   http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-
    backbonejs-undersc/
●   https://gist.github.com/1655019
●   http://www.quora.com/What-are-some-good-resources-for-Backbone-js
●   http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-
    reviewed
●   http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
●   https://github.com/visionmedia/ejs
?

More Related Content

What's hot

Mobile Web Apps development essentials
Mobile Web Apps development essentialsMobile Web Apps development essentials
Mobile Web Apps development essentialsPavlo Iuriichuk
 
Основы HTML - шесть лет спустя
Основы HTML - шесть лет спустяОсновы HTML - шесть лет спустя
Основы HTML - шесть лет спустяAlexander Babich
 
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»DevGAMM Conference
 
Павел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузерыПавел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузерыUA Mobile
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
 
Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?Mikhail Kulakov
 
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js  введение в кросс-платформенные десктопные приложения на javascript (mo...nw.js  введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...Kirill Danilov
 
Java script и frontend завтра - Kharkiv JS 2013
Java script и frontend завтра - Kharkiv JS 2013Java script и frontend завтра - Kharkiv JS 2013
Java script и frontend завтра - Kharkiv JS 2013Andrey Listochkin
 
Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...oelifantiev
 
Сделай дизайнеру приятно: Красивые веб-формы
Сделай дизайнеру приятно: Красивые веб-формыСделай дизайнеру приятно: Красивые веб-формы
Сделай дизайнеру приятно: Красивые веб-формыKyrylo Melnychuk
 
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...LEDC 2016
 
Александр Воинов. Power of Drupal market
Александр Воинов. Power of Drupal marketАлександр Воинов. Power of Drupal market
Александр Воинов. Power of Drupal marketi20 Group
 
Как не сойти с ума при разработке крупных проектов на WordPress
Как не сойти с ума при разработке крупных проектов на WordPressКак не сойти с ума при разработке крупных проектов на WordPress
Как не сойти с ума при разработке крупных проектов на WordPressYevhen Kotelnytskyi
 
МАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyМАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyОлег Гудаев
 
МАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyМАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyОлег Гудаев
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Ontico
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlexander Baumgertner
 
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ..."nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...MoscowJS
 
«Mobile To The People» - Дмитрий Колодько
«Mobile To The People» - Дмитрий Колодько«Mobile To The People» - Дмитрий Колодько
«Mobile To The People» - Дмитрий КолодькоITсonnect ITconnect
 

What's hot (19)

Mobile Web Apps development essentials
Mobile Web Apps development essentialsMobile Web Apps development essentials
Mobile Web Apps development essentials
 
Основы HTML - шесть лет спустя
Основы HTML - шесть лет спустяОсновы HTML - шесть лет спустя
Основы HTML - шесть лет спустя
 
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
Unity: WebGL и IL2CPP — будущее скриптинга в Unity»
 
Павел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузерыПавел Юрийчук - Разработка приложений под мобильные браузеры
Павел Юрийчук - Разработка приложений под мобильные браузеры
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
 
Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?Как сделать хороший прототип вовремя?
Как сделать хороший прототип вовремя?
 
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js  введение в кросс-платформенные десктопные приложения на javascript (mo...nw.js  введение в кросс-платформенные десктопные приложения на javascript (mo...
nw.js введение в кросс-платформенные десктопные приложения на javascript (mo...
 
Java script и frontend завтра - Kharkiv JS 2013
Java script и frontend завтра - Kharkiv JS 2013Java script и frontend завтра - Kharkiv JS 2013
Java script и frontend завтра - Kharkiv JS 2013
 
Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...Yarfrontend #2. Как мы делали гуя...
Yarfrontend #2. Как мы делали гуя...
 
Сделай дизайнеру приятно: Красивые веб-формы
Сделай дизайнеру приятно: Красивые веб-формыСделай дизайнеру приятно: Красивые веб-формы
Сделай дизайнеру приятно: Красивые веб-формы
 
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
Юлія Снітко — Як подружити дизайнерів і Drupal розробників. Досвід ефективної...
 
Александр Воинов. Power of Drupal market
Александр Воинов. Power of Drupal marketАлександр Воинов. Power of Drupal market
Александр Воинов. Power of Drupal market
 
Как не сойти с ума при разработке крупных проектов на WordPress
Как не сойти с ума при разработке крупных проектов на WordPressКак не сойти с ума при разработке крупных проектов на WordPress
Как не сойти с ума при разработке крупных проектов на WordPress
 
МАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика BlocklyМАПО 2013 Лекция 04 Фабрика Blockly
МАПО 2013 Лекция 04 Фабрика Blockly
 
МАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование BlocklyМАПО 2013 Лекция 03 Программирование Blockly
МАПО 2013 Лекция 03 Программирование Blockly
 
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
Онлайн-кинотеатр для SmartTV на веб-технологиях / Михаил Лабанов (Ayyo)
 
Alex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projectsAlex baumgertner bem_in_small_projects
Alex baumgertner bem_in_small_projects
 
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ..."nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
"nw.js: введение в кросс-платформенные декстопные приложения на JavaScript", ...
 
«Mobile To The People» - Дмитрий Колодько
«Mobile To The People» - Дмитрий Колодько«Mobile To The People» - Дмитрий Колодько
«Mobile To The People» - Дмитрий Колодько
 

Similar to MVC in JavaScript

Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.DataArt
 
Виктор Русакович - Выборы, выборы, все фреймворки… приторны
Виктор Русакович - Выборы, выборы, все фреймворки… приторныВиктор Русакович - Выборы, выборы, все фреймворки… приторны
Виктор Русакович - Выборы, выборы, все фреймворки… приторныFDConf
 
webpack: 7 бед - один ответ
webpack: 7 бед - один ответwebpack: 7 бед - один ответ
webpack: 7 бед - один ответDenis Izmaylov
 
Backbone js for expert fridays.pptx
Backbone js for  expert fridays.pptxBackbone js for  expert fridays.pptx
Backbone js for expert fridays.pptxProvectus
 
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едятHappyDev-lite
 
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17MoscowJS
 
Frontend: Путешествие в мир модульных загрузчиков
Frontend: Путешествие в мир модульных загрузчиковFrontend: Путешествие в мир модульных загрузчиков
Frontend: Путешествие в мир модульных загрузчиковCodeFest
 
Введение в Knockout
Введение в Knockout Введение в Knockout
Введение в Knockout Pavel Tsukanov
 
KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM
KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVMKNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM
KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVMPavel Tsukanov
 
Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?buranLcme
 
Backbone.js Профилактика сколиоза
Backbone.js Профилактика сколиоза Backbone.js Профилактика сколиоза
Backbone.js Профилактика сколиоза MitinPavel
 
AngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияIgor Sazonov
 
Node JS проблемы надежности, и пути их решения
Node JS проблемы надежности, и пути их решенияNode JS проблемы надежности, и пути их решения
Node JS проблемы надежности, и пути их решенияAlexander Kucherenko
 
Компонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективноКомпонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективноRoman Dvornov
 
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON
 
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...Yandex
 

Similar to MVC in JavaScript (20)

Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
 
Виктор Русакович - Выборы, выборы, все фреймворки… приторны
Виктор Русакович - Выборы, выборы, все фреймворки… приторныВиктор Русакович - Выборы, выборы, все фреймворки… приторны
Виктор Русакович - Выборы, выборы, все фреймворки… приторны
 
webpack: 7 бед - один ответ
webpack: 7 бед - один ответwebpack: 7 бед - один ответ
webpack: 7 бед - один ответ
 
Backbone lesson 1
Backbone lesson 1Backbone lesson 1
Backbone lesson 1
 
Backbone js for expert fridays.pptx
Backbone js for  expert fridays.pptxBackbone js for  expert fridays.pptx
Backbone js for expert fridays.pptx
 
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едят
 
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
"Webpack: 7 бед — один ответ" — Денис Измайлов, MoscowJS 17
 
Frontend: Путешествие в мир модульных загрузчиков
Frontend: Путешествие в мир модульных загрузчиковFrontend: Путешествие в мир модульных загрузчиков
Frontend: Путешествие в мир модульных загрузчиков
 
Введение в Knockout
Введение в Knockout Введение в Knockout
Введение в Knockout
 
KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM
KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVMKNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM
KNOCKOUTJS КАК РЕАЛИЗАЦИЯ MVVM
 
Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?Построение собственного JS SDK — зачем и как?
Построение собственного JS SDK — зачем и как?
 
Backbone.js Профилактика сколиоза
Backbone.js Профилактика сколиоза Backbone.js Профилактика сколиоза
Backbone.js Профилактика сколиоза
 
AngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для понимания
 
Node JS проблемы надежности, и пути их решения
Node JS проблемы надежности, и пути их решенияNode JS проблемы надежности, и пути их решения
Node JS проблемы надежности, и пути их решения
 
Компонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективноКомпонентный подход: скучно, неинтересно, бесперспективно
Компонентный подход: скучно, неинтересно, бесперспективно
 
Angular js
Angular jsAngular js
Angular js
 
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
 
Backbone Javascript Application
Backbone Javascript ApplicationBackbone Javascript Application
Backbone Javascript Application
 
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
 

MVC in JavaScript