Contenu
- PWA et applications natives: quelle est la différence?
- Applications Web progressives: construire pour le Web
- Points forts des PWA
- Faiblesses des PWA
- Réagir natif
- Les atouts de React Native
- Faiblesses de React Native
- NativeScript
- Forces de NativeScript
- Faiblesses de NativeScript
Quelle approche devriez-vous adopter lors de la création d'une application? Devez-vous emprunter la voie PWA / technologies Web ou devriez-vous devenir natif et concevoir pour des plates-formes spécifiques? Les deux options ont leurs avantages et leurs inconvénients, et dans cet article, nous nous concentrons sur quelques-uns des choix populaires utilisés pour créer des applications Web et natives.
Les PWA (Progressive Web Apps), ou applications Web, sont construites avec les technologies Web populaires HTML, CSS et JavaScript et fonctionnent dans un navigateur Web. (Consultez quelques-unes des balises HTML essentielles pour vous aider dans vos versions.) Les PWA sont en fait des sites Web mobiles conçus pour ressembler à une application, et l'utilisation d'API Web leur confère des fonctionnalités similaires à celles d'une application native.
Pour plus de conseils sur la création d'applications, consultez notre article sur la création d'une application ou, s'il s'agit d'un site que vous souhaitez créer, consultez ces principaux créateurs de sites Web et services d'hébergement Web.
PWA et applications natives: quelle est la différence?
Les Progressive Web Apps ont l'avantage d'être installables et en direct sur un appareil sans avoir besoin d'un magasin d'applications. Une partie du processus est le manifeste de l'application Web, qui permet aux développeurs de contrôler l'apparence d'une application et son lancement. De plus, les concepteurs Web / développeurs frontaux auront déjà les compétences nécessaires pour commencer à créer immédiatement. Il n'est pas nécessaire d'apprendre une nouvelle langue, contrairement aux applications natives.
Les applications natives sont construites avec un système d'exploitation spécifique à l'esprit - c.-à-d. iOS et Android - et utilisez un cadre ou un langage pour atteindre cet objectif. Les applications iOS utilisent généralement Xcode ou Swift, et les applications Android, JavaScript. Mais, pour cet article, nous nous concentrons sur quelques frameworks open source basés sur JavaScript - React Native et NativeScript - qui fonctionnent pour les deux plates-formes.
Les avantages des applications natives sont qu'elles apportent généralement de meilleures fonctionnalités car elles utilisent mieux le matériel et les logiciels d'un appareil, sont plus rapides et plus réactives et vous obtenez une assurance qualité grâce aux évaluations dans les magasins d'applications. Mais cela signifiera avoir à apprendre à utiliser un framework ou une bibliothèque spécifique.
Nous examinons ici trois options différentes - une pour le Web (PWA) et deux pour le natif (React Native, NativeScript) - pour créer une application. Nous expliquons comment ils fonctionnent, ce qu'ils peuvent faire et examinons leurs forces et leurs faiblesses pour vous aider à décider quelle option vous devriez choisir pour créer votre application.
Applications Web progressives: construire pour le Web
Points forts des PWA
- Les applications fonctionnent également dans le navigateur
- Distribution: navigateurs, magasins d'entreprise et applis
- Peut utiliser React, Angular, Vue, vanilla ou d'autres frameworks
Faiblesses des PWA
- Pas d'accès à toutes les API natives
- Les capacités et la distribution en magasin sur iOS et iPadOS sont limitées
- C'est en évolution continue
Les PWA sont le modèle de conception actuel pour créer des applications installables hors ligne hautement performantes en utilisant uniquement la pile Web: HTML, CSS, JavaScript et les API des navigateurs. Grâce au service worker et aux spécifications du manifeste de l'application Web, nous pouvons désormais créer une expérience d'application de première classe après l'installation pour Android, iOS, iPadOS, Windows, macOS, Chrome OS et Linux.
Pour créer des PWA, vous pouvez utiliser n'importe quelle architecture: côté serveur, JavaScript vanilla, React, Vue, Angular ou d'autres frameworks côté client. Il peut s'agir d'une application d'une seule page ou d'une application Web de plusieurs pages et nous définissons comment allons-nous assister les utilisateurs hors ligne.
Dans cette approche, nous n'avons pas besoin de conditionner et de signer les ressources de notre application: nous hébergeons simplement les fichiers sur un serveur Web et le service worker sera responsable de la mise en cache des fichiers dans le client et de les servir après l'installation. Cela signifie également que si une application doit être mise à jour, il vous suffit de modifier les fichiers sur le serveur et la logique du technicien de service sera responsable de les mettre à jour sur les appareils des utilisateurs sans intervention de l'utilisateur ou de l'App Store.
En termes de distribution, la méthode la plus courante est le navigateur. Les utilisateurs installent l'application à partir du navigateur en utilisant l'élément de menu Ajouter à l'écran d'accueil ou Installer, en acceptant une invitation à installer ou en utilisant une interface utilisateur d'application Web personnalisée sur des plates-formes compatibles. Il convient de noter qu'Apple rejette les PWA pures publiées dans l'App Store et encourage les développeurs Web à les distribuer via Safari.
L'interface utilisateur est purement gérée par le moteur d'exécution Web, ce qui signifie que le concepteur Web est responsable du rendu de chaque contrôle à l'écran. Si vous utilisez un framework d'interface utilisateur, tel que Ionic, ou une bibliothèque de conception de matériaux, HTML et CSS imiteront les interfaces natives sur Android ou iOS, mais ce n'est pas obligatoire.Lors de la réalisation de PWA, l'application de techniques de performance Web est obligatoire afin de conserver une bonne expérience utilisateur.
En termes de capacités, une PWA n'aura accès qu'aux API disponibles dans le moteur de navigateur sur cette plate-forme et elle ne peut pas être étendue avec du code natif - à l'exception des distributions PWA de l'App Store. Dans ce domaine, iOS et iPadOS sont les plates-formes les plus limitées pour les PWA, tandis que Chrome (pour les systèmes d'exploitation Android et de bureau) a plus de disponibilité et travaille dur pour ajouter toutes les API possibles à JavaScript avec le projet Fugu.
- Meilleur stockage cloud: choisissez la bonne option pour vous.
Réagir natif
Les atouts de React Native
- Mêmes modèles qu'avec React.js
- Certaines API Web sont exposées
- Support Web et de bureau
Faiblesses de React Native
- Impossible de réutiliser les composants de l'interface utilisateur Web
- Le pont natif a besoin de quelques travaux
- Une expérience React est nécessaire
React Native est un framework de composants JavaScript open source, sponsorisé par Facebook, qui utilise les modèles de conception React, ainsi que le langage JavaScript pour compiler des applications natives pour iOS, iPadOS et Android à partir d'un code source.
Mais aucun élément HTML n'est accepté pour le rendu; seuls les autres composants natifs sont valides. Par conséquent, au lieu de rendre un div> avec un p> et un entrée> élément avec JSX, vous allez rendre un Voir> avec un Texte> et un TextInput>. Pour les composants de style, vous utilisez toujours CSS et la mise en page est définie via Flexbox.
L'interface utilisateur ne sera pas rendue dans le DOM d'un navigateur mais en utilisant les bibliothèques d'interface utilisateur native sur Android et iOS. Par conséquent, un Bouton> dans ReactNative deviendra une instance d'UIButton sur iOS et le android.widget.Button classe sur Android; il n'y a pas de runtime Web impliqué dans React Native.
Cependant, tout le code JavaScript sera exécuté dans une machine virtuelle JavaScript sur l'appareil, il n'y a donc pas de conversion JavaScript en véritable code natif lors de la compilation de l'application. Il existe un ensemble d'API bien connues pour les développeurs Web, telles que l'API Fetch, les WebSockets et les minuteries du navigateur: setInterval et requestAnimationFrame. D'autres capacités sont déployées dans la plate-forme via des API personnalisées, telles que des animations.
Vous pouvez démarrer un projet React Native rapide avec deux CLI gratuites: Expo ou la CLI ReactNative plus avancée et officielle. Si vous utilisez la CLI officielle, vous avez également besoin d'Android Studio pour compiler et tester l'application Android et Xcode pour faire de même sur iOS et iPadOS, vous aurez donc besoin d'un ordinateur macOS pour cette plate-forme.
React Native compile des applications natives pour iOS et Android, ce qui signifie que la distribution de votre application suivra les mêmes règles que les autres applications natives: les magasins d'applications pour les applications publiques, la distribution d'entreprise et les tests alpha / bêta. En règle générale, vous ne pouvez pas distribuer une application via un navigateur, bien que React Native pour le Web et les plates-formes React Native pour Windows de Microsoft puissent vous aider.
NativeScript
Forces de NativeScript
- Bons outils de codage et de test
- Vaste galerie d'applications prêtes à jouer avec
- Toutes les API Android et iOS sont exposées dans JS
Faiblesses de NativeScript
- Petite communauté
- Impossible de réutiliser les composants de l'interface utilisateur Web
- Pas de support Web, bureau ou React
NativeScript n'est pas aussi connu que React Native mais il est en concurrence dans le même domaine: les applications natives iOS et Android à partir de frameworks JavaScript et Web. Il vous permet d'utiliser JavaScript ou TypeScript et un fichier d'interface utilisateur XML pour créer des applications natives. Il prend également en charge Angular et Vue dès la sortie de la boîte, c'est donc une excellente solution pour les développeurs habitués à ces frameworks.
Les avantages de NativeScript sont plus clairs lorsque vous utilisez Angular ou Vue. Pour Angular, vous créez les mêmes composants auxquels vous êtes habitué, mais en utilisant XML au lieu de HTML pour le modèle, y compris toutes les liaisons de données. Dans le XML, au lieu d'un div> avec un p> Et un img>, vous placerez un StackLayout> avec un Étiquette> Et un Image> composant.
CSS et Sass sont pris en charge avec des styles similaires à CSS dans le navigateur. Le routage et la gestion du réseau se font via des implémentations des services angulaires standard. Pour Vue, c'est quelque chose de similaire; vous écrivez le modèle en XML au lieu d'utiliser HTML dans le même modèle> élément dans votre fichier .vue.
NativeScript inclut une collection de composants qui sont ensuite mappés à un contrôle natif Android ou iOS, donc lorsque vous affichez une liste ou un sélecteur, ce sera l'application native, en utilisant la même idée que dans React Native.
Votre code JavaScript ou TypeScript (transpilé) est exécuté dans une machine virtuelle JavaScript sur l'appareil avec un pont vers / depuis l'environnement natif. Dans ce pont, toutes les API natives d'Android ou d'iOS / iPadOS sont exposées.Par conséquent, malgré l'accès aux API multiplateformes, nous pouvons instancier ou appeler n'importe quel code Java ou Objective-C à partir de JavaScript / TypeScript et NativeScript rassemblera les types de données.
NativeScript prend en charge les outils, y compris les plugins de code VS, la CLI, un système de test de rechargement à chaud et une application de terrain de jeu NativeScript, vous n'avez donc pas besoin d'installer toutes les dépendances pendant les tests, ainsi que plusieurs services supplémentaires tels qu'un Cour de récréation.
Enfin, NativeScript ne compile une application pour Android et iOS qui peut être installée à partir des canaux de distribution officiels et des magasins d'applications que si vous respectez leurs règles, leur distribution d'entreprise et leurs tests alpha / bêta. En règle générale, il n'y aura aucun moyen de distribuer des applications à partir d'un navigateur et il n'y a pas de solutions pour les applications de bureau pour cette plate-forme.
Cet article a été initialement publié dans numéro 325 of net, le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Acheter numéro 325 ou alors s'abonner au filet.
Rejoignez-nous en avril 2020 avec notre gamme de superstars JavaScript à GenerateJS - la conférence qui vous aide à créer un meilleur JavaScript. Réservez maintenant àgenerateconf.com
