criando aplicações híbridas com angularjs, typescript e material design
TRANSCRIPT
![Page 1: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/1.jpg)
Aplicações Web Modernas
André BaltieriMicrosoft MVP
Slide 1 de 293
![Page 2: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/2.jpg)
CRIANDO APPS WEB MOBILE COM TYPESCRIPT, ANGULARJS E
MATERIAL DESIGN
![Page 3: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/3.jpg)
SobreMicrosoft MVP desde 2013Desenvolvedor Web desde 2005Trabalhou em projetos nacionais e internacionais de grande porteFoco em JavaScript, ASP.NET, WebAPI, Angular, NodeJs e outras tecnologias Open Source
http://andrebaltieri.net/
![Page 4: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/4.jpg)
AgendaJavaScript hojePor que TypeScript?Material DesignPor que AngularJs?Web Mobile
Rodando a AplicaçãoBrowserBrowser MobileInstalada no MobileDesktop
![Page 5: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/5.jpg)
JavaScript hoje!Você vai se assustar com estes números!
![Page 6: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/6.jpg)
JavaScript hoje!
![Page 7: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/7.jpg)
JavaScript hoje!Utilizado em sistemas de larga escalaLinguagem (Assembly) da WebLembram do WinJs?Futuro promissorPresente em todo lugar!
![Page 8: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/8.jpg)
TypeScriptGuerra Civil da Web!
![Page 9: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/9.jpg)
JavaScript
TypeScript
![Page 10: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/10.jpg)
TypeScriptDesenvolvido na MicrosoftCriado por Anders Hejlsberg (Criador do C#)Totalmente Open SourceSuperset do JavaScriptCriado para “tipar” o JavaScriptFlexívelQuanto mais você “tipa” mais ele te ajuda
![Page 11: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/11.jpg)
Por que TypeScript?JavaScript é muito dinâmicoRefatorar não é simplesCompila para ES5 ou ES6Possibilita uso de features futuras hoje!Auxilia na escrita de código (Intelisense)
![Page 12: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/12.jpg)
TypeScriptTSD
TypeScript DefinitionsParte que nos permite ter um ótimo intelisense
TSCTypeScript CompilerO que transforma nossos arquivos TS em JS
![Page 13: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/13.jpg)
Como usar?Instalação
npm install tsd tsc typescript –gExecução
tsc MeuArquivo.tsMeuArquivo.js
![Page 14: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/14.jpg)
DEMOCriando seu primeiro arquivo com
TypeScript
![Page 15: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/15.jpg)
Material DesignLEVE, ELEGANTE, PHYNO, TUDO DE BOM!!!
![Page 16: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/16.jpg)
Sobre design
![Page 17: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/17.jpg)
Design importa sim!Seu cliente usa Facebook, Inbox, Instagram e afinsDesign não é só o que você vê na telaPode ser o diferencial do seu negócioJá deixei de usar apps por que elas eram feias
![Page 18: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/18.jpg)
Material DesignCriado pela GooglePresente nos Androids (5+)Um conceito de DesignPossui várias implementações
Bootstrap, Materialize, Material Design Lite, Angular Material
![Page 19: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/19.jpg)
JavaScript em larga escalaDia-a-dia aplicações maiores usam JavaScriptDivisão entre Frontend e Backend
Inclusive nas contrataçõesERPs, Bancos, eCommerces entre outros já usam
![Page 20: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/20.jpg)
![Page 21: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/21.jpg)
UsoVia classes do CSS
mdl_cardmdl_*
![Page 22: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/22.jpg)
UsoVia Componentes
<md*>
![Page 23: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/23.jpg)
DEMOCriando um Card utilizando
componentes do Material Design
![Page 24: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/24.jpg)
AngularJsO queridinho do momento!
![Page 25: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/25.jpg)
AngularJsCriado internamente na Google em 2009 (O tempo AVUA!!)“Trouxe” o padrão MVC para aplicações JavaScriptIntroduziu uma forma de “componentizar” diferenteSeu uso cresce dia-a-diaÉ o queridinho da vezEstá indo para versão 2.0
![Page 26: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/26.jpg)
DEMOBrincando com AngularJs
![Page 27: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/27.jpg)
Rodando!Vamos ao que interessa!
![Page 28: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/28.jpg)
DEMO2doo App no Browser
![Page 29: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/29.jpg)
DEMO2doo App no Browser Mobile
![Page 30: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/30.jpg)
DEMO2doo App Instalada
![Page 31: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/31.jpg)
DEMO2doo App Desktop
![Page 32: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/32.jpg)
Dúvidas?
![Page 33: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/33.jpg)
![Page 34: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design](https://reader035.vdocuments.site/reader035/viewer/2022062412/589b4a6b1a28ab4a398b5735/html5/thumbnails/34.jpg)
OBRIGADO