Le développement mobile repose de plus en plus non pas sur le développement natif, mais sur l'utilisation de frameworks qui aident à créer des applications pour plusieurs plateformes à la fois. Aujourd'hui, je veux dire quelques mots sur Flutter, qui commence progressivement à gagner le marché de React Native. Détails - sous la coupe.
Lorsque le projet de développement d'une application mobile démarre, il est nécessaire de décider sur quelle plateforme nous allons programmer. Souvent, cette question est influencée par le client lui-même, qui souhaite que les logiciels soient créés de manière native pour chaque plate-forme ou, à l'inverse, souhaite économiser de l'argent et demande à se développer sur React Native.Sur le site Web du projet, vous pouvez découvrir que Flutter utilise activement non seulement Google lui-même, mais aussi d'autres sociétés. Par exemple, Flutter a écrit la nouvelle application The New York Times, ainsi que des versions mobiles d'eBay et Aliexpress. Mais en général, la liste ne semble pas très impressionnante, car elle ne comprend pas plus de 20 entreprises.
Néanmoins, l'expérience des développeurs de notre entreprise montre que dans certains cas, Flutter est meilleur et plus pratique pour créer des applications mobiles. L'esprit collectif de Neti a totalisé 8 avantages de ce cadre plus jeune.Performance
Les applications développées par Flutter fonctionnent beaucoup plus rapidement qu'avec React Native. Les avantages de vitesse sont obtenus grâce à notre propre moteur et à l'utilisation d'un autre langage de programmation. Contrairement à React Native, qui fonctionne avec les ponts et le langage Java Script, Flutter vous permet de résoudre rapidement les problèmes d'application, en particulier ceux liés à l'interface utilisateur. Les compilateurs natifs sont déjà intégrés dans le framework, et le code écrit en Dart se transforme en instructions natives pour les processeurs ARM.Soit dit en passant, des tests comparatifs intéressants ont été effectués par des gars d'InVerita. Leur article sur Medium comparait les performances des applications finies sur de vrais appareils iPhone 6 et Xiaomi Redmi Note 5.
Comme vous pouvez le voir, le test de Gauss sur iOS s'exécute sur Flutter encore plus rapidement que sur Swift, et RN affiche un décalage de 20 fois!
Dans le cas d'Android, Flutter nécessite 20% plus de temps pour terminer le test que Java et Kotlin, mais il fonctionne toujours 15 fois plus rapidement que RN.Taille de l'application
À la suite du paragraphe précédent, les applications créées sur la base de Flutter et écrites sur Dart contiennent moins de composants intermédiaires. La compilation des instructions ARM natives vous permet de ne rien stocker de plus. Par conséquent, les fichiers binaires d'application eux-mêmes prennent jusqu'à deux fois moins d'espace sur le lecteur de l'appareil que lors du développement sur React Native.Animation rapide
Dans un sens, ce plus découle du précédent. Nous avons décidé d'utiliser Flutter pour les applications avec beaucoup d'animation intégrées. Le fait est que Flutter affiche de manière stable 60 FPS, ce qui signifie que les utilisateurs n'ont pas à regarder l'image tremblante, comme c'est souvent le cas avec React Native.Langage de programmation typé
La base de Flutter est Dart, un langage de programmation typé déjà populaire parmi les amateurs. Sur Dart, le codage se transforme en programmation orientée objet ... et ici, bien sûr, nous pourrions rappeler TypeScript et affirmer qu'il est également typé. Mais, hélas, en fin de compte, il est transcompilé et se transforme toujours en JavaScript non typé. Autrement dit, tous les avantages de TS restent au niveau de commodité de l'encodeur et n'affectent pas les performances. Dart, en revanche, est typé nativement. Le langage de programmation est activement développé, soutenu par la communauté. Vous pouvez écrire beaucoup plus de code structurel sur Dart, ce qui signifie que vous pouvez créer des applications et des structures hiérarchiques plus complexes.Excellente documentation
Pour ceux qui veulent faire face à la nouvelle plateforme sur Internet, il y a des tutoriels vidéo, les possibilités de travailler avec du code en ligne sont pensées. La communauté dirigée par Google a développé des instructions et des guides complets. De plus, le réseau a même une recette prête à l'emploi pour passer de React Native à Flutter. Vous pouvez le voir ici . Bien sûr, il existe également de la documentation pour React Native, mais elle est souvent inutile en raison de descriptions telles que «removeClippedSubviews - Cela peut améliorer les performances de défilement pour les grandes listes». La communauté Flutter a une approche beaucoup plus sérieuse de la documentation.Interface utilisateur d'uniformité
L'avantage bien connu de React Native est la possibilité de conduire le développement de plusieurs plates-formes à la fois. Cependant, personne ne garantit que sans finaliser avec un fichier, vous obtiendrez immédiatement la même interface. Une application écrite en Flutter, en revanche, ressemble et fonctionne de la même manière sur iOS et Android. Nos programmeurs n'ont jamais réécrit le code pour faire fonctionner l'application sur iOS comme sur Android. Dans le cas de React Native, tout est différent. Ces améliorations doivent être effectuées avec une régularité enviable.Prise en charge d'un grand nombre de plateformes
Flutter prend déjà en charge Android, iOS et Web. À en juger par les discussions au sein de la communauté, la prise en charge de MacOS, ChromeOS et Windows sera disponible très bientôt. Et, plus intéressant encore, Flutter prend déjà en charge la future plate-forme Google Fuchsia. Ainsi, tout développement peut être immédiatement porté sur le nouveau système d'exploitation.Outils de développement
La dernière chose que je veux noter est le DevTools développé. Flutter possède un bon écosystème d'outils de développement. Vous pouvez les regarder ici . Soit dit en passant, Facebook essaie de faire quelque chose de similaire, mais pour autant que nous puissions voir, RN n'a jusqu'à présent qu'une version bêta de DevTools, et par fonctionnalité, ils n'atteignent pas les homologues de Flutter.Exemple de code
Par exemple, ci-dessous est le code "Bonjour, monde!" pour les frameworks React Native et Flutter
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hello world!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
})
Et voici à quoi ressemblera ce code dans Flutter
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
Flutter a-t-il des inconvénients?
Bien sûr qu'ils le sont. Flutter est une jeune plateforme. Il n'y a pas assez de solutions toutes faites pour cela. À titre de comparaison, le même React Native a déjà beaucoup plus de modèles prêts à l'emploi, de recettes, d'options d'implémentation.Écrire une interface utilisateur sur Flutter prend plus de temps. Et l'écriture même du code Dart est plus longue. Dans React Native, une application est construite en tant que constructeur à partir de composants Web. Flutter nécessite toujours une programmation approfondie.De plus, Flutter nécessite des compétences de programmation plus approfondies. Dans le cas de React Native, vous pouvez confier le développement à n'importe quel spécialiste connaissant Java Script. Avec Dart, les choses sont plus compliquées, car cette langue a un seuil d'entrée plus élevé que JS. Le programmeur doit avoir une formation plus approfondie.Mais en même temps, les postes vacants pour les développeurs sur Flutter sont encore assez petits. Les entreprises russes ne font pas encore confiance à la nouvelle plateforme. Cependant, cela ne nous empêche pas de mener une partie du développement de ce cadre. Et les résultats jusqu'à présent sont plus que positifs. Si vous avez de l'expérience en développement sur Flutter, veuillez partager vos impressions dans les commentaires.