Aplicaciones híbridas usando tecnologías web.

Aplicaciones multiplataforma con un único desarrollo.

Tecnologías de última generación

Features

Obsesion por el Desempeño

• Animaciones acelaradas por Hardware
• Mínima manipulación del DOM (No JQuery)

Enfoque Nativo

• Modelado a partir de los SDKs nativos
• Construido para que trabaje con Cordova/Phonegap

Hermosamente Diseñado

• Sistema visual cohesivo
• Limpio y simple
• Fácil de modificar

Ionicons

Más de 500

AngularJS

Los componentes visuales (UI) son Directives

• Listas
• Tabs
• Side Menu
• Pull to Refresh
• entre otros...

<ion-list>
  <ion-item ng-repeat="item in items"
            option-buttons="buttons"
            class="item-thumbnail-left">
    <img ng-src="{{ item.pic }}">
    <h2>{{ item.name }}</h2>
    <p>{{ item.quote }}</p>
  </ion-item>
</ion-list>

Los componentes visuales (UI) son Directives

• Listas
• Tabs
• Side Menu
• Pull to Refresh
• entre otros...

<ion-tabs class="tabs-icon-only">

  <ion-tab title="Home" icon="ion-star">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Feedback" icon="ion-thumbsdown">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

  <ion-tab title="Messages" icon="ion-chatbubble-working">
    <ion-nav-view></ion-nav-view>
  </ion-tab>

</ion-tabs>

Los componentes visuales (UI) son Directives

• Listas
• Tabs
• Side Menu
• Pull to Refresh
• entre otros...

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-positive">
      <div class="title">Projects</div>
    </header>
    <ion-content has-header="true">
      <div class="list">
        <a href="#/work" class="item">Work</a>
        <a href="#/home" class="item">Home</a>
      </div>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Los componentes visuales (UI) son Directives

• Listas
• Tabs
• Side Menu
• Pull to Refresh
• entre otros...

<ion-content on-refresh="refreshData()">
  <ion-refresher></ion-refresher>
  <!-- content -->
</ion-content>

Los componentes visuales (UI) son Directives

• Listas
• Tabs
• Side Menu
• Pull to Refresh
• entre otros...

Los componentes visuales (UI) son Directives

• Listas
• Tabs
• Side Menu
• Pull to Refresh
• entre otros...

Text

Cordova

15 Plataformas

• Android
• iOS
• Windows Phone
• Blackberry
• Firefox OS
• WebOS
• Browser
• entre otros...

19 Plugins para conectarse con el SDK Nativo

• Cámara
• Contactos
• Acelerómetro
• GPS
• Base de datos
• Splashscreen
• Vibración
• entre otros...

Ejemplo

• Quickly start a project with starter templates
• Boilerplate app structure ready for customization
• Preconfigured tools: Gulp, Sass, Bower, etc.
• Start a local dev server with LiveReload
• Update Ionic Framework library files
• Build and run native apps

Tomado de http://ionicframework.com

                         $ npm install -g ionic

                          _             _
                         (_)           (_)
                          _  ___  _ __  _  ___
                         | |/ _ \| '_ \| |/ __|
                         | | (_) | | | | | (__
                         |_|\___/|_| |_|_|\___|  CLI