1. Темы лекции: Обзор веб-фреймворков.
Тренер: Игорь Шкулипа, к.т.н.
Разработка Веб-приложений на платформе
Microsoft .NET Framework.
Занятие 16
2. http://www.slideshare.net/IgorShkulipa 2
Bootstrap
http://bootstrap-ru.com/
Twitter Bootstrap - это фреймворк для создания современных, кросс-браузерных и
стандартизованных интерфейсов. Продуманная структура кода HTML, JavaScript
и CSS дает вам возможность создавать множество самых разнообразных
элементов интерфейса и сетку сайта.
Основные инструменты Bootstrap:
• Сетки — заранее заданные размеры колонок, которые можно сразу же
использовать, например ширина колонки 90px относится к классу .span2, который
мы можем использовать в CSS описании документа;
• Шаблоны — фиксированный или резиновый шаблон документа;
• Типографика — описания шрифтов, определение некоторых классов для
шрифтов таких как код, цитаты и т.п.;
• Медиа — представляет возможности управления изображениями и видео;
• Таблицы — средства оформления таблиц, вплоть до добавления
функциональности для обеспечения возможности сортировки;
• Формы — классы для оформления не только форм, но и некоторых событий
происходящих с ними;
• Навигация — классы оформления для вкладок, страниц, меню и панелей
инструментов;
• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.
6. http://www.slideshare.net/IgorShkulipa 6
AngularJS
AngularJS — JavaScript-фреймворк с открытым исходным кодом.
Предназначен для разработки одностраничных приложений. Его цель
— расширение браузерных приложений на основе MVC шаблона, а
также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные
пользовательские атрибуты, которые описываются директивами, и
связывает ввод или вывод области страницы с моделью,
представляющей собой обычные переменные JavaScript. Значения
этих переменных задаются вручную или извлекаются из статических
или динамических JSON-данных.
AngularJS спроектирован с убеждением, что декларативное
программирование лучше всего подходит для построения
пользовательских интерфейсов и описания программных
компонентов, в то время как императивное программирование
отлично подходит для описания бизнес-логики. Фреймворк
адаптирует и расширяет традиционный HTML, чтобы обеспечить
двустороннюю привязку данных для динамического контента, что
позволяет автоматически синхронизировать модель и представление.
В результате AngularJS уменьшает роль DOM-манипуляций и улучшает
тестируемость.
7. http://www.slideshare.net/IgorShkulipa 7
Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-
теги и атрибуты, чтобы добавить поведение некоторым элементам.
• ng-app - объявляет элемент корневым для приложения.
• ng-bind - автоматически заменяет текст HTML-элемента на значение
переданного выражения.
• ng-model - то же что и ng-bind, только обеспечивает двустороннее
связывание данных. Изменится содержимое элемента, ангуляр изменит
и значение модели. Изменится значение модели, ангуляр изменит
текст внутри элемента.
• ng-class - определяет классы для динамической загрузки.
• ng-controller - определяет JavaScript-контроллер для вычисления
HTML-выражений.
• ng-repeat - создает экземпляр для каждого элемента из коллекции.
8. http://www.slideshare.net/IgorShkulipa 8
Популярные Angular-директивы
• ng-show и ng-hide - показывает или скрывает элемент в зависимости
от значения логического выражения.
• ng-switch - создает экземпляр шаблона из множества вариантов, в
зависимости от значения выражения.
• ng-view - базовая директива, отвечает за обработку маршрутов,
которые принимают JSON перед отображением шаблонов,
управляемых указанными контроллерами.
13. http://www.slideshare.net/IgorShkulipa 13
BackboneJS
BackboneJS — JavaScript-библиотека, основанная на шаблоне
проектирования Model-View-Presenter (MVP), предназначена для
разработки веб-приложений с поддержкой RESTful JSON интерфейса.
Backbone — очень лёгкая библиотека (упакованная и gzip-сжатая 6.3 Кб),
но для работы необходима библиотека Underscore.js, а для
поддержки REST API и работы с DOM элементами рекомендуется
подключить jQuery-подобную библиотеку: jQuery или Zepto.
Backbone.js создан Джереми Ашкенасом, который известен также как
создатель CoffeeScript.
Проект размещается на GitHub, с доступным аннотированным исходным
кодом, с онлайновыми тестами с примером приложения, со списком
туториалов и списком реальных проектов, которые используют
Backbone. Backbone доступен под лицензией MIT.
14. http://www.slideshare.net/IgorShkulipa 14
Каталог встроенных событий
• "add" (model, collection, options) — когда модель добавляется в коллекцию.
• "remove" (model, collection, options) — когда модель удаляется из коллекции.
• "reset" (collection, options) — когда всё содержимое коллекции заменяется.
• "sort" (collection, options) — когда коллекция была отсортирована.
• "change" (model, options) — когда атрибут модели меняется.
• "change:[attribute]" (model, value, options) — когда меняется конкретный
атрибут модели.
• "destroy" (model, collection, options) — когда модель уничтожена.
• "request" (model, xhr, options) — когда модель (или коллекция) отправляет
запрос на сервер.
• "sync" (model, resp, options) — когда модель была успешно синхронизирована с
сервером.
15. http://www.slideshare.net/IgorShkulipa 15
Каталог встроенных событий
• "error" (model, xhr, options) — когда вызов save провалился на
сервере.
• "invalid" (model, error, options) — модель не прошла валидацию на
клиенте.
• "route:[name]" (params) — когда один конкретный роут находит
соответствие.
• "route" (router, route, params) — когда любой из роутов находит
соответствие.
• "all" — это специальное событие срабатывает каждый раз, когда
срабатывает любое событие, передавая имя события первым
аргументом.
16. http://www.slideshare.net/IgorShkulipa 16
Backbone.Model
Модели содержат как интерактивные данные, так и большую часть
соответствующей логики: конвертации, валидации, вычисленные
свойства и контроль доступа.
Вы расширяете Backbone.Model методами своей предметной области, а
Model предоставляет базовый набор функциональности по управлению
изменениями.
23. http://www.slideshare.net/IgorShkulipa 23
KnockoutJS
Knockout использует архитектуру (MVVM) Модель - Представление -
Модель представления.
Элементы страницы, из которых она будет состоять, могут быть
помещены в представление.
Сами данные, которые будут отображаться, могут быть представлены в
модели.
Третий компонент, модель представления, - это по сути состояние
интерфейса в данный момент времени (комбинация данных и
представления с уже применёнными интерактивными элементами).
33. http://www.slideshare.net/IgorShkulipa 33
Пример. Модель
public class Persone {
public string Name { get; set; }
public string Middle { get; set; }
public string Surname { get; set; }
public string Email { get; set; }
public string FullName {
get {
return Name + " " + Middle + " " + Surname;
}
set {
var iFirstSpace = value.IndexOf(" ");
var iSecondSpace = value.LastIndexOf(" ");
if ((iFirstSpace > 0) && (iSecondSpace > 0))
{
this.Name = value.Substring(0, iFirstSpace);
this.Middle = value.Substring(iFirstSpace + 1,
iSecondSpace);
this.Surname = value.Substring(iSecondSpace + 1);
} } } }
public class HelloWorldViewModel {
public string Message { get; set; }
public List<Persone> People { get; set; }
}
34. http://www.slideshare.net/IgorShkulipa 34
Пример. Контроллер
public class HomeController : Controller
{
public static HelloWorldViewModel ViewModel = new HelloWorldViewModel
{
Message = "Hello, World from KnockoutMVC",
People =new List<Persone>{
new Persone{Name="Ivan", Middle="Ivanovich",
Surname="Ivanov", Email="ivan@ivanov.com"},
new Persone{Name="Petr", Middle="Petrovich",
Surname="Petrov", Email="petr@petrov.com"},
new Persone{Name="Sidor", Middle="Sidorovich",
Surname="Sidorov", Email="sidor@sidorov.com"}
}};
public ActionResult Index()
{
return View(ViewModel);
}
...
}
38. http://www.slideshare.net/IgorShkulipa 38
NodeJS
Node или Node.js — программная платформа, основанная на движке V8
(транслирующем JavaScript в машинный код), превращающая JavaScript из
узкоспециализированного языка в язык общего назначения.
Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-
вывода через свой API (написанный на C++), подключать другие внешние
библиотеки, написанные на разных языках, обеспечивая вызовы к ним из
JavaScript-кода.
Node.js применяется преимущественно на сервере, выполняя роль веб-сервера, но
есть возможность разрабатывать на Node.js и десктопные оконные приложения
(при помощи node-webkit и AppJS для Linux, Windows и Mac OS) и даже
программировать микроконтроллеры (например, tessel и espruino). В основе
Node.js лежит событийно-ориентированное и асинхронное (или реактивное)
программирование с неблокирующим вводом/выводом.
Node разработал Райан Дал (англ. Ryan Dahl) в 2009 году после двух лет
экспериментирования над созданием серверных веб-компонентов. В ходе своих
исследований он пришёл к выводу, что вместо традиционной модели
параллелизма на основе потоков следует обратиться к событийно-
ориентированным системам. Эта модель была выбрана из-за простоты, низких
накладных расходов (по сравнению с идеологией «один поток на каждое
соединение») и быстродействия. Целью Node является предложить «простой
способ построения масштабируемых сетевых серверов».
40. http://www.slideshare.net/IgorShkulipa 40
Пример. Самый простой сервер
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/plain” });
response.end("Hello, World from NodeJS");
}).listen(12345);
41. http://www.slideshare.net/IgorShkulipa 41
Пример. Сервер немного сложнее
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/html” });
response.write("<!DOCTYPE html><html><head>");
response.write("<title>"+"NodeJS Example"+"</title>");
response.write("</head><body>");
response.write("<h1>"+"Hello, World from NodeJS"+"</h1>");
response.end("</body></html>");
}).listen(12345);
42. http://www.slideshare.net/IgorShkulipa 42
Пример. Сервер еще немного сложнее
var http = require("http");
var fs = require("fs");
http.createServer(function (request, response) {
var index = fs.readFileSync("./index.html");
response.writeHead(200,
{ “Content-Type”: “text/html” });
response.end(index);
}).listen(12345);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
43. http://www.slideshare.net/IgorShkulipa 43
Пример. Сервер еще чуть-чуть сложнее
var http = require("http");
var url = require("url");
var fs = require("fs");
function Respond(request, response) {
var pathname = url.parse(request.url).pathname;
var index = fs.readFileSync("./" + pathname);
response.writeHead(200, { “Content-Type”: “text/html” });
response.end(index);
}
http.createServer(Respond).listen(12345);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
Index2.html
<!DOCTYPE html>
<html>
<head>
<title>NodeJS Example</title>
</head>
<body>
<h1>Hello, World from NodeJS and Index2</h1>
</body>
</html>