Criando apps híbridos com AngularJS e Ionic

Overview

  1. Apps Nativos vs Híbridos
  2. Introdução ao Ionic
  3. Componentes UI
  4. Ionic CLI
  5. Demos
"Eu preciso de um aplicativo nativo!"

Muitas platafomas. Muitos problemas.

  • Conhecimento em cada plataforma
  • Códigos separados
  • Curva de apredizado longa
  • Desenvolvimento caro

"Existe alguma alternativa?"
  • HTML5 como nativo
  • Web wrapped em uma camada nativa
  • Acesso direto a APIs nativas
  • Ambiente familiar de desenvolvimento web
  • Uma única base de código
"App Híbridos são lentos!"
"Os tempos estão mudando"

Dispositivos moveis evoluindo muito rapido!

Ano Dispositivo Processador RAM
2007 iPhone 620 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2015 iPhone 6 1.4 GHz dual-core 1 GB

Web-standards evoluindo rapido!

  • caniuse.com muito bom hoje em dia
  • Android agora é Chromium-based
  • Usuários de iOS mantem seus dispositivos atualizados

https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0

https://mixpanel.com/trends/#report/android_os_adoption

Tecnologias web que você conhece

Você vai se sentir em casa

Angular

  • Melhora a escrita do HTML
  • Comprovado para desenvolvimento de aplicativos em larga escala
  • Componentes UI usando Directives & Services

Obsessão por performance

  • Animações com aceleração de hardware
  • Manipulação mínima do DOM
  • Remove 300ms de delay no toque

Sass!

  • CSS gerado a partir do Sass
  • Modifica rapidamente a interface
  • O CSS pode ser facilmente sobrescrito
  • Variaveis baseadas em configuração padrão

Ionicons

700+ font-icons com licença MIT
ionicons.com

Adoção do Ionic

  • 23,000+ estrelas do GitHub
  • Top 50 dos que tem mais estrelas GitHub
  • Top 20 repositorios de JS
  • Ionic CLI 95,000 downloads/mês
  • 600,000+ Ionic apps iniciados pelo CLI
  • Released Alpha: Novembro 2013
  • Released estável: Maio 2015

Overview dos componentes

Listas complexas

  • AngularJS Directive
  • Exibir botões deslizando
  • Reordenar
  • Deletar



  
    List Item {{ item.id }}

Repetição de coleção

  • Similar ao ng-repeat do Angular
  • Inspirado no UICollectionView do iOS
  • Percorre varios itens
  • Apenas renderiza os itens visíveis
  • Rolagem suave



  

    
{{ c.name }}

    
{{ c.email }}

Navegação/Tabs

  • Utiliza as rotas do AngularUI
  • Exibe o botão de voltar quando possível
  • Transições seguem a direção da navegação
  • Funciona com o botão de voltar do Android

Side Menu



  
  
    
  

  
    
      
Left Menu

    

    
      ...

Outros componentes

  • Actionsheet
  • Modal
  • Pull To Refresh
  • Spinners
  • Slidebox
  • Infinite Scroll
  • Swipeable List Options
  • Popup
  • Popover
  • Loading Overlay
  • Inputs
  • Buttons
  • etc.

MIT LICENSED

Free para uso (inclusive comercialmente)

Ionic CLI

            
              $ npm install -g ionic cordova
              $ ionic start myapp sidemenu
              $ cd myapp
              $ ionic serve
  • Templates prontos para customização (blank, tabs, sidemenu)
  • LiveReload local e nativo (direto no dispositivo)
  • Compila e executa apps nativamente

App desenvolvidos com Ionic

showcase.ionicframework.com

Sworkit Personal Trainer

Moodle Mobile

Estrutura de arquivos e pastas

Exemplo de estrutura de arquivos e pastas usando o template sidemenu

Iniciando com o Ionic!

Introdução
ionicframework.com/getting-started

Documentação
ionicframework.com/docs

Forum da comunidade
forum.ionicframework.com

IonicBrazil - Guia do Desenvolvedor
https://github.com/IonicBrazil/guia-do-desenvolvedor

Contribuir no GitHub
github.com/driftyco/ionic

</html>

@ionicframework

https://github.com/driftyco/ionic-present

Fim

Dúvidas?