devHangout-ionic



devHangout-ionic

0 0


devHangout-ionic

Presentación sobre ionicFramework para #devHangout

On Github nicobytes / devHangout-ionic

Construyendo Aplicaciones hibridas con AngularJS y Ionic

Organizer of

Vista General

¿Cómo funciona un aplicación híbrida? Vista general de esta tecnica Desarrollo nativo vs Desarrollo híbrido Ionic Framework Componentes Casos de exito Ionic 2 y Angular 2
“Quiero construir un app!”

Más Plataformas. Más Problemas.

  • Conocimiento en cada plataforma
  • Baes de codigo aparte
  • Largos tiempos de desarrollo

¿Por qué seguimos programando para múltiples plataformas ?

“¿Hay alguna alternativa ?”

Aplicaciones Hibridas!

HTML5 que actua como nativo

Envueelto en unwebview

Acceso directo APIs nativas

Un entorno de desarrollo familiar

Una sola base de codigo

¿Como funciona?

“Las aplicaciones hibridas son lentas!” “Los tiempos han cambiado'”
“No estamos en el 2007”
Año Dispositivo Procesador RAM 2007 iPhone 400 MHz 128 MB 2010 iPhone 4 1 GHz 512 MB 2015 iPhone 6 1.4 GHz dual-core 1 GB

https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0

https://mixpanel.com/trends/#report/android_os_adoption

SDKs Nativas...

Son grandiosas!

Common UI, APIs, views, navigation, stack history, transitions, interactions, gestures, etc.

No Hay SDK Web

  • Es el salvaje oeste para aplicaciones híbridas
  • Tenemos que cerrar la brecha entre la web y nativas
  • Necesitamos ricos , componentes e interacciones de interfaz de usuario de estilo nativo
  • Necesitamos API de interfaz de usuario , no sólo a los widgets

Tecnologías Web que ya

conoces y amas

(Te sentirás como en casa)

Con los poderes de

Angular 1 y 2

Extendiendo el vocabulario HTML

Probada para el desarrollo de aplicaciones a gran escala

Usa componentes de UI comoDirectives & Services

Con AngularJS 2 componentes nativos web

Enfocado en nativo

  • Siguiendo el modelo del SDK nativo
  • Construido para trabajar con Cordova

Rendimiento Obsessed

  • Animaciones de hardware acelerado
  • Manipulación Mínimo DOM

Css plano

Sass!

CSS generado desdeSass

Dar rápidamente a su aplicación su propia UI

CSS diseñado para ser facilmente sobre escrito

Ionicons

Over 700 MIT licensed font-icons included

ionicons.com

Construido por los nerds (como tú)

Construido y mantenido por los desarrolladores y diseñadores apasionados por las tecnologías web.

¿Como se organiza todo esto?

  • Your App
  • Ionic
  • Angular
  • WebView (Cordova)
  • Native App
Componentes de UI

Complex Lists

  • AngularJS Directive
  • Buttons exposed by swiping
  • Reorder
  • Delete
<ion-list>

  <ion-item ng-repeat="item in items" item="item">
    List Item {{ item.id }}
  </ion-item>

</ion-list>

Collection Repeat

  • Replacement for Angular's ng-repeat
  • Inspired by iOS’s UICollectionView
  • Scroll through thousands of items
  • Only renders the viewable items
  • Smooth scrolling!
<div class="list">
  <div collection-repeat="c in contacts">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

Navigation

  • Uses AngularUI Router
  • Shows back button when possible
  • Transitions follow direction of nav
  • Updates the app's URL
  • Multi-history stack
<ion-tabs>

  <ion-tab title="Home" icon="ion-ios-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-ios-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Swipe To Go Back

  • Swipe back to previous view
  • Interactive transition
  • Benefit of cached views
  • Still updates the app's URL
  • WebView (Cordova) only

Other Components

  • Side Menus
  • Actionsheet
  • Modal
  • Pull To Refresh
  • Spinners
  • Slidebox
  • Infinite Scroll
  • Swipeable List Options
  • Popup
  • Popover
  • Loading Overlay
  • Inputs
  • Buttons
  • etc.
¿ Quien lo usa ?

IBM Mobile First

Apps

ShowCase

MIT LICENSED

Free to use (even commercially)

Ionic's Adoption

  • 21,600+ Github Stars
  • Top 40 most starred Github repos
  • Consistently Top 10 trending JS Github repos
  • Ionic CLI 95,000 downloads/month
  • 600,000+ Ionic apps have been started from our CLI
  • Released Alpha: November 2013
  • Released Stable: December 2015

Get Started with Ionic!

Getting started guide ionicframework.com/getting-started

Documentation ionicframework.com/docs

Visit the Community Forum forum.ionicframework.com

Contribute on GitHub github.com/driftyco/ionic

</html>

@ionicframework

nicobytes.github.io/devHangout-ionic

Construyendo Aplicaciones hibridas con AngularJS y Ionic