Construire votre première application / blogs / perficient

Le choix du bon cadre pour votre première application multiplateforme peut être difficile, en particulier avec de nombreuses bonnes options disponibles. Pour vous aider à décider, comparez Kotlin multiplateform (kMP), React natifet Battement En construisant une application simple «Hello World» avec chaque cadre. Nous les évaluerons également sur des aspects clés tels que la configuration, le développement de l’interface utilisateur, le partage de code, les performances, la communauté et l’expérience des développeurs. À la fin, vous aurez une compréhension claire de quel cadre convient le mieux à votre première application.

Construire une application «Hello World»

1. Multiplateform Kotlin (KMP)

Kotlin Multiplateform vous permet de partager la logique métier sur toutes les plates-formes tout en utilisant des composants d’interface utilisateur natifs. Voici comment créer une application «Hello World»:

Mesures:

1. Configurer le projet:
   • Installez Android Studio et le plugin mobile Kotlin MultipLatform.
   • Créez un nouveau projet KMP à l’aide du modèle «Mobile Library».
2. Code partagé:Dans le shared module, créez un Greeting classe avec une fonction pour retourner «Hello World».

   // shared/src/commonMain/kotlin/Greeting.kt
   class Greeting {
       fun greet(): String {
           return "Hello, World!"
       }
   }

3. UIS spécifiques à la plate-forme: Pour Android, utilisez des dispositions de composition de jetpack ou de XML dans le androidApp module. Pour iOS, utilisez Swiftui ou Uikit dans le iosApp module.Android (Jetpack Compose):

   // androidApp/src/main/java/com/example/androidApp/MainActivity.kt
   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               Text(text = Greeting().greet())
           }
       }
   }

   iOS (swiftui):

   // iosApp/iosApp/ContentView.swift
   struct ContentView: View {
       var body: some View {
           Text(Greeting().greet())
       }
   }

4. Exécutez l’application: Créez et exécutez l’application sur Android et iOS simulateurs / émulateurs.

Pour et contre:

2. React natif

React Native vous permet de créer des applications multiplateformes à l’aide de JavaScript et React. Voici comment créer une application «Hello World»:

Mesures:

1. Configurer le projet:
2. Écrire le code:Ouvrir App.js et remplacez le contenu par ce qui suit:

   import React from 'react';
   import { Text, View } from 'react-native';
   
   const App = () => {
       return (
           <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
               <Text>Hello, World!</Text>
           </View>
       );
   };
   
   export default App;

3. Exécutez l’application: Démarrer le métro bundler:

   npx react-native start

   Exécutez l’application sur Android ou iOS:

   npx react-native run-android
   npx react-native run-ios

Pour et contre:

3. Flutter

Flutter est une boîte à outils d’interface utilisateur pour créer des applications compilées nativement pour mobile, Web et bureau à l’aide de DART. Voici comment créer une application «Hello World»:

Mesures:

1. Configurer le projet:
2. Écrire le code:Ouvrir lib/main.dart et remplacez le contenu par ce qui suit:

   import 'package:flutter/material.dart';
   
   void main() {
       runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
           return MaterialApp(
               home: Scaffold(
                   appBar: AppBar(title: Text('Hello World App')),
                   body: Center(child: Text('Hello, World!')),
               ),
           );
       }
   }

3. Exécutez l’application: Exécutez l’application sur Android ou iOS:

   flutter run

Pour et contre:

Comparaison des cadres

1. Configuration initiale

• KMP: Complexité de configuration modérée, en particulier pour iOS. Nécessite la configuration des fichiers Gradle et des dépendances spécifiques à la plate-forme.
• React natif: Configuration facile avec des outils comme Expo et React Native CLI.
• Battement: Configuration la plus lisse avec la CLI Flutter et flutter doctor commande.

Meilleure option: Battement (pour faciliter la configuration initiale).

2. Développement d’interface utilisateur

• KMP: UIS spécifique à la plate-forme (Jetpack Compose pour Android, Swiftui / Uikit pour iOS). Offre une flexibilité native mais nécessite un code d’interface utilisateur séparé.
• React natif: UI déclaratif avec JSX. Puissant mais peut ressembler à un terrain d’entente entre le rendu natif et personnalisé.
• Battement: Système basé sur le widget pour les UIS multiplateformes cohérentes. Hautement personnalisable mais nécessite l’apprentissage de la fléchette.

Meilleure option: Un lien entre le KMP (pour la flexibilité de l’interface utilisateur native) et le flottement (pour la cohérence multiplateforme).

3. Partage de code

• KMP: Excelle dans le partage de la logique commerciale tout en permettant aux UIS natives.
• React natif: Partage de code élevé mais peut nécessiter un code spécifique à la plate-forme pour les fonctionnalités avancées.
• Battement: Partage de code élevé pour l’interface utilisateur et la logique métier mais nécessite une DART.

Meilleure option: Kotlin multiplateforme (pour son accent sur le partage de la logique commerciale).

4. Performance

• KMP: Performances natives dues aux UIS natives et au code partagé compilé.
• React natif: Bonnes performances mais peut lutter avec des UIS complexes en raison du pont JavaScript.
• Battement: Excellentes performances, souvent proches des indigènes, mais peut ne pas correspondre aux performances natives dans tous les scénarios.

Gagnant: Kotlin multiplateforme (pour les performances natives).

5. Communauté et écosystème

• KMP: Communauté croissante soutenue par Jetbrains. L’écosystème de Kotlin est mature.
• React natif: Communauté grande et active avec un écosystème riche.
• Battement: Communauté prospère avec un fort support Google.

Meilleure option: React natif (pour sa grande communauté mature), mais Flutter est un concurrent proche.

6. Expérience du développeur

• KMP: Courbe d’apprentissage douce pour les développeurs de Kotlin mais nécessite des connaissances sur l’interface utilisateur spécifiques à la plate-forme.
• React natif: Familier pour les développeurs JavaScript / React, mais peut nécessiter des connaissances mobiles natives.
• Battement: Excellente expérience de développeur avec un rechargement chaud et une documentation complète.

Meilleure option: Battement (pour son excellente expérience de développeur et son outillage).

7. Vitesse de développement assistée par AI

Avec la montée des outils d’IA comme Github Copilot, Chatgpt, Gemini, Claude, etc. Les développeurs peuvent accélérer considérablement le développement d’applications. Évaluons comment chaque cadre bénéficie de l’assistance de l’IA:

• KMP: Les outils AI peuvent aider à générer du code Kotlin pour la logique partagée et même les UIS spécifiques à la plate-forme. Cependant, le besoin de connaissances spécifiques à la plate-forme peut limiter les gains de vitesse.
• React natif: JavaScript est largement pris en charge par les outils d’IA, ce qui facilite la génération de code, composants et même écrans entiers. Le grand écosystème signifie également que l’IA peut suggérer des bibliothèques et des solutions pertinentes.
• Battement: Dart est moins couramment pris en charge par des outils d’IA par rapport à JavaScript, mais le système basé sur le widget de Flutter est très structuré, ce qui facilite l’IA de générer du code cohérent et fonctionnel.

Meilleure option: React natif (En raison de la prise en charge répandue de JavaScript dans les outils AI).

La résolution:

Il n’y a pas de réponse unique. Le meilleur choix dépend de vos priorités:

• • Prioriser les performances et l’interface utilisateur native: Choisir Kotlin multiplateforme.
  • Prioriser la vitesse de développement et une grande communauté: Choisir React natif.
  • Prioriser la facilité d’utilisation, la cohérence multiplateforme et le développement rapide: Choisir Battement.

Pour votre première application:

• Application simple, développement rapide: Battement est un excellent choix. Sa facilité de configuration, un rechargement chaud et un système de widget complet vous permettra de fonctionner rapidement.
• Compétences Kotlin / Android existantes, concentrez-vous sur la logique partagée: Kotlin multiplateforme Vous permet de tirer parti de vos connaissances existantes tout en partageant une partie importante de votre base de code.
• Développeur Web, familier avec React: React natif est un ajustement naturel, vous permettant d’utiliser vos compétences en développement Web pour le développement mobile.

Conclusion

Chaque cadre a ses forces et ses faiblesses, et le meilleur choix dépend de l’expertise de votre équipe, des exigences du projet et des objectifs à long terme. Pour votre première application, envisagez de commencer par Battement Pour sa facilité d’utilisation et son développement rapide, React natif Si vous êtes un développeur Web, ou Kotlin multiplateforme Si vous vous concentrez sur les performances et les UIS natives.

Essayez de créer une application simple avec chaque cadre pour voir lequel s’aligne le mieux avec vos préférences et vos exigences de projet.

Références