![Page 1: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/1.jpg)
![Page 2: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/2.jpg)
Front-end Developer⚡ Javascript <3
Mobile Development <3Hybrid Development <3
Gustavo Costa
![Page 3: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/3.jpg)
![Page 4: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/4.jpg)
'The top open source framework for building amazing mobile app’ - ionic.io
Ionic é um framework para criação de aplicativos híbridos
usando HTML, CSS e Javascript. Ele possui um conjunto
de componentes e funções prontas que nós podemos
usar e deixar nosso aplicativo mais funcional e atrativo.
![Page 5: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/5.jpg)
Ecossistema
Core Values
28k stars Github
10.000 participantes canal slack
3.2M desenvolvedores acessaram o ionic.io em 2016
200+ contribuidores
$12.22M em 4 rounds de 6 investidores (23 funcionários)
+4 milhões de apps foram iniciados com o Angular CLI
![Page 6: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/6.jpg)
União de duas plataformas
O Ionic une o melhor de duas grandes plataformas: Angular & Apache Cordova
1
Tecnologias Web
Com Ionic nunca foi tão fácil desenvolver um aplicativo
2
Produtividade, reaproveitamento e custo
Desenvolver software não é uma tarefa nada fácil, Ionic resolve muitos problemas para nós.
3
Tão popular, qual o motivo?
![Page 7: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/7.jpg)
APACHE CORDOVAANGULAR
União de plataformas
UX/UI NATIVO
![Page 8: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/8.jpg)
Angular - Ionic
Todos os componentes do Ionic são Componentes do Angular 1
Navegação e controle de rotas é feito pelo Angular2
Sistema de build (JIT/AOT) é feito pelo Angular3
![Page 9: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/9.jpg)
Cordova - Ionic
<WebView>
Apache Cordova cria um aplicativo ‘nativo' que abre uma <WebView> 100%x100%, que abre nosso projeto 1
Como é um aplicativo nativo, temos acesso a qualquer API nativa2
O Apache Cordova provê uma interface de código nativo Swift/Java através de Javascript, os famosos plugins3
O 'Ionic Native' abstrai isso em serviços do Angular e notifica o sistema de mudanças do Angular via Observables
4
![Page 10: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/10.jpg)
APACHE CORDOVAANGULAR
get best things
![Page 11: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/11.jpg)
Primeiro framework para desenvolvimento multiplataforma estável.
1
Padrão UX/UI das plataformas
2
Muito fácil começar um projeto e utilizar uma API nativa.
3
IONIC 1 - ACERTOS
:)
![Page 12: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/12.jpg)
Lento em alguns casos
1
Possui apenas o padrão de design do iOS
2
Sem suporte para web.
3
IONIC 1 - ERROS
:(
![Page 13: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/13.jpg)
2.x
![Page 14: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/14.jpg)
IONIC 2COMPONENTES
ionicframework.com/docs/v2/components
![Page 15: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/15.jpg)
![Page 16: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/16.jpg)
Próxima geração de Performance
AOT
Change Detection
Tree Shaking
Web Workers
![Page 17: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/17.jpg)
IONIC 2NATIVE SCROLLING
![Page 18: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/18.jpg)
IONIC 2ERROR REPORTING
![Page 19: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/19.jpg)
IONIC 2TESTABLE
![Page 20: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/20.jpg)
IONIC 2FRIENDS
![Page 21: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/21.jpg)
IONIC 2PROGRESSIVE WEB APPS
![Page 22: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/22.jpg)
IONIC 2ELECTRON
![Page 23: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/23.jpg)
2.2
IONIC 2 - ACTIVE STATE+ BUGFIX + RESPONSIVE
![Page 24: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/24.jpg)
2.4
IONIC 2 - ACTIVE STATE+ANGULAR 2.4
![Page 25: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/25.jpg)
IONIC 2 - ACTIVE STATESplint Pane
![Page 26: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/26.jpg)
IONIC 2 - ACTIVE STATEGrid, Flex box
![Page 27: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/27.jpg)
HTML
JAVASCRIPT
CSS
O que preciso aprender?
COMECE HOJE!
![Page 28: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/28.jpg)
FUTUREIONIC 3
![Page 29: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/29.jpg)
FUTUREIONIC NATIVE
![Page 30: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/30.jpg)
FUTUREANGULAR 4
![Page 31: Ionic 2 como ferramenta para desenvolvimento móvel](https://reader031.vdocuments.net/reader031/viewer/2022022411/58e97e821a28aba6498b4cbf/html5/thumbnails/31.jpg)
OBRIGADO!
@GustavoCostaW
ionic.io