Ionic Rocks

introduction to ionic framework and its incredible tools

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