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