Обзор библиотек и фреймворков JavaScript для разработки фронтэнд–, бэкэнд– и мобильных приложений. Уровень материала: для начинающих.

1. Full Stack
разработка
на
JavaScript

2. Архитектура веб–приложений
ТРАДИЦИОННЫЕ
AJAX
SPA
1995 2000 2005 2010

3. Архитектура веб–приложений
The Old School
КЛИЕНТ ВЕБ–СЕРВЕР
просто
HTML...
HTML ГЕНЕРАЦИЯ HTML
ОБРАБОТКА ДАННЫХ
БАЗА ДАННЫХ

4. Архитектура веб–приложений
A J A X
КЛИЕНТ ВЕБ–СЕРВЕР
HTML
+
JavaScript
HTML ГЕНЕРАЦИЯ HTML
ОБРАБОТКА
ДАННЫХ
БАЗА ДАННЫХ
ГЕНЕРАЦИЯ
HTML
ГЕНЕРАЦИЯ
HTML
HTML
HTML

5. Архитектура веб–приложений
SINGLE PAGE APPLICATION
КЛИЕНТ ВЕБ–СЕРВЕР
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
ОБРАБОТКА
ДАННЫХ
БАЗА ДАННЫХ
ПРОСТО
JSON
JSON
ПРОСТО JSON
ПРОСТО JSON
JSON
JSON

6. Архитектура веб–приложений
SPA = MVC + JSON + REST
CONTROLLER
VIEW
MODEL
{
event: 'встреча',
date: '2014-10-
30',
who: 'UfaDevCom'
}
HTTP GET
HTTP POST
HTTP PUT
HTTP DELETE

7. Коротко о JavaScript
Для тех, кто только что с бронепоезда
Простой синтаксис, похож на C, Java
Автоматическое приведение типов
Автоматическая сборка мусора
ООП без классов – прототипное наследование

8. Коротко о JavaScript
Асинхронность: удивительные вещи
for(var i=0; i<3; i++){
setTimeout(function(){
console.log(i);
}, 0);
}

9. Ресурсы для изучения
С чего начать?
Илья Кантор, Современный учебник JavaScript
http://learn.javascript.ru
Самоучитель HTML. Самоучитель CSS
http://htmlbook.ru

10. Ресурсы для изучения
Полезные книги

11. Пишем клиент
Зачем нужен фреймворк?
1.Грамотная структура приложения
2.Уже готовые типовые решения
3.Легко понять чужой код

12. Пишем клиент
CSS–фреймворки
B Bootstrap
бывший Twitter Bootsrap
Быстро накидать прототип интерфейса
Готовая адаптивность для всех экранов
Огромный выбор готовых дизайнов

13. Пишем клиент
Шаблонизаторы: из JSON в HTML
шаблон:
<div>
<h1>{{title}}</h1>
<div>
{{body}}
</div>
</div>
Главное:
мухи отдельно, котлеты отдельно
т.е. JavaScript и HTML
наш JSON:
{
title: 'Lorem Ipsum',
body: 'Dolores sit amet'
}
результат:
<div>
<h1>Lorem
Ipsum</h1>
<div>
Dolores sit amet
</div>
</div>

14. Пишем клиент
JQuery: работа с DOM
Отличная книга,
бесплатно:
$("body" ).html( "Hello, World!" );
Вообще–то необязательно, но с ним проще
Огромный парк готовых велосипедов

15. Пишем клиент
Most popular JavaScript frameworks

16. Пишем клиент
Backbone.js – простенько и со вкусом
Необходимый минимум:
– Router
– View
– Model
– Collection
Относительно легко изучить
Много книг, статей, примеров
Отличная книга,
рекомендую:

17. Пишем клиент
Когда Backone мало... Плагины и библиотеки
Проблема: Backbone слишком примитивен...
Доступно несколько сотен плагинов, дополняющих функционал Backbone:
– биндинг
– валидация
– Local Storage
и другие...

18. Пишем клиент
Следующая остановка: AngularJS
AngularJS комплексный фреймворк:
– поддержка модулей и зависимостей
– встроенный шаблонизатор
– биндинг и валидация
– иерархические представления
– средства unit–тестирования

19. Пишем сервер
node.js: асинхронность – главное оружие
Компиляция JavaScript в машинный код
Работа с файлами и базами данных
Неблокирующий ввод/вывод
var http = require('http'); // простейший веб–сервер
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');

20. Пишем сервер
фреймворки, библиотеки, шаблонизаторы
MVC фреймворки: Express, Sails.js
REST фреймворки: Restify
Шаблонизаторы: Jade, Hadlebars
Работа с БД: mysql, mongoose
и многие, многие другие...

21. Пишем мобильное приложение
От сайта для мобильных к мобильному приложению
мобильный браузер
модуль WebView
страница
HTML+CSS
+JavaScript
мобильное
приложение
модуль WebView
страница
HTML+CSS
+JavaScript

22. Пишем мобильное приложение
PhoneGap
Accelerometer
Camera
Compass
GeoLocation
Notification
Contacts
Files
Network
Storage
Media

23. Инструменты разработки
Хорошему танцору не помешает...
Sublime text

24. Что дальше?
О, сколько нам открытий чудных...
Синтаксический сахар: От JavaScript к CoffeeScript
Изоморфные фреймворки: Meteor.js, React.js
Лучший CSS: LESS, SASS
Инструменты сборки: grunt, gulp, bower

25. Олег Шерыхалин
o.sherykhalin@gmail.com
+7 9174277702
Skype: o.sherykhalin