A AppGyver anunciou o Supersonic, um novo framework para construir apps moveis híbridas para Android e iOS que, segundo a AppGyver, promete fornecer "performance nativa real", graças a uma nova abordagem para a concepção de apps híbridas. O Supersonic também está integrado com o Steroids, uma impressionante IDE multi-plataforma para apps híbridas.
O Supersonic é construído em cima do framework CSS Ionic e do Cordova, mas usa uma nova abordagem para combinar HTML5 e código nativo, que é chamada de arquitetura de aplicação multi páginas. Segundo a AppGyver, Isto apresenta vários benefícios, tanto na performance de interface do usuário como na complexidade da página, e traz uma significante vantagem sobre as soluções concorrentes.
O Supersonic também tem a sua própria abordagem sobre o uso de elementos de interface do usuário versus elementos HTML/CSS, então transições de página, modals, navigation bars, tab bars, drawers, e outros elementos de interface do usuário são totalmente nativos, garantindo ao usuário uma experiência e performance nativas.
O InfoQ falou com Harri Sarsa, diretor de relações com o desenvolvedor na AppGyver, para aprender mais sobre o Supersonic.
Você poderia descrever a arquitetura interna do Supersonic mais detalhadamente?
Em nível nativo, temos o AppGyver Wrapper, que é nosso próprio código de execução em Objective-C ou Java responsável por tornar possível ter uma app binária com o conteúdo em HTML5. Ele inclui o Cordova levemente aprimorado e é totalmente compatível com seus plugins. Ele também tem uma série de melhorias não encontradas em nenhum outro wrapper, principalmente APIs relacionadas a interface do usuário nativa e navegação, mas também coisas como servir seus arquivos através de um servidor local ao invés do protocolo de arquivos.
No topo do wrapper, temos o Supersonic framework. Isso inclui por padrão o CSS de nosso fork do Ionic, mas o mais importante, uma API Javascript e estrutura de projeto que lhe permite acessar uma série de melhorias de nível nativo. Todas APIs do núcleo do Cordova são acessíveis, além de componentes de interface de usuário nativa (Isso é único no Supersonic). Por exemplo, ao invés de usar uma div com "position:absolute" como header, nós usamos um navigation bar nativo, o que significa que tudo sempre estará no lugar correto, Nós usamos componentes web HTML5 para habilitar declarativamente elementos nativos de interface do usuário. Por exemplo, o elemento é incluído como um componente web que mostra a barra de navegação nativa quando está presente na página.
Fora isso, o Supersonic é um framework agnóstico, então pode se usar qualquer framework de preferência. Nós realmente gostamos do AngularJS, por isso há uma série de exemplos e diretrizes inclusas específicas do Angular.
No topo de tudo isso está o Supersonic Data, quer permite a ligação de dados de "três vias", tornando os dados sincronizados na view, no controller e no servidor backend. O Supersonic Data funciona com qualquer backend REST, e nós fornecemos um banco de dados grátis para o desenvolvimento.
Quais são as vantagens para a arquitetura multi páginas do Supersonic?
A maneira que as apps móveis são estruturadas são fundamentalmente diferentes das apps web modernas. Ao invés de complexas interfaces do usuário em constante mudança em apps web modernas (como gmail), para a maioria das apps móveis só se tem uma view na tela por vez. Em uma app totalmente nativa, pode se construir um tipo de "storyboard" da app, e a pilha de navegação nativa cuida da mudança para uma nova view, manipulando o histórico de navegação, compartilhando dados entre as views, mantendo o estado nas views que não estão visíveis na tela, etc.
Como todos os outros wrappers híbridos estão presos a apresentação de uma única WebView, frameworks como o Ionic não tem escolha a não ser uma abordagem SPA (Simple Page Application): onde existe somente um arquivo app.html, e o AngularJS ou algum outro tipo de solução de roteamento que cuida da manipulação do DOM para a criação da transição de páginas, renderização do novo conteúdo, manutenção do histórico, etc.
Com o Supersonic, dividimos o app em múltiplos documentos HMTL e alavancamos a navegação nativa com alto desempenho. Assim quando se navega para mostrar a view index, não é necessário redesenhar através do DOM. Em vez disso, você tem, por exemplo, um arquvio cars/index.html que contém o HTML específico para a sua view. Quando se clica em um carro na lista, o controlador JS da view index processa um WebView completamente diferente, renderizando o cars/show.html para a pilha de navegação nativa, animando a nova view na tela com uma transição nativa suave. Isso significa que o original index.html vive abaixo do show.html, permitindo a manutenção superior do estado. O botão voltar nativo volta para a tela anterior.
O mesmo paradigma se aplica para nosso drawer/side menu e tabs desde que nenhum redesenho pesado no DOM esteja em processo. Por exemplo: trocar de tabs instantaneamente, ela é realizada pela GPU e pelo mecanismo de UI do telefone, e não pela implementação do WebKit.
Você poderia descrever brevemente o ferramental do Supersonic?
O ferramental é chamado Steroids. Basicamente, se tem uma interface de linha de comando (CLI) baseado no Node.js que pode ser usado para criar um novo projeto Supersonic, gerar o esqueleto do código, abrir inspetores web para depurar, executar emuladores para iOS e Android, gerenciar dependências via Bower e npm, visualizar log dos dispositivos e mais. O CLI funciona no OS X, Windows e Linux.
No núcleo do fluxo de trabalho está o app Scanner que pode ser baixado da App Store ou Google Play. Ele funciona com o Steroids Development Server que pode ser iniciado a partir do CLI. Basta conectar o Scanner ao computador usando um QR code. O Scanner realiza o download do HTML5, configura a app e exibe a mesma no dispositivo, permitindo o desenvolvimento da app sem precisar abrir o XCode ou Android Studio. (Isto significa desenvolvimento iOS no Windows/Linux!) A app Scanner inclui todo o código nativo no AppGyver Wrapper, então a app irá se parecer e comportar exatamente como faria um app compilada.
Após desenvolver localmente é possível publicar a app na cloud, através de nosso Build Service. O Build Service constrói um binário da aplicação, permitindo o envio dela para as app stores.
Para onde o Supersonic está indo?
Algumas coisas futuras incluem construções locais com o Xcode ou Android Studio para o desenvolvimento rápido de plugins, mais funcionalidades no Supersonic Data como login views, exemplos de uso do ferramental do Steroids com outros frameworks além de novas funcionalidades como o suporte integrado a notificações push.
A longo prazo, queremos fazer do Supersonic o melhor framework híbrido para apps, com apps multi plataformas que são indistinguíveis de aplicativos nativos, juntamente com poderosas integrações de dados. Acreditamos que a combinação de nativo e HTML5 é a maneira de chegarmos lá.
Para aprender mais sobre o Supersonic, o AppGyver fornece uma série de vídeos sobre a interface do usuário, associação de dados e ferramental, bem como uma extensa documentação.