Voyagez avec les composants du serveur KendoReact

KendoReact embrasse les composants du serveur React, proposant le DataGrid comme premier composant expérimental du serveur KendoReact. Nous allons jeter un coup d’oeil!

Un récapitulatif rapide

Vous êtes-vous déjà demandé comment les progrès rapides du développement Web en 2023 façonneront l’avenir de notre industrie ? Nous avons assisté à une percée pour les outils de construction basés sur Rust and Go, un outil Angular changement de marque Renaissanceles runes Svelte sont publiées, et il semble que la prochaine version majeure de React soit juste au coin.

En collaboration avec les développeurs du monde entier, chez Progress, nous accordons une attention particulière à ce que l’avenir du Web nous réserve. Nous n’avons pas peur de jouer avec des technologies expérimentales et recherchons des moyens créatifs de placer la barre encore plus haut en matière d’expérience des développeurs.

Lorsque les composants React Server (RSC) ont été annoncés en 2020, le Progress KendoRéagir L’équipe s’est réunie et a immédiatement commencé à réfléchir à la manière dont nous pourrions utiliser une telle technologie. La principale culture que nous construisons est que pour qu’un produit ait de la valeur pour nos clients, nous devons d’abord être sûrs qu’il a de la valeur pour nous, car en fin de compte, nous sommes également des développeurs. Nous avons inversé cette réflexion en :

« Si nous voyons la valeur de cette nouvelle technologie, il devrait y avoir quelqu’un qui soit également confronté aux mêmes problèmes que nous. »

Composants du serveur KendoReact

La communauté React n’a pas hésité à partager immédiatement ses réflexions, ses critiques et une bonne part de mèmes en ce qui concerne les composants du serveur, et nous avons immédiatement reflété l’enthousiasme suscité par RSC. Mais qu’ont en commun les composants React Server et un fournisseur de composants d’interface utilisateur ? C’était une question rhétorique, mais comme mon responsable l’a également posé, vous pourriez être intéressé par la façon dont Progress envisage l’avenir du développement Web.

Nous souhaitons donc partager notre premier composant expérimental de serveur KendoReact : la grille. Nous sommes impatients de connaître vos commentaires et de vous aider à mieux façonner l’avenir de cet effort. Mais avant de vous lancer La documentation et commencez à casser des choses et à signaler des bugs (nous savons qu’il y en a), veuillez rester jusqu’à la fin de cet article de blog où nous partagerons davantage.

La star du spectacle : Grids adore les données !

Le Grille de données RSC est le point culminant de notre offre, et la récupération de données étant l’histoire principale de RSC, nous avons senti qu’il fallait partir de là. De toute évidence, chaque grille de données doit être accompagnée d’opérations de données de base telles que le filtrage, la pagination et le tri, de certaines capacités d’édition et d’une API de personnalisation pour ses éléments structurels de base tels que les lignes et les cellules. (Nous avons fait cela pour chaque framework Web et de bureau majeur au cours des 20 dernières années.)

Ce qui s’est avéré assez difficile a été de diviser le composant en parties serveur et client. Si nous avons appris quelque chose au cours de ces 20 années de création de composants d’interface utilisateur, c’est qu’il n’y a pas de bonne ou de mauvaise façon de diviser un composant, seulement la manière du développeur.

En nous inspirant de certains frameworks anciens mais éprouvés, nous avons identifié la nécessité de fournir aux développeurs un moyen de définir où se situe la limite du client, en fonction des exigences de leur application individuelle.

Vous souhaitez un filtrage côté serveur, mais un tri côté client ? Pas de soucis, nous l’avons déjà dans un démo.

Cette base architecturale a porté ses fruits plus tard dans le développement, car elle nous a permis de n’expédier qu’une fraction du JavaScript du composant au client, ce qui a donné lieu à une taille de bundle près de 10 fois plus petite par rapport à notre DataGrid client uniquement. Cela peut sembler beaucoup, mais cela ne devrait pas surprendre car cela est principalement géré par la plateforme.

Le Données dans DataGrid

Être une grille de données signifie qu’elle a d’abord besoin de données… duh !? Mais le KendoReact Server DataGrid ne nécessite pas que vous disposiez de toutes les données immédiatement.

En tirant parti des capacités de streaming asynchrone du composant serveur, nous pouvons commencer à restituer le shell du composant immédiatement, avec des indicateurs de chargement personnalisés basés sur l’état du composant jusqu’à ce que les données soient disponibles.

Ce que nous attendons des développeurs, c’est : « Juste montre-nous où se trouvent tes données! » Et le reste est géré par le composant.

Cela ouvre la possibilité de transmettre une promesse sous forme de données, de récupérer des données supplémentaires sans bloquer l’interface utilisateur et même de transmettre une requête SQL directement dans le composant.

Oui, je sais que c’est un mème de Vercel, mais nous ne pouvons qu’apprécier leur travail pour faire avancer le Web. Même si certains de mes collègues font des cauchemars en criant XSS, ne vous inquiétez pas, c’est sûr.

Et après?

Nous pensons que la prochaine version de React dévoilera enfin les efforts déployés depuis des années pour rendre les composants de serveur stables, performants et sécurisés, mais d’ici là, nous restons ouverts d’esprit quant à la manière dont cela façonnera les bibliothèques d’interface utilisateur de React et les fournisseurs de composants tiers.

Prêt à essayer la KendoReact Server Grid ? Rendez-vous au Documentation sur les composants du serveur KendoReact et dites-nous ce que vous en pensez en laissant vos commentaires sur GitHub ou en nous envoyant un message dans le forum d’entraide.

N’oubliez pas que KendoReact est livré avec un essai gratuit de 30 jours. Essayez-le aujourd’hui !