C# Web. Занятие 16.

Темы лекции: Обзор веб-фреймворков.
Тренер: Игорь Шкулипа, к.т.н.
Разработка Веб-приложений на платформе
Microsoft .NET Framework.
Занятие 16

http://www.slideshare.net/IgorShkulipa 2
Bootstrap
http://bootstrap-ru.com/
Twitter Bootstrap - это фреймворк для создания современных, кросс-браузерных и
стандартизованных интерфейсов. Продуманная структура кода HTML, JavaScript
и CSS дает вам возможность создавать множество самых разнообразных
элементов интерфейса и сетку сайта.
Основные инструменты Bootstrap:
• Сетки — заранее заданные размеры колонок, которые можно сразу же
использовать, например ширина колонки 90px относится к классу .span2, который
мы можем использовать в CSS описании документа;
• Шаблоны — фиксированный или резиновый шаблон документа;
• Типографика — описания шрифтов, определение некоторых классов для
шрифтов таких как код, цитаты и т.п.;
• Медиа — представляет возможности управления изображениями и видео;
• Таблицы — средства оформления таблиц, вплоть до добавления
функциональности для обеспечения возможности сортировки;
• Формы — классы для оформления не только форм, но и некоторых событий
происходящих с ними;
• Навигация — классы оформления для вкладок, страниц, меню и панелей
инструментов;
• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

Компоненты Bootstrap
Все компоненты Bootstrap

Пример
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, World from Bootstrap</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Hello from Tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Hello from Tab 2</p>
</div>
</div>
</div>
</body>
</html>

Результат

AngularJS
AngularJS — JavaScript-фреймворк с открытым исходным кодом.
Предназначен для разработки одностраничных приложений. Его цель
— расширение браузерных приложений на основе MVC шаблона, а
также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные
пользовательские атрибуты, которые описываются директивами, и
связывает ввод или вывод области страницы с моделью,
представляющей собой обычные переменные JavaScript. Значения
этих переменных задаются вручную или извлекаются из статических
или динамических JSON-данных.
AngularJS спроектирован с убеждением, что декларативное
программирование лучше всего подходит для построения
пользовательских интерфейсов и описания программных
компонентов, в то время как императивное программирование
отлично подходит для описания бизнес-логики. Фреймворк
адаптирует и расширяет традиционный HTML, чтобы обеспечить
двустороннюю привязку данных для динамического контента, что
позволяет автоматически синхронизировать модель и представление.
В результате AngularJS уменьшает роль DOM-манипуляций и улучшает
тестируемость.

Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-
теги и атрибуты, чтобы добавить поведение некоторым элементам.
• ng-app - объявляет элемент корневым для приложения.
• ng-bind - автоматически заменяет текст HTML-элемента на значение
переданного выражения.
• ng-model - то же что и ng-bind, только обеспечивает двустороннее
связывание данных. Изменится содержимое элемента, ангуляр изменит
и значение модели. Изменится значение модели, ангуляр изменит
текст внутри элемента.
• ng-class - определяет классы для динамической загрузки.
• ng-controller - определяет JavaScript-контроллер для вычисления
HTML-выражений.
• ng-repeat - создает экземпляр для каждого элемента из коллекции.

Популярные Angular-директивы
• ng-show и ng-hide - показывает или скрывает элемент в зависимости
от значения логического выражения.
• ng-switch - создает экземпляр шаблона из множества вариантов, в
зависимости от значения выражения.
• ng-view - базовая директива, отвечает за обработку маршрутов,
которые принимают JSON перед отображением шаблонов,
управляемых указанными контроллерами.

Ссылки
http://angular.ru
http://habrahabr.ru/hub/angularjs/
http://metanit.com/web/angular/

Пример. Контроллеры (они же модели)
function HelloWorldController($scope) {
$scope.message = "Hello, World from AngularJS";
}
function PeopleController($scope) {
$scope.people = [
{
"name": "Ivan",
"middle":"Ivanovich",
"surname": "Ivanov",
"email":"ivan@ivanov.com"
},
{
"name": "Petr",
"middle": "Petrovich",
"surname": "Petrov",
"email": "petr@petrov.com"
},
{
"name": "Sidor",
"middle": "Sidorovich",
"surname": "Sidorov",
"email": "sidor@sidorov.com"
},
];
}

Пример. HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Example</title>
<script src="js/angular.min.js"></script>
<script src="js/mc.js"></script>
</head>
<body>
<h1 ng-controller="HelloWorldController">{{message}}</h1>
<ul ng-controller="PeopleController">
<li ng-repeat="per in people">
{{per.name}} {{per.middle}} {{per.surname}}
 - <strong>{{per.email}}</strong>
</li>
</ul>
</body>
</html>

Результат

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.

Каталог встроенных событий
• "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) — когда модель была успешно синхронизирована с
сервером.

Каталог встроенных событий
• "error" (model, xhr, options) — когда вызов save провалился на
сервере.
• "invalid" (model, error, options) — модель не прошла валидацию на
клиенте.
• "route:[name]" (params) — когда один конкретный роут находит
соответствие.
• "route" (router, route, params) — когда любой из роутов находит
соответствие.
• "all" — это специальное событие срабатывает каждый раз, когда
срабатывает любое событие, передавая имя события первым
аргументом.

Backbone.Model
Модели содержат как интерактивные данные, так и большую часть
соответствующей логики: конвертации, валидации, вычисленные
свойства и контроль доступа.
Вы расширяете Backbone.Model методами своей предметной области, а
Model предоставляет базовый набор функциональности по управлению
изменениями.

Ссылки
http://backbonejs.org/
http://backbonejs.ru/
http://habrahabr.ru/post/127049/
https://github.com/kulakowka/Backbone.js-Russian

Пример. Заголовок
<!DOCTYPE html>
<html>
<head>
<title>BackboneJS Example</title>
<link href="css/bootstrap.css" rel="stylesheet"
media="screen">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
</head>
<body>
<h1>Hello, World from BackboneJS</h1>
<div id="maindiv">
</div>

Пример. Шаблон представления
<script type="text/template" id="maintemplate">
<ul>
<% People.each( function(per) { %>
<li>
<%= per.get("name") %> 
<%= per.get("middle") %> 
<%= per.get("surname") %> -<strong>
<%= per.get("email") %></strong>
</li>
<% }); %>
</ul>
</script>

Пример. Модель и остальное
<script type="text/javascript">
var Persone = Backbone.Model.extend({
defaults: {
name: "Name",
middle: "Middle",
surname: "Surname",
email: "address@domain.com"
}
});
var PeopleList = Backbone.Collection.extend({
models: Persone
});
var People = new PeopleList([
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" })
]);

Пример. Модель и остальное
var MainView = Backbone.View.extend({
el: "#maindiv",
initialize: function () {
this.render();
},
render: function () {
var templ = _.template($("#maintemplate").html(),
{ People: People.models });
$("#maindiv").html(templ);
return this;
}
});
var mv = new MainView();
</script>
</body>
</html>

Результат

KnockoutJS
Knockout использует архитектуру (MVVM) Модель - Представление -
Модель представления.
Элементы страницы, из которых она будет состоять, могут быть
помещены в представление.
Сами данные, которые будут отображаться, могут быть представлены в
модели.
Третий компонент, модель представления, - это по сути состояние
интерфейса в данный момент времени (комбинация данных и
представления с уже применёнными интерактивными элементами).

Ссылки
http://knockoutjs.com/
https://github.com/knockout/knockout

Пример. ViewModel
function persone(nam, mid, surn, em) {
this.name = ko.observable(nam);
this.middle = ko.observable(mid);
this.surname = ko.observable(surn);
this.email = ko.observable(em);
this.fullname = ko.pureComputed({
read: function () {
return this.name() + " " +
this.middle() + " " +
this.surname();
},
write: function (value) {
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));
}
},
owner: this
});
return this;
}

Пример. ViewModel
var HelloWorldViewModel = {
message: "Hello, World from KnockoutJS",
people: ko.observableArray([
new persone("Ivan", "Ivanovich", "Ivanov", "ivan@ivanov.com"),
new persone("Petr", "Petrovich", "Petrov", "petr@petrov.com"),
new persone("Sidor", "Sidorovich", "Sidorov", "sidor@sidorov.com")
])
}

Пример. HTML
<!DOCTYPE html>
<html>
<head>
<title>KnockoutJS Example</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/knockout-3.2.0.js"></script>
<script type="text/javascript" src="js/mc.js"></script>
</head>
<body>
<h1 data-bind="text:HelloWorldViewModel.message" ></h1>
<table>
<thead>
<tr><th>Name</th><th>Middle</th><th>Surname</th>
<th>E-Mail</th><th>Full Name</th></tr>
</thead>
<tbody data-bind="foreach: HelloWorldViewModel.people">
<tr>
<td><input data-bind="value: name"/></td>
<td><input data-bind="value: middle"/></td>
<td><input data-bind="value: surname"/></td>
<td><input data-bind="value: email"/></td>
<td><input data-bind="value: fullname"/></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
ko.applyBindings(HelloWorldViewModel);
</script>
</body>
</html>

Результат

Knockout в MVC проекте
http://knockoutmvc.com/

KnockoutMVC

Пример. Скрипты
@Scripts.Render("~/Scripts/jquery-2.1.1.min.js")
@Scripts.Render("~/Scripts/knockout-3.1.0.js")
@Scripts.Render("~/Scripts/knockout.mapping-latest.js")
@Scripts.Render("~/Scripts/perpetuum.knockout.js")

Пример. Модель
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; }
}

Пример. Контроллер
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);
}
...
}

Пример. Представление
@model KnockoutMVC.Controllers.HelloWorldViewModel
@using PerpetuumSoft.Knockout
@{
ViewBag.Title = "KnockoutMVC Example";
}
@{
var ko = Html.CreateKnockoutContext();
}
<h1>@ko.Html.Span(m => m.Message)</h1>
<div>
<table style="width:100%">
<thead>
<tr><th>Name</th><th>Middle</th><th>Surname</th
>
<th>E-Mail</th><th>Full Name</th></tr>
</thead>

Пример. Представление
<tbody>
@using (var people = ko.Foreach(m => m.People))
{
<tr>
<td style="width:20%">
@people.Html.TextBox(per => per.Name,
new { style = "width:auto" })</td>
@people.Html.TextBox(per => per.Middle,
@people.Html.TextBox(per => per.Surname,
@people.Html.TextBox(per => per.Email,
@people.Html.TextBox(per => per.FullName,
</tr>
}
</tbody>
</table></div>
@ko.Apply(Model)

Результат

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 является предложить «простой
способ построения масштабируемых сетевых серверов».

Ссылки
http://nodejs.org/
http://www.nodebeginner.ru/

Пример. Самый простой сервер
var http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, { “Content-Type”: “text/plain” });
response.end("Hello, World from NodeJS");
}).listen(12345);

Пример. Сервер немного сложнее
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);

Пример. Сервер еще немного сложнее
var fs = require("fs");
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>

Пример. Сервер еще чуть-чуть сложнее
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>
</head>
<body>
<h1>Hello, World from NodeJS</h1>
</body>
</html>
Index2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello, World from NodeJS and Index2</h1>
</body>
</html>

Результат

C# Web. Занятие 16.

More Related Content

What's hot

Viewers also liked

Similar to C# Web. Занятие 16.

More from Igor Shkulipa

C# Web. Занятие 16.