Criando aplica§µes H­bridas com AngularJs, TypeScript e Material Design

download Criando aplica§µes H­bridas com AngularJs, TypeScript e Material Design

of 34

  • date post

    08-Feb-2017
  • Category

    Technology

  • view

    428
  • download

    1

Embed Size (px)

Transcript of Criando aplica§µes H­bridas com AngularJs, TypeScript e Material Design

Apresentao do PowerPoint

Aplicaes Web ModernasAndr BaltieriMicrosoft MVPSlide 1 de 293

CRIANDO APPS WEB MOBILE COM TYPESCRIPT, ANGULARJS E MATERIAL DESIGN

2

Sobre

Microsoft 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/

Agenda

JavaScript hojePor que TypeScript?Material DesignPor que AngularJs?Web Mobile

Rodando a AplicaoBrowserBrowser MobileInstalada no MobileDesktop

JavaScript hoje!Voc vai se assustar com estes nmeros!

JavaScript hoje!

JavaScript hoje!

Utilizado em sistemas de larga escalaLinguagem (Assembly) da WebLembram do WinJs?Futuro promissorPresente em todo lugar!

TypeScriptGuerra Civil da Web!

JavaScriptTypeScript

TypeScript

Desenvolvido na MicrosoftCriado por Anders Hejlsberg (Criador do C#)Totalmente Open SourceSuperset do JavaScriptCriado para tipar o JavaScriptFlexvelQuanto mais voc tipa mais ele te ajuda

Por que TypeScript?

JavaScript muito dinmicoRefatorar no simplesCompila para ES5 ou ES6Possibilita uso de features futuras hoje!Auxilia na escrita de cdigo (Intelisense)

TypeScript

TSDTypeScript DefinitionsParte que nos permite ter um timo intelisenseTSCTypeScript CompilerO que transforma nossos arquivos TS em JS

Como usar?

Instalaonpm install tsd tsc typescript gExecuotsc 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 no s o que voc v na telaPode ser o diferencial do seu negcioJ deixei de usar apps por que elas eram feias

Material Design

Criado pela GooglePresente nos Androids (5+)Um conceito de DesignPossui vrias implementaes Bootstrap, Materialize, Material Design Lite, Angular Material

JavaScript em larga escala

Dia-a-dia aplicaes maiores usam JavaScriptDiviso entre Frontend e BackendInclusive nas contrataesERPs, Bancos, eCommerces entre outros j usam

Uso

Via classes do CSSmdl_cardmdl_*

Uso

Via Componentes

DEMOCriando um Card utilizando componentes do Material Design

AngularJsO queridinho do momento!

AngularJs

Criado internamente na Google em 2009 (O tempo AVUA!!)Trouxe o padro MVC para aplicaes JavaScriptIntroduziu uma forma de componentizar diferenteSeu uso cresce dia-a-dia o queridinho da vezEst indo para verso 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

Dvidas?

OBRIGADO

34