arquitetura de uma aplicação web moderna - mvp showcast
DESCRIPTION
Apresentação realizada no MVP ShowCast 2013.TRANSCRIPT
Arquitetura de uma aplicação web moderna
MVP ShowCastVirtual Community Series
Victor CavalcanteMVP ASP.NETLambda3 @vcavalcante
Rodrigo KonoMVP ASP.NETMCP – MCTS – MCPD – MCT@rodrigokono
MVP MicrosoftMCP – MCTS – MCPD – MCTFoco em desenvolvimento WEBDeveloper na LG SistemasFundador do DevGoiás.NETDez anos de comunidade .NET Palestrou em mais de 12 capitaisMais de 14.500 pessoas nesse tempoFinalista Imagine Cup 2005 – Brasil/Japão
Rodrigo Kono
@rodrigokono - www.rodrigokono.net – [email protected]
Antes de tudo...
• Náo há arquitetura “universalmente correta”.• Aquela que combina com cada cenário.
• Variação de acordo com a exigência e requisitos de projeto.
• Não iremos discutir “miolos” do design de software.
O cenário da web
• Divisão em duas bases distintas• O que funciona na infraestrutura (Server)
pode ser algo grande, escalável, em nuvem ou pode ser pequena e simples como um servidor interno de uma empresa.
• O que funciona no dispositivo do usuário final (Client)
aplicações que vão desde desktops, laptops, tablets, HDTV, impressoras,
smartphones, ou até mesmo uma geladeira
Um desafio constante
Equipes de desenvolvimento web
possuem a missão de fazer uma série de
decisões sobre a compatibilidade de
aplicações, desempenho, usabilidade e
facilidade de manutenção.
Código Base do cliente
Tipos de aplicações web• Aplicações HTML, comumente chamada
pelo navegador. Desenvolvida com HTML5, CSS3 e JS.
• Aplicações web Nativa, que são executadas diretamente do dispositivo. Desenvolvidas com SDKs.
O que temos para a web moderna?ResponsividadeCSS3Unobtrusive JavaScriptPolyfillsTranscompiladores de JSOtimização e PerformanceSegurança
Responsividade- Aplicações multi dispositivos
- Smarphone, Tablet, desktop, etc.- Uma única interface dá legibilidade e
acessibilidade específica para cada.- Interface sensitível.- Frameworks: Bootstrap e Foundation
CSS3
Media queries para renderizar páginas em diferentes tipos de dispositivos.<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="Style.css" />
Manipulação dos objetos de interface mais inteligentes e com maior controle
// Esta regra será aplicada a todos os que têm o atributo “article" definido no h1h1[article]{ color:blue;}
// Esta regra será aplicada a todas h1 onde article = "title"h1[article="title"]{ color:blue;}
// Esta regra será aplicada a todos h1 onde artigo contém espaço// valores separados um dos quais é exatamente igual a "title"<h1 article="top title text"> Main Title </ h1>h1[article~="title"]{ color:blue;}
// Selecione todos os h1 onde atributo article começa com toph1[article^="top"]{ color:blue;}
// Selecione todos os h1 onde atributo article termina com toph1[article$="top"]{ color:blue;}
// Selecione todos os h1 onde atributo article tem um sub string toph1[article*="top"]{ color:blue;}
// Selecione todos os h1 onde atributo article contém valores separados por hífen e que começa com toph1[article|="top"]{ color:blue;}
LESS
O CSS3 pode ficar muito complexo e difícil de manipular.
Há a necessidade de pré-processadores de CSS como LESS e SASS.
- Estendem o CSS para um comportamento dinâmico utilizando variáveis, operações e funções
LESS
Por exemplo, você pode definir uma variável e o CSS resultante irá expandir essa variável.
http://lesscss.orghttp://sass-lang.com
O pulo do gato!
Inconformidade entre browsers
Problema:- Navegadores têm diferentes "estilos padrão" para os
elementos HTML.- Ex.: <sup>, <input>, <h1>, <h2>, <h3>...
Solução:- Usar usar Reset.css
(https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/reset.css) ou Normalize.css (http://necolas.github.io/normalize.css)
Aconselhável: usar o Normalize.css, que corrige styling e torna consistente em todos os navegadores.
Unobtruvise JavaScript(JavaScript Discreto)
Maneira de escrever JavaScript que funcione em diferentes dispositivos e que é de fácil manutenção.• Não usar manipuladores de eventos em linha.• Todo o código deve estar em um arquivo .js
externo.• Ser utilizável sem JavaScript.• Links existentes e forms são reutilizados.• Elementos JavaScript dependentes devem ser
dinamicamente adicionados à página
Unobtruvise JavaScript(JavaScript Discreto)// Não aplicável<input type="text" name="date" onchange="validateDate()" /><pre lang="jscript">function() { document.getElementById('date').onchange = validateDate;}
// Aplicável<input type="text" name="date" id="date" />window.onload = function() {window.onload = function() { document.getElementById('date').onchange = validateDate;};
Polyfills
- Pedaço de código que implementa os recursos que você espera que o navegador nativo suporte.
- Geralmente emula uma API mais recente que fornece a funcionalidade de fallback para navegadores mais antigos.
PolyfillsPor exemplo:Firefox 23, 24 e 25 não suportam HTML5 Web SQL Storage e IE8 e 9 não pode fazer CSS3 Transitions .Em ambos casos, um polyfills fornece uma alternativa para estes navegadores e fornece funcionalidade necessária.
Polyfills disponíveis: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Você pode verificar o suporte ao navegador para HTML5 e CSS3 acessando http://caniuse.com
Modernizr
- Biblioteca JavaScript que detecta características HTML5 e CSS3 no navegador do usuário.
- Suporta dezenas de testes e, opcionalmente, inclui YepNope.js para carregamento condicional de externos.
- Ex.:Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});
Minification
Processo para combinar vários arquivos CSS ou JavaScript, remover espaços em branco desnecessários e comentários. https://code.google.com/p/minify
RequireJs
O uso intenso de bibliotecas JavaScript resultou em carregamento de páginas com atraso. A página não será exibida até que todo o seu JavaScript seja baixado, o que provoca atrasos graves se não for adiada corretamente.
http://requirejs.org
JavaScript
Escrever JavaScript pode ser um desafio para os recém-chegados e pode prejudicar ao invés de ajudar no desenvolvimento.
Projeto browser diet possui algumas dicas bacanas antes de sair por ai usando jQuery ou até mesmo codificando em JS.http://browserdiet.com/pt
TypeScript// TypeScript class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
// JavaScript var Greeter = (function () {function Greeter(message) { this.greeting = message;}Greeter.prototype.greet = function () { return "Hello, " + this.greeting;};return Greeter;})();
Segurança
- Popularidade do JavaScript = aumento de Side Scripting (XSS) e Cross-site Request Forgery (CSRF)
- Ataques tornaram-se comuns- owasp.org fornece um bom ponto de
partida para limpar sua barra contra ataques XSS e CSRF.
- Microsoft Web Protection Library http://wpl.codeplex.com
Código Base do Servidor
• Design de Software é crucial.• Utilizar a mesma aplicação de
negócios para a web e para smart clients é delicado.
• Desafio de testes unitários usando MVC.• MVP provou ser eficaz neste objetivo.
MVC x MVP
Deméritos do MVC
• Não é possível Unit Test• UI intimamente ligada com a
controladora, pode ter boa parte da regra de negócios.
• Distribuição de fluxo de trabalho é quase impossível.
O MVP
• Distribuição do fluxo de trabalho entre Designer (UI) e Developer
• View está desassociada do Presenter e Modelo
• Ajuda uma aplicação smart client a usar um presenter comum ao modelo.
• É possível fazer unit test.• Presenter contém lógica de negócios e
referência ao modelo.
Arquitetura Física
Alternativa ao MVP/MVC: MVVM
MVVM: Model-View-ViewModelBaseado em MVC e MVPTeve origem na MicrosoftSepara de maneira mais clara a regra de negócio de UI de outras regras e comportamentos através de data-bindings declarativos.
Imagem: http://msdn.microsoft.com/en-us/magazine/jj694937.aspx
http://knockoutjs.com
Arquitetura da UI
Recomendações
MVP ShowCastVirtual Community Series
© 2013 Rodrigo Kono, MVP. All rights reserved. Microsoft, and other product names are or may be registered trademarks and/or trademarks in the Brazil. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
Rodrigo Kono@rodrigokono
Victor Cavalcante
@vcavalcante