Dans le but de simplifier leur travail, les développeurs web utilisent des composants autonomes, une sorte d’architecture sur laquelle se baser pour créer des sites web ou applications (les framworks). Conçu pour les développeurs JavaScript et TypeScript, Fresh est un framework web de nouvelle génération qui apporte vitesse, la fiabilité et la simplicité.
Rapellons que JavaScript est le langage dynamique le plus utilisé, fonctionnant sur tous les appareils dotés d'un navigateur Web. Un grand nombre de développeurs « parlent » couramment le JavaScript et beaucoup d'efforts ont été déployés pour optimiser son exécution. Grâce à des organismes de normalisation comme ECMA International, le langage a été soigneusement et continuellement amélioré. Aussi, les ingénieurs Ryan Dahl, Bert Belder et Bartek pensent que JavaScript est le choix naturel pour l'outillage de langage dynamique ; que ce soit dans un environnement de navigateur ou en tant que processus autonomes.
Depuis son apparition, JavaScript a la prétention d’avoir totalement relégué au second plan son concurrent historique : Flash. Initié par Netscape, puis repris par Mozilla, le JS est en pleine scension depuis 2005, année qui marque la démocratisation du web 2.0. Fresh vient s’ajouter au 4 principaux frameworks :
- Vue.js ;
- React.js ;
- Angular ;
- Ember.js.
Selon les besoins en développement, le choix du bon framework conditionnera le succès du projet.
Fresh, le framework web de nouvelle génération
Fresh est un framework web moderne complet pour les développeurs JavaScript et TypeScript, conçu pour faciliter la création d'applications web personnalisées, performantes et de haute qualité. Il peut être utilisé pour créer une page d'accueil, un blog, une grande application Web comme GitHub ou Twitter, ou tout autre chose.
À la base, Fresh est une combinaison d'un framework de routage et d'un moteur de création de modèles qui rend les pages à la demande, sur le serveur. En plus de ce rendu juste-à-temps (JIT) sur le serveur, Fresh fournit également une interface permettant de rendre de manière transparente certains composants sur le client pour une interactivité maximale. Le framework utilise Preact et JSX pour le rendu et la création de modèles, tant sur le serveur que sur le client.
Fresh n'a pas non plus d'étape de construction. Le code écrit est aussi directement le code qui est exécuté sur le serveur, et le code qui est exécuté sur le client. Toute transpilation nécessaire de TypeScript ou JSX en JavaScript pur est effectuée à la volée, au moment où elle est nécessaire. Cela permet des boucles d'itération incroyablement rapides et des déploiements très très rapides.
Les projets récents peuvent être déployés manuellement sur n'importe quelle plateforme avec deno, mais il est prévu de les déployer avec un runtime périphérique comme Deno Deploy pour une expérience optimale. En 2018, lors de la JSConf de Berlin qui était consacrée à la présentation des erreurs de conception de Node.js, Ryan Dahl présentait également le prototype de Deno, l’environnement d’exécution de JavaScript, TypeScript et WebAssembly basé sur le moteur V8 et construit en Rust. Deux ans plus tard, c’est-à-dire en 2020, Deno a fait son chemin et était disponible dans sa première version stable. Depuis lors, le runtime a connu plusieurs itérations.
Toutefois, Deno reste en concurrence avec Node.JS. Notons que Node.js est également un environnement d'exécution JavaScript. Il est basé sur le moteur JavaScript V8 de Google qui exécute le code JavaScript en dehors du navigateur. Il aide les développeurs à créer des unités de code non bloquantes afin de tirer le meilleur parti des ressources système pour créer des applications plus réactives.
Le système de modules de Node permet aux développeurs d'étendre la plateforme à l'aide de modules tiers pour obtenir un maximum de fonctionnalités. Node.js permet simplement aux développeurs d'utiliser chaque projet JavaScript open source sur le serveur de la même manière que sur le navigateur client, ce qui permet une intégration plus étroite et plus efficace entre le serveur Web et les scripts de l'application Web prise en charge.
Création de projet
Les nouveaux projets Fresh peuvent être créés à l'aide de l'outil de création de projets Fresh. Il va échafauder un nouveau projet avec quelques fichiers d'exemple pour vous aider à démarrer. Pour créer un nouveau projet dans le répertoire my-project, le code suivant doit être executé :
| Code : | Sélectionner tout |
1 2 3 4 5 | $ deno run -A --no-check https://raw.githubusercontent.com/lucacasonato/fresh/main/init.ts my-project The manifest has been generated for 3 routes and 1 islands. Project created! Run `deno task start` in the project directory to get started. |
Cela va créer un répertoire contenant quelques fichiers et répertoires. Un fichier deno.json est également créé dans le répertoire du projet. Ce fichier a deux fonctions :
- il indique à Deno l'emplacement de la carte d'importation, afin qu'elle puisse être chargée automatiquement ;
- il enregistre une tâche "start" pour exécuter le projet sans avoir à taper une longue commande deno run.
Exécution locale
L'étape suivante après la création d'un nouveau projet, est de le démarrer réellement. Pour ce faire, il est possible d'utiliser deno task start.
| Code : | Sélectionner tout |
1 2 3 | $ deno task start Watcher Process started. Server listening on http://localhost:8000 |
Pour démarrer manuellement sans tâche Deno, le fichier main.ts doit être executé avec les tags appropriés. L’utilisateur doit fournir les tags de permission pour :
- --allow-net : Ceci est nécessaire pour démarrer le serveur http ;
- --allow-read : Cette option est nécessaire pour lire les fichiers (statiques) sur le disque ;
- --allow-env : C'est nécessaire pour lire les variables d'environnement qui peuvent être utilisées pour configurer votre projet ;
- --allow-run : Ceci est nécessaire pour accéder à deno et esbuild sous le capot pendant le développement pour faire le dépouillement des caractères. En production, ceci est fait en utilisant un binaire WebAssembly.
Pour le développement, l'option –watch peur être utilisé afin que le nouveau serveur soit automatiquement rechargé chaque fois qu’une modification est apportée au code. Par défaut, l'option --watch ne surveille que les fichiers du graphe de modules. Certains fichiers du projet, comme les fichiers statiques, ne font pas partie du graphe des modules, maispeuvent être redémarrer/recharger à chaque fois qu’une modification est apportée. Ceci peut être fait en passant le dossier supplémentaire comme argument : --watch=static/.
Il est également possible d’ajouter un tag --no-check pour désactiver la vérification de type pendant le développement. En général, de nombreuses personnes bénéficient déjà de la vérification des types dans leur éditeur grâce à l'utilisation du serveur de langue Deno, ce qui constitue un bon moyen d'accélérer le temps d'itération de la boucle interne. Pendant le CI, --no-check=remote peut être utilisé pour désactiver la vérification de type des dépendances distantes.
En combinant tout cela, on obtient la commande deno run suivante :
| Code : | Sélectionner tout |
1 2 3 | $ deno run --allow-net --allow-read --allow-env --allow-run --watch=static/ --no-check main.ts Watcher Process started. Server listening on http://localhost:8000 |
Fresh, un concurrent sérieux pour Next JS ?
Next.js est un framework React en plein essor, utilisé par plus de 300 000 dépôts à l'heure actuelle. Next.js possède un large éventail de fonctionnalités que les hackers indépendants et les entreprises du Fortune 500 apprécient. Regardez le grand nombre de sites dans leur vitrine. Il est utilisé au-dessus de React, dont il étend les capacités et simplifie le processus de développement : React n'a pas besoin de travailler avec Next.js, mais Next.js utilise React pour déployer les applications.
À la mi-2020, React faisait déjà l'objet d'environ 7,75 millions d'installations hebdomadaires et dépendait de plus de 3,9 millions de dépôts GitHub. En jettant un coup d’œil sur l'historique de cette métrique de téléchargement annuel ce matin (à la date de redaction de cet article), l'avance de React est stupéfiante.
React est une bibliothèque Javascript utilisée pour construire des interfaces utilisateur. Développée à l'origine par Facebook, la bibliothèque a été mise en open-source en 2013. Si vous avez utilisé Internet, vous êtes presque sûr de l'avoir rencontré ; Facebook, Instagram, Netflix, Whatsapp, Dropbox, Atlassian la liste des entreprises populaires qui l'utilisent est longue.
Il semble impossible de l'arrêter. Pourtant, de nombreux développeurs, en particulier ceux qui sont dans le secteur depuis longtemps, ont déjà entendu tout cela. Avant React, il y avait Angular et avant cela, il y avait jQuery, tous ces frameworks sont tombés en désuétude. Ce n'est qu'une question de temps avant que quelque chose ne vienne s'imposer comme la nouvelle mode. C'est du moins la pretention des développeurs de Fresh. Toutefois, pour certains analystes, le couple Next JS/React sera avec nous pendant de nombreuses années encore.
Parmi les caractéristiques remarquables de Fresh, nous avons, l’hydratation du client basée sur des éléments pour une interactivité maximale, la prise en charge de TypeScript dès la sortie. Fresh adopte la conception éprouvée du rendu côté serveur et de l'amélioration progressive côté client.
Pour cet internaute qui se fait appelé solardev, « La réhydratation est une affaire très importante. Cela peut paraître stupide, mais elle accélère considérablement les temps de chargement en servant du HTML plat et en injectant du JS par la suite, comme au bon vieux temps, sauf qu’un code peut être écrit comme si ce n'était pas le bon vieux temps ».
Pour certains développeurs, l'hydratation n’est pas un excellent compromis pour l'UX comme le soutien eyelidlessness, développeur web. « L'hydratation est en fait un compromis, et pas un excellent compromis pour l'UX. En fait, on a dit qu'il s'agissait d'une "surcharge pure", ce qui, à mon avis, est un peu exagéré, mais seulement un peu. L'hydratation, dans le sens actuel du terme, consiste à réexécuter la plupart de ce que le serveur a déjà fait, pour recréer l'état d'exécution qu'il avait déjà. Cela peut être perceptiblement plus rapide en termes de mesures comme la première peinture, mais c'est une barrière énorme pour le temps d'interaction. C'est d'autant plus vrai lorsque la plupart des contenus sont statiques et doivent être chargés deux fois, d'abord rapidement en HTML, puis plus lentement et de manière redondante en JS ».
« La meilleure façon de résoudre ce problème est de ne pas servir ou hydrater quoi que ce soit, sauf si cela est nécessaire. L'approche des "îlots" est une très bonne façon, mais grossière, de résoudre ce problème : isoler les composants qui sont réellement interactifs, traiter le reste comme statique. Une approche plus granulaire appelée resumability par Qwik et comme je le comprends la version à venir de Marko- fonctionne en traitant le HTML généré par le serveur comme l'état initial. Le code exécuté à partir de là est beaucoup plus isolé qu'un composant complet », poursuit eyelidlessness.
Notons que Qwik est également un framework d'applications Web centré sur le DOM (pour modèle objet de document, conçu pour le meilleur temps d'interaction possible, en se concentrant sur la possibilité de reprendre le rendu côté serveur du code HTML et le chargement paresseux à grain fin du code.
Le concept de base de Qwik est de se concentrer sur la métrique du temps d'interaction en retardant autant que possible JavaScript pour tirer parti des capacités de chargement paresseux du navigateur. Selon les concepteurs de Quik, cela contraste fortement avec les frameworks existants qui traitent le rendu côté serveur et le temps d'interaction davantage comme une réflexion après coup plutôt que comme un objectif principal, ce qui motive toutes les autres décisions de conception.
L'idée de base derrière Qwik est qu'il peut être repris (il est 'resumable'). Il peut continuer là où le serveur s'est arrêté. Il n'y a que la plus petite quantité de code à exécuter sur le client. Le qwikloader, qui prend le HTML statique généré à partir du rendu côté serveur et le reprend, fait moins de 1 Ko et s'exécutera en moins de 1 ms.
Il est recommandé de ne pas encore utiliser Fresh pour les cas d'utilisation en production, à moins que les mises à jour du dépôt Fresh ne soit suivi très activement. Le framework subit encore des modifications très fréquentes de ses fonctionnalités de base. Une version stable est annoncée pour très prochainement.
Source : Deno
Et vous ?
Quel est votre avis sur Fresh ? Voyez-vous en Fresh un sérieux concurrent pour Next JS ? Quel framework utilisez-vous pour le développement web ? Lequel de ses deux moteurs d'exécution JavaScript préférez-vous ? Deno ou Node.js ? La question sur l'accélération des temps de chargement par l'hydratation divise. Quel est votre avis ?Voir aussi :
La Version 1.9 de Deno, le runtime pour exécuter JavaScript et TypeScript, est disponible, elle améliore les appels de commande dans Rust et apporte de nouvelles fonctionnalités State of JavaScript 2020 : TypeScript leader incontestable des déclinaisons de JavaScript, le typage statique devient la fonctionnalité la plus demandée et React reste le framework front-end dominant Deno passe en version 1.0. Le runtime pour exécuter JavaScript et TypeScript, tente de fournir un outil autonome pour l'écriture rapide de fonctionnalités complexes Quels sont les coûts liés à l'utilisation de frameworks JavaScript pour le développement Web ? Une analyse des sites utilisant React, Vue.js ou Angular 
