Download - ExtJS - Jumpstart para o Grupo DevRioClaro
![Page 1: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/1.jpg)
Jumpstart
Por Daniel da Cunha Bueno / 2014
![Page 2: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/2.jpg)
Seja bem vindo(a)!
Somos um grupo voluntário e
independente de desenvolvedores de
software, com o intuito de disseminar conhecimento e fortalecer a
comunidade local
DevRioClaro [email protected]
![Page 3: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/3.jpg)
Softwarenão é feito por
máquinas,mas por
pessoas!
![Page 5: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/5.jpg)
Livro para sorteio no dia do evento!
30% de desconto - “DevRioClaro30” (válido até 05/08/2014)
www.novatec.com.br
![Page 6: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/6.jpg)
2 e-Books para sorteio no dia do evento!15% desconto - “JUMPSTART”(válido de 18 até 21/07/2014)
www.casadocodigo.com.br
![Page 7: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/7.jpg)
Desconto de 40% livro impresso e 10% eBook - “V00031”(válido até [while true])
www.lcm.com.br
![Page 8: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/8.jpg)
{
nome: ‘Daniel da Cunha Bueno’,
idade: 31,
email: ‘[email protected]’,
entusiastaWebDesktopApps: true,
github: https://github.com/danielcbueno
}
![Page 9: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/9.jpg)
É um framework de aplicações JavaScript puro que funciona em qualquer Browser, desde do IE6 para até a mais recente versão do Chrome.
Ele permite que você criar as melhores aplicações multi-plataformas usando nada além de um Browser, e tem uma API fenomenal.
![Page 10: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/10.jpg)
» Originalmente criada como uma extensão da biblioteca YUI por Jack Slocum, Ext JS incluía interoperabilidade com jQuery e Prototype. Começando com a versão 1.1.
![Page 11: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/11.jpg)
» Em 4 de dezembro de 2007 foi lançada a versão 2.0, na qual não mantinha nenhuma compatibilidade com a versão anterior, e vinha com a primeira documentação API (Também deixa de depender do YUI,Prototype e jquery).
» Ainda no lançamento dessa versão, é disponibilizado um guia de migração para a versão atual.
» Ponto marcante da versão é a disponibilidade de interfaces gráficas muito próximas as de aplicações desktop.
![Page 12: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/12.jpg)
» Em 6 de julho de 2009 é lançada a versão 3.0 com suporte a REST e a criação do Ext.Direct(Simular ao SignalR da Microsoft).
» Essa já é a primeira versão que o framework é compatível com a versão anterior.
» Foram disponibilizados os componentes de gráficos em Flash e o componente ListView.
![Page 13: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/13.jpg)
» Em 26 de Abril de 2011 é lançado a versão 4.0 com um sistema de classe inteiramente revisado, com uma nova estrutura de pacote de acesso a dados.
» Os gráficos em Flash são trocados por gráficos em SVG.
» Criada a opção de desenvolver aplicações na arquitetura MVC (Muito obrigado Sencha!)
![Page 14: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/14.jpg)
» No mês de maio desse ano (2014) é lançado a versão 5.0.
» O ponto mais marcante dessa versão é o suporte mutuo da aplicação para rodar em Browsers tanto de Desktop, quanto e browsers de tablets e smartphones.
![Page 15: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/15.jpg)
» Em 15 de Junho de 2010 os mantenedores de JQTouch, RaphaelJS anunciam a criação de uma nova organização.
» Nome da organização é Sencha Inc.
» Conseguem um fundo de investimento inicial para criação da empresa de aproximadamente seis milhões de dólares.
» O salto de qualidade da versão 3.0 para a versão 4.0 é muito elevado.
![Page 16: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/16.jpg)
![Page 17: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/17.jpg)
» Atualmente o ExtJS possui dois tipos de Licenciamento :˃ Licenciamento com código aberto, desde que toda a aplicação seja
disponibilizada na internet com o código aberto também.
˃ Licenciamento com código fechado, que tabulado pela imagem abaixo:
![Page 18: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/18.jpg)
» Anteriormente eu tinha estudado algumas bibliotecas como Backbone, AngularJS, Marionette, RequireJS.
» Para que ?
» Para criar as aplicações web mais leves para o meu cliente final.
» Por que ?
» Porque ele vai reconhecer uma aplicação desenvolvida de um panorama diferente.
![Page 19: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/19.jpg)
» Uma tela é uma página, seja ela em ASP.NET, PHP,JAVA,etc que rendereiza um HTML.
» Que provavelmente irá chamar um arquivo CSS.
» Que provavelmente irá chamar um arquivo JavaScript.
» Que provavelmente irá chamar uma ou mais imagens.
![Page 20: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/20.jpg)
HTTP Request
O acesso à http://www.minhaplicacaotradicional.com.br/inicio.aspx
1º Roundtrip
2º Roundtrip
3º Roundtrip
4º RoundtripAcesso ao Banco de dados
![Page 21: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/21.jpg)
HTTP Request
Acesso direto no banco de dados remoto
Infelizmente não existe, pois precisamos acessar o banco de dados pelo protocolo HTTP.
![Page 22: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/22.jpg)
» Foi ai que surgiram as chamadas AJAX.
» Com acesso apenas aos dados.
» Sem a necessidade de carregar a página
» E começamos a ter um dinamismo maior no funcionamento de nossas das páginas.
HTTP Request
![Page 23: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/23.jpg)
» Bibliotecas javascripts que carregam sua aplicação em poucas requests.
» Faz com que nossas aplicações rodem com uma velocidade maior.
» Template no lado do Client e não mais no servidor.
» Apenas os JSON são carregados
![Page 25: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/25.jpg)
» API extensa com mais de diversas classes.» Remete a uma ideia similar ao do .Net Framework ou ao
Java.» Fácil de aprender.» Rápido para desenvolver.» Possibilidade de criar aplicações robustas.» Disponibilização de estrutura MVC (Model View
Controller)» Encoraja a adoção de padrões de codificação e
documentação.» Ferramentas auxiliares de bônus que fazem muita
diferença para os demais frameworks.
![Page 26: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/26.jpg)
» Sencha CMD
» Sencha Architect
» JSDuck
» Temas nativos que são fáceis de customizar
» Esses itens serão abordados com maior clareza na próxima apresentação do dia 02/08/2014.
![Page 27: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/27.jpg)
» No próximos slides irei mostrar como criamos uma classe da maneira convencional javascript.
» E depois veremos como seria a mesma classe se fosse com ExtJS.
![Page 28: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/28.jpg)
(Para o exemplo foi escrito um código com a última versão do ECMA Script 5)
![Page 29: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/29.jpg)
(Para o exemplo foi escrito um código com a última versão do ECMA Script 5)
![Page 30: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/30.jpg)
![Page 31: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/31.jpg)
![Page 32: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/32.jpg)
» Comparação de criação de classes do modo nativo VS ExtJS
![Page 33: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/33.jpg)
» Permite que a classe possua métodos estáticos
» Permite nativamente que a classe seja singleton.
» Mixin (Como se pudéssemos dar uma habilidade a uma classe permanentemente, atua na definição da classe.)
» Override (Útil para sobreposição de classes já em funcionamento e aplicação de paths de correção)
» Plugins (Similar ao mixins, mas atua na instância do objeto)
» Feature (Similar ao plugins, mas só funciona para um tipo específico de classe)
![Page 34: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/34.jpg)
» Definição » Uso
![Page 35: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/35.jpg)
» É como se pudéssemos herdar várias classes em uma única classe.
» Centralizar o desenvolvimento de um conjunto de funcionalidades específicas, assim como facilitar a manutenção da mesma.
![Page 36: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/36.jpg)
» Possibilidade de desenvolver aplicações no conceito Model View Controller.
» Facilita a estrutura e administração da do crescimento da aplicação.
» Economia de memória através do uso de controllers
![Page 37: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/37.jpg)
![Page 38: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/38.jpg)
» Demonstração de uma aplicação MVC.
![Page 39: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/39.jpg)
![Page 40: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/40.jpg)
» http://www.sencha.com
» http://extjs.eu/ext-examples/
![Page 41: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/41.jpg)
Aplicação MVC com acesso de dados remoto.
Sencha CMD
Criação de Packages
Build de Packages
Criação de repositório locais
Instalação de Pacotes
JSDuck
![Page 42: ExtJS - Jumpstart para o Grupo DevRioClaro](https://reader033.vdocuments.com.br/reader033/viewer/2022042614/559e94b61a28ab2c3d8b474e/html5/thumbnails/42.jpg)