О себе

Александр Кучеренко

• В DataArt полгода

• Занимаюсь программированием 7+ лет

• За это время писал на: PHP, JavaScript, ActionScript3, C#, Java(Android), Objective-C

JavaScript Application

1. Менеджмент пакетов с помощью Bower.

2. Организация модулей через RequreJS.

3. Backbone

4. Классовый подход вместопрототипного

5. Сборка приложения с помощью Grunt

Bower

Как вы скачиваете jQuery?

Bower

http://bower.io/

Bower

$npm install -g bower

Bower

1. Манифест ./bower.json

2. По дефолту все скачивается в ./components

3. Умеет управлять зависимостями

Bower

Хочу погоду на сайт!

Bower

Хочу погоду на сайт!

Bower

bower.json

$ bower install

Bower

Обновление

Bower

Плюсы?

1. Не надо комитить все в репозиторий

2. Легко и относительно безопасно обновить любой из компонентов

3. Разные тулзы понимают bower

Bower

Минусы?

1. При деплое это нужно будет установить

Bower

Минусы?

1. При деплое это нужно будет установить

Bower

Минусы?

1. При деплое это нужно будет установить

Вопросы

Require JS

А как все это подключать ?

Require JS

Как обычно мы делаем

Require JS

Require JS

http://requirejs.org/

Require JS

AMD?

Require JS

Asynchronous Module Definition (AMD)

define(id?, dependencies?, factory)

Require JS

Подключаем Require JS

Require JS

Require JS

Как выглядит модуль?

Require JS

Как выглядит модуль?

Require JS

А есть еще CommonJS

Require JS

Плюсы?

1. Организация кода

2. Управление порядком загрузки

3. Вложенные зависимости

4. Отлично работает на NodeJs

5. Имплементация AMD (Asynchronous Module Definition) спецификации

Require JS

Минусы?

1. Если зависимостей много в них можно запутаться

Вопросы

Backbone JS

Что такое :

http://backbonejs.org/

Backbone JS

Backbone JS это:

1. Не фреймворк

2. Models, View, Collections and Events

3. И Router

4. И много-много JSON и REST

Backbone JS

Почему Backbone JS?

1. Потому что 6,5 kb

2. Не решает за меня как мне писать моё приложение

3. Не лезет в мой HTML

4. Есть расширения на все случаи жизни

5. Отлично документирован

6. НЕТ МАГИИ!!

7. There's More Than One Way To Do It

Backbone JS

Кто использует Backbone JS?

Backbone JS

Кто использует Backbone JS?

Backbone JS

Кто использует Backbone JS?

Backbone JS

Backbone JS это библиотека:

1. marionette.js

2. chaplin.js

3. vertebrae.js

4. backbone boilerplate

5. thorax

Backbone JS

Чего хочет Backbone:

1. underscore.js /lo-dash.js

2. json2.js для IE

3. jQuery / Zepto

Backbone JS

Как это работает?

Backbone JS

MODELS

Models are the heart of any JavaScriptapplication, containing the interactive data aswell as a large part of the logic surrounding it:conversions, validation, computed properties,and access control.

backbonejs.org/#Model

Backbone JS

Как создать модель?

Backbone JS

Создали, а что дальше?

Backbone JS

А изменить ?

Backbone JS

EVENTS

Hey, I've changed!

Backbone JS

Backbone JS

А можно и по другому:

Backbone JS

Готовим модель:

Backbone JS

Валидация:

Backbone JS

Валидация:

Backbone JS

URL, REST из коробки:

Backbone.sync

Backbone JS

URL, REST из коробки:

Backbone.sync

Backbone JS

Примеры:

1. Users

2. All pages

3. Latest news

Backbone JS

Как создать коллекцию:

Backbone JS

Получаем модели:

Backbone JS

Удаляем модели:

Backbone JS

Добавляем модели:

Backbone JS

Сортируем коллекцию:

Backbone JS

Сортируем коллекцию:

Backbone JS

VIEWS

Views are objects which do two things:

1. display data (most of the time models)

2. capture user interaction to trigger code.

Backbone JS

Создаем View

Backbone JS

Добавляем контент:

The view is just an empty div.

Backbone JS

Обновляем View вместе с моделью:

Backbone JS

Шаблоны:

Backbone JS

Backbone JS

Взаимодействие с пользователем:

Backbone JS

EVENTS

Hey, I`m back!

Backbone JS

Добавляем события в любой объект:

Backbone JS

ROUTER

Вопросы

Classes in JS

Есть ли класcы в JS?

- НЕТ!

Classes in JS

А можно сделать JS?

- ДА!

Classes in JS

А нужно ?

1. Наследование в JS это не удобно

2. ECMAScript 6 class && extends

3. Почему бы и нет?

Classes in JS

Classes in JS

Как?

js-toolbox

https://github.com/jimmydo/js-toolbox

Вопросы

Grunt JS

А давайте это все соберем в один маленький файлик?

Grunt JS

Проблемы в раю:

1. У нас есть SASS, у нас есть LESS И Stylus

2. А еще у нас 5 тысяч файлов суммарно на 50 мегабайт которые надо доставить клиенту, все исходники на CoffeScript

3. А еще мы а еще мы хотим чтобы это все собиралось автоматом на инстансах

Grunt JS

Grunt JS

Зачем?

1. Автоматизировать рутину

2. Помощь при деплое

3. Просто использовать

4. Есть много готовых плагинов

5. Популярен

Grunt JS

Установка

$npm install -g grunt-cli

$npm install grunt --save

Grunt JS

GRUNTFILE.JS

Grunt JS

GRUNTFILE.JS

Grunt JS

GRUNTFILE.JS

Grunt JS

$grunt

Grunt JS

Плагины:

Grunt JS

Кто использует:

Вопросы

Ссылочки

Bower презентация:• http://danheberden.com/presentations/bower

Bower• http://bower.io/

Require JS• http://requirejs.org/

Backbone• http://backbonejs.org/

JS-toolbox• https://github.com/jimmydo/js-toolbox

Grunt JS• http://gruntjs.com/

Мой Github:• https://github.com/AlexTiTanium

backbone-orm:• http://vidigami.github.io/backbone-orm/

rivetsjs• http://www.rivetsjs.com/

backbone.stickit• http://nytimes.github.io/backbone.stickit/

Marionette• http://marionettejs.com/

chaplinjs.org • http://chaplinjs.org/

Vertebrae • https://github.com/hautelook/vertebrae

Backbone-boilerplate:• https://github.com/backbone-boilerplate/backbone-boilerplate

Thorax• https://github.com/walmartlabs/thorax