AngularJS, Angular 2 e Ionic: Casos de Uso

Palestra ministrada pelo Heber Gentilin no meetup Java Noroeste de Setembro/2016

Transcript

1. Caso de Uso Paulo Heber Gentilin @hgentillin heber.gentilin@gmail.com TS ionic 2 AngularJS 2 TypeScript & &
2. Accurate Software Parceira ORACLE • Oracle Platinum Partner • Oracle Excellence Award - 2015 Serviços • Oracle Fusion Middleware - SOA, BPM, Portais & Conteúdos • Projetos e-Commerce em Java e .Net • BI e Data Warehouse multi vendor, com foco em SAS
3. Caso de Uso I - AngularJS + Spring Caso de Uso II - Angular2 + ionic 2
4. > Caso de Uso I - AngularJS + Spring Caso de Uso II - Angular2 + ionic 2
5. Cliente
6. Arquitetura restful Web Service SOA
7. Aprendizado
8. Lições Aprendidas • Regras de negócio na camada do cliente • Queda de performance na manipulação de grandes arrays • Produtividade • Encapsulamento, melhora o design do software
9. Caso de Uso I - AngularJS + Spring > Caso de Uso II - Angular2 + ionic 2
10. Cliente
11. Arquitetura restful Web Service 2
12. Novas Tecnologias & Conceitos TS
13. Pontos Principais em relação ao AngularJS 1 • 5x mais rápido • orientado a componentes • melhor produtividade • bootstrap diferente de acordo com a arquitetura (mobile ou desktop) • sintaxe parecida ao .Net e Java (TypeScript) • novas features a cada versão (até a versão oficial) • lançamento recente (bugs) • pouco know how da comunidade e consequentemente poucos plugins • curva de aprendizado maior, devido as tecnologias envolvidas
14. Algumas Diferenças function ($scope) { $scope.evento = “Caso de Uso em AngularJS” } constructor () { this.evento = “Caso de Uso em Angularjs”; } AngularJS 1 AngularJS 2 $scope this
15. 1. @Component({ 2. selector: IndexContent' 3. }) 4. @View({ 5. templateUrl: './components/example/IndexContent.ht ml' 6. }) 7. export class IndexContent { 8. constructor () { 9. this.conteudo = “Contéudo”; 10. } 11. } Algumas Diferenças controllers components AngularJS 2 <div ng-controller="IndexController"> {{conteudo}} </div> angular.module('myApp', []).controller('IndexController', ['$scope', function ($scope) { $scope.conteudo = 'Conteúdo'; }]); AngularJS 1
16. <ul> <li *ngFor="#item of items"> {{item.name}} </li> </ul> * variáveis locais são definidas usando o prefixo ‘#’: <div *ngFor="#item of items"></div> Algumas Diferenças ng-repeat *ngFor AngularJS 2 <ul> <li ng-repeat="item in items"> {{item.name}} </li> </ul> AngularJS 1
17. Obrigado!