Entendendo Ionic Framework

Overview

  1. Nativo vs Híbrido
  2. Ionic - O que é?
  3. UI Components
  4. Ionic CLI
“Eu quero desenvolver um app!!!”

"Desenvolver nativo ou híbrido?"

Quanto mais plataformas. Mais problemas.

  • É necessário conhecimento em cada plataforma
  • Código fonte diferente
  • Desenvolvimento caro. Tempo e valor.

Apps Híbridas!

HTML5 que se parece com nativo

Web envolvida por uma camada nativa

Acesso direto as APIs nativas

O ambiente de desenvolvimento web é familiar

One code base to rule them all!

“Não estamos mais em 2007!”
Year Device Processor RAM
2007 iPhone 400 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2015 iPhone 6 1.4 GHz dual-core 1 GB

SDKs Nativas...

São ótimas! Cheias de recursos!

Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.

Ionic's Adoption

  • 16,000+ Github Stars
  • Top 40 most starred Github repos
  • Consistently Top 10 trending JS Github repos
  • Ionic CLI 95,000 downloads/month
  • 600,000+ Ionic apps have been started from our CLI
  • Released Alpha: November 2013
  • Released Beta: March 2014
  • Released RC: March 2015

Tecnologias WEB que você já

Conhece & Ama

(Feels like Home)

Standing on the Shoulders

of Angular

Extends the HTML vocabulary

Proven for large-scale app development

UI Components using Directives & Services

Sass!

CSS gerado a partir do preprocessador Sass

Altere rapidamente o look and feel do seu app

CSS pensado para ser facilmente sobreescrito

Listas Complexas

  • AngularJS Directive
  • Botões expostos por swiping
  • Reordenação
  • Deleção



  
    List Item {{ item.id }}

Collection Repeat

  • Substitui o ng-repeat Angular
  • Inspirado pelo UICollectionView do iOS
  • Scrool por milhares de registros
  • Renderiza somente os itens visíveis
  • Scroll suave!



  

    
{{ c.name }}

    
{{ c.email }}

VIEWS EM CACHE

  • State mantido
  • Posição do scroll é mantida
  • Eventos do ciclo de vida da view
    • $ionicView.loaded
    • $ionicView.leave
    • $ionicView.beforeEnter
    • $ionicView.beforeLeave
    • $ionicView.afterEnter
    • $ionicView.afterLeave
    • $ionicView.unloaded
  • Altamente configurável

Other Components

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

Spinners

  • Animated SVGs
  • More than just rotating icons
  • Defaults to platform's spinner
  • Style with CSS

Ionicons

700+ MIT licensed font-icons included

ionicons.com

npm install -g ionic cordova

Boilerplate app structure ready for customization

LiveReload both local and native builds

Build and run native apps

$ ionic start myApp blank

$ ionic start myApp tabs

$ ionic start myApp sidemenu

MIT LICENSED

Free to use (even commercially)

Get Started with Ionic!


Getting started guide
ionicframework.com/getting-started


Documentation
ionicframework.com/docs


Visit the Community Forum
forum.ionicframework.com


Contribute on GitHub
github.com/driftyco/ionic

Materiais de estudo!


Ionic Brazil - Guia do Desenvolvedor
github.com/IonicBrazil/guia-do-desenvolvedor


Ionic Adventures by @juarezpaf
github.com/juarezpaf/ionic-adventures


Muito Obrigado!


@arthuralv3s

https://github.com/arthuralves

http://github.com/arthuralves.io/entendendoionic

Inspirado por:

  • http://alvarowolfx.github.io/ionic-present
  • http://driftyco.github.io/ionic-present