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

Ionic Rocks

Ionic Rocks

introduction to ionic framework and its incredible tools

072193805185e22e0f42720b3a048149?s=128

Vitor Alencar

May 16, 2015
Tweet

Transcript

  1. Ionic Rocks

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

  3. Agenda Overview native vs hybrids components de ui novidades

  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
  5. Overview

  6. Qual o problema?

  7. Native vs Hybrid • Caro (serio muito) • Conhecimento avançado

    • Mais plataformas mais problemas • varias plataformas • flexivel • menor custo • HTML CSS JS
  8. None
  9. permite a criação de aplicações móveis para diferentes plataformas em

    HTML, CSS e JavaScript
  10. MERÇA SUAS PALAVRAS PARÇA ! " E A PERFORMANCE PARÇA

    ?? " "DA ONDE QUE MEU TELEFONE VAI ACEITAR ISSO ?" MC
  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
  12. None
  13. None
  14. Mas ainda não temos um SKD para a WEB

  15. Ionic !

  16. + + Awesome combination

  17. Iniciand

  18. Install $ sudo npm install -g cordova ionic $ ionic

    start my-app sidemenu
  19. Ui Components

  20. Complex Lists • AngularJS Directive • Swipe • reordenar •

    excluir
  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!
  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
  23. Side Menu

  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
  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. •
  26. Icons

  27. Power Tools

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

    ionic serve
  29. Ngcordova

  30. Ainda com duvidas ?

  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
  32. Novidades

  33. None
  34. None
  35. None
  36. None
  37. None
  38. E por ultimo mas não menos importante

  39. None
  40. Demo

  41. None
  42. Agradecimento Especial

  43. Daniel Castro @dancasttro Elias de Oliveira @faeliaso

  44. Front in Fortaleza 2014

  45. Perguntas ?

  46. +Vitor Alencar @vitormalencar +Vitor Alencar @vitormalencar <obrigado>