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

1. Slide 1 de 293

2. CRIANDO APPS WEB MOBILE
COM TYPESCRIPT, ANGULARJS
E MATERIAL DESIGN

3. Sobre
Microsoft MVP desde 2013
Desenvolvedor Web desde 2005
Trabalhou em projetos nacionais e internacionais de grande porte
Foco em JavaScript, ASP.NET, WebAPI, Angular, NodeJs e outras
tecnologias Open Source
http://andrebaltieri.net/

4. Agenda
JavaScript hoje
Por que TypeScript?
Material Design
Por que AngularJs?
Web Mobile
Rodando a Aplicação
Browser
Browser Mobile
Instalada no Mobile
Desktop

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

6. JavaScript hoje!

7. JavaScript hoje!
Utilizado em sistemas de larga escala
Linguagem (Assembly) da Web
Lembram do WinJs?
Futuro promissor
Presente em todo lugar!

8. TypeScript
Guerra Civil da Web!

10. TypeScript
Desenvolvido na Microsoft
Criado por Anders Hejlsberg (Criador do C#)
Totalmente Open Source
Superset do JavaScript
Criado para “tipar” o JavaScript
Flexível
Quanto mais você “tipa” mais ele te ajuda

11. Por que TypeScript?
JavaScript é muito dinâmico
Refatorar não é simples
Compila para ES5 ou ES6
Possibilita uso de features futuras hoje!
Auxilia na escrita de código (Intelisense)

12. TypeScript
TSD
TypeScript Definitions
Parte que nos permite ter um ótimo intelisense
TSC
TypeScript Compiler
O que transforma nossos arquivos TS em JS

13. Como usar?
Instalação
npm install tsd tsc typescript –g
Execução
tsc MeuArquivo.ts
MeuArquivo.js

14. DEMO
Criando seu primeiro arquivo com
TypeScript

15. Material Design
LEVE, ELEGANTE, PHYNO, TUDO DE BOM!!!

16. Sobre design

17. Design importa sim!
Seu cliente usa Facebook, Inbox, Instagram e afins
Design não é só o que você vê na tela
Pode ser o diferencial do seu negócio
Já deixei de usar apps por que elas eram feias

18. Material Design
Criado pela Google
Presente nos Androids (5+)
Um conceito de Design
Possui várias implementações
Bootstrap, Materialize, Material Design Lite, Angular Material

19. JavaScript em larga escala
Dia-a-dia aplicações maiores usam JavaScript
Divisão entre Frontend e Backend
Inclusive nas contratações
ERPs, Bancos, eCommerces entre outros já usam

21. Uso
Via classes do CSS
mdl_card
mdl_*

22. Uso
Via Componentes
<md*>

23. DEMO
Criando um Card utilizando
componentes do Material Design

24. AngularJs
O queridinho do momento!

25. AngularJs
Criado internamente na Google em 2009 (O tempo AVUA!!)
“Trouxe” o padrão MVC para aplicações JavaScript
Introduziu uma forma de “componentizar” diferente
Seu uso cresce dia-a-dia
É o queridinho da vez
Está indo para versão 2.0

26. DEMO
Brincando com AngularJs

27. Rodando!
Vamos ao que interessa!

28. DEMO
2doo App no Browser

29. DEMO
2doo App no Browser Mobile

30. DEMO
2doo App Instalada

31. DEMO
2doo App Desktop

32. Dúvidas?

34. OBRIGADO