SlideShare une entreprise Scribd logo
1  sur  33
Быстрая и безболезненная
разработка клиентской части
     веб-приложений




        Ткаченко Ярослав, 10sheet.com
                            @sap1ens
Хорошее и современное решение

   jQuery        jQuery plugins            Backbone.js

                                        socket.io
jQuery plugins
                        App             QUnit
    jQuery plugins
                                  template engine
                     Modernizr
  Underscore.js                              jQueryUI
Плохое или старое решение

     jQuery / Prototype.js / MooTools

     …                                  ?

                App                …

?
Симптомы?
Симптомы


1. Нет фреймворка/библиотеки Application уровня
   или ее аналога
2. Нет работы с URL
3. Обработчики onclick прямо в HTML
4. Излишняя привязка к DOM, вместо работы с
   данными
5. Нет иерархии компонентов
6. Сильная связность компонентов
Решение?


                 App


App
Решение?

      Время

Деньги                App
                ?

App                  Люди
Решение!

Грубый рефакторинг:

1. Разбиваем код на модули
2. Организуем связь между модулями
Код по возможности не переписывать
RequireJS


1. Загрузчик модулей
2. Поддерживает все современные браузеры
3. Имеет кучу плагинов
4. Модули в нотации AMD
5. Совместим с jQuery, node.js, Dojo
6. Есть оптимизатор кода
AMD
Asynchronous Module Definition API
Типовой модуль
Пример подключения RequireJS
HTML5 History API        Динамические URL



     https://twitter.com/#!/following



      https://twitter.com/following
HTML5 History API
Manager
Manager
One page application


1. Физически - одна страница, подключающая все
   стили и скрипты
2. Запускает загрузку приложения через RequireJS
3. Все шаблоны хранятся на клиенте
4. Обмен данными – AJAX (JSON) / Websocket
Иерархия модулей

Component
                                  Component
               Component
                                           Component



            Widget       Widget         Widget



      Top level module            Top level module
Иерархия модулей


Date interval          Report




   Search             Pagination
Иерархия модулей
Less
Less
Less
CSS Sprites?
Sprites? Fonts!
   Pictos.cc
Спасибо!

http://github.com/balupton/history.js

http://requirejs.org/

http://lesscss.org/

Contenu connexe

Tendances

Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
rit2010
 
автоматизированное тестирование. С чего начать Part2
автоматизированное тестирование. С чего начать Part2автоматизированное тестирование. С чего начать Part2
автоматизированное тестирование. С чего начать Part2
DataArt
 
Как сделать интернет-сайт на SharePoint и не передумать на полпути
Как сделать интернет-сайт на SharePoint и не передумать на полпутиКак сделать интернет-сайт на SharePoint и не передумать на полпути
Как сделать интернет-сайт на SharePoint и не передумать на полпути
Andrew Mayorov
 
Кэш виджетов Yii в Redis. Отдача напрямую через Nginx. Трофименко
Кэш виджетов Yii в Redis. Отдача напрямую через Nginx. ТрофименкоКэш виджетов Yii в Redis. Отдача напрямую через Nginx. Трофименко
Кэш виджетов Yii в Redis. Отдача напрямую через Nginx. Трофименко
2ГИС Технологии
 
Axure по для создания прототипов веб-сайтов
Axure   по для создания прототипов веб-сайтовAxure   по для создания прототипов веб-сайтов
Axure по для создания прототипов веб-сайтов
Softline
 
Разработка прототипов на Axure
Разработка прототипов на AxureРазработка прототипов на Axure
Разработка прототипов на Axure
Softline
 
работа с блогом1
работа с блогом1работа с блогом1
работа с блогом1
Natalia Odegova
 

Tendances (20)

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, и с чем его едят
 
Mobile web apps
Mobile web appsMobile web apps
Mobile web apps
 
Fullstack javascript. Isomorphic apps
Fullstack javascript. Isomorphic appsFullstack javascript. Isomorphic apps
Fullstack javascript. Isomorphic apps
 
12 урок
12 урок12 урок
12 урок
 
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
QA Fes 2016. Анна Карпенко. Специфика тестирования мобильных приложений или к...
 
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample SdkSergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
Sergey Ilinsky Rit 2010 Complex Gui Development Ample Sdk
 
Ошибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений КонцевойОшибки в разработке интернет-магазинов - Евгений Концевой
Ошибки в разработке интернет-магазинов - Евгений Концевой
 
автоматизированное тестирование. С чего начать Part2
автоматизированное тестирование. С чего начать Part2автоматизированное тестирование. С чего начать Part2
автоматизированное тестирование. С чего начать Part2
 
6.dev meetup2 wistia_android_y_bondarev
6.dev meetup2 wistia_android_y_bondarev6.dev meetup2 wistia_android_y_bondarev
6.dev meetup2 wistia_android_y_bondarev
 
10 мифов о WordPress
10 мифов о WordPress10 мифов о WordPress
10 мифов о WordPress
 
Как сделать интернет-сайт на SharePoint и не передумать на полпути
Как сделать интернет-сайт на SharePoint и не передумать на полпутиКак сделать интернет-сайт на SharePoint и не передумать на полпути
Как сделать интернет-сайт на SharePoint и не передумать на полпути
 
Кэш виджетов Yii в Redis. Отдача напрямую через Nginx. Трофименко
Кэш виджетов Yii в Redis. Отдача напрямую через Nginx. ТрофименкоКэш виджетов Yii в Redis. Отдача напрямую через Nginx. Трофименко
Кэш виджетов Yii в Redis. Отдача напрямую через Nginx. Трофименко
 
Веб 3.0. Есть ли будущее у Java в RIA и Mobile?
Веб 3.0. Есть ли будущее у Java в RIA и Mobile?Веб 3.0. Есть ли будущее у Java в RIA и Mobile?
Веб 3.0. Есть ли будущее у Java в RIA и Mobile?
 
InterSystems Community and Projects in CIS November 2015
InterSystems Community and Projects in CIS November 2015InterSystems Community and Projects in CIS November 2015
InterSystems Community and Projects in CIS November 2015
 
Axure по для создания прототипов веб-сайтов
Axure   по для создания прототипов веб-сайтовAxure   по для создания прототипов веб-сайтов
Axure по для создания прототипов веб-сайтов
 
Аудит Ugg-deshevle.net.ua
Аудит Ugg-deshevle.net.uaАудит Ugg-deshevle.net.ua
Аудит Ugg-deshevle.net.ua
 
Защита
ЗащитаЗащита
Защита
 
Разработка прототипов на Axure
Разработка прототипов на AxureРазработка прототипов на Axure
Разработка прототипов на Axure
 
Презентация по курсу «Проектирования в Axure»
Презентация по курсу  «Проектирования в Axure» Презентация по курсу  «Проектирования в Axure»
Презентация по курсу «Проектирования в Axure»
 
работа с блогом1
работа с блогом1работа с блогом1
работа с блогом1
 

Similaire à Быстрая и безболезненная разработка клиентской части веб-приложений

Web matrix
Web matrixWeb matrix
Web matrix
.toster
 
Web programming modern tendencies
Web programming modern tendenciesWeb programming modern tendencies
Web programming modern tendencies
DarkestMaster
 
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON
 
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
HappyDev
 
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только одинJavascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только один
Sergey Xek
 
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Ontico
 

Similaire à Быстрая и безболезненная разработка клиентской части веб-приложений (20)

Meet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis Bosak
 
Web matrix
Web matrixWeb matrix
Web matrix
 
Web programming modern tendencies
Web programming modern tendenciesWeb programming modern tendencies
Web programming modern tendencies
 
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только одинSECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки:
 должен остаться только один
 
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только одинSECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
SECON'2016. Аверин Сергей, Javascript-фреймворки:
 должен остаться только один
 
Использование встроенных или подключаемых средств браузеров для тестирования ...
Использование встроенных или подключаемых средств браузеров для тестирования ...Использование встроенных или подключаемых средств браузеров для тестирования ...
Использование встроенных или подключаемых средств браузеров для тестирования ...
 
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
2015-12-05 Сергей Аверин - Javascript-фреймворки: должен остаться только один
 
Javascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только одинJavascript-фреймворки:
 должен остаться только один
Javascript-фреймворки:
 должен остаться только один
 
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
Javascript-фреймворки: должен остаться только один / Аверин Сергей (Acronis)
 
Экскурс в мир WEB разработки
Экскурс в мир WEB разработкиЭкскурс в мир WEB разработки
Экскурс в мир WEB разработки
 
Phalcon. Что нового?
Phalcon. Что нового?Phalcon. Что нового?
Phalcon. Что нового?
 
Разработка мобильного и веб интерфейса для Caché
Разработка мобильного и веб интерфейса для CachéРазработка мобильного и веб интерфейса для Caché
Разработка мобильного и веб интерфейса для Caché
 
Appery.io Ukraine_2016
Appery.io Ukraine_2016Appery.io Ukraine_2016
Appery.io Ukraine_2016
 
Vladimir Unev
Vladimir UnevVladimir Unev
Vladimir Unev
 
JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.JavaScript Базовый. Занятие 09.
JavaScript Базовый. Занятие 09.
 
Web and mobile development for intersystems caché, Eduard Lebedyuk
Web and mobile development for intersystems caché, Eduard LebedyukWeb and mobile development for intersystems caché, Eduard Lebedyuk
Web and mobile development for intersystems caché, Eduard Lebedyuk
 
Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?Современный фронтенд -- как не утонуть в море хайпа?
Современный фронтенд -- как не утонуть в море хайпа?
 
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
 
ASP.NET MVC: new era?
ASP.NET MVC: new era?ASP.NET MVC: new era?
ASP.NET MVC: new era?
 

Plus de Yaroslav Tkachenko

Dynamic Change Data Capture with Flink CDC and Consistent Hashing
Dynamic Change Data Capture with Flink CDC and Consistent HashingDynamic Change Data Capture with Flink CDC and Consistent Hashing
Dynamic Change Data Capture with Flink CDC and Consistent Hashing
Yaroslav Tkachenko
 

Plus de Yaroslav Tkachenko (18)

Dynamic Change Data Capture with Flink CDC and Consistent Hashing
Dynamic Change Data Capture with Flink CDC and Consistent HashingDynamic Change Data Capture with Flink CDC and Consistent Hashing
Dynamic Change Data Capture with Flink CDC and Consistent Hashing
 
Streaming SQL for Data Engineers: The Next Big Thing?
Streaming SQL for Data Engineers: The Next Big Thing?Streaming SQL for Data Engineers: The Next Big Thing?
Streaming SQL for Data Engineers: The Next Big Thing?
 
Apache Flink Adoption at Shopify
Apache Flink Adoption at ShopifyApache Flink Adoption at Shopify
Apache Flink Adoption at Shopify
 
Storing State Forever: Why It Can Be Good For Your Analytics
Storing State Forever: Why It Can Be Good For Your AnalyticsStoring State Forever: Why It Can Be Good For Your Analytics
Storing State Forever: Why It Can Be Good For Your Analytics
 
It's Time To Stop Using Lambda Architecture
It's Time To Stop Using Lambda ArchitectureIt's Time To Stop Using Lambda Architecture
It's Time To Stop Using Lambda Architecture
 
Bravo Six, Going Realtime. Transitioning Activision Data Pipeline to Streaming
Bravo Six, Going Realtime. Transitioning Activision Data Pipeline to StreamingBravo Six, Going Realtime. Transitioning Activision Data Pipeline to Streaming
Bravo Six, Going Realtime. Transitioning Activision Data Pipeline to Streaming
 
Apache Kafka: New Features That You Might Not Know About
Apache Kafka: New Features That You Might Not Know AboutApache Kafka: New Features That You Might Not Know About
Apache Kafka: New Features That You Might Not Know About
 
Building Scalable and Extendable Data Pipeline for Call of Duty Games: Lesson...
Building Scalable and Extendable Data Pipeline for Call of Duty Games: Lesson...Building Scalable and Extendable Data Pipeline for Call of Duty Games: Lesson...
Building Scalable and Extendable Data Pipeline for Call of Duty Games: Lesson...
 
Designing Scalable and Extendable Data Pipeline for Call Of Duty Games
Designing Scalable and Extendable Data Pipeline for Call Of Duty GamesDesigning Scalable and Extendable Data Pipeline for Call Of Duty Games
Designing Scalable and Extendable Data Pipeline for Call Of Duty Games
 
10 tips for making Bash a sane programming language
10 tips for making Bash a sane programming language10 tips for making Bash a sane programming language
10 tips for making Bash a sane programming language
 
Actors or Not: Async Event Architectures
Actors or Not: Async Event ArchitecturesActors or Not: Async Event Architectures
Actors or Not: Async Event Architectures
 
Kafka Streams: the easiest way to start with stream processing
Kafka Streams: the easiest way to start with stream processingKafka Streams: the easiest way to start with stream processing
Kafka Streams: the easiest way to start with stream processing
 
Building Stateful Microservices With Akka
Building Stateful Microservices With AkkaBuilding Stateful Microservices With Akka
Building Stateful Microservices With Akka
 
Querying Data Pipeline with AWS Athena
Querying Data Pipeline with AWS AthenaQuerying Data Pipeline with AWS Athena
Querying Data Pipeline with AWS Athena
 
Akka Microservices Architecture And Design
Akka Microservices Architecture And DesignAkka Microservices Architecture And Design
Akka Microservices Architecture And Design
 
Why Actor-Based Systems Are The Best For Microservices
Why Actor-Based Systems Are The Best For MicroservicesWhy Actor-Based Systems Are The Best For Microservices
Why Actor-Based Systems Are The Best For Microservices
 
Why actor-based systems are the best for microservices
Why actor-based systems are the best for microservicesWhy actor-based systems are the best for microservices
Why actor-based systems are the best for microservices
 
Building Eventing Systems for Microservice Architecture
Building Eventing Systems for Microservice Architecture  Building Eventing Systems for Microservice Architecture
Building Eventing Systems for Microservice Architecture
 

Dernier

2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
Хроники кибер-безопасника
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
Хроники кибер-безопасника
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
Ирония безопасности
 
CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
Хроники кибер-безопасника
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
Хроники кибер-безопасника
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Ирония безопасности
 

Dernier (9)

2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf2023 Q4. The Ransomware report. [RU].pdf
2023 Q4. The Ransomware report. [RU].pdf
 
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdfMalware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
Malware. DCRAT (DARK CRYSTAL RAT) [RU].pdf
 
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdfСИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
СИСТЕМА ОЦЕНКИ УЯЗВИМОСТЕЙ CVSS 4.0 / CVSS v4.0 [RU].pdf
 
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
ИСТОЧНИКИ ИННОВАЦИОННОСТИ КИТАЯ (ПО ВЕРСИИ DGAP) | The Sources of China’s Inn...
 
CVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdfCVE. The Fortra's GoAnywhere MFT [RU].pdf
CVE. The Fortra's GoAnywhere MFT [RU].pdf
 
Cyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdfCyberprint. Dark Pink Apt Group [RU].pdf
Cyberprint. Dark Pink Apt Group [RU].pdf
 
Ransomware_Q3 2023. The report [RU].pdf
Ransomware_Q3 2023.  The report [RU].pdfRansomware_Q3 2023.  The report [RU].pdf
Ransomware_Q3 2023. The report [RU].pdf
 
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
Cyber Defense Doctrine Managing the Risk Full Applied Guide to Organizational...
 
MS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdfMS Navigating Incident Response [RU].pdf
MS Navigating Incident Response [RU].pdf
 

Быстрая и безболезненная разработка клиентской части веб-приложений