Apps Híbridas

Domina lo nativo

Pero la previsión...

Build-once

deploy everywhere

está maduro el desarrollo híbrido?

Nativo, Híbrido o Web

Algunas necesidades empujan a desarrollo nativo

Casos de uso

Cómo podríamos clasificarlas

• Nativas
• Web responsive - HTML5
• Multiplataforma compilado/interpretado en Nativo

• HTML5 Apps
• HTML 5 Mobile Frameworks

Multiplataforma

• Multiplataforma compilado/interpretado en Nativo
  • Rhomobile
  • Silver
  • Appcelerator Titanium
  • Xamarin
  • RubyMotion

HTML5 Apps

• HTML5 Apps
  • PhoneGap
  • Apache Cordova
  • Crosswalk
  • ionic
  • react-native
  • meteoric
  • appery.io
  • hybridge

HTML5 Mobile Frameworks

• HTML 5 Mobile Frameworks
  • ​App Framework Intel
  • Twitter Bootstrap 3
  • jQuery Mobile 
  • Sencha Touch
  • Kendo UI
  • ChocolateChip
  • TopCoat

Diferencias

Coste vs UX

Facebook confidential

https://www.facebook.com/notes/facebook-engineering/under-the-hood-rebuilding-facebook-for-ios/10151036091753920

tenían razón?

http://hipertextual.com/archivo/2012/12/fastbook/

Facebook returns

https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/

Facebook

learn-once, write-anywhere

ReactJs for Web Mobile

React-native for Mobile Apps

ionic

ionic ~ AngularJs + Cordova

AngularJs

JavaScript MVC

106 kb production version (minified)

single-page pattern

Cordova

Cordova

ionic stack

http://learn.ionicframework.com/resources/

Install

NodeJS - http://nodejs.org/

$ sudo npm install -g cordova ionic

$ ionic start app tabs

$ cd app 

$ ionic platform add ios / android

$ ionic build ios / android

$ ionic emulate ios / android

$ npm -g install ios-sim

http://ionicframework.com/getting-started/

UI

Componentes de UI

• Header
• Content
• Footer
• Buttons
• List
  • Divider
  • Icons
  • Buttons
  • Avatars
  • Thumbnails
  • Inset Lists
• Cards

• Forms
• Toggle
• Checkbox
• Radio Buttons
• Range
• Select
• Tabs
• Grid
• Utility

Splash and icons

Ref

icon.png (>=192x192) en resources/
$ ionic resources --icon

splash.png (>=1200x1200) en resources/

$ ionic resources --splash

$ ionic resources # (both)

Estructura de archivos

Utiliza bower como package manager

Se basa en plugins que se pueden instalar para el acceso a APIs nativas

http://learn.ionicframework.com/resources/

Desarrollando

HTTP server + live reload

$ ionic serve

HTTP server + live reload with Android & iOS preview

$ ionic serve —lab 

Ionic Lab

creator

Ionic Creator

playground

Ionic PlayGround

Routing

var app = angular.module('example', ['ionic']);

app.config(function($stateProvider) {

    $stateProvider
        .state('index', {
            url: '/',
            templateUrl: 'home.html'
        })
        .state('music', {
            url: '/music',
            templateUrl: 'music.html'
        });

});

https://github.com/jorgevila/ionic-example