KnockoutJS com ASP.NET MVC 3: Utilização na vida real

Marco André Silva

http://netponto.org28ª Reunião Lisboa - 21/04/2012

Patrocinadores desta reunião

Marco André Silva• Consultor Sénior na |create|it|, uma empresa

especializada na área de soluções colaborativas e integração de sistemas.

• Actualmente é responsável pela área de soluções da|create|it|, desenvolvendo também aplicações baseadas em SharePoint, ASP.NET, WCF e outras tecnologias Microsoft.

• Os seus principais interesses são o desenvolvimento de arquitecturas de serviços e interfaces ricas

Agenda

• ASP.NET MVC 3• Knockout JS• Demo – Knockout O Essencial• Integração Knockout JS com ASP.NET MVC 3• Demo – Knockout JS com ASP.NET MVC 3• Experiência de utilização• O futuro• Conclusões

Contexto• Projecto com 6 pessoas

• + 1 ano

• Aplicação Web

• Volume elevado de informação a apresentar

• Experiência de utilização similar a aplicação nativa

• Desafios de usabilidade e interacção com a aplicação

• Facilidade de manutenção e evolução da aplicação

Reflecte a nossa experiência e melhores práticas e não uma verdade universal

ASP.NET MVC 3 - Introdução• Browser faz pedido (GET) a URL

• Rota é determinada

• Controlador é instanciado

• Acção de controlador é invocada

• Controlador processa pedido e retorna modelo para a vista

• Vista (HTML) é elaborada com base no modelo

Model

View Controller

Knockout JS (KO JS) - Introdução• Biblioteca JavaScript Open source

• Funciona do lado do cliente (browser), e promover interactividade

• Padrão MVVM – Separar lógica de negócio de interface

• Suporte para vários browsers

• Não existem event handlers de JavaScript/Jquery. Existe sim, JavaScript object-oriented e bindings declarativos

• Binding automático em dois sentidos:– Da interface para o modelo– Do modelo para a interface

• Calculo automático de dependências

• Suporte para templating

• Diversos tipos de bindings out-of-box com possibilidade de implementar custom bindings

• Desenvolvido e mantido por Steve Sanderson, colaborador da Microsoft, mas o KO é um projecto pessoal e open-source

• Versão actual 2.0. Versão 2.1 a caminho.

Knockout JS - MVVM• Informação importada do Modelo para o

ViewModel

• Quando a informação do ViewModel é actualizada é exportada de volta para o Modelo

• Quando a informação do ViewModel é actualizada, a Vista é automaticamente actualizada

• Quando a informação da Vista é alterada, o ViewModel é automaticamente alterado

Model

View ViewModel

Knockout JS – Data Binding - ConceitoView Model

Data BindingView Model

Knockout JS – Data Binding - Exemplo // ViewModelvar cartLineViewModel = { category: ‘Ships’, product: ‘The Titanic’, quantity: 123};

// View -> Data BindingThe category is <span data-bind=“text: category” />

// Activar KOko.applyBindings(cartLineViewModel);

Knockout JS – ObservablesActualização automática da UI

// ViewModelvar cartLineViewModel = { category: ko.observable(‘Ships’), product: ko.observable(‘The Titanic’), quantity: ko.observable(123)};

// View -> Data BindingThe category is <span data-bind=“text: category” /> The category is <input data-bind=“value: category” />

// Activar KOko.applyBindings(cartLineViewModel);

Knockout JS – Computed ObservablesCalculo Automático de Dependências

// ViewModelvar cartLineViewModel = { … subtotal: ko.computed(function() { return this.product().price * this.quantity(); }, this);};

// View -> Data BindingThe sub total is <span data-bind=“text: subtotal” />

// Activar KOko.applyBindings(cartLineViewModel);

Knockout JS – Observable Arrays// ViewModelvar cartViewModel = { … lines: ko.observableArray([cartLineViewModel]);};

// View -> Data Binding…<tbody data-bind=“foreach: lines”>…</tbody>

// Activar KOko.applyBindings(cartViewModel);

Knockout JS – Form Bindings// ViewModelvar cartViewModel = { … this.lines = ko.observableArray([cartLineViewModel]); this.addLine = function(){this.lines.push(new CartLine())}; this.removeLine = function(line){this.lines.remove(line)};};

// View -> Data Binding…<tbody data-bind=“foreach: lines”>… <td> <a href='#' data-bind=“click: $parent.removeLine”>Remove</a> </td></tbody><button data-bind=“click: addLine”>Add product</button>

// Activar KOko.applyBindings(cartViewModel);

Knockout JS – Ler e Gravar• Formato dados: JSON• $.ajax

• Gravar – Conversão de viewModel para JSON

• ko.toJSON ou• Mapping plugin

– $.ajax(urlGravar, JSON)– ko.toJSON também útil para fazer debug

• Ler– JSON = $.ajax(urlObter)– Criar / Actualizar viewModel

• Manual ou• Mapping Plugin

• Mapping Plugin– Biblioteca separada– Converte “cegamente” propriedades em Observables, e arrays em ObservableArrays– Ler:

• ko.mapping.fromJS / fromJSON

– Gravar:• ko.mapping.toJS / toJSON

Knockout JS – O essencial

demonstração

Resumo KO JS• MVVM:

– View (HTML) / ViewModel (JavaScript) / Model (JavaScript)

• Conceito observable– Calculo automático de dependências

• Conceito de bindings:– Declarativos– Sincronização modelo UI automático

• Funções JavaScript para responder a bindings:– Validações– Lógica de negócio

• Controlo de Fluxo:– Foreach– if

• Formato JSON para leitura / gravação (interacção com o servidor)

KO JS - Integração com ASP.NET MVC 3

KO JS - Integração com ASP.NET MVC 3

• Paradigma diferente do desenvolvimento MVC normal:– Geração da página no cliente em vez de no servidor

– View Models desenhados de forma diferente a pensar no cliente

– Lógica de negócio no cliente

KO JS - Integração com ASP.NET MVC 3

• Inclusão referência:– <script type='text/javascript' src='knockout.js'></script>

• Estruturação de Views e inclusão de JavaScripts

• Models MVC Models Knockout JS– Geração de modelos JavaScript Leitura– Resultados de acções em formato JSON Leitura

• Models Knockout JS Models MVC– Model Binding MVC 3 a partir de JSON Gravação

• Elaboração de Views– Model Validation & Data Annotations

• Alternativa: Utilização de HTML Helpers

KO JS – MVC 3Estruturação de Views e JavaScriptMVC View// View model (se necessário)@model CartViewModel

// KO JS references<script src="@Url.Content("~/Scripts/Knockoutjs/knockout-latest.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/Knockoutjs/knockout.mapping-latest.js")" type="text/javascript"></script>…// View scripts@section Scripts{ // Passagem de parâmetros para JavaScript <script language="javascript" type="text/javascript"> var settings = { urlSave: '@Url.Action(“Save", “Cart")’, urlGet: '@Url.Action(“Get", “Cart")’, id: @Model.Id // Se existir View Model }; </script>

// KO JS ViewModel <script src="@Url.Content("~/Scripts/App/Cart.js")” type="text/javascript"></script>}

JavaScript // KO JS ViewModel var cartViewModel = { serverModel: {} }

KO JS – MVC 3Models MVC Models KO – Geração inline na vista MVCMVC View// View model (necessário!!!)@model CartViewModel…// View scripts@section Scripts{ // Passagem de parâmetros para JavaScript <script language="javascript" type="text/javascript"> var settings = { … // Geração de modelo JavaScript a partir de classe de modelo MVC clientModel: @(Html.InterpretJson(Model)) }; </script>

// KO JS ViewModel <script src="@Url.Content("~/Scripts/App/Cart.js")” type="text/javascript"> </script>}

JavaScript // Gerar Client Model a partir do model contido na página cartViewModel.serverModel = ko.mapping.fromJSON(serverModel);

KO JS – MVC 3Models MVC Models KO – Resultado de acção em formato JSONMVC View…// View scripts@section Scripts{ // Passagem de parâmetros para JavaScript <script language="javascript" type="text/javascript"> var settings = { … }; </script>

// KO JS ViewModel <script src="@Url.Content("~/Scripts/App/Cart.js")” type="text/javascript"></script>}

JavaScript // Dialogo de aguarde ToggleLoadingDialog();

// Obter model do servidor Acção Get do controlador var serverModel = GetServerModel();

// Gerar Client Model a partir de model do servidor cartViewModel.serverModel = ko.mapping.fromJSON( serverModel);

MVC Controllerpublic ActionResult Edit(int id){ // Retornar vista Pode ter modelo (tipicamente simples), ou ser apenas HTML markup return View(); }

public ActionResult Get(int id){ // Criar modelo CartViewModel viewModel = BuildViewModel( id);

// Retornar modelo em JSON return Json(viewModel); }

KO JS – MVC 3Models KO Models MVC – Model Binding MVC 3 a partir de JSONJavaScript var cartViewModel = { save: function() { // Validar página / modelo … // Dialogo de aguarde ToggleLoadingDialog();

// Submeter pedido de gravação ao servidor $.ajax(ko.mapping.toJSON( cartViewModel.serverModel);

MVC Controller[HttpPost]public ActionResult Save(Cart cart){ // Gravar Repository.Save(cart);

// Retornar resultado relevante da acção return Json(result);}

Model Classpublic class Cart{ // Cart lines public List<CartLine> Lines { get; set; } }

public class CartLine{ public string Category { get; set; } public string Product { get; set; } public int Quantity { get; set; } public int SubTotal { get; set; }}

KO JS – MVC 3Elaboração de ViewsMVC View@model CartViewModel…// Percorrer cada linha <tbody data-bind='foreach: cartViewModel.serverModel.Lines'> … // Com o produto da linha <td class='price' data-bind='with: Product'> // Produto tem preço <span data-bind='text: formatCurrency(price)'> </span> </td> // Se a linha tiver um produto, mostrar quantidade. Incluir validações <td class='quantity'> <input name="@Html.NameFor(m => m.Product.Quantity)" data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"' @Html.ValidationAttributesFor(m => m.Product.Quantity) /> @Html.ValidationMessageFor(m => m.Product.Quantity) </td> // Se a linha tiver um produto, mostrar subtotal <td class='price'> <span data-bind='visible: product, text: formatCurrency(subtotal())' > </span> </td> // Link para remover linha de produto. Chama função do view model <td> <a href='#' data-bind='click: $parent.removeLine'>Remove</a> </td> …</tbody>…// Botões de acção. Chamam funções do view Model <button data-bind='click: addLine'>Add product</button><button data-bind='click: save'>Submit order</button>

Knockout JS com ASP.NET MVC 3

demonstração

Experiência de utilizaçãoO menos bom

• Bugs de Model Binding de MVC

• Mapping Plugin de KO e modelos grandes (Script running too long)

• Execução de pedidos AJAX manualmente (GET / POST)

• Performance do serializer JSON usado no MVC

• Articulação com MVC Data Annotation Validations

Experiência de UtilizaçãoO bom

• Model Binding de JSON

• Geração de modelos cliente a partir de modelos servidor

• Mapping Plugin de KO

• Data Binding e Facilidade de criação da UI no cliente

• Trabalhar no cliente com objectos em vez de eventos

• Facilidade de construção da aplicação

• Fluidez da aplicação no cliente

• Essencial para desenvolver Single Page Applications!!!!

O futuro – MVC 4Servidor Cliente

Web UIHTML/CSS/JS

WebAPI

Data ServicesJSON/XML

Visible UIHTML/CSS

Application LayerJavaScript

Data Access LayerJavaScript

Local Storage HTML 5

UpShot.js

Knockout.js

History.js

Navigation APIs

MVC

Conclusões• As duas tecnologias resultam bem em conjunto

• Desenvolvimento mais facilitado

• Aplicações mais fluidas e rápidas

• Grande foco na interacção com o utilizador

• Conceitos aplicam-se também fora de aplicações Web (ex: Apps para Windows 8)

Questões?

ReferênciasASP.NET MVC

– http://www.asp.net/mvc

ASP.NET MVC 4– http://www.asp.net/mvc/mvc4

Knockout JS– http://www.knockoutjs.com

Knockout JS Tutorials– http://learn.knockoutjs.com/

Patrocinadores desta reunião

Próximas reuniões presenciais

• 21-04-2012 – Abril• 26-05-2012 – Maio• 02-06-2012 – Junho (Coimbra)• 16-06-2012 – Junho• 21-07-2012 – Julho

Reserva estes dias na agenda! :)

Obrigado!

Marco André Silvamarco.silva@create.pt