Embed Size (px)
Citation preview
разработка на
JavaScript
Full Stack
Архитектура веб–приложений
ТРАДИЦИОННЫЕ
AJAX
SPA
1995 2000 2005 2010
Архитектура веб–приложений
The Old School
просто
HTML...
КЛИЕНТ ВЕБ–СЕРВЕР
БАЗА ДАННЫХ
ОБРАБОТКА ДАННЫХ
ГЕНЕРАЦИЯ HTMLHTML
Архитектура веб–приложений
A J A X
HTML
+
JavaScript
КЛИЕНТ ВЕБ–СЕРВЕР
БАЗА ДАННЫХ
ОБРАБОТКА
ДАННЫХ
ГЕНЕРАЦИЯ HTMLHTML
ГЕНЕРАЦИЯ HTML
ГЕНЕРАЦИЯ HTML
HTML
HTML
Архитектура веб–приложений
SINGLE PAGE APPLICATION
JavaScriptJavaScriptJavaScript
JavaScript
JavaScript
JavaScript
КЛИЕНТ ВЕБ–СЕРВЕР
БАЗА ДАННЫХ
ОБРАБОТКА
ДАННЫХ
ПРОСТО JSON
JSON
ПРОСТО JSON
ПРОСТО JSON
JSON
JSON
Архитектура веб–приложений
SPA = MVC + JSON + REST
VIEW
CONTROLLER
MODEL
{
event: 'встреча',
date: '2014-10-
30',
who: 'UfaDevCom'
}
HTTP GET
HTTP POST
HTTP PUT
HTTP DELETE
Коротко о JavaScript
Для тех, кто только что с бронепоезда
Простой синтаксис, похож на C, Java
Автоматическое приведение типов
Автоматическая сборка мусора
ООП без классов – прототипное наследование
Коротко о JavaScript
Асинхронность: удивительные вещи
for(var i=0; i<3; i++){
setTimeout(function(){
console.log(i);
}, 0);
}
Ресурсы для изучения
С чего начать?
Илья Кантор, Современный учебник JavaScript
http://learn.javascript.ru
Самоучитель HTML. Самоучитель CSS
http://htmlbook.ru
Ресурсы для изучения
Полезные книги
Пишем клиент
Зачем нужен фреймворк?
1.Грамотная структура приложения
2.Уже готовые типовые решения
3.Легко понять чужой код
Пишем клиент
CSS–фреймворки
B Bootstrapбывший Twitter Bootsrap
Быстро накидать прототип интерфейса
Готовая адаптивность для всех экранов
Огромный выбор готовых дизайнов
Пишем клиент
Шаблонизаторы: из JSON в HTML
шаблон:
<div>
<h1>{{title}}</h1>
<div>
{{body}}
</div>
</div>
наш JSON:
{
title: 'Lorem Ipsum',
body: 'Dolores sit amet'
}
результат:
<div>
<h1>Lorem
Ipsum</h1>
<div>
Dolores sit amet
</div>
</div>
Главное:
мухи отдельно, котлеты отдельно
т.е. JavaScript и HTML
Пишем клиент
JQuery: работа с DOM
Отличная книга,
бесплатно:
Вообще–то необязательно, но с ним проще
Огромный парк готовых велосипедов
$("body" ).html( "Hello, World!" );
Пишем клиент
Most popular JavaScript frameworks
Пишем клиент
Backbone.js – простенько и со вкусом
Необходимый минимум:
– Router
– View
– Model
– Collection
Относительно легко изучить
Много книг, статей, примеров
Отличная книга,
рекомендую:
Пишем клиент
Когда Backone мало... Плагины и библиотеки
Проблема: Backbone слишком примитивен...
Доступно несколько сотен плагинов, дополняющих функционал Backbone:
– биндинг
– валидация
– Local Storage
и другие...
Пишем клиент
Следующая остановка: AngularJS
AngularJS комплексный фреймворк:
– поддержка модулей и зависимостей
– встроенный шаблонизатор
– биндинг и валидация
– иерархические представления
– средства unit–тестирования
Пишем сервер
node.js: асинхронность – главное оружие
Компиляция JavaScript в машинный код
Работа с файлами и базами данных
Неблокирующий ввод/вывод
var http = require('http'); // простейший веб–сервер
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
Пишем сервер
фреймворки, библиотеки, шаблонизаторы
MVC фреймворки: Express, Sails.js
REST фреймворки: Restify
Шаблонизаторы: Jade, Hadlebars
Работа с БД: mysql, mongoose
и многие, многие другие...
Пишем мобильное приложение
От сайта для мобильных к мобильному приложению
мобильный браузер
модуль WebView
страница
HTML+CSS
+JavaScript
мобильное
приложение
модуль WebView
страница
HTML+CSS
+JavaScript
Пишем мобильное приложение
PhoneGap
Accelerometer
Camera
Compass
GeoLocation
Notification
Contacts
Files
Network
Storage
Media
Инструменты разработки
Хорошему танцору не помешает...
Sublime text
Что дальше?
О, сколько нам открытий чудных...
Синтаксический сахар: От JavaScript к CoffeeScript
Изоморфные фреймворки: Meteor.js, React.js
Лучший CSS: LESS, SASS
Инструменты сборки: grunt, gulp, bower
