Где мой Java Script Или почему все используют

Где мой Java. Script? Или почему все используют фреймворки Александр Кухтин Cyber. Bionic Systematics

План 1. Что такое фреймворк? Немного теории. 2. Почему j. Query так хорош? 3. В чем секрет Node. js? 4. Поговорим о MV* фреймворках?

Что такое фреймворк? Немного теории.

Фреймворк — программная платформа, определяющая структуру программной системы.

Типы Java. Script MV* фреймворков 1. MVC – Model-View-Controller 2. MVP – Model-View-Presenter 3. MVVM – Model-View. Model 4. MVW (MV*) – Model-View-Whatever

Когда использовать Java. Script MV* фреймворки Для создания Single Page Application (SPA) SPA – одностраничное веб-приложение, которое выполняется на стороне клиента.

Роутинг Маршрутизация (англ. Routing) определения маршрута информации в сетях связи. Пример: vk. com#/phones/123 route - #/phones/123 — процесс следования

Поговорим о фреймворках 1. Манипуляция с DOM (j. Query) 2. MV* фреймворки (Angular. js/Backbone. js/Ember. js/React. js) 3. Серверные фреймворки (Node. js)

j. Query – это фреймворк, необходимый для манипуляции с различными объектами на странице.

Преимущества и недостатки Преимущества: 1. Простота синтаксиса 2. Легкость разработки 3. Цепочки методов 4. CSS-селекторы – как объекты DOM 5. Великолепная документация 6. Полезные расширения 7. Нет аналогов

Преимущества и недостатки Недостатки: 1. Имеет «вес» 2. Работает медленно

Подключение j. Query Способ 1: Google CDN «Устанавливает» с ближайшего сервера Способ 2: Скачать и разместить в папку с приложением «Устанавливает» с вашего сервера

Сравнение кода Name Java. Script j. Query document. add. Event. Listener('DOM', function() { // code }); $(document). ready(function() { // code }); Events []. for. Each. call(document. query. Selector. All( 'a'), function(el) { el. add. Event. Listener('click', function() { // code }) }); $('a'). click(function() { // code }); Selectors var divs = document. query. Selector. All('div') var divs = $('div'); Attributes document. query. Selector('img'). set. Attribute( 'alt', 'My image') $('img'). filter(': first'). attr('alt', 'My image') document. body. append. Child(document. create. Element('p')); $('body'). append($('

')) var wrap = document. get. Element. By. Id('wrap'); while (wrap. first. Child) wrap. remove. Child(wrap. first. Child) $('#wrap'). empty(); Manipulation

Основная информация 1. Движок V 8 2. Неблокирующий ввод/вывод

Когда стоит использовать Node. js разработан для создания быстрых, масштабируемых веб-приложений, которые могут обрабатывать большое количество запросов

Неблокирующий ввод/вывод

Необходимые расширения MVC 1. Express 2. Hapi 3. Koa 4. Sails Full-stack 1. Derby 2. Socket. io 3. MEAN. io 4. Meteor Other 1. Connect 2. Mongoose 3. Docpad 4. Impress

«Поднимаем» сервер Node. js Express. js

Примеры реализации принципа «неблокирующего ввода/вывода» function get. User(id, callback) { db. query(id, callback); // Обращение к БД }; get. User(432, function (user) { console. log(user. name); // Вывод результата }); console. log('Done');

Примеры реализации принципа «неблокирующего ввода/вывода» 1 2 3 4 5 1 // Add new item to 'items' store function add(list, title, position) { db. insert('items', { list: list, title: title }, function (item) { // Add new item to 'items' store // Set position if requested var item = db. insert('items', { list: list, title: title }); if (position !== null) { // Set position if requested db. get('items. sort', list, function (sort) { if (position !== null) { add. To. List. At(sort, item. id, position); var sort = db. get('items. sort', list); db. update('items. sort', sort, function () { add. To. List. At(sort, item. id, position); finish(item. id); db. update('items. sort', sort); } }); // Perform final processing var result = { status: 'ok', time: (new Date()). get. Time()}; } 5 else { return result; }; function add(list, title, position, callback) { finish(item. id); } }); function finish(id) { // Perform final processing callback({ id: id, status: 'ok', time: (new Date()). get. Time() }); } } 1 2 3 4

Сравнение MV* фреймворков

Что обсуждаем? Angular ( от ) Backbone ( при поддержке ) Ember ( от ) React ( от )

Angular – 24. 54% Backbone – 69. 54% Ember – 4. 59% React – 1. 33%

Angular – 33880 Backbone – 20257 Ember – 13022 React – 12337

Что это такое? Angular. JS – супергероический MVW фреймворк!

Основные принципы 1. «Директивное» мышление 2. Четкое разделение кода 3. Тесты тоже важны 4. Простое – просто

Недостатки 1. «Жесткая» архитектура 2. Неочевидная работа $scope 3. Тестирование только контроллеров

Two-way bindings, $scope – это связующее звено между контроллером и представлением.

Your name: < input type =" src="https://present5.com/presentation/-75623194_386191895/image-35.jpg" alt="Директивы < div ng-controller = "My. Controller" > Your name: < input type =" /> Директивы < div ng-controller = "My. Controller" > Your name: < input type = "text" ng-model = "username" > < button ng-click = "say. Hello()" > greet index. html < hr > {{greeting}} < /div > angular. module('scope. Example', []) . controller('My. Controller', ['$scope', function($scope) { $scope. username = 'World'; $scope. say. Hello = function() { script. js $scope. greeting = 'Hello ' + $scope. username + '!'; }; }]);

Пример MVC на Angular 1) $ git clone https: //github. com/angular-seed $ cd angular-seed $ npm install 2) $ npm start 3) Весь код приложения в /app/js/app. js: angular. module('my. App', []). config(['$route. Provider', function($route. Provider) { $route. Provider. when('/view 1', { template. Url: 'partials/partial 1. html', controller: 'My. Ctrl 1‘ }); $route. Provider. when('/view 2', { template. Url: 'partials/partial 2. html', controller: 'My. Ctrl 2‘ }); $route. Provider. otherwise({redirect. To: '/view 1'}); }]); 4) и одну — в /app/index. html:

Выводы В общем и целом Angular — это вполне достойный фреймворк для разработки клиентских MVC-приложений на Java. Script.

Что это такое? Backbone – небольшая и простая, но проверенная временем MVVM библиотека.

Основные модули 1. 2. 3. 4. Модели Коллекции Представления Событийный модуль

Необходимые расширения 1. History API 2. Underscore. js

Когда использовать? Для приложений с множеством данных.

Пример MVVM (Модель) 1) Модель и коллекция: var Book = Backbone. Model. extend({}); var Library = Backbone. Collection. extend({ model: Book }); 2) Создание библиотеки: var library = new Library(); library. add({ title: 'The Dark Tower', author: 'Stephen Edwin King' }); 3) Получение данных: library. url = '/books‘ // Роутер library. fetch() 4) Ответ сервера JSON-файлом: [{ “id”: “ 334 aa 7010561 cf 20 fc 1 e 2 c 4 fc 63 e 1 b”, “title”: “The Dark Tower”, “author”: “Stephen Edwin King” }, { “id”: “ 8 b 60837 a 06038 caa 01672 bcff 3 a 83”, “title”: “The Guinness Book of Records”, “author”: “Hugh Beaver” }]

Пример MVVM (Представление) 5) Коллекция: var Library. View = Backbone. View. extend({ // Существующий элемент на странице, где будет отображаться наш список el: "#books", // Генерируемый тег элементов tag. Name: "li", // Имя класса для элемента class. Name: "row", // Шаблон отдельной книги. Можно использовать любой шаблонизатор, в данном случае — underscore template: '<%-title%>

<%-author%>

Особенности Backbone 1. Это библиотека 2. Для жестких архитектур есть готовые решения ( Marionette. js / Chaplin. js )

Выводы Backbone. js — довольно минималистичная библиотека, которая позволяет удобно работать с моделями, объединять их в коллекции и предлагает минимальный функционал для их представления.

Что это такое? Ember – это фреймворк, который предлагает «магическую» логику для решения нетрадиционных сайтов.

Что за «магия» ? Ember перехватывает информацию и пытается сам разобраться на основе своих правил, что с этой информацией делать дальше

Особенности фреймворка 1. Правила превыше конфигураций 2. Генерируем с «умом»

Применение Ember рассчитан для создание нетрадиционных сайтов с логикой, основанной на принятии решений.

Пример MVC 1) Ember. js Starter Kit 4) Контролер: 2) app. js: Welcome. books. Controller = Ember. Array. Controller. create({ content: [] }); Welcome = Ember. Application. create({ ready: function(){ alert('Вы сделали это!'); } }); 3) Модель: Welcome. Book = Ember. Object. extend({ title: null, author: null, genre: null }); 5) index. html - Представление:

Выводы Ember. js следует использовать для нетрадиционных сайтов, а также там, где идет сложная (ИИ) логика работы сайта.

Что это такое? React – это уровень представления.

Почему он так популярен? 1. 2. 3. 4. Очевидный результат рендеринга Простой для понимания синтаксис Быстрая скорость работы Возможность отрисовывать на сервере

Особенность React 1. JSX 2. «Flux»

Пример кода var My. Component = React. create. Class({ render: function() { if (this. props. first) { return

Еще один пример var Stock. Market. Table. Cell = require(". /stock_market_table_cell. js"); var Stock. Market. Table. Row = module. exports = React. create. Class({ render: function render() { var year = this. props. stock. Market. Year; return ; } });

Выводы Учитывая возможности виртуального DOM’а – скорость работы ускоряется, а благодаря JSX – код могут понять даже дизайнеры.

Общие выводы 1. j. Query – популярен из-за своей простоты и расширений 2. Node – единственная реализация веб-сервера для Java. Script 3. Angular – для «шаблонных» сайтов и быстрых решений 4. Backbone – для сложных и гибких решений 5. Ember – для нетривиальных сайтов и настольных онлайн-игр 6. React – для сайтов, которые много и часто работают с DOM

Литература 1. http: //habrahabr. ru/post/149594/ - To. Do. MVC 2. http: //apps 4 all. ru/post/03 -10 -15 -sravnenie-samyh-populyarnyh-javascript-mv-frejmvorkov-ch 2 - Сравнение фреймворков 3. http: //tonsky. livejournal. com/290074. html - React. js 4. http: //www. nodebeginner. ru/ - Node. js 5. http: //habrahabr. ru/post/31239/ - j. Query 6. http: //hueniverse. com/2011/06/29/the-style-of-non-blocking/ - Принцип неблокирующего ввода/выводы 7. http: //stepansuvorov. com/blog/2014/02/angular-vs-ember/ - Сравнение ангулара и эмбера 8. http: //habrahabr. ru/post/212441/ - Анатомия Ember. js 9. http: //habrahabr. ru/company/hexlet/blog/249793/ - Angular. js. Нетрадиционный обзор 10. http: //habrahabr. ru/company/hexlet/blog/249579/ - React. js. Нетрадиционный обзор 11. http: //habrahabr. ru/post/118782/ - Написание сложных интерфейсов с Backbone. js 12. http: //habrahabr. ru/post/149036/ - Начинаем работать с Ember. js 13. https: //xakep. ru/2014/05/29/client-side-js-history/ - Клиентский Java. Script 14. http: //habrahabr. ru/post/217295/ - Diff-алгоритм React 15. http: //habrahabr. ru/post/229629/ - 5 практических примеров для изучения фреймворка React 16. http: //www. javacodegeeks. com/2013/12/node-js-non-blocking-io-model. html - Non-blocking model 17. https: //gist. github. com/liamcurry/2597326 - j. Query vs Vanilla 18. https: //jquery. com/ - j. Query official website 19. https: //angularjs. org/ - Angular official website 20. http: //backbonejs. org/ - Backbone official website 21. http: //emberjs. com/ - Ember official website 22. https: //facebook. github. io/react/ - React official website 23. https: //nodejs. org/ - Node. js official website 24. http: //frontender. info/absolute-beginners-guide-to-nodejs/ - Guide for Node. js 25. http: //blogerator. ru/page/javascript_frameworks_2 - j. Query аналоги 26. http: //habrahabr. ru/post/249107/ - React. JS для глупых людей 27. http: //habrahabr. ru/post/249279/ - Flux для глупых людей

Благодарю за внимание! alexisinwork@gmail. com +38 (063) 155 13 24