La présentation explique le framework Ionic, qui permet de créer rapidement des applications mobiles hybrides pour plusieurs plateformes, en utilisant AngularJS. Elle aborde la stack technologique, les composants disponibles, les tests, et l'écosystème associé, Tel que ngCordova. La conclusion souligne l'engagement de l'équipe et leur collaboration avec Google pour supporter Angular 2.

1. 1/30 | Présentation Ionic 29.04.2015
29.04.2015
Midi Technique
Ionic Framework

2. 2/30 | Présentation Ionic 29.04.2015
Plan
•Présentation générale
•Stack technologique
•Tests
•Focus de la team Ionic
•Composants
•Débuter avec Ionic
•Ecosystème
•Conclusion & Questions

3. 3/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Présentation générale
àEnsemble de composants permettant de créer facilement
des applications mobiles hybrides cross-platforms
à Android, iOS, Windows 8, Tizen, Ubuntu…
• “Bootstrap des applications mobiles hybrides” mais pas que…
• Framework récent (août 2013), Open Source
• Respose sur AngularJS
• à Pas de courbe d’apprentissage supplémentaire
toujours en rc.4

4. 4/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Stack Technologique

5. 5/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Focus de la team Ionic
• Accélération matérielle
• Manipulations du DOM minimales (coûteuses)
• Suppression du tap delay (gain de 300ms)
• Modèle pris des SDK natifs
• Construit pour fonctionner avec Cordova

6. 6/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Tests
• Tests Ionic Angular
à Il s’agit d’app AngularJS!
• Karma
• Protractor
“Spéciale Dédicace
à Fred L.”

7. 7/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (1/8)

8. 8/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (2/8) – List

9. 9/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (3/8) – Pull to refresh

10. 10/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (4/8) - Drawer

11. 11/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (5/8) - Tabs

12. 12/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (6/8) - Tabs
• #platformContinuity !

13. 13/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (7/8) - Popover

14. 14/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Composants (8/8)
• Et beaucoup d’autres…
• Modal, Popup, Action Sheet, Form (Toggle, Range, Select,
Checkbox, Radio…), Loading, Slide Box…
• + Événements de touch ! (on-hold, on-tap, on-swipe-left…)
Examples:
http://codepen.io/ionic/
http://codepen.io/loicknuchel/

15. 15/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Débuter
• $ npm install –g cordova ionic
• $ ionic start myApp [template]
à template = blank || tabs || sidemenu || complex-list || tests || salesforce || maps
• $ ionic platform add ios android
• $ ionic build
• $ ionic serve --live-reload --lab
• $ ionic resources
• $ ionic browser add crosswalk JL

16. 16/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Ecosystème - Ionic view
• Disponible sur iOS ET Android
à$ ionic login
à$ ionic upload
• Fonctionne pour l’instant pour des Apps
hybrides n’utilisant pas de plugin natif (soon)

17. 17/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Ecosystème – ngCordova (1/3)
– Créé pour les Apps hybrides
– Collection de services AngularJS
et d’extensions (63+) qui rendent
facile l’usage de plugins Cordova
et de fonctionnalités natives
Example:

18. 18/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Ecosystème – ngCordova (2/3)

19. 19/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Ecosystème – ngCordova (3/3)
– App d’example disponible
contenant tous les plugins
– Open Source
– Extension Chrome disponible
pour bouchonner les tests ayant
besoin de simuler le téléphone
Source: http://blog.ionic.io/moving-forward-with-ngcordova/

20. 20/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Ecosystème – Autres
– Ionic Creator
– Ionic Push (alpha version out)
– Ionic Deploy
– BaaS (soon)
à Plus d’infos sur ionic.io

21. 21/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Ecosystème – Concurrents
iOS Specific LDoc L
CSS color J
100% Build dans cloud L
Transitions natives J
Plusieurs Webviews J
Très jeune L
Orienté animations:
Mix avec Angular J

22. 22/30 | Présentation Ionic 29.04.2015
Midi Technique Ionic
Conclusion
/! Framework récent mais team de choc
à Vrais geeks !
à Serial Entrepreneurs (Codiqa et Jetstrap)
à $ 2,6M soulevés le 30/03/2015
à Contributeurs des Web Components
à Respectent leurs engagements de délais
à Développé une vraie communauté rapidement
à Travail avec Google pour supporter Angular 2