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 – kono@devgoias.net

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