Devcast Brasil: ExtJS 4 e Sencha Touch 2

51
ExtJS 4 com Sencha Touch 2

description

Devcast apresentado no dia 05/jun sobre ExtJS 4 e Sencha Touch 2

Transcript of Devcast Brasil: ExtJS 4 e Sencha Touch 2

Page 1: Devcast Brasil: ExtJS 4 e Sencha Touch 2

ExtJS 4 com Sencha Touch 2

Page 2: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Loiane Groner

•Project Manager @ Citibank

•Evangelista Sencha e Java

•Autora! ;)

Page 3: Devcast Brasil: ExtJS 4 e Sencha Touch 2

www. sencha.com

Page 4: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Ext JS 4

Page 5: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Cross-Browser

Page 6: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Cross-Browser

Roda até no IEca 6!

Page 7: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Muito esforço e

CSS!

Page 8: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Pouco esforço!

==beleza natural

Page 9: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Muito esforço e

CSS!

Page 10: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Pouco esforço!

==beleza natural

Page 11: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Alguns Exemplos...

Page 12: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Fácil Integração

Page 13: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Faltou alguma coisa?

Page 14: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Construindo aplicações ExtJS

Page 15: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Como organizar um projeto JS?

Page 16: Devcast Brasil: ExtJS 4 e Sencha Touch 2

ExtJS 3

4k linhas de código

Page 17: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Difícil de testar

Difícil de manter

Difícil de trabalhar em equipe

Difícil de entender

Page 18: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Trabalho em Equipe

Pessoas diferentes == trabalho diferente

É preciso usar um padrão

Page 19: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Código precisa ser organizado

Boas práticas precisam ser seguidas

Evitar confusão com versão de controle

Page 20: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Model View Controller == MVC

Page 21: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Model

Carrega e Gerencia dados da app

Dados dos requests da View

Page 22: Devcast Brasil: ExtJS 4 e Sencha Touch 2

View

Gerencia a visualização dos dados

Componentes UI

Page 23: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Controller

Gerencia inputs do usuário

Atualiza o Model e View

Page 24: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Model

Page 25: Devcast Brasil: ExtJS 4 e Sencha Touch 2

View

Page 26: Devcast Brasil: ExtJS 4 e Sencha Touch 2

View

Page 27: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Controller

Page 28: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Benefícios do MVC

Escalabilidade

Mantenabilidade

Flexibilidade

Page 29: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Demo - ExtJS 4

Page 30: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Mas “peraí...”

Page 32: Devcast Brasil: ExtJS 4 e Sencha Touch 2

“Bora na onda mobile também!”

Page 33: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Sencha Touch 2

Page 34: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Primeiro framework Javascript para desenvolvimento de apps mobile ricas

usando padrões web

Page 35: Devcast Brasil: ExtJS 4 e Sencha Touch 2
Page 36: Devcast Brasil: ExtJS 4 e Sencha Touch 2
Page 37: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Motivos

Page 38: Devcast Brasil: ExtJS 4 e Sencha Touch 2
Page 39: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Vai aprender várias linguages e vai fazer uma aplicação para cada

dispositivo?

Page 40: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Vai limitar?

Page 41: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Alguns Exemplos...

Page 42: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Voltando a nossa app...

Page 43: Devcast Brasil: ExtJS 4 e Sencha Touch 2
Page 44: Devcast Brasil: ExtJS 4 e Sencha Touch 2
Page 45: Devcast Brasil: ExtJS 4 e Sencha Touch 2

E look and feel?

Page 46: Devcast Brasil: ExtJS 4 e Sencha Touch 2
Page 47: Devcast Brasil: ExtJS 4 e Sencha Touch 2

E testes?

Page 48: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Siesta!

Page 49: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Para saber mais...

Cursos Gratuitos e Online:

ExtJS 4 e Touch 2:

http://loiane.com

Page 50: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Download do Código:

https://github.com/loiane/devincachu2012

Page 51: Devcast Brasil: ExtJS 4 e Sencha Touch 2

Obrigada!