Frameworks Cordova: Ionic vs. Framework7

Hoje em dia, os desenvolvedores web dominam o mundo. JavaScript é usado em todos os lugares que se pode programar. Entre essas áreas, o desenvolvimento de aplicativos móveis foi uma das primeiras maneiras de se expandir: cerca de dez anos atrás, o PhoneGap permitia a instalação de aplicativos HTML e JavaScript para iOS e Android.

Desde então, a tecnologia teve seus altos e baixos: apesar da facilidade de desenvolvimento, esses aplicativos eram obviamente bem diferentes dos aplicativos nativos. Vanilla HTML e JavaScript baseado em navegador eram direcionados a navegadores, e não havia como eles migrarem perfeitamente para esse novo campo.

Até hoje os principais problemas ainda são:

• Dificuldades em aderir ao design e animação nativos
• Efeitos complexos de transição de tela
• Manipulação de eventos de toque
• Desempenho em grandes listas
• Posicionamento de elementos fixos
• Adaptação para diferentes tamanhos de tela
• Localizações de elementos de controle nativos (por exemplo, a barra de status do iOS)
• Adaptação a diferentes navegadores móveis

Por que usar uma estrutura para aplicativos Cordova?

A tecnologia Cordova é frequentemente subestimada por causa de aplicativos que apresentam os problemas acima. Os frameworks visam compensá-los e levar os aplicativos HTML o mais próximo possível dos aplicativos nativos, tanto em design quanto em desempenho.

Vejamos alguns exemplos de aplicativos híbridos. Eles são feitos com as duas estruturas mais bem-sucedidas atualmente – além da Onsen UI – que são definidas para facilitar a expansão dos desenvolvedores da Web no mundo moderno: Framework7 e Ionic.

Sobre a estrutura iônica

O Ionic foi desenvolvido pela Drifty Co. em 2012 e é baseado no Angular. Desde então, está em desenvolvimento ativo, recebendo investimentos significativos e uma forte comunidade de desenvolvedores. O site oficial afirma que milhões de aplicativos foram desenvolvidos com base nele.

No momento da redação deste artigo, a versão mais recente é o Ionic 3 baseado no Angular 5. O Ionic 4, visando flexibilidade e independência do Angular, está em beta inicial.

Além do mecanismo de interface do usuário, uma maravilhosa biblioteca de componentes e uma interface para acessar as funções nativas do dispositivo, o Ionic oferece vários recursos, serviços e utilitários extras.

O CLI Iônico

A interface de linha de comando do Ionic é usada para inicialização interativa do projeto (ou seja, um assistente), gerando páginas e componentes e executando um servidor de desenvolvimento que permite criar aplicativos em movimento e recarregá-los ao vivo. Ele também fornece integração com serviços de nuvem Ionic.

Laboratório e DevApp

Lab é o mini-serviço extremamente útil que permite imitar o trabalho do aplicativo em diferentes plataformas no navegador do desenvolvedor Ionic. O DevApp ajuda você a implantar rapidamente um aplicativo em um dispositivo real.

Empacotamento, implantação e monitoramento

O Ionic vem com um pacote de serviços da Web que simplificam e aceleram a criação, depuração, teste e atualização de aplicativos para testadores e usuários.

Os planos de Ionic mudam com frequência, no entanto. Alguns serviços existentes anteriormente, como Auth, Push, Analytics e View, foram fechados, causando protestos dos assinantes.

O Criador

Este é o editor gráfico de arrastar e soltar do Ionic para desenvolver interfaces funcionais.

Sobre a Estrutura 7

Este framework foi desenvolvido em 2014 pelo estúdio russo iDangero. Por fim, um desenvolvedor está trabalhando no projeto, sem incluir vários contribuidores menores para o repositório GitHub.

Originalmente, o Framework7 consistia no conjunto de componentes de interface do usuário no estilo do iOS 7 recém-lançado, do qual recebeu seu nome. Mais tarde, um tema Android foi adicionado e ambos os temas foram atualizados para o iOS e o Material Design mais recentes.

Recentemente, o desenvolvimento do projeto acelerou e se expandiu de um conjunto de componentes para uma estrutura completa para aplicativos móveis, integrando tecnologias e ferramentas populares.

O suporte e os exemplos do Framework7 usando Vue.js existem desde a v1, e a v3 também suporta React. É isso que pode permitir que o projeto concorra seriamente com o mais popular Ionic, que oferece apenas Angular e TypeScript.

Instalação e primeiro lançamento

Iônico

Para começar a trabalhar com o Ionic, instale-o com o NPM:

 npm install -g ionic

Em seguida, selecione o modelo para o aplicativo futuro. O site oficial do Ionic oferece vários modelos, ou você pode selecionar um modelo vazio para criar o aplicativo do zero com o ionic start myApp blank .

Vamos selecionar um design simples. Execute o seguinte comando:

 ionic start Todo tabs

Responda “Sim” quando o instalador perguntar “Você gostaria de integrar seu novo aplicativo ao Cordova para direcionar iOS e Android nativos?” Isso integrará automaticamente o aplicativo ao Cordova e o preparará para implantação em plataformas móveis.

Na próxima etapa, o instalador se oferecerá para nos conectar ao Ionic Pro SDK. Responda “Não” por enquanto para manter o exemplo simples.

Instale o pacote @ionic/lab adicional para obter a conveniente interface do usuário de depuração — imitações no navegador de dispositivos iOS, Android e Windows:

 cd Todo npm i --save-dev @ionic/lab

Agora você pode iniciar o aplicativo no modo de depuração. Isso permite desenvolver e depurar o aplicativo ao vivo no navegador da web:

 ionic lab

Como resultado, você obterá vários endereços úteis:

O serviço de depuração do Ionic Lab é iniciado na porta 8200. O próprio aplicativo é executado na porta 8100, e o link Open fullscreen do Ionic Lab leva até lá. A janela do navegador com o Ionic Lab em execução abre automaticamente.

Além disso, o Ionic fornece o endereço do aplicativo na rede local . Isso é extremamente útil, pois permite abrir o aplicativo no navegador do dispositivo móvel, desde que o dispositivo esteja na rede local (por exemplo, via Wi-Fi). Além disso, você pode usar o botão Adicionar à tela inicial para reabrir o aplicativo no modo de tela cheia. Essa é a maneira mais rápida de testar seu aplicativo no dispositivo.

Outra forma é o aplicativo Ionic DevApp, que pode ser instalado em um dispositivo móvel e fornece acesso ao aplicativo via rede local. Oferece suporte a plugins (Ionic Native) para acesso às funções nativas do dispositivo e exibição de logs.

Estrutura 7

As ferramentas de desenvolvimento da F7 são menos avançadas que as da Ionic, e a CLI de inicialização automática não está documentada. No entanto, o site oficial fornece vários repositórios do GitHub com projetos de modelo que ajudarão você a começar a desenvolver.

Semelhante ao template Tabs no Ionic, o F7 oferece Tabbed Views , mas usaremos um template mais funcional que integra o Framework7 com o React. O suporte para React foi adicionado na v3. Para isso, clone o repositório de templates:

 git clone https://github.com/framework7io/framework7-template-react.git Todo

Alterne para a pasta do projeto, busque as dependências e inicie o processo:

 cd Todo npm install npm start

Os resultados da execução são semelhantes ao Ionic: você obtém um link local e um link dentro de sua rede para acesso instantâneo de um dispositivo real:

Agora você pode abrir http://localhost:3000/ em um navegador. O Framework7 não inclui emuladores de dispositivo integrados, então vamos usar o Modo de dispositivo do Chrome DevTools para obter um resultado semelhante:

Como você pode ver, o Framework7 é semelhante ao Ionic, pois possui iOS e Material Design como seus dois temas padrão. O tema é selecionado com base na plataforma.

Infelizmente, ao contrário de um modelo semelhante com suporte a Vue.js nos modelos oficiais do React, o Webpack ainda não está implementado e isso nos proíbe de usar o Hot Module Replacement para atualizar rapidamente os aplicativos sem recarregar a página. Ainda assim, você pode usar o recurso de recarga ao vivo padrão, que recarrega a página sempre que você altera o código-fonte.

Configurando o Cordova

Para instalar aplicativos em dispositivos e emuladores com Cordova, você precisa baixar e configurar ferramentas de desenvolvimento para iOS e Android, bem como Cordova CLI. Você pode ler mais sobre isso em nosso artigo anterior e no site oficial do Cordova nas seções Guia da Plataforma iOS e Guia da Plataforma Android.

Iônico

A experiência mostra que para resolver com sucesso a maioria dos problemas do Ionic, a depuração baseada em navegador com testes ocasionais em dispositivos reais é suficiente.

Apesar de você aceitar a integração para iOS e Android, e o Ionic preparar as configurações necessárias no arquivo config.xml e recursos na pasta de resources , você ainda precisa conectar as duas plataformas ao aplicativo com o Cordova:

 cordova platform add ios cordova platform add android

Agora você pode iniciar o aplicativo Cordova em emuladores “reais”, instalá-lo no dispositivo móvel e até enviá-lo para a App Store e Google Play.

O próximo comando instala o aplicativo em seu dispositivo iOS se estiver conectado por USB. Caso contrário, o aplicativo será instalado no iOS Simulator.

 cordova run ios

Muito provavelmente, as Ferramentas de Linha de Comando do Xcode informarão você sobre a necessidade de configurar certificados de desenvolvedor. Você precisará abrir o projeto no Xcode e executar as ações necessárias. Isso só precisa ser feito uma vez e, posteriormente, você poderá executar o aplicativo com o Cordova CLI.

Às vezes, o iOS Simulator não inicia automaticamente. Nesse caso, inicie-o manualmente, por exemplo, através do Spotlight.

O emulador do Android pode ser iniciado de maneira semelhante:

 cordova run android 

Observe que o comando cordova run inicia e instala o aplicativo já compilado , que não usa o servidor ionic serve / ionic lab , portanto, o Live Reload não funcionará. Para desenvolver e depurar o aplicativo ao vivo, use o navegador na rede local ou instale o aplicativo Ionic DevApp.

A experiência mostra que para resolver com sucesso a maioria dos problemas do Ionic, a depuração baseada em navegador com testes ocasionais em dispositivos reais é suficiente.

Estrutura 7

O modelo “React” Framework7 escolhido anteriormente não fornece automação de configuração para o Cordova, portanto, você precisará adicionar plataformas manualmente. Crie um projeto Cordova na subpasta cordova da pasta do seu projeto:

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

O template é baseado no Create React App, então para rodar o projeto compilado em um ambiente Cordova você precisa adicionar a "homepage": "." configuração para o arquivo ./package.json . Este arquivo pode ser encontrado no nível raiz do projeto:

Compile o projeto Framework7 e copie o resultado para o projeto Cordova:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

Agora você pode iniciar o aplicativo em um dispositivo ou emulador:

 cd cordova/ cordova run ios 

Você terminou! Esperemos que o Framework7 alcance o padrão de desenvolvimento do Ionic e a conveniência de configuração inicial.

Criando listas de tarefas

Iônico

Vamos finalmente começar a criar o aplicativo! Como este é um aplicativo de tarefas pendentes, a página principal (arquivo src/pages/home/home.html ) conterá a lista de tarefas com a capacidade de “marcar concluída” e “adicionar novo”.

Ionic oferece os componentes <ion-list> e <ion-item> para listas. Primeiro, remova a propriedade padding do elemento <ion-content> para tornar a lista em toda a tela. Na lista, coloque o texto usando um elemento <ion-label> e adicione um elemento <ion-toggle> para marcar as tarefas concluídas.

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

Volte para a guia do navegador com o serviço Ionic Lab em execução. O aplicativo foi atualizado automaticamente:

Excelente! Agora mova os dados da tarefa para o objeto JS e configure sua apresentação HTML com Angular. Acesse o arquivo src/pages/home/home.ts e crie a propriedade tasks da instância da classe HomePage :

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

Agora você pode consultar a matriz de tasks no código HTML. Use a construção *ngFor Angular para criar iterativamente elementos de lista para cada elemento de matriz. O código fica menor:

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

Tudo o que resta é adicionar o botão para criar novas tarefas no cabeçalho da página. Para fazer isso, use os componentes <ion-navbar> , <ion-buttons> , <button> e <ion-icon> :

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

Observe a construção angular (click)="addTask()" . Como você pode imaginar, ele adiciona o manipulador de toque ao botão e chama o método addTask() para nosso componente. Vamos implementar este método para abrir a janela de diálogo do nome da tarefa quando o botão é tocado.

Para isso, você precisa do componente AlertController Ionic. Para usar este componente, importe seu tipo:

 import { AlertController } from 'ionic-angular';

E especifique-o na lista de parâmetros do construtor para a página:

 constructor(public alertCtrl: AlertController) { }

Agora você pode chamá-lo no método addTask() . Configure-o após o controlador. Você pode criar e exibir a janela de diálogo com as seguintes chamadas:

 this.alertCtrl .create(/* options */) .present();

Especifique o cabeçalho da mensagem, a descrição do campo e dois botões no objeto de options . O botão “OK” adicionará uma nova tarefa ao array de tasks :

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

Após adicionar o elemento ao array this.tasks , o componente será reconstruído de forma reativa e uma nova tarefa será exibida na lista.

O código da página inteira se parece com isso agora:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

Reinstale o aplicativo no dispositivo:

 cordova run ios

É isso! Não foi tão difícil, foi? Agora vamos tentar fazer o mesmo com o Framework7.

Estrutura 7

Os modelos do Framework7 são feitos para mostrar todos os recursos do componente, portanto, você precisa deixar apenas a página src/components/pages/HomePage.jsx nos arquivos src/components/App.jsx e src/routes.js , limpar seu conteúdo e remova comentários de código extras.

Agora crie a lista de tarefas. Framework7 fornece componentes <List simple-list> e <ListItem> para isso. Para colocar uma chave de conclusão de tarefa nele, adicione o componente <Toggle slot="after"/> . Lembre-se de importar todos esses componentes do módulo framework7-react . Agora o código da página se parece com isso:

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

E o próprio aplicativo se parece com isso:

Muito bom começo. Vamos tentar mover os dados estáticos do código HTML novamente. Para isso, use um componente inteligente em vez do sem estado que tínhamos. Importe a classe abstrata Component do React:

 import React, { Component } from 'react';

E escreva o array tasks para a instância da variável de state :

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

O aplicativo real provavelmente usará um fluxo de dados mais abstrato—por exemplo, com Redux ou MobX—mas para um pequeno exemplo, manteremos o estado do componente interno.

Agora você pode usar a sintaxe JSX para criar iterativamente elementos de lista para cada tarefa na matriz:

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

Tudo o que resta é adicionar o cabeçalho com o botão para criar uma nova tarefa novamente. O elemento <Navbar> já existe, então adicione <Link iconOnly> ao elemento <NavRight> :

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

No React, você adiciona manipuladores de toque usando a propriedade onClick e definindo o ponteiro de retorno de chamada nela. Implemente o manipulador para mostrar a caixa de diálogo do nome da tarefa.

Cada elemento no Framework7 tem acesso à instância do aplicativo por meio da propriedade this.$f7 . Você pode usar o método dialog.prompt() desta forma. Antes de fechar a caixa de diálogo, chame o método setState() do componente React e passe a cópia do array anterior com um novo elemento. Isso atualizará a lista de forma reativa.

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

Aqui está o código completo do componente:

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

Confira o resultado:

Tudo o que resta é reconstruir e implantar no dispositivo:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

Feito!

O código final para ambos os projetos está disponível no GitHub:

• ionic-todo-app
• framework7-react-todo-app

Resultados

Agora você viu o tutorial completo com cada framework Cordova. Como o Framework7 se compara ao Ionic?

Configuração inicial

O Ionic é muito mais fácil de instalar graças ao seu CLI, enquanto o F7 requer mais tempo para selecionar e configurar um modelo ou instalação passo a passo desde o início.

Diversidade de Componentes

Ambos os frameworks têm um conjunto completo de componentes padrão maravilhosamente criados em dois temas: iOS e Material Design. Além disso, o Ionic fornece esses componentes no tema do Windows e um mercado gigantesco de temas de usuário.

Além de imitar totalmente o design e as animações nativas, muita atenção é dada à otimização do desempenho, fornecendo resultados fantásticos: Muitas vezes, é quase impossível distinguir aplicativos em qualquer estrutura dos nativos.

O Framework7 fornece uma lista adicional de componentes mais complexos e úteis, como Smart Select , Autocomplete , Calendar , Contacts List , Login Screen , Messages e Photo Browser . Por outro lado, o Ionic oferece uma grande variedade de componentes criados pelo usuário.

Ecossistema e Comunidade

O Ionic obviamente ganha nesses parâmetros graças à sua vida útil mais longa, forte apoio financeiro e comunidade ativa. A infraestrutura Ionic está em constante evolução: serviços de suporte e soluções em nuvem dão lugar a novos e o número de plugins continua crescendo.

O Framework7 está melhor do que nunca, mas carece muito de suporte da comunidade.

Dependências de terceiros

Framework7 é mais flexível em relação a soluções de terceiros. Sua maior força é provavelmente a capacidade de escolher se você usa Vue ou React no projeto, assim como Webpack ou Browserify. Ionic é baseado em Angular e requer conhecimento nele (e, portanto, TypeScript também).

No entanto, recentemente, os desenvolvedores do Ionic anunciaram um novo Ionic 4 beta, alegando ser completamente agnóstico da estrutura da interface do usuário - não há mais dependências Angular se você não as quiser.

Frameworks Cordova: ainda uma maneira poderosa de desenvolver aplicativos móveis multiplataforma

O uso do Cordova depende do projeto específico. De fato, a velocidade do desenvolvimento de aplicativos móveis híbridos e seu suporte a múltiplas plataformas são suas principais vantagens. Mas é sempre uma troca e, às vezes, você pode enfrentar algumas falhas que não existiriam com uma abordagem nativa. Essas estruturas maravilhosas e suas comunidades fazem um ótimo trabalho para reduzir essas falhas e facilitar nossas vidas. Então, por que não experimentá-los?