SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
Arquitetura front-end com
AngularJS
Leonardo Zanivan
Michel Graciano
Agenda
● SOFEA
● AngularJS
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?
O que é SOFEA?
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)
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
Implementação do SOFEA
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
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)
Redução da complexidade
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
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?
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
Organizando o código
● Guidelines de desenvolvimento
● HTML views
● Modules
● Controllers
● Services, Providers, Factories, Values e Constants
● Directives e Filters
● Bootstrap Configuration e Decorators
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)
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
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 }
}
});
});
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
Two-way data binding
Exemplo de controller
function SaudacaoController($scope) {
$scope.saudacao = 'Olá!';
}
<div ng-controller="SaudacaoController">
{{ saudacao }}
</div>
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)
Exemplo de directive
<div ng-repeat"noticia in noticias">
<span ng-bind="noticia.titulo"></span>
<button ng-click="delete($index)">
Excluir
</button>
</div>
Consumindo Web Services
● $http
● $resource
● Restangular
Testando de ponta a ponta
● Unit (Karma & Jasmine)
● E2E (Protractor & Jasmine + Selenium WebDriver)
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)
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+)
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)
TDC 2014 - Arquitetura front-end com AngularJS
Obrigado
@leonardopanga
@mgraciano

Weitere ähnliche Inhalte

Was ist angesagt?

Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTDesenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTRodrigo Fortes
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivoVinicius Reis
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsCloves Moreira Junior
 
Como trabalhar com angular js
Como trabalhar com angular jsComo trabalhar com angular js
Como trabalhar com angular jsMatheus Lima
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOLeonardo Sousa
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.jsmarcusbalbi
 
ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?Douglas Aguiar
 
Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Rodrigo Kono
 

Was ist angesagt? (19)

Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoTDesenvolvimento de Aplicações Web AngularJS no Contexto da IoT
Desenvolvimento de Aplicações Web AngularJS no Contexto da IoT
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Domain-Driven Design
Domain-Driven DesignDomain-Driven Design
Domain-Driven Design
 
Angular js
Angular jsAngular js
Angular js
 
A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivo
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Angular js
Angular jsAngular js
Angular js
 
Angularjs
AngularjsAngularjs
Angularjs
 
Como trabalhar com angular js
Como trabalhar com angular jsComo trabalhar com angular js
Como trabalhar com angular js
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAO
 
Desenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVCDesenvolviemento web com ASP.Net e MVC
Desenvolviemento web com ASP.Net e MVC
 
Começando com Vue.js
Começando com Vue.jsComeçando com Vue.js
Começando com Vue.js
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?ASP .NET MVC - Você esta pronto para a pílula vermelha?
ASP .NET MVC - Você esta pronto para a pílula vermelha?
 
Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4Desenvolvimento RIA com Silverlight 4
Desenvolvimento RIA com Silverlight 4
 
Curso AngularJS - Parte 2
Curso AngularJS - Parte 2Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
 

Andere mochten auch

SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...Kunal Ashar
 
Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4Ganesh Prasad
 
Sofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworksSofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworksAndré Neubauer
 
JavaOne 2016 - Kotlin: The Language of The Future For JVM?
JavaOne 2016 - Kotlin: The Language of The Future For JVM?JavaOne 2016 - Kotlin: The Language of The Future For JVM?
JavaOne 2016 - Kotlin: The Language of The Future For JVM?Leonardo Zanivan
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
 
Service Oriented UI Architecture in the world of web, desktop, & mobile appli...
Service Oriented UI Architecture in the world of web, desktop, & mobile appli...Service Oriented UI Architecture in the world of web, desktop, & mobile appli...
Service Oriented UI Architecture in the world of web, desktop, & mobile appli...Axway Appcelerator
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
Evoluindo o Desenvolvimento Web: Criando Single Page Applications
Evoluindo o Desenvolvimento Web: Criando Single Page ApplicationsEvoluindo o Desenvolvimento Web: Criando Single Page Applications
Evoluindo o Desenvolvimento Web: Criando Single Page ApplicationsJuliano P. Alves
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xPatrickHillert
 
Angularjs Anti-patterns
Angularjs Anti-patternsAngularjs Anti-patterns
Angularjs Anti-patternsSteven Lambert
 
How to connect AngularJS to servers
How to connect AngularJS to serversHow to connect AngularJS to servers
How to connect AngularJS to serversCarlos Morales
 
Estudo - Estratégia Mobile Corporativa (Versão Full)
Estudo - Estratégia Mobile Corporativa (Versão Full)Estudo - Estratégia Mobile Corporativa (Versão Full)
Estudo - Estratégia Mobile Corporativa (Versão Full)Fabricio Freitas
 
NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...
NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...
NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...Leonardo Zanivan
 
NetBeans Day 2016 - Getting the best of NetBeans IDE
NetBeans Day 2016 - Getting the best of NetBeans IDENetBeans Day 2016 - Getting the best of NetBeans IDE
NetBeans Day 2016 - Getting the best of NetBeans IDELeonardo Zanivan
 
TDC 2016 - Rodando JavaScript Server com Wildfly
TDC 2016 - Rodando JavaScript Server com WildflyTDC 2016 - Rodando JavaScript Server com Wildfly
TDC 2016 - Rodando JavaScript Server com WildflyLeonardo Zanivan
 
JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]
JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]
JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]Leonardo Zanivan
 
TDC 2016 - Simplificando a segurança de sua aplicação com Java EE
TDC 2016 - Simplificando a segurança de sua aplicação com Java EETDC 2016 - Simplificando a segurança de sua aplicação com Java EE
TDC 2016 - Simplificando a segurança de sua aplicação com Java EELeonardo Zanivan
 

Andere mochten auch (20)

SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
SOFEA: Service Oriented Front End Architecture, Next Gen Web Architecture for...
 
Front end architecture
Front end architectureFront end architecture
Front end architecture
 
Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4Sofea in a soa ecosystem v0 4
Sofea in a soa ecosystem v0 4
 
Sofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworksSofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworks
 
React Native na globo.com
React Native na globo.comReact Native na globo.com
React Native na globo.com
 
JavaOne 2016 - Kotlin: The Language of The Future For JVM?
JavaOne 2016 - Kotlin: The Language of The Future For JVM?JavaOne 2016 - Kotlin: The Language of The Future For JVM?
JavaOne 2016 - Kotlin: The Language of The Future For JVM?
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
 
Service Oriented UI Architecture in the world of web, desktop, & mobile appli...
Service Oriented UI Architecture in the world of web, desktop, & mobile appli...Service Oriented UI Architecture in the world of web, desktop, & mobile appli...
Service Oriented UI Architecture in the world of web, desktop, & mobile appli...
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
Evoluindo o Desenvolvimento Web: Criando Single Page Applications
Evoluindo o Desenvolvimento Web: Criando Single Page ApplicationsEvoluindo o Desenvolvimento Web: Criando Single Page Applications
Evoluindo o Desenvolvimento Web: Criando Single Page Applications
 
Web Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.xWeb Components mit Polymer und AngularJS 1.x
Web Components mit Polymer und AngularJS 1.x
 
Angularjs Anti-patterns
Angularjs Anti-patternsAngularjs Anti-patterns
Angularjs Anti-patterns
 
How to connect AngularJS to servers
How to connect AngularJS to serversHow to connect AngularJS to servers
How to connect AngularJS to servers
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Estudo - Estratégia Mobile Corporativa (Versão Full)
Estudo - Estratégia Mobile Corporativa (Versão Full)Estudo - Estratégia Mobile Corporativa (Versão Full)
Estudo - Estratégia Mobile Corporativa (Versão Full)
 
NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...
NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...
NetBeans Day 2015 - Node.js, HTML5, JBoss Forge, and Other Awesome New NetBea...
 
NetBeans Day 2016 - Getting the best of NetBeans IDE
NetBeans Day 2016 - Getting the best of NetBeans IDENetBeans Day 2016 - Getting the best of NetBeans IDE
NetBeans Day 2016 - Getting the best of NetBeans IDE
 
TDC 2016 - Rodando JavaScript Server com Wildfly
TDC 2016 - Rodando JavaScript Server com WildflyTDC 2016 - Rodando JavaScript Server com Wildfly
TDC 2016 - Rodando JavaScript Server com Wildfly
 
JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]
JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]
JavaOne 2014 - Scalable JavaScript Applications with Project Nashorn [CON6423]
 
TDC 2016 - Simplificando a segurança de sua aplicação com Java EE
TDC 2016 - Simplificando a segurança de sua aplicação com Java EETDC 2016 - Simplificando a segurança de sua aplicação com Java EE
TDC 2016 - Simplificando a segurança de sua aplicação com Java EE
 

Ähnlich wie TDC 2014 - Arquitetura front-end com AngularJS

Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Portal GSTI
 
Plataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKPlataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKRyan Padilha
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devopsDiego Pacheco
 
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BRJBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BRElvis Rocha
 
Indo alem do_mvc_node_js
Indo alem do_mvc_node_jsIndo alem do_mvc_node_js
Indo alem do_mvc_node_jsgustavobeavis
 
TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...
TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...
TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...tdc-globalcode
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End ArchitectureCristiano Gomes
 
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017Renato Groff
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
WSO2 - Portfólio de Produtos, Soluções e Suportes
WSO2 - Portfólio de Produtos, Soluções e SuportesWSO2 - Portfólio de Produtos, Soluções e Suportes
WSO2 - Portfólio de Produtos, Soluções e SuportesEdgar Silva
 
Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...
Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...
Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...Renato Groffe
 
Jsf com hibernate, spring security e maven
Jsf com hibernate, spring security e mavenJsf com hibernate, spring security e maven
Jsf com hibernate, spring security e mavenLeandro Costa
 
JHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosJHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosThiago Soares
 

Ähnlich wie TDC 2014 - Arquitetura front-end com AngularJS (20)

Palestra ASP.NET MVC
Palestra ASP.NET MVCPalestra ASP.NET MVC
Palestra ASP.NET MVC
 
Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório
 
Plataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKPlataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDK
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devops
 
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BRJBoss Fuse Service Works - O Fuse além da integração - PT-BR
JBoss Fuse Service Works - O Fuse além da integração - PT-BR
 
Indo alem do_mvc_node_js
Indo alem do_mvc_node_jsIndo alem do_mvc_node_js
Indo alem do_mvc_node_js
 
TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...
TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...
TDC2018FLN | Trilha Arquitetura - Elixir Umbrella - Aplicacoes desacopladas s...
 
Service Oriented Front-End Architecture
Service Oriented Front-End ArchitectureService Oriented Front-End Architecture
Service Oriented Front-End Architecture
 
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
WSO2 - Portfólio de Produtos, Soluções e Suportes
WSO2 - Portfólio de Produtos, Soluções e SuportesWSO2 - Portfólio de Produtos, Soluções e Suportes
WSO2 - Portfólio de Produtos, Soluções e Suportes
 
Curso jsf
Curso jsfCurso jsf
Curso jsf
 
Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...
Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...
Orquestrando processos de negócio com .NET + Azure Durable Functions | Cloud4...
 
Spa com angular js flisol 2015 - aquidauana ms
Spa com angular js   flisol 2015 - aquidauana msSpa com angular js   flisol 2015 - aquidauana ms
Spa com angular js flisol 2015 - aquidauana ms
 
Angular js 4php
Angular js   4phpAngular js   4php
Angular js 4php
 
jCompany for SAP NetWeaver
jCompany for SAP NetWeaverjCompany for SAP NetWeaver
jCompany for SAP NetWeaver
 
Curriculum vitae u05_lutonda
Curriculum vitae u05_lutondaCurriculum vitae u05_lutonda
Curriculum vitae u05_lutonda
 
Jsf com hibernate, spring security e maven
Jsf com hibernate, spring security e mavenJsf com hibernate, spring security e maven
Jsf com hibernate, spring security e maven
 
JHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosJHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãos
 
Meetup #17
Meetup #17Meetup #17
Meetup #17
 

Mehr von Leonardo Zanivan

Como se tornar um desenvolvedor de software melhor
Como se tornar um desenvolvedor de software melhorComo se tornar um desenvolvedor de software melhor
Como se tornar um desenvolvedor de software melhorLeonardo Zanivan
 
QConSP 2018 - Java Module System
QConSP 2018 - Java Module SystemQConSP 2018 - Java Module System
QConSP 2018 - Java Module SystemLeonardo Zanivan
 
TDC 2017 - Vale a pena utilizar Docker em produção?
TDC 2017 - Vale a pena utilizar Docker em produção?TDC 2017 - Vale a pena utilizar Docker em produção?
TDC 2017 - Vale a pena utilizar Docker em produção?Leonardo Zanivan
 
QCon 2017 - Java/JVM com Docker em produção: lições das trincheiras
QCon 2017 - Java/JVM com Docker em produção: lições das trincheirasQCon 2017 - Java/JVM com Docker em produção: lições das trincheiras
QCon 2017 - Java/JVM com Docker em produção: lições das trincheirasLeonardo Zanivan
 
JavaOne 2015 - Simplificando a segurança de sua aplicação com Java EE
JavaOne 2015 - Simplificando a segurança de sua aplicação com Java EEJavaOne 2015 - Simplificando a segurança de sua aplicação com Java EE
JavaOne 2015 - Simplificando a segurança de sua aplicação com Java EELeonardo Zanivan
 
O papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de softwareO papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de softwareLeonardo Zanivan
 

Mehr von Leonardo Zanivan (7)

Como se tornar um desenvolvedor de software melhor
Como se tornar um desenvolvedor de software melhorComo se tornar um desenvolvedor de software melhor
Como se tornar um desenvolvedor de software melhor
 
QConSP 2018 - Java Module System
QConSP 2018 - Java Module SystemQConSP 2018 - Java Module System
QConSP 2018 - Java Module System
 
TDC 2017 - Vale a pena utilizar Docker em produção?
TDC 2017 - Vale a pena utilizar Docker em produção?TDC 2017 - Vale a pena utilizar Docker em produção?
TDC 2017 - Vale a pena utilizar Docker em produção?
 
QCon 2017 - Java/JVM com Docker em produção: lições das trincheiras
QCon 2017 - Java/JVM com Docker em produção: lições das trincheirasQCon 2017 - Java/JVM com Docker em produção: lições das trincheiras
QCon 2017 - Java/JVM com Docker em produção: lições das trincheiras
 
JavaOne 2015 - Simplificando a segurança de sua aplicação com Java EE
JavaOne 2015 - Simplificando a segurança de sua aplicação com Java EEJavaOne 2015 - Simplificando a segurança de sua aplicação com Java EE
JavaOne 2015 - Simplificando a segurança de sua aplicação com Java EE
 
O papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de softwareO papel e a carreira do arquiteto de software
O papel e a carreira do arquiteto de software
 
Curso Android Básico
Curso Android BásicoCurso Android Básico
Curso Android Básico
 

TDC 2014 - Arquitetura front-end com AngularJS

  • 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. O que é SOFEA?
  • 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. 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
  • 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. 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)
  • 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. 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. 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. 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. 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. 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. 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. 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
  • 20. Exemplo de controller function SaudacaoController($scope) { $scope.saudacao = 'Olá!'; } <div ng-controller="SaudacaoController"> {{ saudacao }} </div>
  • 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. Exemplo de directive <div ng-repeat"noticia in noticias"> <span ng-bind="noticia.titulo"></span> <button ng-click="delete($index)"> Excluir </button> </div>
  • 23. Consumindo Web Services ● $http ● $resource ● Restangular
  • 24. Testando de ponta a ponta ● Unit (Karma & Jasmine) ● E2E (Protractor & Jasmine + Selenium WebDriver)
  • 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. 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. 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)