Jumpstart

Por Daniel da Cunha Bueno / 2014

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 devrioclaro@gmail.com

Softwarenão é feito por

máquinas,mas por

pessoas!

Espaço físicoInfra-estrutura dos encontros

www.mappase.com.br

Livro para sorteio no dia do evento!

30% de desconto - “DevRioClaro30” (válido até 05/08/2014)

www.novatec.com.br

2 e-Books para sorteio no dia do evento!15% desconto - “JUMPSTART”(válido de 18 até 21/07/2014)

www.casadocodigo.com.br

Desconto de 40% livro impresso e 10% eBook - “V00031”(válido até [while true])

www.lcm.com.br

{

nome: ‘Daniel da Cunha Bueno’,

idade: 31,

email: ‘danielcbueno@msn.com’,

entusiastaWebDesktopApps: true,

github: https://github.com/danielcbueno

}

É 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.

» 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.

» 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.

» 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.

» 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!)

» 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.

» 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.

» 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:

» 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.

» 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.

HTTP Request

O acesso à http://www.minhaplicacaotradicional.com.br/inicio.aspx

1º Roundtrip

2º Roundtrip

3º Roundtrip

4º RoundtripAcesso ao Banco de dados

HTTP Request

Acesso direto no banco de dados remoto

Infelizmente não existe, pois precisamos acessar o banco de dados pelo protocolo HTTP.

» 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

» 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

Acesso o link: http://todomvc.com/ para ver mais frameworks similares a esses

» 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.

» 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.

» 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.

(Para o exemplo foi escrito um código com a última versão do ECMA Script 5)

(Para o exemplo foi escrito um código com a última versão do ECMA Script 5)

» Comparação de criação de classes do modo nativo VS ExtJS

» 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)

» Definição » Uso

» É 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.

» 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

» Demonstração de uma aplicação MVC.

» http://www.sencha.com

» http://extjs.eu/ext-examples/

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