criando aplicações híbridas com angularjs, typescript e material design
Post on 08-Feb-2017
435 Views
Preview:
TRANSCRIPT
Aplicações Web Modernas
André BaltieriMicrosoft MVP
Slide 1 de 293
CRIANDO APPS WEB MOBILE COM TYPESCRIPT, ANGULARJS 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/
AgendaJavaScript hojePor que TypeScript?Material DesignPor que AngularJs?Web Mobile
Rodando a AplicaçãoBrowserBrowser MobileInstalada no MobileDesktop
JavaScript hoje!Você vai se assustar com estes números!
JavaScript hoje!
JavaScript hoje!Utilizado em sistemas de larga escalaLinguagem (Assembly) da WebLembram do WinJs?Futuro promissorPresente em todo lugar!
TypeScriptGuerra Civil da Web!
JavaScript
TypeScript
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
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)
TypeScriptTSD
TypeScript DefinitionsParte que nos permite ter um ótimo intelisense
TSCTypeScript CompilerO que transforma nossos arquivos TS em JS
Como usar?Instalação
npm install tsd tsc typescript –gExecução
tsc MeuArquivo.tsMeuArquivo.js
DEMOCriando seu primeiro arquivo com
TypeScript
Material DesignLEVE, ELEGANTE, PHYNO, TUDO DE BOM!!!
Sobre 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
Material DesignCriado pela GooglePresente nos Androids (5+)Um conceito de DesignPossui várias implementações
Bootstrap, Materialize, Material Design Lite, Angular Material
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
UsoVia classes do CSS
mdl_cardmdl_*
UsoVia Componentes
<md*>
DEMOCriando um Card utilizando
componentes do Material Design
AngularJsO queridinho do momento!
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
DEMOBrincando com AngularJs
Rodando!Vamos ao que interessa!
DEMO2doo App no Browser
DEMO2doo App no Browser Mobile
DEMO2doo App Instalada
DEMO2doo App Desktop
Dúvidas?
OBRIGADO
top related