Desenvolver um aplicativo híbrido se torna a cada dia uma tarefa comum no dia a dia do profissional web. Para facilitar o trabalho temos diversos frameworks, neste post vou destacar o Phonon framework, trata-se de um UI framework, bem simples de usar e com aparência bem próxima as telas nativas do Android e Windows phone.
O que é Phonon Framework?
Criado pela Quark dev, este framework foi criado para ser leve, flexível, escalável, customizável. Entre as diversas características destaco o gerenciador de páginas e o router que é baseado nas atividades nativas do sistema Android. Oferece suporte a Codova e PhoneGap, além disso, CSS e JavaScript são baseados nas especificações de Material design.
O mais importante, 67 kb é o tamanho do framework todo, pronto para uso, mas você pode usar apenas o phonon-core .js que tem apenas 23 kb 😉
| Framework | Versão | Tamanho comprimido | Tamanho com dependências necessárias |
|---|---|---|---|
| Ionic | 1.1.0 | 209.4 kB (ionic.js, ionic-angular.js) | 414.5 kB (ionic-bundle.js) |
| OnSenUI | 1.3.8 | 265.6 kB | 535.1 kB |
| Framework7 | 1.2.0 | 253.8 kB | 253.8 kB |
| Phonon | 1.0.0 | 62.1 kB ♥ | 62.1 kB ♥ |
| Phonon + Riot | 1.0.0 – 2.2.4 | # | 74.85 kB |
| Phonon + Angular | 1.0.0 – 1.4.3 | # | 207.6 kB |
| Phonon + React | 1.0.0 – 1.4.3 | # | 183.6 kB |
Recursos e UI components
Recursos
- Página + navegação
- i18n (internacionalização/multi idiomas)
- Ajax
- Device
- Eventos
Componentes
- Uteis
- Painéis
- Painel lateral
- Diálogos
- Notificações
- Ações flutuantes
- Popovers
- Preloaders
- Tabs
- Tabelas
- Formulários
- Listas
- Listas com acordion
- Grid
- Autocomplete
Você pode ver toda a documentação acessando Phonon Framework docs.
Principais duvidas
- Posso desenvolver aplicativos Android usando Phonon?
Pode, para Android, IOs, Windows phone, outras plataformas como Navegadores (aplicativos para navegadores) e para web (sites), ah, também pode desenvolver para Windows 7, Windows 8 e qualquer outra plataforma que rode aplicativos híbridos. - Dá pra desenvolver um aplicativo móvel usando apenas o Phonon?
Definitivamente não, o Phonon é um UI framework, isto é, ele serve para criar a parte visual e as interações com o usuário. Para desenvolver você vai precisar de um framework como o PhoneGap ou Ionic, eles vão lhe fornecer acesso ao hardware dos dispositivos
Sem dependências
Phonon não depende de outras bibliotecas ou frameworks para funcionar, tudo que você precisa é programar usando JavaScript, CSS e HTML5, mas claro, se você quiser, pode utilizar o framework de sua preferência como jQuery, AngularJS, React, Riot e outros. Phonon é muito flexível e funciona perfeitamente com outros frameworks.
Além de tudo isso ainda é compatível com dispositivos…
| Android | iOS | IE | Chrome | Firefox | Opera |
|---|---|---|---|---|---|
| 4.1+ | 7+ | 10+ | 30+ | 10+ | 12+ |
Ué, acabou, não tem mais?
Tem sim, agora que você já conhece o Phonon Framework, você já pode começar a brincar com ele, em breve publicarei novos conteúdos relacionados ao Phonon não se esqueça de se inscrever para receber novas atualizações. Leia também Como criar um app com Phonon Framework.
Brother, eu estava tentando utilizar o Phonon também, eu fui testar a aplicação de teste ( o exemplo da pizza ) e no navegador normal funciona 100%, porém quando eu coloco a aplicação em meu smartphone ( motorola maxx com android 4.1 ), e seleciono a pizza na lista, se eu clicar em alguma opção como “voltar”, “cancelar”, ou “pedir” abre o pop-up do alert porém após esse popup(alert) fechar e eu tentar clicar em outra opção como “voltar”, “cancelar”, ou “pedir” não acontece nada, e como se tivesse travado uma div na frente da tela, porém invisível. Sabe como posso corrigir isso?
@ LEONARDO
Tente usar a versão mais recente do Phonon, pode ser que a versão que você tem possua um bug.
Falopa!