28ª Reunião Lisboa - 21/04/2012   http://netponto.org       KnockoutJS com ASP.NET MVC 3:                Utilização na vid...
Patrocinadores desta reunião
Marco André Silva• Consultor Sénior na |create|it|, uma empresa  especializada na área de soluções colaborativas e  integr...
Agenda•   ASP.NET MVC 3•   Knockout JS•   Demo – Knockout O Essencial•   Integração Knockout JS com ASP.NET MVC 3•   Demo ...
Contexto•   Projecto com 6 pessoas•   + 1 ano•   Aplicação Web•   Volume elevado de informação a apresentar•   Experiência...
ModelASP.NET MVC 3 - Introdução• Browser faz pedido (GET) a URL                    View           Controller• Rota é deter...
Knockout JS (KO JS) - Introdução•   Biblioteca JavaScript Open source•   Funciona do lado do cliente (browser), e promover...
ModelKnockout JS - MVVM• Informação importada do Modelo para o     View                                                   ...
Knockout JS – Data Binding - Conceito     View                    Model              Data Binding              View Model
Knockout JS – Data Binding - Exemplo// ViewModelvar cartLineViewModel = {    category: ‘Ships’,    product: ‘The Titanic’,...
Knockout JS – ObservablesActualização automática da UI// ViewModelvar cartLineViewModel = {    category: ko.observable(‘Sh...
Knockout JS – Computed ObservablesCalculo Automático de Dependências// ViewModelvar cartLineViewModel = {    …    subtotal...
Knockout JS – Observable Arrays// ViewModelvar cartViewModel = {    …    lines: ko.observableArray([cartLineViewModel]);};...
Knockout JS – Form Bindings// ViewModelvar cartViewModel = {    …    this.lines = ko.observableArray([cartLineViewModel]);...
Knockout JS – Ler e Gravar•   Formato dados: JSON•   $.ajax•   Gravar     –    Conversão de viewModel para JSON           ...
Knockout JS – O essencial
Resumo KO JS•   MVVM:     – View (HTML) / ViewModel (JavaScript) / Model (JavaScript)•   Conceito observable     – Calculo...
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 ...
KO JS - Integração com ASP.NET MVC 3•   Inclusão referência:     – <script type=text/javascript src=knockout.js></script>•...
KO JS – MVC 3Estruturação de Views e JavaScriptMVC View// View model (se necessário)@model CartViewModel// KO JS reference...
KO JS – MVC 3Models MVC  Models KO – Geração inline na vista MVCMVC View// View model (necessário!!!)@model CartViewModel...
KO JS – MVC 3Models MVC  Models KO – Resultado de acção em formato JSONMVC View…                                         ...
KO JS – MVC 3Models KO  Models MVC – Model Binding MVC 3 a partir de JSONJavaScript                                      ...
KO JS – MVC 3Elaboração de ViewsMVC View@model CartViewModel…// Percorrer cada linha<tbody data-bind=foreach: cartViewMode...
Knockout JS com ASP.NET MVC 3
Experiência de utilizaçãoO menos bom• Bugs de Model Binding de MVC• Mapping Plugin de KO e modelos grandes (Script running...
Experiência de UtilizaçãoO bom•   Model Binding de JSON•   Geração de modelos cliente a partir de modelos servidor•   Mapp...
O futuro – MVC 4Servidor                    Cliente                                          Visible UI                   ...
Conclusões• As duas tecnologias resultam bem em conjunto• Desenvolvimento mais facilitado• Aplicações mais fluidas e rápid...
Questões?
ReferênciasASP.NET MVC   – http://www.asp.net/mvcASP.NET MVC 4   – http://www.asp.net/mvc/mvc4Knockout JS   – http://www.k...
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...
Obrigado!Marco André Silvamarco.silva@create.pt
Upcoming SlideShare
Loading in...5
×

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

7,091

Published on

Apresentação do Marco Silva sobre a utilização de KnockoutJS com ASP .NET MVC 3 na 28a Reunião Presencial da Comunidade NetPonto em Lisboa (http://netponto.org).

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,091
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
92
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 28ª Reunião Lisboa - 21/04/2012 http://netponto.org KnockoutJS com ASP.NET MVC 3: Utilização na vida real Marco André Silva
  2. 2. Patrocinadores desta reunião
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. ModelASP.NET MVC 3 - Introdução• Browser faz pedido (GET) a URL View Controller• 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
  7. 7. 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.
  8. 8. ModelKnockout JS - MVVM• Informação importada do Modelo para o View View Model 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
  9. 9. Knockout JS – Data Binding - Conceito View Model Data Binding View Model
  10. 10. 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);
  11. 11. 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);
  12. 12. 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);
  13. 13. Knockout JS – Observable Arrays// ViewModelvar cartViewModel = { … lines: ko.observableArray([cartLineViewModel]);};// View -> Data Binding…<tbody data-bind=‚foreach: lines‛>…</tbody>// Activar KOko.applyBindings(cartViewModel);
  14. 14. 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);
  15. 15. 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
  16. 16. Knockout JS – O essencial
  17. 17. 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)
  18. 18. KO JS - Integração com ASP.NET MVC 3
  19. 19. 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
  20. 20. 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
  21. 21. 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: {} }
  22. 22. 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);
  23. 23. KO JS – MVC 3Models MVC  Models KO – Resultado de acção em formato JSONMVC View… MVC Controller// View scripts public ActionResult Edit(int id)@section Scripts{ { // Passagem de parâmetros para JavaScript <script language="javascript" type="text/javascript"> // Retornar vista  Pode ter modelo var settings = { (tipicamente simples), ou ser apenas HTML … markup }; </script> return View(); // KO JS ViewModel } <script src="@Url.Content("~/Scripts/App/Cart.js")‛type="text/javascript"></script>} public ActionResult Get(int id)JavaScript { // Dialogo de aguarde ToggleLoadingDialog(); // Criar modelo CartViewModel viewModel = BuildViewModel(// Obter model do servidor  Acção Get do controladorvar serverModel = GetServerModel(); id); // Gerar Client Model a partir de model do servidor cartViewModel.serverModel = ko.mapping.fromJSON( // Retornar modelo em JSONserverModel); return Json(viewModel); }
  24. 24. KO JS – MVC 3Models KO  Models MVC – Model Binding MVC 3 a partir de JSONJavaScript Model Classvar cartViewModel = { public class Cart save: function() { // Validar página / modelo { … // Cart lines // Dialogo de aguarde public List<CartLine> Lines { get; set; } ToggleLoadingDialog(); } // Submeter pedido de gravação ao servidor $.ajax(ko.mapping.toJSON( public class CartLinecartViewModel.serverModel); { public string Category { get; set; }MVC Controller[HttpPost] public string Product { get; set; }public ActionResult Save(Cart cart) public int Quantity { get; set; }{ public int SubTotal { get; set; } // Gravar Repository.Save(cart); } // Retornar resultado relevante da acção return Json(result);}
  25. 25. 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>
  26. 26. Knockout JS com ASP.NET MVC 3
  27. 27. 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
  28. 28. 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!!!!
  29. 29. O futuro – MVC 4Servidor Cliente Visible UI HTML/CSS Web UI HTML/CSS/JS Knockout.js Data Services Application Layer Navigation APIs JSON/XML JavaScript WebAPI History.js Data Access Layer UpShot.js JavaScript Local Storage HTML 5 MVC
  30. 30. 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)
  31. 31. Questões?
  32. 32. ReferênciasASP.NET MVC – http://www.asp.net/mvcASP.NET MVC 4 – http://www.asp.net/mvc/mvc4Knockout JS – http://www.knockoutjs.comKnockout JS Tutorials – http://learn.knockoutjs.com/
  33. 33. Patrocinadores desta reunião
  34. 34. 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 – JulhoReserva estes dias na agenda! :)
  35. 35. Obrigado!Marco André Silvamarco.silva@create.pt
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×