The raise of web developers
@loicknuchel
?
Loïc Knuchel
Geek passionné
Freelance
Développeur web full-stack
Entrepreneur
Cookers / SalooN
loicknuchel@gmail.com
@loic...
L’histoire du smartphone
Juin 2007
Lancement de l’iPhone 1
Septembre 2008
Sortie du HTC G1
avec Android
● Nouvelles possibilités
○ UX
○ Technique
○ Business
● Un écosystème à bâtir
● Nouvelle stack technique
● Peu de personnes formées
● Développer plusieurs fois la même chose
● Environnements très spéc...
La WebView
Idée
Coder des applications
entièrement dans la WebView
Avantages :
● Technologies et environnements connus
● Cross-platfo...
PhoneGap / Cordova
Mars 2009 :
Lancement de PhoneGap par Nitobi
Octobre 2011 :
Rachat de Nitobi par Adobe
Séparation de la...
Oups...
● UI moche
● UI peu réactive
● loin du look & feel natif
Mauvais support des standards du
web dans la WebView
Peu ...
Aujourd’hui
● Téléphones puissants (et de + en +)
● Très bon support des standards web dans la WebView
● Beaucoup d’outils...
Ionic c’est quoi ?
+ =
Stack technologique
Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
Angular
Ionic
Application
Dév web = Dév mobile
DX
“We want to cater to the 99% who just want to build something functional quickly
and not break the bank to do it.” - Ma...
DX
#Platform continuity
#CLI
#Backend services
#Push
#Deploy
#Package#Auth
#Analytics #Ionic View
#Native plugins #Ionic M...
@ionitron
Ionic is a complete ecosystem !
One more thing...
Hybrid apps have superpowers...
Hybrid superpowers
●
App Store installs are broken !
?
http://bit.ly/voxxrin
App Store installs are broken !
Deep linking Install tracking
Hybrid superpowers
Web App :
● Cross-platform
● Accès instantané
● Deep link
● Offline
http://bit.ly/voxxrin-bdx-lkn
Hybrid superpowers
Web App :
● Cross-platform
● Accès instantané
● Deep link
● Offline
Progressive Web App :
● Installatio...
Hybrid superpowers
Web App :
● Cross-platform
● Accès instantané
● Deep link
● Offline
Progressive Web App :
● Installatio...
Hybrid superpowers
●
App Store deployment is broken !
Apple : ~ 2 jours
Google : ~ 2 heures
Hybrid superpowers
●
Nouveautés depuis Ionic 1
● Angular 2 (+ TypeScript)
● Navigation push/pop
● Nouveaux composants
○ DateTime
○ Toast
○ Sear...
Getting started
Install nodejs & npm
$ npm install -g ionic@beta
$ ionic start demoApp --v2 --ts
$ cd demoApp && ionic ser...
Getting started
Install mobile sdk (Android ou iOS)
$ sudo npm install -g cordova
$ ionic platform add android
$ ionic run...
Structure de fichiers
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic</title>
<meta name="viewp...
app.ts
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './page...
page1.ts
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
c...
page1.ts
import {Page} from 'ionic-angular';
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-n...
page1.ts
import {Page} from 'ionic-angular';
@Page({
styles: [`
.page1 h2 {
color: red;
}
`],
template: `...`
})
export cl...
Angular 1 vs Angular 2
● bootstrap manuel
● Filter => Pipe
● Controllers => Components
● Directives => Components
● $scope...
Template
● Bindings :
● Pipes :
● Propriétés / Input :
● Evénements / Output :
● Double binding :
● Templates :
● Local va...
Créer une nouvelle page
todo.page.ts todo.html todo.scss
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/todo/todo.html'
})
...
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/...
Ionic2 TODO list
import {Page} from 'ionic-angular';
class Todo {
constructor(
public name: string,
public done: boolean =...
Ionic2 TODO list
import {Page} from 'ionic-angular';
class Todo {
constructor(
public name: string,
public done: boolean =...
Ionic2 TODO list
<ion-navbar *navbar>
<ion-title>Todos</ion-title>
</ion-navbar>
<ion-content class="todo-page">
<ion-list...
Ionic2 TODO list
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/todo/todo.html'
})
export class Tod...
Ionic2 TODO list
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/todo/todo.html'
})
export class Tod...
Ionic2 TODO list
import {Page} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/todo/todo.html'
})
export class Tod...
Pour tester ce weekend...
Pour tester ce weekend...
http://ionicframework.com/docs/v2/
https://github.com/driftyco/ionic-conference-app
https://gith...
Questions ?
@loicknuchel
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Prochain SlideShare
Chargement dans…5
×

Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016

473 vues

Publié le

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 :)

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
473
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016

  1. 1. The raise of web developers @loicknuchel
  2. 2. ?
  3. 3. Loïc Knuchel Geek passionné Freelance Développeur web full-stack Entrepreneur Cookers / SalooN loicknuchel@gmail.com @loicknuchel http://loic.knuchel.org/
  4. 4. L’histoire du smartphone
  5. 5. Juin 2007 Lancement de l’iPhone 1
  6. 6. Septembre 2008 Sortie du HTC G1 avec Android
  7. 7. ● Nouvelles possibilités ○ UX ○ Technique ○ Business ● Un écosystème à bâtir
  8. 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é...)
  9. 9. La WebView
  10. 10. Idée Coder des applications entièrement dans la WebView Avantages : ● Technologies et environnements connus ● Cross-platform
  11. 11. 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)
  12. 12. 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...
  13. 13. Aujourd’hui ● Téléphones puissants (et de + en +) ● Très bon support des standards web dans la WebView ● Beaucoup d’outils / librairies
  14. 14. Ionic c’est quoi ? + =
  15. 15. Stack technologique Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges Angular Ionic Application
  16. 16. Dév web = Dév mobile
  17. 17. DX “We want to cater to the 99% who just want to build something functional quickly and not break the bank to do it.” - Max Lynch
  18. 18. DX #Platform continuity #CLI #Backend services #Push #Deploy #Package#Auth #Analytics #Ionic View #Native plugins #Ionic Market #Ionic Creator
  19. 19. @ionitron
  20. 20. Ionic is a complete ecosystem !
  21. 21. One more thing...
  22. 22. Hybrid apps have superpowers...
  23. 23. Hybrid superpowers ●
  24. 24. App Store installs are broken ! ? http://bit.ly/voxxrin
  25. 25. App Store installs are broken ! Deep linking Install tracking
  26. 26. Hybrid superpowers Web App : ● Cross-platform ● Accès instantané ● Deep link ● Offline http://bit.ly/voxxrin-bdx-lkn
  27. 27. Hybrid superpowers Web App : ● Cross-platform ● Accès instantané ● Deep link ● Offline Progressive Web App : ● Installation instantanée ● Lancement depuis la Home ● Push notifications
  28. 28. 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
  29. 29. Hybrid superpowers ●
  30. 30. App Store deployment is broken ! Apple : ~ 2 jours Google : ~ 2 heures
  31. 31. Hybrid superpowers ●
  32. 32. Nouveautés depuis Ionic 1 ● Angular 2 (+ TypeScript) ● Navigation push/pop ● Nouveaux composants ○ DateTime ○ Toast ○ Searchbar ○ Segment
  33. 33. Getting started Install nodejs & npm $ npm install -g ionic@beta $ ionic start demoApp --v2 --ts $ cd demoApp && ionic serve ♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫
  34. 34. Getting started Install mobile sdk (Android ou iOS) $ sudo npm install -g cordova $ ionic platform add android $ ionic run android
  35. 35. Structure de fichiers
  36. 36. 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>
  37. 37. 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(); }); } }
  38. 38. 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>
  39. 39. 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() {} }
  40. 40. page1.ts import {Page} from 'ionic-angular'; @Page({ styles: [` .page1 h2 { color: red; } `], template: `...` }) export class Page1 { constructor() {} }
  41. 41. Angular 1 vs Angular 2 ● bootstrap manuel ● Filter => Pipe ● Controllers => Components ● Directives => Components ● $scope => Class properties ● Services => Injectables
  42. 42. Template ● Bindings : ● Pipes : ● Propriétés / Input : ● Evénements / Output : ● Double binding : ● Templates : ● Local variables : ● Boucles : Your favorite hero is: {{favoriteHero}} <span>{{movie.title | uppercase}}</span> <a [href]="angularDocsUrl">Angular Docs</a> <button (click)="toggleMovie()"></button> <input [(ngModel)]="favoriteMovie" /> <div *ngIf="movies.length === 0">No movies</div> <video-player #player></video-player> <button (click)="player.pause()">Pause</button> <ul *ngFor="let movie of movies"> <li>{{movie.title}}</li> </ul>
  43. 43. Créer une nouvelle page
  44. 44. todo.page.ts todo.html todo.scss import {Page} from 'ionic-angular'; @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> .todo-page { .done { text-decoration: line-through; } }
  45. 45. 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
  46. 46. 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>
  47. 47. 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>
  48. 48. 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>
  49. 49. Ionic2 TODO list import {Page} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/todo/todo.html' }) export class TodoPage { newTodo: string = ''; todos: Todo[] = [ new Todo('todo 1'), new Todo('todo 2'), new Todo('todo 3') ]; constructor() { } create(text: string): void { this.todos.push(new Todo(text)); this.newTodo = ''; } } <ion-navbar *navbar> <ion-title>Todos</ion-title> </ion-navbar> <ion-toolbar> <ion-input type="text" [(ngModel)]="newTodo" placeholder="Nouvelle tâche"> </ion-input> <ion-buttons end> <button (click)="create(newTodo)"> <ion-icon name="send"></ion-icon> </button> </ion-buttons> </ion-toolbar> <ion-content class="todo-page"> <ion-list> ... </ion-list> </ion-content>
  50. 50. Ionic2 TODO list import {Page} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/todo/todo.html' }) export class TodoPage { newTodo: string = ''; todos: Todo[] = [...]; constructor() { } create(text: string): void { ... } delete(todo: Todo): void { const i = this.todos.indexOf(todo); if(i >= 0) { this.todos.splice(i, 1); } } } <ion-navbar *navbar> <ion-title>Todos</ion-title> </ion-navbar> <ion-toolbar> ... </ion-toolbar> <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="..." [hidden]="!todo.done" (click)="delete(todo)"> <ion-label class="done">{{todo.name}}</ion-label> <ion-checkbox [(ngModel)]="todo.done" disabled="true"></ion-checkbox> </ion-item> </ion-list> </ion-content>
  51. 51. Ionic2 TODO list import {Page} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/todo/todo.html' }) export class TodoPage { newTodo: string = ''; todos: Todo[] = [...]; constructor() { } create(text: string): void { ... } delete(todo: Todo): void { const i = this.todos.indexOf(todo); if(i >= 0) { this.todos.splice(i, 1); } } } <ion-navbar *navbar> <ion-title>Todos</ion-title> </ion-navbar> <ion-toolbar> ... </ion-toolbar> <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="..." [hidden]="!todo.done" (click)="delete(todo)"> <ion-label class="done">{{todo.name}}</ion-label> <ion-checkbox [(ngModel)]="todo.done" disabled="true"></ion-checkbox> </ion-item> </ion-list> </ion-content>
  52. 52. Pour tester ce weekend...
  53. 53. Pour tester ce weekend... http://ionicframework.com/docs/v2/ https://github.com/driftyco/ionic-conference-app https://github.com/saloonapp/saloon-app http://mcgivery.com/15-ionic-framework-2-resources/ (60+ maintenant…) https://angular.io/docs/ts/latest/cookbook/ https://forum.ionicframework.com/ http://loic.knuchel.org/blog/
  54. 54. Questions ? @loicknuchel

×