+vitormalencar

o futuro dos aplicativos híbridos

Ionic 2 overview

@vitormalencar

IONIC V1 é lindo *_* 

SDKs Híbridos não existiam

Validação do conceito

Adoção massiva <3 

Range  

 - iOS 6

 - Android 2.3 - 4.3

Melhorias 

Dispositivos melhores e mais rápidos

(menos dispositivos lentos =)

web Api melhor difundida

Melhorias nas engines do browser!

IONIC 2 

Framework ainda mais poderoso

evoluindo com o feedback da comunidade

melhorias de desempenho com o angular2

muitas features novas *__*

Novo Rumo ! 

Simplicidade 

Plataforma Continua 

Performance <3

Maior poder de criação

código apenas uma vez

Simplicidade 

Component Model 

Elements e Attributes

Preparado para Customização

Mais js puro ! 

<button>...</button>

<button danger>...</button>

<ion-checkbox>...</ion-checkbox>

<ion-list>
  <ion-item>...</ion-item>
  <ion-item>...</ion-item>
</ion-list>

          

@Page({
  templateUrl: 'profile.html'
})
export class Profile {
  constructor() {
    this.first = 'Biff';
    this.last = 'Tannen';
  }
}

<ion-navbar>
  <ion-title>Profile</ion-title>
</ion-navbar>


<ion-content>
  {{first}} {{last}}
</ion-content>

          

View

Construtor

<ion-nav [root]="home"></ion-nav>

@App({
  templateUrl: 'app.html'
})
class MyApp {
  constructor() {
    this.home = HomePage;
  }
}

Plataforma

Continua

iOS e Android

Uma base de código

mesmo html e css

Muito mais que apenas um css diferente

ICONES

+ de 900 Ionicons

Em svg 

iOS e MD 

<icon home></icon>

<icon mail></icon>

<icon share></icon>

<icon map></icon>

V1 Navegação

Navegação dependente da barra de navegação

UI-Router: não dava controle total =/

Bugs em camadas T_T 

NAVEGAÇÃO

PUSH/POP 

Totalmente repensada

Mais nativo iOS/Android

Controlle completo da navegação

suporte a deep-linking <3

Controle completo

Push na nav stack

Pop da the nav stack

Insert/Remove/Update

URL reflete o state 

pushSettings() {
  this.nav.push(Settings);
}

goBack() {
  this.nav.pop();
}

resetHome() {
  this.nav.setRoot(Home);
}

Customização e temas

Cores e Variáveis 

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222222,
)

V1 ANIMATIONS

mistura de CSS e JS

Animações css limitadas 

.entering-view {
  transform: translate3d(...);
  transition-property: transform;
  transition-duration: 300ms;
}

.entering-view.active {
  transform: translate3d(...);
}

WEB ANIMATIONS API

Animações em js 

seguindo as especificações 

nativo no Chrome/Android

(finalmente um polyfil para ios ) 

V2 Animações

animações extensíveis 

controle interativo

 wrapper para  WAPI

SUPER CONFIGURAVEL

Tudo tem um config

Global config

Platform config

Attribute config

Component e config

Perguntas ?

Presente de natal ! 

<OBRIGADO>

@vitormalencar