Ionic Rocks

introduction to ionic framework and its incredible tools

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
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
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
38. E por ultimo mas não menos importante
40. Demo
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>