Sélection du framework open source de petit programme et introduction du principe

À l'heure actuelle, les frameworks open source populaires pour les petits programmes incluent Taro de JD.com, uni-app de dclound (intégré à mpvue), mpvue de Meituan et wepy de Tencent. Ci-dessous, nous comparons ces 4 frameworks sous différents aspects.

sélection

Écologie communautaire

Les données suivantes sont obtenues via Github Statistics

état d'entretien

On peut voir que uni-app et taro ont été mis à jour récemment, et les dernières soumissions de wepy et mpvue remontent à plusieurs mois.
insérez la description de l'image ici
2. Étoile

Au 27 octobre 2021, la situation globale se présente comme le montre la figure ci-dessous. Comme on peut le voir sur la figure, les étoiles montantes uni-app et taro sont en tête.
insérez la description de l'image ici

cadre	Nombre d' étoiles	Croissance moyenne étoile
pleure	21566	11.93
uni-app	34051	28.32
mpue	20372	15h32
taro	29854	23.01

Questions

Les problèmes peuvent refléter le niveau d'activité de la communauté. On peut voir que la question du taro est loin devant, ce qui indique que la communauté du taro est très active. Étant donné que l'étiquette de bogue est marquée par l'utilisateur lui-même, elle est relativement imprécise, mais on peut également voir qu'uni-app renvoie plus de bogues.
insérez la description de l'image ici

cadre	ProblèmesOuvrir/Fermer	onglet bug activé/désactivé
pleure	344 / 1781	9 / 51
uni-app	827 / 1855	24 / 147
mpue	422 / 1264	3 / 22
taro	850 / 7063	7 / 76

Capacité du cadre

	taro	uni-app	mpue	pleure
spécification de grammaire	nerf, réagir, vue spécification	vue-spec	vue-spec	spécification de vue de classe
système de modèles	JSX	modèle de chaîne	modèle de chaîne	modèle de chaîne
système de typage	Code d'entreprise + modèle jsx	Code d'entreprise	Code d'entreprise	Code d'entreprise
Spécification des composants	composant d'applet	composant d'applet	balises html + composants applet	composant d'applet
spécification de style	postcss, sass, moins, stylet	postcss, sass, moins, stylet	postcss、sass、moins	insolent, moins, stylet
Composantisation	réagir, voir la composition	Composantisation de la vue	Composantisation de la vue	Composantisation personnalisée
Multiplexage	Réutiliser comme H5	Réutiliser comme H5	Réutiliser comme H5	Réutiliser comme H5
construction automatique	Système de construction intégré + webpack	Système de construction intégré + webpack	webpack	système de construction intégré
Coût de démarrage	Familier avec react\vue	familier avec la vue	familier avec la vue	Familier avec vue+wepy
gestion des flux de données	redux	vuex	vuex	redux

Pour chaque scénario, le code le plus performant peut être écrit en natif, mais le retour sur investissement est trop faible. L'avantage du framework réside dans : écrire du code plus efficace, avoir une écologie plus riche, et avoir de bonnes performances.

Du point de vue de l'écologie communautaire et des capacités du cadre, Taro est le meilleur.

Principe de réalisation

Taro 1/2 (temps de compilation lourd, temps d'exécution léger)

Afin d'assurer la compatibilité avec plusieurs applets, il est divisé en deux étapes :

Étape de compilation : convertissez-le en un modèle de l'applet spécifiée via babel ;
Phase d'exploitation : à travers le cadre d'exécution, il est responsable de l'adaptation des capacités sous-jacentes de chaque extrémité.

Cette approche présente plusieurs inconvénients :

JSX est trop flexible et coûteux à adapter. (Bien que l'analyse de réagir puisse être introduite, comment Taro peut-il utiliser la "tête de chien" de React).
la carte source n'est pas prise en charge. Parce que Taro transformera le code source, source-map ne fonctionnera pas. (pourrait être géré lors de la conversion, mais trop coûteux et faible retour sur investissement)
Liaison forte à React DSL, une fois que React a de nouvelles fonctionnalités, il doit également être adapté. En tant que développeur, vous ne pouvez effectuer une mise à niveau que pour utiliser de nouvelles fonctionnalités.
Étant donné que l'AST doit être manipulé fréquemment, la vitesse de compilation sera plus lente.

Taro 3.x (temps de compilation léger, temps d'exécution lourd)

Utilisez des conceptions de framework telles que React et Vue pour implémenter les API pertinentes requises par le rendu sur différentes plates-formes. Simulez et implémentez les API liées au DOM et à la nomenclature du côté de l'applet, laissez le framework frontal s'exécuter directement dans l'environnement de l'applet, afin d'atteindre l'objectif d'unifier les applets et H5. En ce qui concerne les différences de cycle de vie, de bibliothèque de composants, d'API, de routage, etc., en définissant un standard unifié, chaque bout est responsable de sa propre implémentation pour le lisser.
insérez la description de l'image ici

En raison de l'ajustement structurel, Taro 3 n'est plus fortement lié à un certain DSL, le développement est plus flexible et la vitesse de compilation est plus rapide.

différence de version

	Taro 1/2	Taro 3.x
Expérience de développement	Une liaison forte à React DSL et certaines syntaxes JSX ne sont pas prises en charge (nécessite un hack)	Aucune restriction DSL
performance	C'est mieux dans les scénarios où l'application est complexe, il y a de nombreux nœuds de page et les mises à jour de données à grande échelle sont fréquentes	La scène ci-dessus sera un peu plus faible, mais le responsable a déclaré que la différence de performances n'est pas évidente. Il fournit également des solutions telles que des composants de pré-rendu et de liste virtuelle
soutien communautaire	Taro 1/2 continuera à être maintenu, mais avec relativement moins de main-d'œuvre	La recherche et le développement se concentrent sur Taro 3, en donnant la priorité à la mise en œuvre de nouvelles fonctionnalités