Arquitetura front-end com AngularJS

3,660 views
3,380 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.

1 Comment
16 Likes
Statistics
Notes
  • Muito bom os slides desta palestra, muito claro e fácil de compreender. Parabéns!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,660
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
107
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

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

×