Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ionic Rocks

Ionic Rocks

introduction to ionic framework and its incredible tools

Vitor Alencar

May 16, 2015
Tweet

More Decks by Vitor Alencar

Other Decks in Technology

Transcript

  1. Ionic
    Rocks

    View Slide

  2. +Vitor Alencar
    @vitormalencar
    +Vitor Alencar
    @vitormalencar

    View Slide

  3. Agenda
    Overview
    native vs hybrids
    components de ui
    novidades

    View Slide

  4. Warning
    Todas as opiniões expressadas pelo palestrante aqui
    pelo palco, são baseadas apenas em suas próprias
    experiências. Não estamos aqui para falar mal de
    outras linguagens/frameworks. Todos tem o direito de
    errar. Não somos deuses e estamos aqui para buscar
    networking, desculpem qualquer coisa desde já. <3

    View Slide

  5. Overview

    View Slide

  6. Qual o
    problema?

    View Slide

  7. Native vs Hybrid
    ● Caro (serio muito)
    ● Conhecimento avançado
    ● Mais plataformas mais
    problemas
    ● varias plataformas
    ● flexivel
    ● menor custo
    ● HTML CSS JS

    View Slide

  8. View Slide

  9. permite a criação de aplicações móveis para
    diferentes plataformas em HTML, CSS e
    JavaScript

    View Slide

  10. MERÇA SUAS
    PALAVRAS PARÇA !
    " E A PERFORMANCE PARÇA ??
    "
    "DA ONDE QUE MEU TELEFONE
    VAI ACEITAR ISSO ?"
    MC

    View Slide

  11. 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
    DISPOSITIVOS MOVEIS
    ESTÃO MELHORANDO
    MUITO RÁPIDO

    View Slide

  12. View Slide

  13. View Slide

  14. Mas ainda não temos um SKD
    para a WEB

    View Slide

  15. Ionic !

    View Slide

  16. + +
    Awesome combination

    View Slide

  17. Iniciand

    View Slide

  18. Install
    $ sudo npm install -g cordova ionic
    $ ionic start my-app sidemenu

    View Slide

  19. Ui Components

    View Slide

  20. Complex Lists
    ● AngularJS
    Directive
    ● Swipe
    ● reordenar
    ● excluir

    View Slide

  21. Collection Repeat
    ● Substituto para o ng-repeat
    Angular
    ● Inspirado na
    UICollectionView do iOS (
    Super verboso )
    ● Possibilita scroll em listas
    gigantes de items
    ● Renderiza apenas os items
    visiveis
    ● Smooth scrolling!

    View Slide

  22. Navigation
    ● Usa AngularUI Router
    ● Mostra automaticamente o botão
    de voltar
    ● Botão fisico de voltar funciona
    ● Animações de transições
    ● Suporte a multiplas pilhas de
    histórico

    View Slide

  23. Side Menu

    View Slide

  24. Cached Views
    ● Mantém elementos da View
    ainda na DOM
    ● $scope apenas desconectado
    a cada transição
    ● Mantém o estado de cada tela
    ● Até mesmo a posição do
    scroll é mantida
    ● Eventos do Ciclo de Vida da
    View
    ● Altamente configurável

    View Slide

  25. E mais um bocado
    ● Side Menus
    ● Actionsheet
    ● Modal
    ● Pull To Refresh
    ● Slidebox
    ● Infinite Scroll
    ● Swipeable List Options
    ● Popup
    ● Popover
    ● Loading Overlay
    ● Inputs
    ● Buttons
    ● etc.

    View Slide

  26. Icons

    View Slide

  27. Power Tools

    View Slide

  28. Command line Interface !
    $ ionic platform add android/ios
    $ ionic serve

    View Slide

  29. Ngcordova

    View Slide

  30. Ainda com
    duvidas ?

    View Slide

  31. ● 14,000+ Github Stars
    ● Top 50 no Github
    ● Top 10 trending JS Github
    ● Ionic CLI 70,000 downloads/month
    ● 400,000+ Apps foram iniciados pelo CLI do
    Ionic
    ● Released Alpha: November 2013
    ● Released Beta: March 2014

    View Slide

  32. Novidades

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. E por ultimo
    mas não
    menos
    importante

    View Slide

  39. View Slide

  40. Demo

    View Slide

  41. View Slide

  42. Agradecimento
    Especial

    View Slide

  43. Daniel Castro
    @dancasttro
    Elias de Oliveira
    @faeliaso

    View Slide

  44. Front in
    Fortaleza 2014

    View Slide

  45. Perguntas ?

    View Slide

  46. +Vitor Alencar
    @vitormalencar
    +Vitor Alencar
    @vitormalencar

    View Slide