Il n'y a pas de projets vedettes révolutionnaires dans le domaine du big front-end en 2021, mais il y a une certaine expansion et une culture en profondeur dans divers domaines techniques subdivisés. De nombreuses nouvelles technologies ou nouvelles fonctionnalités devraient exploser. 2022.
Dans l'actuel « hiver froid » d'Internet, les techniciens front-end ne peuvent que mieux affronter le « vent d'est » du printemps en cultivant leurs compétences internes et en se renforçant constamment. Alors, quel « muscle » les techniciens front-end devraient-ils pratiquer ? Peut-être pourrons-nous trouver des réponses dans le « 2021 JavaScript Star Project » :
zx Toolkit classé parmi les Star Growth annuelles en seulement 7 mois Le projet le plus rapide, qui montre la pénétration et l'influence continues du développement front-end dans l'ensemble de la pile.
Svelte peut-il percer ?
l'acceptation des modules ES natifs se poursuit, et vite est imparable, en raison de considérations de performances, de plus en plus d'outils frontaux commencent à utiliser d'autres langages . ( Rust, Go) pour construire.
1. Croissance constante de TypeScript
À en juger par les données d'utilisation des langues de Github (principales langues au fil des ans),2021 TypeScript se classe toujours quatrième.
À en juger par les dernières données de l'enquête JS 2020, l'utilisation de TypeScript se classe toujours au premier rang parmi les compétitions d'outils similaires (enquête State of JS). À en juger par l'enquête auprès des développeurs Stack Overflow 2021, la popularité de TypeScript continue d'augmenter et on estime qu'elle continuera de croître en 2022.Review
En regardant en arrière sur 2021, la feuille de route officielle précise que l'objectif de TypeScript est de continuer à améliorer son système de typage, de mettre en œuvre des outils puissants pour améliorer la productivité, améliorer l'expérience utilisateur, accroître la participation de la communauté, améliorer l'infrastructure et l'ingénierie. système. Après avoir fixé l'objectif, l'équipe TypeScript a été très efficace en publiant 4 versions cette année. La dernière version est la 4.5. De nombreuses nouvelles fonctionnalités sont en effet plus amusantes à utiliser, telles que :À l'avenir
TypeScript fournira des fonctionnalités plus intéressantes à l'avenir, telles que :La compilation conditionnelle (Compilation conditionnelle) est quelque peu similaire à la définition de macro #if en C++. Elle peut prétraiter le code avant la compilation et conserver les branches de code qui remplissent les conditions.
Décorateurs pour les expressions de fonction/fonctions fléchées. Actuellement, les décorateurs dans TypeScript ne peuvent être utilisés que dans les classes. À l'avenir, il sera peut-être possible de prendre en charge l'utilisation de décorations pour les expressions de fonction et les fonctions fléchées en dehors du périphérique de classe.
et plus encore.
Comme l'indique sa feuille de route, TypeScript évolue dans la bonne direction. Il existe de nombreuses fonctionnalités de type, optimisations de performances, optimisations d'expérience et outils de support qui peuvent être mis en œuvre pour améliorer la productivité. du langage JS. Avec le développement et l’amélioration croissants de TypeScript, TypeScript sera-t-il pris en charge nativement par les navigateurs et Node.js à l’avenir ? Attendons-le ensemble avec impatience.
2. React ouvre la voie et continue d'innover
React 18 a achevé la sortie des versions Alpha, Beta et Release Candidate au second semestre 2021, et publiera la version officielle début 2022.
Lorsque React 18 sera publié, il inclura des améliorations prêtes à l'emploi (comme le traitement par lots automatique), de nouvelles API (comme startTransition) et une nouvelle architecture SSR avec prise en charge intégrée de React.lazy.
Ces fonctionnalités sont possibles grâce au mécanisme optionnel de « rendu simultané » nouvellement ajouté dans React 18, qui ouvre de nombreuses nouvelles possibilités pour React pour vous aider à améliorer votre application performances réelles par rapport aux performances perçues du programme.
React 18 adopte une stratégie progressive. Étant donné que la concurrence dans React 18 est une fonctionnalité facultative, elle n'apportera pas immédiatement de changements perturbateurs évidents dans le comportement des composants. Vous pouvez passer directement à React 18 sans presque aucune modification du code de votre application, et vous pouvez essayer de nouvelles fonctionnalités à votre rythme et selon vos besoins.
En général, React 18 apporte des mises à jour dans les 3 aspects suivants :
➢ Lot automatique
➢ SSR pour Suspense
➢ Nouvelles API pour les développeurs d'applications et de bibliothèques
● Lot automatique
React 18 ajoute améliorations de performances immédiates en effectuant davantage de traitements par lots par défaut, éliminant ainsi le besoin de mises à jour manuelles par lots dans le code de l'application ou de la bibliothèque.
batching signifie que React peut combiner plusieurs événements setState dans la fonction de rappel en un seul rendu.
React 17 effectue uniquement des lots dans les rappels d'événements, tandis que React 18 effectuera autant de lots que possible pour setState à partir de n'importe quelle source. Même si setState est appelé plusieurs fois dans les rappels de promesse, de délai d'attente ou d'événement, ils seront fusionnés en un seul rendu.
Remplacez ReactDOM.render par la méthode d'appel ReactDOM.createRoot pour activer ces nouvelles fonctionnalités.
Quantity SSR for Suspense
Le nom complet est : Streaming SSR avec hydratation sélective.
C'est comme un écoulement d'eau, créant un pipeline de rendu continu du serveur au client, au lieu d'un mécanisme de rendu unique comme renderToString. L'hydratation sélective signifie l'hydratation sélective signifie qu'une fois le contenu back-end atteint le front-end, JS doit y lier des événements afin de répondre à l'interaction de l'utilisateur ou au comportement de mise à jour du DOM. Avant React 18, cette opération doit être effectuée. holistique, et le processus d’hydratation peut être lent et entraîner un retard global, donc une hydratation sélective peut donner la priorité à l’hydratation selon les besoins.
Quantity Nouvelles API pour les développeurs d'applications et de bibliothèques
API simultanées :
Les modifications liées au rendu simultané sont l'un des changements majeurs de React 18. En bref, cette fonctionnalité permettra aux applications React de conserver une meilleure réactivité. Il s'agit d'une architecture de conception qui peut interrompre le rendu. Quand interrompre le rendu ? Lorsqu'un rendu de priorité plus élevée arrive, le rendu actuel est abandonné et le rendu de priorité plus élevée est exécuté immédiatement, en échange d'une réponse visuelle plus rapide.
useTransition : permet aux composants d'attendre que le contenu se charge avant de passer à l'interface suivante, évitant ainsi les états de chargement inutiles.
startTransition : les rendus déclenchés par setState enveloppés dans le rappel startTransition sont marqués comme rendus non urgents, et ces rendus peuvent être préemptés par d'autres rendus urgents.
useDeferredValue : renvoie une valeur de réponse retardée, comme un scénario dans lequel une zone de saisie de sélection filtre une liste. Nous pouvons utiliser useDeferredValue pour que la liste transmette la valeur correspondant au sélecteur.
Les nouvelles API startTransition et useDeferredValue vous permettent essentiellement de marquer une partie de l'interface utilisateur comme ayant une priorité de mise à jour inférieure.
Autres API :
useSyncExternalStore : useSyncExternalStore remplacera useMutableSource pour l'abonnement à des sources externes afin de résoudre le problème d'incohérence des données qui peut être causée par le rendu simultané. Il peut également être nécessaire aux auteurs de bibliothèques et il est peu probable qu'il le soit. utilisé par les développeurs généraux.
useId : useId est utilisé pour générer un identifiant unique entre le client et le serveur afin d'éviter toute incompatibilité d'éléments lors de l'hydratation SSR.
useInsertionEffect : utilisé pour insérer des nœuds DOM globaux.
React 18 sortira l'année prochaine avec la nouvelle architecture React Native (avec les fonctionnalités React 18 disponibles).
3. Svelte, le cheval noir dans la bataille des frameworks front-end
Le domaine du front-end est turbulent et les trois frameworks émergent les uns après les autres, React, Vue et. Angular, a toujours été dans le top trois. Dans le même temps, nous avons également remarqué que parmi les nombreux frameworks front-end, Svelte, développé par Rich Harris (auteur de Ractive, Rollup et Bubble), devrait devenir un cheval noir et se démarquer parmi les frameworks front-end.
Dans la dernière enquête préparée par Stack Overflow en 2021, 71,47 % des personnes interrogées ont sélectionné Svelte comme framework le plus populaire, devant React.js à 69,28 % et Vue à 64,41 %. Dans l'enquête JS Status 2020, Svelte a atteint la première place en termes de satisfaction des utilisateurs avec 89 % et d'intérêt avec 66 %. Depuis sa naissance, Svelte a été utilisé pour comparer des frameworks tels que React/Vue. Nous avons également vu le débat sur Svelte et React, et avons vu la réponse « Comment traiter Svelte comme un framework front-end » par Youda en 2019 et le. vue-Svelte- L'évaluation de l'analyse de taille montre la tendance de développement de Svelte.
Le cheval noir dans la bataille frontale
Notre enquête a révélé que les développeurs aiment Svelte principalement pour les points suivants :
1. Svelte a une syntaxe extrêmement concise et les didacticiels interactifs lui permettent d'avoir une courbe d'apprentissage et un coût de démarrage faibles. Ceux qui sont familiers avec la syntaxe vue peuvent démarrer rapidement.
2. Taille plus petite. L'idée principale de Svelte est de réduire la quantité de code lors de l'exécution du framework grâce à une compilation statique. Cela présente des avantages évidents dans les petites applications. La version compressée de React a une taille de 42,2 Ko et la version compressée de Svelte est de 1,6 Ko. . Cependant, dans les applications moyennes et grandes, cet avantage va progressivement se réduire et même devenir un inconvénient.
3. Des performances supérieures. Svelte n'utilise pas le Virtual Dom couramment utilisé, mais utilise la syntaxe Template pour permettre au compilateur d'enregistrer les données qui doivent être mises à jour pendant la phase de compilation. Cela rend Svelte plus performant que non seulement React, mais aussi Angular et Vue.
4. Meilleure distribution des composants Web. Svelte est directement compilé en JS et génère des composants Web reconnus par les navigateurs. Cela permet aux composants développés sur la base de Svelte d'être utilisés dans d'autres frameworks, tels que React/Vue/Angular, etc.
Le temps passe vite et la vitesse de développement de Svelte peut dépasser notre imagination. Svelte, qui a été critiqué comme n'ayant pas d'avenir en tant que framework frontal ne prenant pas en charge TypeScript, prendra également en charge TypeScript en 2021. La bibliothèque d'interface utilisateur Svelte Material UI est également progressivement itérée et la communauté des développeurs a également rejoint de plus en plus de petits partenaires, enrichissant l'unité de Svelte Pratique en tests, Composants Web, SSR, etc.
En regardant en arrière sur 2021, les choses les plus importantes à propos de Svelte sont les deux choses suivantes :
1 Le Sommet d'automne a eu lieu le 20 novembre 2021. Lors du sommet, Rich Harris nous a parlé de l'histoire de Svelte et a annoncé qu'il rejoindrait Vercel et qu'il maintiendrait ensuite Svelte à plein temps. De nombreux développeurs de la communauté ont également été invités au sommet pour partager certaines des pratiques de Svelte, nous permettant ainsi de voir davantage de possibilités de Svelte.
2. SvelteKit publie officiellement la version bêta. SvelteKit est un framework d'application Web développé sur la base de Svelte, similaire au framework Nuxt.js développé sur la base de Vue.js. Il hérite du rendu SSR côté serveur, du routage, prend en charge TypeScript, prend en charge less/sass, prend en charge le packaging Vite et d'autres fonctionnalités. Il peut être développé efficacement et présente des performances élevées. Bien qu'il y ait encore quelques bugs dans SvelteKit qui doivent encore être résolus, et certaines fonctions manquantes doivent être améliorées de toute urgence. Mais cela n’empêche toujours pas les projets d’oser l’utiliser dans des environnements de production.
En attendant que le disrupteur fleurisse
Bien que nous constations que Svelte est très populaire parmi les développeurs, jusqu'à présent, il est encore difficile de voir des applications à grande échelle utilisant Svelte, et ses avantages en termes de performances, de taille, etc. non éprouvé dans les applications à grande échelle. Étant donné que React/Vue/Angular sont les premiers à dominer, en particulier dans les grandes entreprises, il existe déjà des solutions de support système très complètes. Les systèmes matures sont fondamentalement difficiles à modifier, et il est difficile pour les étoiles montantes d'avoir des communautés actives comme React et d'autres frameworks. . Svelte doit partir. La route est encore longue. Cependant, nous avons observé que de grandes entreprises, notamment Alibaba, Byte et Tencent, tentent également d'utiliser le développement Svelte dans de nouvelles entreprises. Il présente des avantages dans les applications de petite et moyenne taille, les applications h5, les composants Web, etc. ça vaut la peine d'essayer. Bien que Svelte présente de nombreux avantages, si vous souhaitez contester le statut de React/Vue/Angular par vous-même, vous devez toujours attendre des applications de référence à grande échelle et attendre que les grandes entreprises lancent des bibliothèques d'interface utilisateur basées sur Svelte. décoller. Le temps de la grandeur viendra.
4. Desktop - le prochain champ de bataille du développement front-end
Continuer à étendre l'influence des applications de bureau
Depuis que Github a lancé le framework open source Electron en 2014, le front-end a échappé aux limitations du client Web et a la capacité de développer des applications de bureau ces dernières années, en s'appuyant sur des frameworks d'applications tels qu'Electron, React Native et Flutter. , le concept de développement front-end cross-end d'applications de bureau a continué à se réchauffer. Bien que ces solutions n'offrent pas nécessairement les meilleures performances par rapport aux piles technologiques traditionnelles telles que QT et Xaramrin, cela signifie que certaines options très rentables ont émergé, ce qui abaisse considérablement le seuil de développement d'applications de bureau.
En 2021, les itérations mises à jour de frameworks d'applications tels que le front-end Electron et React Native Desktop ont tendance à être stables, même si certaines fonctions marquantes révolutionnaires ne sont pas apparues, chaque framework continue de mener des recherches approfondies sur des points sensibles tels que. scénarios de performances et d'application, et Flutter, qui est devenu un concept brûlant ces dernières années, a également inclus sa version de bureau en phase bêta en 2021. Tauri, qui a soudainement émergé, a attiré l'attention pour ses excellentes performances et la taille de son package, et son potentiel ne peut être sous-estimé. Dans l'ensemble, dans le domaine du développement d'applications de bureau, l'influence de la technologie front-end augmente de jour en jour, et la proportion de contenu auquel le front-end peut participer augmente également.
Electron
Electron est un framework open source développé par GitHub. Il réalise le développement d'applications GUI de bureau multiplateformes en utilisant Node.js (comme backend) et le moteur de rendu de Chromium (comme frontend). Un grand nombre d'applications de bureau bien connues ont été développées à l'aide d'Electron, comme Slack, VSCode, etc. Les capacités de développement requises d'Electron chevauchent largement la pile technologique de capacités de développement front-end. Par conséquent, pour les étudiants en développement front-end, le seuil d'utilisation d'Electron pour le développement de bureau est relativement bas, en même temps, en tant que projet. a été profondément cultivé et itéré pendant 8 ans, Electron dispose d'un écosystème d'applications riches qui réduisent encore le coût de démarrage.
L'utilisation d'Electron pour le développement d'applications de bureau permet également au front-end d'améliorer ses propres capacités, d'une part, elle élargit l'étendue de la technologie et peut étendre la portée des capacités commerciales frontales d'une seule page Web à une application PC. Certains ne sont actuellement pas pris en charge par Electron. La capacité peut également être étendue en écrivant des composants Node en C++. D'un autre côté, de nombreuses restrictions du côté front-end ont été brisées, telles que certaines restrictions de sécurité Web traditionnelles et l'appel ; des interfaces sous-jacentes du système, qui peuvent renforcer les capacités de développement.
Bien sûr, Electron n'est pas sans défauts. Certaines des lacunes couramment critiquées sont :
La taille du package est trop grande En raison du grand nombre de dépendances fournies avec le noyau Chromium, la taille du package d'Electron est généralement. 100 M+ Nous pouvons utiliser la compression asar, des bibliothèques de liens dynamiques, etc. pour l'optimisation.
Utilisation élevée de la mémoire De même, en raison du noyau Chromium fourni, l'utilisation de la mémoire d'Electron est généralement élevée.
L'efficacité du rendu visuel de la couche d'interface utilisateur est faible. Elle peut également être optimisée grâce à des méthodes d'optimisation, telles que des tâches de traitement multi-processus, et même à l'utilisation d'artefacts visuels pour améliorer l'expérience utilisateur.
Bien qu'Electron ait certains problèmes connus, sa chaîne écologique complète et son chevauchement élevé avec la technologie front-end restent la solution recommandée pour le développement rapide d'applications de bureau. Il nous est également plus facile de résoudre les problèmes de performances grâce à certaines méthodes d'optimisation courantes. .pour le résoudre et atteindre le niveau de 80 points. En 2021, Electron maintient toujours une fréquence de mise à jour stable d'une version majeure toutes les huit semaines et a lancé plusieurs versions majeures de la V12 à la V15. Le contenu mis à jour se concentre principalement sur la suppression et la modification des API, l'adaptation des fonctionnalités du système et celles qui en dépendent. versions telles que les mises à jour du noyau Chromium et d'autres détails.
React Native Desktop
React Native est un framework de développement mobile multiplateforme open source par l'équipe technique de Facebook en avril 2015, basé sur l'ancien framework front-end React. Concernant la construction d'applications de bureau, l'équipe RN n'a pas encore lancé de version de bureau officielle et s'appuie principalement sur des projets communautaires pour renforcer les capacités de développement durable. Parmi elles, la solution technique React Native For Windows + macOS développée par Microsoft est la solution avec le plus d'expérience accumulée et les itérations de développement les plus stables. Depuis la sortie du projet fin 2015, il a connu 6 ans d'itérations stables. . En 2021, l'équipe RN a lancé trois versions importantes 0.64-0.66, et Microsoft assure toujours les mises à jour de la version principale de RN dans l'itération de React Native For Windows, et prend également en charge un grand nombre de fonctionnalités liées à Windows. Si vous créez une application de bureau dont les principaux utilisateurs cibles se trouvent sur la plate-forme Windows, utiliser React Native For Windows est un bon choix.
Il est à noter qu'en 2021, en plus d'assurer le support des nouveaux systèmes Android 12 et iOS 15 dans les versions importantes lancées, l'équipe technique RN a également mis en avant la co-construction de la technologie de construction d'applications de bureau avec l'équipe Microsoft, l'équipe RN a déclaré qu'elle fournirait des capacités techniques « uniques » pour les applications de bureau grâce à l'introduction de l'équipe Messenger de Facebook pour améliorer l'expérience utilisateur de la version de bureau React Native. Nous attendrons également de voir.
Flutter Desktop
Flutter est un cadre de développement hybride d'interface utilisateur mobile lancé par Google. Il implémente un ensemble de bibliothèques de base ascendantes afin que les utilisateurs puissent créer des interfaces utilisateur natives de haute qualité sur iOS et Android.
Actuellement, afin de prendre en charge les capacités de développement côté bureau, Flutter utilise une solution de rendu cross-end qui convertit le code en Web. Cependant, il reste encore beaucoup à faire pour améliorer les performances de Flutter to Web. Bien qu'il existe de nombreux plans d'optimisation dans l'industrie cette année, si vous souhaitez améliorer considérablement les performances, vous y parviendrez plus ou moins en modifiant comme par magie. le code source de Flutter. Ces méthodes d'optimisation ne seront pas efficaces à long terme. Lors du processus d'itération de la version Flutter, il y aura un coût d'optimisation important. Malgré cela, les performances optimisées de Flutter to Web sont légèrement insuffisantes par rapport aux projets Web traditionnels. Par conséquent, sans considérer la compatibilité, les développeurs utilisant la solution to Web devraient essayer d'utiliser le mode Canvaskit Render. Ce mode est basé sur la solution WebAssembly de Skia et aura de meilleures performances de rendu, mais les performances de chargement doivent être continuellement optimisées.
Peut-être afin de résoudre complètement le problème de performances sur le bureau, Flutter Desktop a lancé la solution Windows Native à la mi-2021, mais elle ne prend actuellement en charge que les systèmes 64 bits, ce qui le rend incapable de prendre en charge les versions Windows de 32 bits inférieurs. des systèmes tels que Win7. Cela augmentera considérablement les coûts de compatibilité pour les développeurs. Cependant, en février 2022, Flutter Desktop a officiellement lancé une version stable, adaptant de nombreux plug-ins courants pour inclure la prise en charge de Windows, notamment camera, file_picker et shared_preferences. De plus, la communauté a ajouté la prise en charge de Windows avec une variété d'autres packages, couvrant tout, de l'intégration de la barre des tâches Windows à l'accès au port série. Dans le même temps, de nombreuses équipes Microsoft ont également activement coopéré et apporté de grandes contributions à la sortie de la version officielle. En 2022, Flutter Desktop vaut la peine d'être essayé.
Tauri
Tauri, qui a récemment profité de Rust, a reçu beaucoup d'attention Par rapport à Electron, il présente principalement les quatre avantages suivants :
Taille de paquet plus petite
Plus d'utilisation de la mémoire. pendant l'exécution Petit
La sécurité passe avant tout
Véritable open source
Mais en pensant rationnellement, pour le développement front-end, il y a trois lacunes fatales :
Tauri utilise la vue Web du système, y aura-t-il sont des problèmes de compatibilité, qui sont aussi les problèmes clés qu'Electron résout
Abandon de nodejs, l'écosystème est encore difficile à comparer avec celui d'Electron
Le développement sous-jacent nécessite Rust, et il y a un certain coût pour démarrer
Bien sûr, Tauri n'est pas encore très mature, mais à mesure que l'écosystème Rust se développe et que la compatibilité des navigateurs diminue, le résultat est encore incertain.
5. Rust - Il est temps de maîtriser un nouveau langage
Rust est l'avenir de l'infrastructure JS
Avec l'amélioration progressive des outils écologiques front-end, en plus d'explorer de nouveaux domaines du front -fin, tout le monde En même temps, nous réfléchissons toujours à la manière d'améliorer les performances de l'outil Comme nous le savons tous, les performances de JavaScript ont toujours été critiquées par tout le monde, mais l'infrastructure front-end est très exigeante en performances. , comme la construction, tout le monde a donc commencé à se demander si d'autres langages pouvaient être utilisés. Pour écrire des outils front-end, Rust a attiré l'attention de tous. Depuis sa naissance, le langage Rust a attiré un grand nombre de développeurs avec son. sécurité, performances et syntaxe moderne. Au cours des six dernières années, Stackoverflow est devenu le langage de programmation le plus populaire et a continuellement remporté la première place, et des projets de réécriture de Rust sont apparus dans de nombreux domaines. Le projet Linux a également déclaré qu'il utilisait. Rust va réécrire certaines fonctions. On peut dire que l'entrée de Rust dans le domaine du front-end est également une tendance inévitable. Un article "Rust Is The Future of JavaScript Infrastucture" écrit par Lee Robinson en 2021 répertoriait de nombreux projets d'outils frontaux écrits en Rust et déclarait que Rust continuerait d'augmenter son impact sur l'écosystème Javascript, cet article a été retweeté par de nombreux comptes publics. , déclenchant des discussions animées entre tous.
Les outils Rust sont intégrés dans l'écosystème front-end
Dans le domaine de la construction front-end, un projet très important a émergé en 2021 - swc, qui est un outil de construction écrit en Rust et peut être utilisé pour compiler , compresser et empaqueter. À l'heure actuelle, il est utilisé par certains projets bien connus, tels que Next.js, Parcel, Deno, etc., Next.js 12 utilise directement swc au lieu de babel, et leur blog officiel a déclaré que après avoir utilisé swc, la vitesse de mise à jour à chaud a été augmentée à trois fois. La vitesse de construction a été augmentée à 5 fois, ce qui montre les puissantes performances de Rust.
En plus de la construction, Rust est également utilisé dans d'autres domaines du front-end. Par exemple, le moteur d'exécution de Deno est également un moteur V8 écrit en Rust, l'outil frontal de nouvelle génération annoncé par Family Bucket Rome ; qu'il sera réécrit dans Rust ; Node .js peut appeler des modules Rust via napi-rs pour obtenir une expansion haute performance ; le codeur standard dprint écrit en Rust est 30 fois plus rapide que Rust peut également être compilé dans WASM, et les WASM ; comme if et Percy sont apparus un framework Front-end.
Il est prévisible que les outils Rust seront plus profondément intégrés dans l'écosystème front-end, ce qui pourrait déclencher une autre mise à jour de l'écosystème front-end.
Il est temps pour les utilisateurs front-end d'apprendre une nouvelle langue
Je crois que beaucoup de gens ont vu une telle capture d'écran de Twitter, Dan Abramov, a répondu à la question "Quelle est la langue qui mérite le plus d'être apprise au cours des trois prochaines années ?" "Rust" peut être une source d'inspiration pour le personnel front-end.Il est temps pour nous d'apprendre un nouveau langage pour revitaliser l'écosystème front-end. Cependant, beaucoup de gens seront découragés par le parcours d'apprentissage abrupt de Rust, mais en fait, Rust est similaire à. développement frontal dans de nombreux endroits, et ce n'est pas si difficile de démarrer.
Par exemple, dans la chaîne d'outils, rustup de Rust est équivalent à nvm, qui peut changer la version de l'outil cargo en cours d'exécution (version Rust de npm), mais il est également plus puissant que nvm lorsque rustup est installé. , il sera également installé clippy (version Rust d'eslint), rustfmt (version Rust de plus joli) et les projets créés à l'aide des outils de support Rust sont déjà livrés avec des outils de support de formatage et d'analyse de code.
Jetons un coup d'œil aux similitudes entre cargo et npm. Les deux outils sont similaires dans de nombreuses commandes, et certaines commandes de npm qui doivent être configurées dans le projet n'ont pas besoin d'être configurées dans cargo, et même cargo est fourni avec. it.Sans gestion monorepo, vous pouvez configurer directement des projets multi-packages. Plutôt que de dire que cargo correspond à npm, cargo ressemble plus à une combinaison de npm et de fil. C'est aussi le résultat de la référence de l'équipe Rust à la chaîne d'outils du langage moderne. .
En termes de syntaxe, Rust présente également les caractéristiques d'un langage très moderne. Il s'appuie sur les caractéristiques de la programmation fonctionnelle et des langages structurés, et crée également de nombreuses syntaxes plus avancées à partir de celles-ci. Dans la programmation fonctionnelle, il y a aussi beaucoup de JavaScript. Par exemple, la fonction flèche de JS correspond à la fonction fermée de Rust ; le tableau de Rust peut également être map, réduire, filtrer et d'autres méthodes ; affecté à une variable.
Si le deuxième langage que le front-end pouvait apprendre était le C++ dans le passé, alors c'est peut-être Rust maintenant. Il a une gestion des dépendances, une syntaxe et une chaîne d'outils plus modernes que le C++, de sorte que vous ne serez pas découragé. début , et cela peut également vous rendre plus compétitif dans le domaine front-end.
6. Le low code continuera à devenir un sujet brûlant
Cela fait une autre année que nous parlions du « low code » dans les tendances technologiques de 2020. La taille du marché est passée de 1,9 milliard en 2020 à 2,85. milliards en 2021. Cela montre sans aucun doute que ce domaine est toujours d’actualité et se développe rapidement. Si 2020 nous a laissé espérer une montée en puissance continue du domaine du low-code, alors 2021 nous permettra de voir davantage de tendances concernant le développement futur du domaine du low-code.
D'une part, nous avons constaté que les plates-formes low-code au niveau de l'entreprise telles que Tencent WeChat et Alibaba YiDe commencent à prendre de l'ampleur dans l'industrie, et il existe également des plates-formes au sein de l'entreprise qui se concentrent sur la création de bureaux de gestion tels que Wuji et mûrissent progressivement. Un grand nombre de produits basés sur des plates-formes continuent de se développer à un rythme différencié et rapide et restent les idées de développement dominantes. Au sein de l'équipe IMWeb, depuis l'exploitation de la plateforme low-code Vision en 2019 jusqu'à la plateforme de gestion low-code Hulk en 20 ans, nous avons accéléré la recherche et le développement commercial grâce à des plateformes verticales low-code. En 2021, nous avons poursuivi nos essais dans le scénario côté serveur et peaufiné la plate-forme HulkData en nous concentrant sur la construction d'interfaces.
HulkData construit un pipeline via des composants visuels Web et génère de nouvelles interfaces API basées sur des bases de données ou des API existantes avec une petite quantité de code. HulkData s'appuie sur le protocole BPMN 2.0 pour utiliser des graphiques pour exprimer des processus métier, prenant en charge plusieurs entreprises, plusieurs ressources de données, un code faible, un mécanisme de plug-in, une orchestration des processus et une modification des paramètres de demande et de réponse. Le sans serveur devient de plus en plus mature et la fonctionnalité sans fonctionnement de Serverless est une très bonne opportunité pour HulkData. Les interfaces créées sur HulkData seront déployées sur Tencent Cloud sous la forme de SCF, et il n'est pas nécessaire de prêter attention au fonctionnement du serveur. et l'entretien. L'utilisation de l'orchestration de l'interface côté serveur HulkData peut rapidement mettre en œuvre une logique métier et recevoir et fournir des applications métier de manière agile. La vitesse de livraison est 80 % plus rapide que le modèle de développement traditionnel. Actuellement, les trois principaux accès internes à l'entreprise utilisent un total de plus de 400 interfaces et fonctionnent normalement.
D'un autre côté, il convient de se demander s'il existe des points communs entre les produits de plateforme différenciés et basés sur des scénarios qui se développent rapidement ? Après tout, quel que soit le scénario visé, le coût de création d’une plate-forme low-code à partir de zéro n’est en aucun cas faible. Ce type de gaspillage de ressources est particulièrement répandu dans les grandes usines.
Le projet de moteur low-code Gems lancé au sein de l'équipe IMWeb fin 2020 est en réalité une exploration de cette problématique. L'objectif principal du moteur low-code est de fournir un ensemble de normes et d'installations de base pour aider la plate-forme de couche supérieure à être construite plus efficacement. La clé de sa réflexion réside dans l’exhaustivité du modèle et des capacités du moteur, ainsi que dans son évolutivité dans différents scénarios. En tant que moteur low-code, Gems a continuellement amélioré ses capacités de base et sa conception au cours des 21 dernières années, en fournissant un plug-in complet, une API d'objet d'édition de base et d'autres fonctionnalités. En plus de prendre en charge de manière stable la plate-forme low-code pour les opérations et la gestion au sein de l'équipe, elle s'est également progressivement étendue au-delà de l'équipe pour aider plusieurs équipes au sein de l'entreprise à créer efficacement des plates-formes low-code pour leurs propres scénarios commerciaux.
Dans le même temps, nous avons également vu que lors de la conférence GMTC à la fin de cette année, Alibaba a fait la promotion du moteur low-code du groupe auprès du monde extérieur. À en juger par le contenu partagé, il a soutenu la construction de. plus de 60 plates-formes low-code et le moteur low-code interne de Tencent, Code Oteam, ont également commencé à être organisés en 2021, et son objectif principal est également de co-construire le noyau sous-jacent. Si l’on considère l’ensemble du secteur, les moteurs low-code ont commencé à émerger, et il est prévisible que la tendance continuera à s’accentuer. C’est juste que cette piste segmentée ne concerne peut-être que les grands constructeurs, car elle nécessite un grand nombre de vérifications de support de scène, ce que les petits constructeurs ou les développeurs indépendants ne disposent pas.
Dans l'ensemble, les produits de plateforme différenciés resteront notre principal moyen d'accéder au domaine du low-code et l'émergence des moteurs low-code apportera plus de possibilités à l'ensemble de l'industrie ;
7. L'avenir de l'intelligence frontale D2C est prometteur
"L'intelligence frontale" est une nouvelle exploration de l'industrie dans le sens du front-end + IA ces dernières années. Qu’est-ce que l’intelligence ? Il s'agit de combiner des algorithmes intelligents avec des pratiques d'ingénierie frontale et de laisser les machines aider au développement.
D2C : historique et situation actuelle
Jusqu'à présent, la forme de produit la plus importante dans le domaine de l'intelligence frontale est constituée de divers outils Design to Code (ci-après dénommés D2C) : saisie d'un projet de conception d'interface utilisateur, à travers une série d'algorithmes, génèrent du code utilisable.
Un article de 2017, pix2Code, a proposé l'idée d'un code de génération d'images.
En 2018, Microsoft a open source le projet Sketch2Code, vérifiant ainsi la faisabilité de cette direction.
En 2019, Alibaba Taobao a lancé imgcook et, dans les années suivantes, il a soutenu un grand nombre d'entreprises telles que Double Eleven et 618. Cela marque la maturité progressive de la technologie D2C et la nécessité d’une mise en œuvre commerciale à grande échelle.
L'heure est à 2021, et de grandes entreprises nationales et étrangères ont lancé des explorations et des pratiques correspondantes dans ce domaine :
L'équipe Tencent IMWeb a lancé le projet Auton, qui a été testé en interne et devrait fournir des services externes en juin prochain. année ; Alibaba imgcook continue d'itérer rapidement ; Byte a incubé le projet "ALYX" basé sur la plate-forme low-code et a également lancé des pratiques internes en open source Picasso Zhuanzhuan a lancé la plate-forme "Magic Brush Ma Liang" ; ... .
Par ailleurs, de nombreuses startups ont vu le jour dans le domaine du D2C. Tels que CodeFun national, Blue Lake, Framer étranger, Anima, etc.
Il convient de mentionner que CodeFun a des performances relativement bonnes en termes de facilité d'utilisation et de restauration, et a acquis une bonne réputation depuis son lancement.
Mais dans l'ensemble de la communauté open source front-end, il n'existe actuellement aucun projet open source suffisamment influent dans le domaine du D2C. Par conséquent, chaque entreprise est fondamentalement dans un état de « travail à huis clos ».
Deux faces de la médaille : défauts, scénarios et opportunités
Par rapport aux premières solutions basées sur des algorithmes visuels purs, les produits D2C actuels à grande échelle utilisent essentiellement des fichiers sources de conception (Sketch, Figma, XD, etc.) comme l'entrée originale.
Comme il est difficile pour les algorithmes purement visuels d'extraire des informations telles que les niveaux d'interface utilisateur à partir d'images bidimensionnelles, le projet de fichier de conception peut obtenir une description structurée plus détaillée de l'interface utilisateur en analysant le DSL interne, ce qui est plus pratique pour le traitement et le code ultérieurs. génération.
Dans le modèle traditionnel de développement pro-code, « PRD + design draft » est généralement utilisé comme entrée pour produire du code métier. Cependant, le système D2C utilise le brouillon de conception comme seule entrée, et le brouillon de conception n'est qu'une simple description de l'interface utilisateur, ce qui entraîne de nombreuses informations qui ne peuvent pas être déduites de la conception. Par exemple, l’animation, l’interaction, la logique et même la réactivité ne peuvent être obtenues en s’appuyant uniquement sur le D2C.
En raison de ces lacunes, la plupart des scénarios D2C ne sont utilisés que comme outils auxiliaires de développement. Il est encore trop tôt pour être véritablement pleinement intelligent (capable de produire du code doté d’une logique complète et utilisable dans l’environnement de production sans intervention humaine).
Malgré les nombreuses lacunes mentionnées ci-dessus, D2C présente un grand potentiel dans le domaine du développement d'interface utilisateur.
Les produits D2C (code de composant/page ou DSL décrivant l'interface utilisateur) ont généralement les chemins de consommation suivants :
Le code de sortie, en tant que composant de base de l'interface utilisateur, est secondairement développé par les développeurs.
Le code de sortie est fourni comme matériel de base et combiné avec la plateforme low-code/no-code pour l'édition et l'arrangement secondaires.
Produisez du DSL et combinez-le avec un rendu personnalisé pour un rendu direct.
Surtout pour le deuxième chemin de consommation, avec l'aide de la plateforme low-code devenue populaire ces dernières années, des interventions manuelles et des interventions secondaires telles que la liaison de données, l'arrangement logique, l'édition de style et l'arrangement interactif sont effectuées sur les matériaux d'interface utilisateur produits par D2C Editing peuvent combler les lacunes des capacités de D2C et établir un ensemble de SOP de production de code rapides, efficaces, déposables et réutilisables.
De plus, grâce à sa haute efficacité d'approvisionnement, D2C peut briser le goulot d'étranglement de la production de matériaux low-code/no-code, donnant ainsi un coup de pouce à la transformation du paradigme de R&D front-end du pro-code au low-code.
Avec l'aide de D2C + low-code/no-code, combiné aux formes de produits technologiques en vogue de SaaS, FaaS, BaaS, etc. ces dernières années, il est prévisible que dans un avenir proche, cela puisse vraiment être réalisé sans la nécessité pour les ingénieurs de mettre en œuvre rapidement le zéro code. Lancez un produit avec des données, une interaction et une logique complètes. Cela a considérablement réduit les coûts initiaux de nombreuses entreprises innovantes et pourrait même stimuler la prochaine vague d’entrepreneuriat Internet.
Mais jusqu'à présent, aucune plateforme ne peut parfaitement intégrer les formes de produits ci-dessus (D2C + low-code/no-code + SaaS/FaaS/BaaS) pour former une boucle fermée tout en conservant une excellente expérience utilisateur. Dans les prochaines années, ce domaine pourrait donner naissance à des startups stars.
Regard vers l'avenir : culture en profondeur, intégration, changement de paradigme R&D
En regardant vers 2022, on peut prédire que l'intelligence et le D2C de l'industrie front-end continueront de se développer, avec les deux tendances majeures suivantes dans son ensemble :
Verticalement : continu Cultiver et optimiser en profondeur les processus, les algorithmes et les expériences pour rendre « intelligent » vraiment de plus en plus « intelligent ».
Horizontalement : Établir des normes et des processus, intégrer des capacités en amont et en aval, connecter low-code, no-code, FaaS, BaaS, SaaS, système de conception, système d'algorithmes, système de R&D, système de données, etc... pour véritablement Le système de production rapide industrialisé libère la productivité.
À long terme, une fois que le système ci-dessus sera établi, il incitera sûrement l'industrie à entamer la prochaine transformation du modèle de R&D. Du modèle actuel de R&D basé sur le pro-code, il sera transformé en un modèle dans lequel le pro-code, le low-code et le no-code se complètent, se complètent et se renforcent mutuellement. Dans le même temps, grâce à la mise en place d’un système standardisé, les matériaux et les produits peuvent être plus facilement généralisés et réutilisés. Les implications pour l’efficacité de la R&D sont sans aucun doute énormes !
Ceux-ci sont tous pleins d'imagination. Même si le voyage vers l'intelligence est semé de doutes et d'obstacles, l'avenir mérite d'être attendu. Nous continuerons à cultiver et à nous développer au cours de la nouvelle année, et l'avenir peut être attendu en 2022...
8 DevOps, l'efficacité de la R&D est toujours au centre de l'attention
L'efficacité de la R&D est un domaine de grande importance. préoccupation pour les sociétés Internet et les éditeurs de logiciels traditionnels. Les géants de l'Internet espèrent améliorer continuellement leurs capacités de R&D grâce à « l'efficacité de la R&D » pour faire face au développement de produits de plus en plus complexes ; des retardataires grâce à « l'efficacité de la R&D » ; davantage de petites et moyennes entreprises. Étant donné que les grandes sociétés Internet nationales ont unanimement investi massivement dans ce domaine, elles se préparent également à faire des efforts dans le domaine de la performance.
Semblable au concept d'agile, il est difficile de définir précisément ce qu'est l'efficacité de la R&D. En fait, de nombreux concepts complexes ne sont pas définis, mais évoluent progressivement. Ils apparaissent d’abord comme des phénomènes puis trouvent des expressions appropriées. En fait, efficience et efficacité n’ont jamais été des termes exclusifs pour le génie logiciel. Tout au long de l’histoire du développement humain, la productivité et l’efficacité de la production ont été continuellement améliorées. À l’ère numérique, l’importance de l’efficacité de la R&D logicielle a été soulignée. Si nous devions résumer l’efficacité de la R&D en une phrase, nous la résumerions par « offrir une meilleure valeur commerciale, plus efficacement, avec une qualité supérieure, de manière plus fiable et durable ».
Ce que nous pouvons faire n'est pas d'améliorer la valeur absolue de l'efficacité de la R&D, mais de ralentir autant que possible la détérioration de l'efficacité de la R&D afin qu'elle ne décline pas trop rapidement. Essayer de maintenir le statu quo est un succès. .
L'équipe IMWeb a fait de grands progrès en DevOps en 2021. D'une part, nous avons co-construit avec Tencent Cloud Coding dans plusieurs domaines tels que le développement, les tests, le déploiement, l'exploitation et la maintenance. La plate-forme de performance auto-développée par l'équipe, Thanos, et l'équipe de codage ont créé en profondeur des solutions de flux de travail d'application. et la plate-forme de débogage commune de l'agence TDE et Coding L'équipe a ouvert l'environnement de test Nohost gateway, interface plate-forme contractuelle de débogage commune Tolstoy et Coding pour construire conjointement des capacités d'hébergement, de simulation et de test d'API. Dans le contexte de l'efficacité de la recherche, nous avons réalisé des plates-formes de performances unifiées grâce à Tencent Cloud Coding, et l'efficacité globale de la recherche et du développement a augmenté de plus de 30 %.
9. Le micro front-end, une partie à ne pas sous-estimer
En 2016, ThoughtWorks a proposé l'idée du micro front-end : diviser les énormes projets en petits projets flexibles. Les uns avec les autres et peuvent être développés indépendamment. Fonctionnement indépendant et déploiement indépendant, ouvrant ainsi le micro-rideau frontal. Après qu'Alibaba ait développé le cadre micro-frontal qiankun basé sur un spa unique en 2019, la popularité des micro-frontaux a augmenté. Dans le processus de développement du micro-front-end, les développeurs ont également lentement compris les scénarios d'application actuels du micro-front-end :
En 2021, il existe déjà de nombreux frameworks micro-front-end, parmi lesquels les plus célèbres sont les anciens single-spa, qiankun, le framework micro-front-end avec le plus grand nombre d'étoiles Github, et MicroApp de JD.com, le framework micro-front-end émergent.
single-spa Depuis la sortie de la v5.0 en 2020, le travail principal au premier semestre de l'année dernière a consisté à corriger quelques bugs dans la v5.0, et au second semestre, la version bêta de la v6 .0 est sorti en juillet. Bien que la version 6.0 comporte également quelques modifications récentes, la plupart des utilisateurs n'ont pas besoin de mettre à jour leur code pour ces modifications. Le plus important est qu'en termes de navigateurs, la v6.0 sera la dernière version à prendre en charge IE11, et la future version v7.0+ ne prendra plus en charge IE11. L'équipe du spa unique concentrera davantage d'énergie sur le navigateur. La compatibilité consiste à maintenir l’ensemble de l’écosystème d’un seul spa. La v6.0 ajoute également deux nouvelles fonctionnalités :
prend en charge l'annulation asynchrone de la navigation dans les pages.
PatchHistoryApi exposé, les développeurs peuvent utiliser pushState/replaceState/popstate/hashchange encapsulé dans un seul spa.
Non seulement les anciens frameworks fonctionnent dur, mais qiankun, qui prétend être « probablement la solution micro front-end la plus complète que vous ayez jamais vue », est également constamment mis à jour. qiankun résout principalement certains problèmes dans différents scénarios d'application et corrige certains problèmes de compatibilité JavaScript dans le bac à sable, tels que les problèmes de définition de propriété dans le bac à sable et les problèmes de performances du bac à sable. Bien que qiankun ne semble pas avoir eu beaucoup de mises à jour l'année dernière, il a également publié l'excitant RoadMap V3.0, qui mentionne de nombreuses mises à jour. Les principales mises à jour incluent : un module de chargement d'application indépendant et un module sandbox indépendant.
Cependant, qiankun n'a toujours pas résolu le problème des fortes intrusions et ne peut pas intégrer de pages aussi facilement que les iframes.
Une bonne nouvelle au second semestre est que JD.com a également lancé sa propre solution micro front-end MicroApp. Il n'adopte pas les idées de composanting de single-spa et qiankun, mais s'appuie sur l'idée de WebComponent. Il utilise CustomElement combiné avec le ShadowDom personnalisé pour encapsuler le micro-frontal dans un composant de classe WebComponent, réalisant ainsi le rendu des composants. du micro frontal. Il présente les caractéristiques suivantes : composant Web de classe e + entrée HTML
Cycle de vie
Supplément d'adresse de ressource
, isolation de style, isolation d'élément
Communication de données
Préchargement
Système de plug-in
MicroApp est parfait en termes de convivialité et d'intrusion. Le développement et l'avenir de ce framework méritent d'être attendus avec impatience.
L'équipe IMWeb a également mené des recherches approfondies sur les micro-frontends au cours de l'année écoulée et a réalisé une pratique micro-frontend très réussie de reconstruction incrémentielle qiankun x basée sur qiakun, intégrant l'ancien projet Vue monolith avec les nouveaux projets React. sont organiquement intégrés pour réaliser un développement parallèle et une reconstruction transparente, améliorant considérablement la productivité frontale. Pour des détails pratiques spécifiques, veuillez prêter attention aux articles ultérieurs sur le compte public de l’équipe IMWeb.
Regard sur les tendances technologiques de 2022React et Vue continuent de se développer selon leurs propres caractéristiques,
L'accent est toujours mis sur l'expérience utilisateur et l'expérience développeurAvec le développement en profondeur de la pile complète, chaque framework d'interface utilisateur majeur possède son propre « méta-framework » pour créer des applications full-stack. Avec le grand frère traditionnel Nest et l'étoile montante Remix, cela peut être. dit qu'une centaine d'écoles de pensée s'affrontent.
Mais la mer profonde du développement backend ne peut pas être comblée par un certain cadre. Ce qui est plus nécessaire, c'est la sensibilisation et l'accumulation d'expérience des développeurs front-end. Je crois qu'au cours de la prochaine année, le front-end pénétrera plus profondément et. de manière plus globale.TypeScript est déjà la norme pour les projets front-end
On peut s'attendre à ce qu'il y ait des outils de support plus puissants à l'avenir pour améliorer la productivité et l'expérience utilisateur.Tous les principaux frameworks cross-end ciblent le bureau. De plus, avec la popularité des « jeux cloud », les « applications cloud » ont également un grand potentiel. Bien entendu, le développement front-end ne peut pas perdre cette position,
. La communauté d'Electron et Tauri La performance mérite d'être attendue avec impatience.Si vous voulez aller plus loin, il est temps d'apprendre un nouveau langage, le futur de l'infrastructure JS - Rust, full stack - Go, AI - Python, Flutter - Dart, front-end person Quand pourrez-vous briser vos propres limites ? WASM sera certainement un grand succès dans le futur, et vous ne le saurez pas sans le front-end !
La tendance à la transformation de ToB est évidente, le low-code a beaucoup de potentiel, ce qui est gratifiant, c'est que de plus en plus de grandes entreprises ont tendance à unifier les moteurs low-code et open source et à mettre fin au chaos des plates-formes low-code fonctionnant partout , c'est aussi l'industrie Internet La seule manière d'avancer vers l'industrialisation et l'intelligence.
D2C est le début de l'intelligence frontale, et la route est encore très longue J'attends avec impatience le lancement de produits plus intelligents front-end !
La plateforme de recherche et d'efficacité est également en phase d'unification, et elle devrait se poursuivre l'année prochaine Même s'il y aura de la douleur, pour l'industrialisation et l'intelligence futures de la R&D, l'effort en vaut la peine !
Avec la popularisation des réseaux 5G et l'amélioration continue du matériel de téléphonie mobile, les supports graphiques traditionnels ne peuvent plus satisfaire l'appétit de la majorité des internautes Je pense qu'il y a encore beaucoup de place pour le développement dans l'audio. et le domaine vidéo du futur, dans la virtualisation et les métadonnées Avant l'arrivée de l'ère cosmique, le domaine audio et vidéo était encore au cœur de cette ère.
Avec le développement des affaires, la croissance continue des systèmes de gestion et la tendance à une grande unification, Les applications Jushi sont inévitables et le seront de plus en plus Si vous souffrez de cette maladie, le micro-frontend peut être considéré comme un. bonne médecine. L'écologie et le développement de la construction de micro-frontend, ainsi que les idées d'emprunt de MicroApp à WebComponent valent vraiment la peine d'être attendues !