Catégories
Astuces et Design

Démarrez de nouveaux projets plus rapidement: 10 outils de développement Web Scaffolding

Dans cet article, je vais vous présenter une liste de 10 bibliothèques pour vous aider à démarrer plus rapidement de nouveaux projets. La plupart d'entre nous ici chez SitePoint ont du mal à résister à un nouveau dépôt, et nous voulions voir si nous pouvions affiner la boîte à outils idéale pour le développeur enclin aux projets.

Si vous êtes le genre de développeur qui aime souvent lancer de nouveaux projets, les diffuser dans le monde et voir s'ils flottent (validation, comme pourrait l'appeler votre ami du marketing), alors vous avez besoin d'une boîte à outils. Bien sûr, si vous créez quelque chose de nouveau à votre rythme une fois par an, l'apprentissage de ces outils vous coûtera probablement du temps – celui-ci n'est pas pour vous. Mais si vous perdez tout intérêt, vous avez compris si la page d’accueil sera présentée dans une ou trois colonnes, vous avez besoin de toute l’aide que vous pouvez obtenir.

J'ai sélectionné les outils dans cet article pour leur capacité à vous faire passer de zéro à héros en le moins de temps possible. Étant donné que l'objectif ici est d'amorcer rapidement votre projet, j'ai également inclus non seulement des bibliothèques, mais également toutes sortes d'outils qui excellent pour fournir un échafaudage rapide et un avantage considérable en termes de vitesse. J'ai fait une sélection pour couvrir différents aspects d'un projet – vous pouvez en utiliser quelques-uns ensemble pour un combo gagnant.

Meteor est un framework JavaScript complet permettant de créer des applications Web et mobiles.

On ne peut pas parler de rapide sans le mentionner. Meteor est le roi du jeûne. Il vous lie à ses règles et à ses façons de faire, mais si vous souhaitez sortir un prototype le plus rapidement possible, Meteor vous soutient.

Meteor - Commencer de nouveaux projets plus rapidement

L’une des fonctionnalités intéressantes de Meteor est ses capacités de code partagé serveur-client. Cela vous fait gagner beaucoup de temps et vous aide à vous concentrer sur ce qui est vraiment important.

Il est également livré avec l'intégration MongoDB et WebSockets dès la sortie de la boîte.

Sails est un framework d'application Web modèle-vue-contrôleur. Cela réduit les frictions pour les développeurs qui sont déjà familiarisés avec d'autres frameworks MVC, quelle que soit la langue ou la plate-forme.

Ce qui rend Sails.js unique, c'est la façon dont il simplifie le processus de création d'applications Web régulières et modernes avec sa couche d'accès aux données simplifiée – qui est indépendante de la base de données – et les plans d'API REST qui génèrent des itinéraires et des actions en fonction de la conception de votre application.

Sails - Commencez de nouveaux projets plus rapidement

Entre autres choses, il offre une sécurité de base et un contrôle d'accès basé sur les rôles, ainsi qu'une intégration WebSockets prête à l'emploi, ce qui en fait un excellent choix pour les applications en temps réel.

Si vous utilisez MongoDB, vous devriez profiter de son fidèle compagnon, Mongoose. Cette bibliothèque vous aide à modéliser facilement vos données dans des schémas, et elle vous aide à la transtypage et à la validation, entre autres. C’est un moyen génial de supprimer beaucoup de passe-partout qui vous entraînerait autrement.

MongoDb - Démarrer de nouveaux projets plus rapidement

Nous pourrions dire que celui-ci est un deux-en-un, étant donné qu'il implique l'utilisation de MongoDB, ce qui est un choix fantastique que vous utilisiez Mongoose ou non. MongoDB est… eh bien, permettez-moi de citer leur site Web:

MongoDB est une base de données distribuée à usage général, basée sur des documents, conçue pour les développeurs d'applications modernes et pour l'ère du cloud.

Et pour conclure, ils ajoutent:

Aucune base de données ne vous rend plus productif.

Voilà. De quoi d'autres avez-vous besoin? Arrêtez de tergiverser et de coder!

Lodash fournit un ensemble d'outils pratiques pour rendre votre vie de codage quotidienne plus confortable. Il vous assiste dans l'itération, l'ordre, la limitation, le débouncing et probablement toute fonction que vous finiriez par lancer dans un fichier utils.

Lodash - Commencer de nouveaux projets plus rapidement

Un aspect vraiment cool de Lodash est que toutes ses fonctions peuvent être importées ou même installées séparément. Pas besoin d'encombrer vos bundles avec du code inutile.

Si vous avez juste besoin de la fonction d'accélération, vous pouvez le faire:

npm install lodash/throttle

Si vous pensez que vous utilisez peut-être quelques-unes des fonctions de Lodash mais que vous ne savez pas lesquelles, et que vous ne voulez pas avoir à installer chacune séparément, vous pouvez les importer comme suit:

import throttle from 'lodash/throttle'

De cette façon, le reste de la bibliothèque ne sera pas inclus dans votre offre groupée et vous pourrez vivre heureux pour toujours.

Svelte est un framework front-end raisonnablement nouveau qui crée beaucoup de battage médiatique depuis un certain temps maintenant, et pour une bonne raison. Il est si facile à utiliser que votre petit neveu pourrait vous voler votre travail si vous lui exposez votre travail. Je ne plaisante pas; il s'agit d'un cadre minimaliste sans BS qui vous fera vous demander pourquoi il est devenu si complexe de créer des frontaux en premier lieu.

Ne vous méprenez pas: l’écriture de code frontal sera toujours compliquée, mais pas pour les mauvaises raisons. Si c'est là que nous mène l'avenir du développement Web, je suis impatient de voir la suite.

Svelte

Svelte est réactif par défaut. Pas besoin de bibliothèques de gestion d'état compliquées ou de Virtual DOM et tout le reste. Il ne s’exécute même pas dans le navigateur. Il compile votre code dans un petit fichier JavaScript vanille optimisé, et c'est ce que le navigateur exécute. Alors voilà: en plus d'être super facile à utiliser, c'est aussi génial.

Consultez les exemples sur leur site Web si vous ne me croyez pas.

Avant Svelte, Vue.js était définitivement mon premier choix pour le framework front-end le plus simple. Et il peut encore tenir bon dans cette arène contre le reste de ses concurrents. Vue.js a l'avantage d'être mature et fiable. Il a eu du mal à gagner la confiance de l'industrie au début, mais nous en sommes maintenant à un point où personne ne peut affirmer que Vue.js a mérité sa place au pôle.

Vue - Commencer de nouveaux projets plus rapidement

Mais ce pour quoi nous sommes ici n'est pas Vue.js en soi mais la CLI Vue. C'est de loin le moyen le plus rapide de démarrer un projet avec Vue.js. Il prend en charge tous les tracas et la complexité de la configuration de votre environnement et vous permet d'écrire directement du code.

Ce que j'aime, c'est sa prise en charge prête à l'emploi pour TypeScript et Unity Testing, et cerise sur le gâteau, vous n'avez pas besoin d '«éjecter» votre application pour effectuer des configurations dans l'environnement. C’est une garantie de support à long terme imbattable que son concurrent le plus proche ne peut offrir.

Un concurrent proche de Vue CLI dans l'arène «rapide» est certainement Create React App, mieux connu sous le nom de CRA. La mise en route est très rapide, et si vous connaissez déjà React, cela pourrait être un meilleur choix pour vous.

React - Commencez de nouveaux projets plus rapidement

L'ARC est activement entretenue et son objectif est de maintenir votre environnement à jour en douceur. Le seul inconvénient est que si vous avez besoin de personnaliser votre environnement, vous devrez généralement «éjecter» votre application pour exposer la configuration du pack Web. Dès que vous faites cela, l'équipe de l'ARC ne fournira plus de soutien, étant donné que vous n'auriez plus d'application de l'ARC.

Néanmoins, à moins que vous n'essayiez de créer quelque chose qui repose sur une configuration particulière, vous n'aurez probablement jamais besoin de «l'éjecter».

Si vous créez quelque chose qui nécessite la 3D dans le navigateur, Three.js est votre ami. Il est très facile à utiliser, a une grande communauté et a autant de contributeurs que d'étoiles dans le ciel. Three.js simplifie WebGL.

Three.js - Démarrez de nouveaux projets plus rapidement

Three.js est une bibliothèque de rendu légère qui peut être facilement intégrée à la plupart des projets, ce qui en fait mon premier choix pour WebGL. Vous devriez vérifier les projets présentés sur leur site Web pour vous inspirer. La 3D sur le Web ne doit pas être réservée aux jeux. Vous pouvez apporter une toute nouvelle dimension à l’expérience de votre client.

Laissez-moi vous montrer quelques-uns de mes favoris:

Et voici un bonus, un clip vidéo:

Besoin d'animations 2D agréables et fluides? Pixi est un moteur de création HTML5 avec un moteur de rendu WebGL 2D ultra-rapide.

Pixi - Démarrez de nouveaux projets plus rapidement

C'est super simple à utiliser, et vous devriez consulter leur galerie pour voir la pléthore de choses intéressantes que vous pouvez créer. Si l'un de ceux-ci ressemble à ce que vous essayez de réaliser, cette bibliothèque vous aidera à démarrer votre projet.

Ne vous méprenez pas, j'adore Webpack, mais si vous sentez que vous en avez assez de ces fichiers de configuration compliqués, vous n'êtes pas seul au monde. Parcel est un bundler qui fonctionne hors de la boîte sans avoir besoin de configuration. Vous pouvez le personnaliser si nécessaire, mais le fait est que vous n’avez pas à le faire. La valeur par défaut est parfaite pour que votre projet soit opérationnel.

Colis - Commencez de nouveaux projets plus rapidement

Conclusion

Comme nous l'avons vu, il n'y a pas de solution unique, mais j'espère que vous avez trouvé quelque chose dans cette liste qui convient à votre projet particulier. Je laisse de côté bien d’autres excellentes solutions. Mais comme je l'ai dit au départ, l'objectif, dans ce cas, n'est pas la maintenabilité ou l'évolutivité, mais la rapidité avec laquelle ils peuvent vous mettre en marche.

Construire quelque chose d'extraordinaire n'a pas besoin d'être trop difficile. Parfois, il s’agit simplement d’utiliser les bons outils.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *