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 описании документа;

• Шаблоны — фиксированный или резиновый шаблон документа;• Типографика — описания шрифтов, определение некоторых классов для

шрифтов таких как код, цитаты и т.п.;• Медиа — представляет возможности управления изображениями и видео;• Таблицы — средства оформления таблиц, вплоть до добавления

функциональности для обеспечения возможности сортировки;• Формы — классы для оформления не только форм, но и некоторых событий

происходящих с ними;• Навигация — классы оформления для вкладок, страниц, меню и панелей

инструментов;• Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

http://www.slideshare.net/IgorShkulipa

http://bootstrap-ru.com/


Компоненты Bootstrap

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


http://bootstrap-ru.com/components.php


Пример

<!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/


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":"[email protected]"

},

{

"name": "Petr",

"middle": "Petrovich",

"surname": "Petrov",

"email": "[email protected]"

},

{

"name": "Sidor",

"middle": "Sidorovich",

"surname": "Sidorov",

"email": "[email protected]"

},

];

}



Пример. 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


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: "[email protected]"

}

});

var PeopleList = Backbone.Collection.extend({

models: Persone

});

var People = new PeopleList([

new Persone({ name: "Ivan", middle: "Ivanovich",

surname: "Ivanov", email: "[email protected]" }),

new Persone({ name: "Petr", middle: "Petrovich",

surname: "Petrov", email: "[email protected]" }),

new Persone({ name: "Sidor", middle: "Sidorovich",

surname: "Sidorov", email: "[email protected]" })

]);



Пример. Модель и остальное

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


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", "[email protected]"),

new persone("Petr", "Petrovich", "Petrov", "[email protected]"),

new persone("Sidor", "Sidorovich", "Sidorov", "[email protected]")

])

}



Пример. 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/


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="[email protected]"},

new Persone{Name="Petr", Middle="Petrovich",

Surname="Petrov", Email="[email protected]"},

new Persone{Name="Sidor", Middle="Sidorovich",

Surname="Sidorov", Email="[email protected]"}

}};

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/


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

Education