Ionic, react native, native script

•

0 j'aime•1,763 vues

Stéphanie MOALLIC

Petit comparatif Ionic, React Native et NativeScript

Logiciels

BreizhCamp 2016 #BzhCmp
#IonNsRnBzhCmp
BreizhCamp 2016 #BzhCmp
Ionic, Native Script, React native... Quel
framework mobile hybride choisir?
Stéphanie Moallic - @steffy_29

Qui suis-je ?
Stéphanie
Développeur Web & Mobile
@steffy_29

Je veux une application mobile !
Comment je fais ?

Les solutions
● Construire une application native
○ Meilleure performance
○ Un développement par plateforme
■ Consommateur en temps / argent
○ Utilisation d’outils spécifiques
● Construire une application hybride

Solution hybride
Une technologie pour les développer toutes ?

Qu’est-ce qu’une application hybride ?
● Utilisation des
technologies du Web
○ HTML5, CSS3,
Javascript
○ Accès à l’API native via
Cordova par exemple
● Applications
indépendantes de la
plateforme
○ Une application pour
tous les systèmes
○ Rapide à développer
● Performances plus
«faibles»

Ionic
● $ ionic start
myapp
● $ cd myapp
● $ ionic platform
add android ios
● $ionic run android
ou ios

Nativescript
● $ tns create myapp
● $ cd myapp
● $ tns platform add
android ios
● $ tns run android
ou ios

React Native
● $ react-native
init myapp
● $ cd myapp
● $ react-native
run-ios ou run-
android

Ionic
● Doc en ligne
○ http://ionicframework.com/
● Blog Ionic
○ http://blog.ionic.io/
● Forum
○ http://forum.ionicframework.com/
● Showcase
● Communauté

Nativescript
● Doc en ligne
○ https://docs.nativescript.org/
● Blog
○ https://www.nativescript.org/blog
● Forum
○ https://www.nativescript.org/forum
● Showcase
● Communauté

React Native
● Doc en ligne
○ https://facebook.github.io/react-native/
● Showcase
● Communauté

Contenu connexe

Tendances

DMCA #20: Migration Natif vers react natifOlivier Destrebecq

Développement web mobile avec IONIC 2Jean David Olekhnovitch

SkillValue LesJeudis Master Class React NativeBenoit Fillon

Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Loïc Knuchel

ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 Horacio Gonzalez

REX react nativeFlorent Le Gall

Angular 6, CLI 6, Material 6 (french)Laurent Duveau

De Google+ à twitter en passant par le CloudNicolas FRANCOIS

Introduction à VaadinNicolas FRANCOIS

MobileDay - Parcours 1 Hybride (Cordova)Cellenza

Construire une Application Mobile en 30 minutes avec le plugin WP-AppKituncatcrea

[XamarinDay] Développez de manière 100% native avec XamarinCellenza

Donnees structurees pour le seo seo camp day lille 2020Aymen Loukil

De 0 à Angular en 1h30! (french)Laurent Duveau

WordCamp Lyon 2015 - WordPress, Git et l'intégration continueStéphane HULARD

Dev Fest Nantes - Ionic le développement hybride mobile fun et productifStéphanie Moallic

Sujet et monitoring SEO 2020 - Aymen Loukil Search Y 2020Aymen Loukil

Fastlane snapshot presentationCocoaHeads France

Développer des applications mobiles avec phonegapMakina Corpus

JavaScript dans l'usine logiciellejollivetc

Tendances (20)

DMCA #20: Migration Natif vers react natif

Développement web mobile avec IONIC 2

SkillValue LesJeudis Master Class React Native

Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015

ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3

REX react native

Angular 6, CLI 6, Material 6 (french)

De Google+ à twitter en passant par le Cloud

Introduction à Vaadin

MobileDay - Parcours 1 Hybride (Cordova)

Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit

[XamarinDay] Développez de manière 100% native avec Xamarin

Donnees structurees pour le seo seo camp day lille 2020

De 0 à Angular en 1h30! (french)

WordCamp Lyon 2015 - WordPress, Git et l'intégration continue

Dev Fest Nantes - Ionic le développement hybride mobile fun et productif

Sujet et monitoring SEO 2020 - Aymen Loukil Search Y 2020

Fastlane snapshot presentation

Développer des applications mobiles avec phonegap

JavaScript dans l'usine logicielle

En vedette

Hybrid vs native mobile development – how to choose a tech stackJacques De Vos

Native vs. Hybrid AppsVisual Net Design

Developing a native mobile apps using Ionic&CordovaDamir Beylkhanov

React Native.pptx (2)Emilio Rodriguez Martinez

"Native App & Hybrid App, what is at stake?" by Olivier BerniTheFamily

Native vs Hybrid App DevelopmentArghya Sen

eGrove Systems Review - "Native Vs Hybrid Apps"Egrove Systems Corporation

Phone gap android pluginsSimon MacDonald

React vs-angular-mobileMichael Haberman

Hybrid mobile application with IonicMaulik Bamania

AWS Webcast - Data Modeling and Best Practices for Scaling your Application w...Amazon Web Services

Application Development and Data Modeling on Amazon DynamoDBAmazon Web Services Japan

Pick Your Poison – Mobile Web, Native or Hybrid?Effective

Web App VS. Hybrid App VS. Native App?Justin O'Neill

Panorama des solutions mobile hybridesekino

PWA e Hybrid App VS NativeAlberto Abruzzo

Hybrid vs Native Mobile App. Decide in 5 minutes!July Systems

Power of React NativeMurugan Durai

Utilizando NoSQL para Big Data com DynamoDB Amazon Web Services LATAM

Mobile web vs. native apps: It's not about technology, it's about psychologyiQcontent

En vedette (20)

Hybrid vs native mobile development – how to choose a tech stack

Native vs. Hybrid Apps

Developing a native mobile apps using Ionic&Cordova

React Native.pptx (2)

"Native App & Hybrid App, what is at stake?" by Olivier Berni

Native vs Hybrid App Development

eGrove Systems Review - "Native Vs Hybrid Apps"

Phone gap android plugins

React vs-angular-mobile

Hybrid mobile application with Ionic

AWS Webcast - Data Modeling and Best Practices for Scaling your Application w...

Application Development and Data Modeling on Amazon DynamoDB

Pick Your Poison – Mobile Web, Native or Hybrid?

Web App VS. Hybrid App VS. Native App?

Panorama des solutions mobile hybrides

PWA e Hybrid App VS Native

Hybrid vs Native Mobile App. Decide in 5 minutes!

Power of React Native

Utilizando NoSQL para Big Data com DynamoDB

Mobile web vs. native apps: It's not about technology, it's about psychology

Similaire à Ionic, react native, native script

Applications mobiles - quels choix ?odemarez

FinistJUG - J’ai besoin d’une appli web rapidementHoracio Gonzalez

02_Chapitre_1_.pdfallagahamza

Parlons App Economie : du dev à l'usageLaFrenchMobile

ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementHoracio Gonzalez

Passage aux applications mobilesneuros

Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Horacio Gonzalez

Native scriptNeticoa Sénégal

From Idea to the Cloud, a JHipster StorySteve Houël

Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coinAnne Nicolas

PhonegapVISEO

Améliorer l’expérience utilisateur en passant aux Progressive Web App RESONEO

Réaliser une application mobile pour un groupe de presse avec PhoneGapBenjamin LUPU

Competitic - Solution de site web - numerique en entrepriseCOMPETITIC

Progressive Web App, la clé de votre écosystème mobileFrederic CAVAZZA

20140424 MeetUp Nuxeo iOSmatthiasrouberol

API ManagementMicropole Group

Splunk User Group: Toulouse, France - 26 September 2017Splunk

Méthodes agiles, frameworks javascript: optimisez votre time to marketmichael_bailly

Le web ouvert avec Firefox OS et Firefox - Linux Meetup Montréal - 2014-08-05Frédéric Harper

Similaire à Ionic, react native, native script (20)

Applications mobiles - quels choix ?

FinistJUG - J’ai besoin d’une appli web rapidement

02_Chapitre_1_.pdf

Parlons App Economie : du dev à l'usage

ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement

Passage aux applications mobiles

Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !

Native script

From Idea to the Cloud, a JHipster Story

Solution Linux 2012 : Utilisateurs du Libre ne restez pas dans votre coin

Phonegap

Améliorer l’expérience utilisateur en passant aux Progressive Web App

Réaliser une application mobile pour un groupe de presse avec PhoneGap

Competitic - Solution de site web - numerique en entreprise

Progressive Web App, la clé de votre écosystème mobile

20140424 MeetUp Nuxeo iOS

API Management

Splunk User Group: Toulouse, France - 26 September 2017

Méthodes agiles, frameworks javascript: optimisez votre time to market

Le web ouvert avec Firefox OS et Firefox - Linux Meetup Montréal - 2014-08-05

Ionic, react native, native script

1. BreizhCamp 2016 #BzhCmp #IonNsRnBzhCmp BreizhCamp 2016 #BzhCmp Ionic, Native Script, React native... Quel framework mobile hybride choisir? Stéphanie Moallic - @steffy_29

2. Qui suis-je ? Stéphanie Développeur Web & Mobile @steffy_29

3. Je veux une application mobile ! Comment je fais ?

4. Le problème ...

5. Les solutions ● Construire une application native ○ Meilleure performance ○ Un développement par plateforme ■ Consommateur en temps / argent ○ Utilisation d’outils spécifiques ● Construire une application hybride

6. Solution hybride Une technologie pour les développer toutes ?

7. Qu’est-ce qu’une application hybride ? ● Utilisation des technologies du Web ○ HTML5, CSS3, Javascript ○ Accès à l’API native via Cordova par exemple ● Applications indépendantes de la plateforme ○ Une application pour tous les systèmes ○ Rapide à développer ● Performances plus «faibles»

8. Les frameworks hybrides

9. Le socle technique

10. Ionic + = + + + +

11. NativeScript | = + + + +

12. React Native + = + + +

13. L’environnement

14. Ionic

15. Nativescript

16. React Native

17. Gestion des dépendances

18. Start

19. Ionic ● $ ionic start myapp ● $ cd myapp ● $ ionic platform add android ios ● $ionic run android ou ios

20. Nativescript ● $ tns create myapp ● $ cd myapp ● $ tns platform add android ios ● $ tns run android ou ios

21. React Native ● $ react-native init myapp ● $ cd myapp ● $ react-native run-ios ou run- android

22. Organisation d’un projet

23. Ionic

24. Nativescript

25. React Native

26. Code

27. Ionic

28. Nativescript

29. React Native

30. Apprentissage

31. Ionic ● Doc en ligne ○ http://ionicframework.com/ ● Blog Ionic ○ http://blog.ionic.io/ ● Forum ○ http://forum.ionicframework.com/ ● Showcase ● Communauté

32. Nativescript ● Doc en ligne ○ https://docs.nativescript.org/ ● Blog ○ https://www.nativescript.org/blog ● Forum ○ https://www.nativescript.org/forum ● Showcase ● Communauté

33. React Native ● Doc en ligne ○ https://facebook.github.io/react-native/ ● Showcase ● Communauté

34. Démo

35. Ionic

36. Nativescript

37. React Native

38. Bilan

39. Des questions ?