Download - 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

Aplicações Web Modernas

André BaltieriMicrosoft MVP

Slide 1 de 293

Page 2: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

CRIANDO APPS WEB MOBILE COM TYPESCRIPT, ANGULARJS E

MATERIAL DESIGN

Page 3: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

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

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

JavaScript hoje!Você vai se assustar com estes números!

Page 6: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

JavaScript hoje!

Page 7: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

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

TypeScriptGuerra Civil da Web!

Page 9: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

JavaScript

TypeScript

Page 10: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

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

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

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

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

DEMOCriando seu primeiro arquivo com

TypeScript

Page 15: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

Material DesignLEVE, ELEGANTE, PHYNO, TUDO DE BOM!!!

Page 16: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

Sobre design

Page 17: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

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

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

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
Page 21: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

UsoVia classes do CSS

mdl_cardmdl_*

Page 22: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

UsoVia Componentes

<md*>

Page 23: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

DEMOCriando um Card utilizando

componentes do Material Design

Page 24: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

AngularJsO queridinho do momento!

Page 25: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

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

DEMOBrincando com AngularJs

Page 27: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

Rodando!Vamos ao que interessa!

Page 28: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

DEMO2doo App no Browser

Page 29: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

DEMO2doo App no Browser Mobile

Page 30: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

DEMO2doo App Instalada

Page 31: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

DEMO2doo App Desktop

Page 32: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

Dúvidas?

Page 33: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design
Page 34: Criando aplicações Híbridas com AngularJs, TypeScript e Material Design

OBRIGADO