Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TDC 2014 - Arquitetura front-end com AngularJS

5,207 views

Published on

O desenvolvimento de aplicações web client-side traz consigo desafios arquiteturais equivalentes ao modelo tradicional implementado no lado servidor. Com base nesta afirmação, é necessário modelar e implementar uma arquitetura capaz de atender a todos os requisitos arquiteturais de um software. Para exemplificar este desafio, iremos propor um modelo de uma arquitetura utilizando o framework AngularJS, descrevendo suas principais características e como podemos aplicá-las em uma arquitetura front-end.

Palestra realizada no evento The Developer's Conference 2014 em Florianópolis / SC junto o Michel Graciano.

TDC 2014 - Arquitetura front-end com AngularJS

  1. 1. Arquitetura front-end com AngularJS Leonardo Zanivan Michel Graciano
  2. 2. Agenda ● SOFEA ● AngularJS
  3. 3. SOFEA ● Service Oriented Front End Architecture ● Sinônimo de Thin Server Architecture ● Estilo arquitetural ● Descrito em 2007 por Ganesh Prasad, Rajat Taneja, Vikrant Todankar no artigo “Life above the Service Tier” ● Mas afinal, o que é SOFEA?
  4. 4. O que é SOFEA?
  5. 5. Princípios do SOFEA ● Download da aplicação, troca de dados e fluxo de apresentação devem ser desacoplados do servidor ● Fluxo de apresentação é de responsabilidade do cliente ● Todas as comunicações com o servidor devem ser via web services (REST, SOAP, etc.) ● Componentes do servidor devem focar na lógica do negócio e serem expostos em forma de serviços (SOA)
  6. 6. Benefícios do SOFEA ● Escalabilidade (processing, stateless, caching) ● Interopeabilidade (BaaS - Back-end as a Service) ● Maior ROI por LOC ● Se encaixa em ambientes SOA e Cloud ● Melhor organização e separação da lógica ● Maior responsividade para o usuário ● Desenvolvimento assíncrono do front-end e back-end ● Aplicações offline
  7. 7. Implementação do SOFEA
  8. 8. Migrando do MVC server Os frameworks MVC server-side (como JSF) e engines de template (como JSP) são completamente substituídos. ● Model: Objetos de sessão passam a ser objetos JavaScript no cliente ● View: Widgets e templates são substituídos por HTML e CSS puros ● Controller: As classes responsáveis pelo fluxo da apresentação são substituídas por arquivos JS
  9. 9. Por que só agora? ● Redução da complexidade para a criação de web apps o Evolução dos web browsers e specs o Evolução dos frameworks client-side MVW o Simplicidade no cliente (HTML, JS e CSS) ● Heterogeneidade da equipe ● Maturidade do SOA e do Cloud ● Any Device (PC, mobile, embedded, wearables)
  10. 10. Redução da complexidade
  11. 11. SOFEA dentro da equipe ● Designers: Criam apenas arquivos HTML, CSS e imagens que serão utilizados diretamente pelo front ● Front-end developers: Mantêm apenas arquivos HTML dos designers e criam JS para implementar a UI ● Back-end developers: Focam somente na lógica de negócio, na persistência dos dados e nos serviços ● Benefícios extras: Front-end developers fazem mock dos serviços criando um contrato para desenvolver de forma assíncrona
  12. 12. AngularJS ● Framework JavaScript MVW* client-side para desenvolver aplicações web modernas e dinâmicas ● A primeira versão open-source foi liberada em 2010 e desde então ele é mantido pelo Google e comunidade ● Aprox. ~2 releases mensais, projeto altamente ativo ● O que faz o AngularJS ser especial?
  13. 13. Diferenciais do AngularJS ● Construído para criar aplicações grandes o Organização da bagunça no client-side o Reutilização de código e modularidade (DRY) ● Killer Features o Dependency Injection, Two-way data binding e Directives ● Integração natural com arquitetura REST, SOA, SOFEA ● Testabilidade
  14. 14. Organizando o código ● Guidelines de desenvolvimento ● HTML views ● Modules ● Controllers ● Services, Providers, Factories, Values e Constants ● Directives e Filters ● Bootstrap Configuration e Decorators
  15. 15. Dependency Injection ● AngularJS foi pioneiro na implementação de DI no JS ● Alta coesão e baixo acoplamento ● Possibilita substituir as implementações e até a criação de mocks para testes (Exemplo: $httpBackend)
  16. 16. Serviços injetáveis ● São singletons instanciados apenas uma vez pela app, somente quando necessários (lazy loaded), que fornecem funções ou mantém o estado de algo ● Tipos: Service, Factory, Provider, Constant e Value ● Podem ser utilizados em qualquer componente gerenciado pelo AngularJS
  17. 17. Exemplo de serviço var services = angular.module('myApp.services', ['ngResources']); services.factory('AuthService', function($resource) { return $resource(auth, {}, { authenticate: { method: 'POST', params: { 'action': 'authenticate' }, headers: { 'Content-Type': aplication/x-www-form-urlencoded } } }); });
  18. 18. Controllers ● Responsabilidades o Inicialização do modelo da aplicação o Expôr o modelo e as funções para a view (UI template) utilizando o $scope o Observar o modelo por mudanças e executar as atualizações onde for necessário (two-way data binding) ● Devem ser gerenciáveis e testáveis
  19. 19. Two-way data binding
  20. 20. Exemplo de controller function SaudacaoController($scope) { $scope.saudacao = 'Olá!'; } <div ng-controller="SaudacaoController"> {{ saudacao }} </div>
  21. 21. Directives ● HTML templating engine para criação de componentes ● Extensão do HTML (tags, attr, class) ● Extensão de componentes de terceiros (Ex.: Bootstrap) ● É considerado o recurso mais avançado do AngularJS ● Os componentes resultantes geralmente são reutilizáveis e distribuíveis (Ex.: AngularUI)
  22. 22. Exemplo de directive <div ng-repeat"noticia in noticias"> <span ng-bind="noticia.titulo"></span> <button ng-click="delete($index)"> Excluir </button> </div>
  23. 23. Consumindo Web Services ● $http ● $resource ● Restangular
  24. 24. Testando de ponta a ponta ● Unit (Karma & Jasmine) ● E2E (Protractor & Jasmine + Selenium WebDriver)
  25. 25. Funcionalidades extras ● Promises ($q) ● Event System ($emit, $broadcast) ● Routing (ngRoute, ui-router) ● Caching ($cache) ● Animations ($animate) ● i18n e l10n (ngPluralize, $locale, Translate) ● HTTP Interceptors (auth, redirect, log)
  26. 26. Cuidando da performance ● Cache ● Bind Once ● Fast Watchers ● Invisible Watchers (ngIf vs ngShow) ● Lazy Loading (infinite scroll, paginação) ● Repeat Track By (1.2.x+) ● Model Debounce (1.3.x+)
  27. 27. Futuro do AngularJS ● AngularJS 2.0 o Mobile-first o Escrito em ES6, Annotations o Traceur compiler o Modularização (DI.js) ● Object.observe (40x faster)
  28. 28. Obrigado @leonardopanga @mgraciano

×