Hoje vamos dar sequência à série sobre plataformas para desenvolvimento de apps móveis feita pelos meus alunos da Universidade de Passo Fundo. O primeiro artigo desta série você pode ver aqui.

Por Eduardo Backes e Eduardo Stolfo

Desenvolver uma solução que funcione nos mais diversos dispositivos já foi algo muito trabalhoso e oneroso, porém, com o passar dos anos foram surgindo ferramentas que facilitam e desoneram esse processo, algumas delas permitem que o desenvolvedor codifique a aplicação focando em uma linguagem e/ou ambiente específico e posteriormente, a ferramenta faz a tradução desse código para outro código compatível com outro ambiente/linguagem.

De fato, nos últimos anos presenciamos a grande evolução dos navegadores de internet, esses transformaram-se de apenas interpretadores de códigos HTML em ambientes poderosos para o desenvolvimento e consumo de aplicações online. Com a evolução do Javascript os programadores conseguiram de fato usar os navegadores para entregar soluções completas para as mais diversas áreas, desde sites institucionais, até sistemas de gerenciamento de tráfego, etc.

Hoje as pessoas utilizam cada vez mais seus smartphones para acessar a internet através de navegadores mobile. Com isso, viu-se a possibilidade de produzir somente um código de uma aplicação web que pode comportar-se de acordo com as especificações do dispositivo que a acessou. Dessa forma, faz-se uma vez e utiliza-se em qualquer lugar. Para auxiliar no desenvolvimento de tais aplicações, existem vários frameworks. Um deles é o SenchaTouch/ExtJS.

SenchaTouch/ExtJS

O ExtJS é um framework Javascript que, segundo o site da Sencha (que é a empresa responsável pelo seu desenvolvimento e comercialização), provê tudo que um desenvolvedor precisa para construir aplicações web mutiplataforma focadas no uso intensivo de dados. Seu rico conjunto de ferramentas e temas ajudam a aumentar a produtividade no desenvolvimento e aumentar a entrega de aplicações web com visual bonito.

Resumidamente, o ExtJS é um framework front-end focado no desenvolvimento de interfaces de usuário (UI), que por serem web, não possuem restrições quanto ao tipo de aparelho e/ou sistema operacional. Algumas restrições podem ocorrer quanto ao navegador utilizado, tendo em vista que existe uma quantidade grande de navegadores web.

Segundo Jay Garcia em seu artigo The Raise and Fall of ExtJS, o Sencha Touch foi o primeiro framework mobile HTML5 do mundo, originalmente desenvolvido com suporte ao WebKit (somente para Android e iOS) e continuou separado do framework desktop (ExtJS) até a sua unificação na versão ExtJS 6.0. Também na versão 6.0, o framework passou a utilizar a arquitetura MVVM (Model View View Model).

A Sencha também disponibiliza algo que auxilia (e muito) no desenvolvimento de aplicações, o Sencha CMD, que é uma ferramenta de linha de comando multiplataforma desenvolvida para disponibilizar tarefas automatizadas que englobam todo o ciclo de vida das aplicações desde o momento de gerar um novo projeto até o deploy para produção, pode-se citar algumas funcionalidades como geração de código, compilador Javascript, WebServer, gerenciamento de pacotes, workspaces, integração com Cordova/PhoneGap, etc.

Utilização

O primeiro passo antes de qualquer coisa é a instalação do Sencha CMD, o qual pode ser encontrado no endereço https://www.sencha.com/products/sencha-cmd, posteriormente, deve-se obter o framework Extjs no endereço https://www.sencha.com/produtcs/extjs/evaluate.

As aplicações criadas com o ExtJS dividem-se em três diferentes tipos:

• Universal: Possui suporte tanto para dispositivos desktop quanto para móveis;
• Classic: Possui suporte somente para desktops;
• Modern: Possui suporte exclusivo para dispositivos móveis;

Após isso, com um único comando é possível criar uma aplicação universal. Esse aplicativo base possuí um conjunto central de modelos e controladores e ao mesmo tempo apresenta dois modos de visualização diferentes, o modern (mobile) e o classic (desktop). Com esses modos de visualização é possível criar a estrutura de models, stores, viewModels e viewControllers globais e apenas criar uma codificação distinta de views para cada um dos modos de visualização. As classic views contém peças tradicionais da base de código do ExtJS, que suporta navegadores, tablets e laptops. Por sua vez as modern views contém um base de código compatível com toques e gestos, tal base oferece suporte à aplicações HTML5 universais para todos os navegadores modernos (IE10+), tablets e smartphones modernos.

Aplicações do tipo Universal necessitam – em alguns casos – que o desenvolvedor produza código tanto para a apresentação em desktop, quanto para mobile, como no caso de tabelas de informações que nos desktops são apresentadas com o componente Grid e no mobile são apresentadas com o componente List. A própria documentação do framework tem a função de filtrar os componentes desktop, mobile ou ambos.

Mais informações sobre a utilização do Sencha CMD com o ExtJS são encontradas na documentação oficial em http://docs.sencha.com/cmd/guides/extjs/cmd_app.html.

Licença

As licenças do ExtJS são liberadas por desenvolvedor, porém, a Sencha exige um mínimo de compra de 5 (cinco) licenças. Na compra das licenças, as mesmas incluem 1 (um) ano de manutenção e suporte e direitos de licenciamento e distribuição.

Depois de fazer a instalação do Sencha CMD e de fazer o download do ExtJS já podemos começar, seguindo a documentação oficial é possível criar um projeto inicial.

Depois do comando “sencha app generate” temos a seguinte estrutura de diretórios:

Ao rodar o comando “sencha app watch”, é criado um servidor para testes no endereço localhost:1841 no qual temos o seguinte resultado (versão desktop e mobile respectivamente):

Prós

Orientado a objetos: framework baseado na orientação a objetos, tornando possível a reutilização, extensão e todos os benefícios oferecidos pela orientação a objetos.

MVVM: na versão 6 do ExtJS foi implementado o modelo MVVM, consertando assim uma grande dificuldade que os desenvolvedores tinham em testar o código, pois, no modelo antigo, era necessário ter uma view renderizada para que os controllers pudessem ser testados. Agora, com a implementação do MVVM (Model View View Model) é possível testar os controllers sem a necessidade de renderizar as views.

Out of the box: uma das premissas do ExtJS é que o desenvolvedor terá uma enorme gama de componentes disponíveis para a utilização, sem que seja necessário a utilização de componentes de terceiros.

Internacionalização: vem com suporte a internacionalização e com todos os componentes já internacionalizados em diversas línguas.

Cross-browsing: um de seus maiores atrativos é a consistência da renderização em diversos navegadores distintos.

Suporte diferenciado: a maioria das empresas que escolhem utilizar o ExtJS no seu desenvolvimento leva em consideração o suporte prestado pela equipe da Sencha. O suporte normalmente é prestado pelos próprios desenvolvedores do framework em uma espécie de Stackoverflow privado.

Documentação: seguindo a mesma linha do suporte, o framework conta com uma documentação ampla e de fácil acesso, cheia de exemplos e direto ao ponto. Basta procurar o que quiser encontrar no combo de busca, simples e rápido. Também conta com uma documentação exemplificada, ou seja, somente exemplos de implementações dos componentes.

Contras

Lock in: a própria Sencha desencoraja os desenvolvedores utilizarem bibliotecas de terceiros. Todas as bibliotecas e/ou componentes que não são desenvolvidas pela Sencha são de difícil integração e manutenção em projetos ExtJS.

HTML ruim: o HTML gerado pelo framework é uma bagunça, isso se deve ao fato de que, visando a compatibilidade entre os navegadores, o framework gera todo o seu layout utilizando tabelas, tornando assim muito complicada a manipulação do HTML gerado pela biblioteca.

Javascript não segue padrões: o desenvolvimento de uma aplicação com o ExtJS não segue nenhum padrão Javascript consolidado pela comunidade, por consequência, isso acaba aumentando a curva de aprendizagem do framework.

Preço: para a aquisição de todos os componentes, o valor da licença se torna excessivamente caro.

Referências

• http://docs.sencha.com/extjs/6.5.1/guides/getting_started/getting_started.html
• http://docs.sencha.com/cmd/guides/intro_to_cmd.html
• https://en.wikipedia.org/wiki/Ext_JS
• https://en.wikipedia.org/wiki/Sencha_Touch
• https://dzone.com/articles/ext-js-6-by-sencha-the-good-the-bad-the-ugly
• https://www.sencha.com/store/extjs/
• https://www.sencha.com/products/extjs/#overview
• https://hackernoon.com/the-rise-and-fall-of-ext-js-c9d727131991