Ionic est un framework fantastique pour faire des applications mobile et la version 2 repousse encore les limites en complétant et simplifiant encore le développement cordova !
Cette présentation passe sur l'historique du développement hybride et dresse un panorama global de l'écosystème Ionic avant de rentrer plus en détail et détailler comment coder une simple TODO Liste mobile :)
8. ● Nouvelle stack technique
● Peu de personnes formées
● Développer plusieurs fois la même chose
● Environnements très spécifiques (offline, puissance, versions, diversité...)
12. PhoneGap / Cordova
Mars 2009 :
Lancement de PhoneGap par Nitobi
Octobre 2011 :
Rachat de Nitobi par Adobe
Séparation de la technologie (Cordova) et des services commerciaux (PhoneGap)
13.
14. Oups...
● UI moche
● UI peu réactive
● loin du look & feel natif
Mauvais support des standards du
web dans la WebView
Peu d’outils / librairies
Téléphones peu puissants
● App de mauvaise qualité
● Bugs
Souvent pour des projets à petit
budget...
29. Hybrid superpowers
Web App :
● Cross-platform
● Accès instantané
● Deep link
● Offline
http://bit.ly/voxxrin-bdx-lkn
30. Hybrid superpowers
Web App :
● Cross-platform
● Accès instantané
● Deep link
● Offline
Progressive Web App :
● Installation instantanée
● Lancement depuis la Home
● Push notifications
31. Hybrid superpowers
Web App :
● Cross-platform
● Accès instantané
● Deep link
● Offline
Progressive Web App :
● Installation instantanée
● Lancement depuis la Home
● Push notifications
Native App :
● Accès complet au téléphone
50. index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link ios-href="build/css/app.ios.css" rel="stylesheet">
<link md-href="build/css/app.md.css" rel="stylesheet">
<link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/Reflect.js"></script>
<script src="build/js/zone.js"></script>
<!-- the bundle which is built from the app's source code -->
<script src="build/js/app.bundle.js"></script>
</body>
</html>
51. app.ts
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
52. page1.ts
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
constructor() {
}
}
<ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple
tabs-based layout for apps that are going to
primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>app/</code>
directory to add or change tabs, update any
existing page or create new pages.
</p>
</ion-content>
53. page1.ts
import {Page} from 'ionic-angular';
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily
use a Tabbed UI.
</p>
</ion-content>`
})
export class Page1 {
constructor() {}
}
60. import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {TodoPage} from "./pages/todo/todo.page";
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {}
})
export class MyApp {
rootPage: any = TodoPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
// http://ionicframework.com/docs/v2/theming/
// App Shared Imports
// --------------------------------------------------
// These are the imports which make up the design of
this app.
// By default each design mode includes these shared
imports.
// App Shared Sass variables belong in app.variables.
scss.
@import "../pages/page1/page1";
@import "../pages/page2/page2";
@import "../pages/page3/page3";
@import "../pages/todo/todo";
app.ts theme/app.core.scss
61. Ionic2 TODO list
import {Page} from 'ionic-angular';
class Todo {
constructor(
public name: string,
public done: boolean = false
) {}
}
@Page({
templateUrl: 'build/pages/todo/todo.html'
})
export class TodoPage {
constructor() { }
}
<ion-navbar *navbar>
<ion-title>Todos</ion-title>
</ion-navbar>
<ion-content class="todo-page">
</ion-content>
62. Ionic2 TODO list
import {Page} from 'ionic-angular';
class Todo {
constructor(
public name: string,
public done: boolean = false
) {}
}
@Page({
templateUrl: 'build/pages/todo/todo.html'
})
export class TodoPage {
todos: Todo[] = [
new Todo('todo 1'),
new Todo('todo 2'),
new Todo('todo 3')
];
constructor() { }
}
<ion-navbar *navbar>
<ion-title>Todos</ion-title>
</ion-navbar>
<ion-content class="todo-page">
</ion-content>
63. Ionic2 TODO list
<ion-navbar *navbar>
<ion-title>Todos</ion-title>
</ion-navbar>
<ion-content class="todo-page">
<ion-list>
<ion-item *ngFor="let todo of todos" [hidden]="todo.done">
<ion-label>{{todo.name}}</ion-label>
<ion-checkbox [(ngModel)]="todo.done"></ion-checkbox>
</ion-item>
<ion-item *ngFor="let todo of todos" [hidden]="!todo.done">
<ion-label class="done">{{todo.name}}</ion-label>
<ion-checkbox [(ngModel)]="todo.done" disabled="true"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>