Nouvelles ressources pour les concepteurs et les développeurs Web (janvier 2018)

La nouvelle année 2018 est là. Si nous examinons les progrès réalisés dans le développement Web il y a cinq ans, ils sont totalement différents de ce que nous avons aujourd'hui. Aujourd'hui, il y a de nouveaux méthodes, outils et même un tout nouveau paradigme cela change la façon dont nous construisons des sites Web aujourd'hui - et VirtualDOM est l'un d'entre eux.

DOM (Document Object Model) est un modèle d'arborescence qui définit la structure d'un site Web. Sélectionner, parcourir et manipuler le DOM peut être une opération très coûteuse et peut entraver les performances de rendu de votre site.

Cependant, dans cet article, nous ne discuterons pas du fonctionnement de VirtualDOM, mais plutôt des autres outils, nous examinerons bibliothèques qui vous permettent d'implémenter VirtualDOM tout de suite. Vérifions-les.

MaquetteJS

Un implémentation de VirtualDOM cela vous permet de créer une interface utilisateur fluide qui reste à jour avec les données qui l'entourent. C'est un pur JavaScript et non sollicité bibliothèque donc il est possible de utilisez-le avec un langage synthétique tel que CoffeeScript, TypeScript et JSX. Une excellente bibliothèque alternative à React.js; MaquetteJS est beaucoup plus petit (seulement 3kb) de manière comparable.

ReDOM

C’est l’une de mes bibliothèques VirtualDOM préférées, car il est facile de la récupérer simplement en regardant la syntaxe.. Avec seulement 2Kb, vous pouvez créer une page Web à rendu rapide ou un composant HTML personnalisé. La bibliothèque consiste deux fonctions principales el, créer ou manipuler un élément, et monter pour l'ajouter à un élément sélectionné. Vous pouvez le charger dans le navigateur et sur le serveur avec NodeJS.

Réactif

Un modèle Bibliothèque d'interface utilisateur pour créer une application Web hautement interactive. Initialement conçu pour TheGuardian, ReactiveJS est conçu pour fonctionner avec les navigateurs et les appareils mobiles. vous pouvez donc compter sur sa fiabilité. ReactiveJS est également livré avec de nombreuses fonctionnalités nécessaires pour une application Web moderne prête à l'emploi, tels que Scoped CSS, Custom Components, SVG et animation.

RiotJS

RitoJS est un logiciel agréable à travailler et beaucoup plus facile à apprendre pour les débutants permet de définir un composant personnalisé avec un élément HTML et les attributs HTML tandis que les bibliothèques précédentes forceront à utiliser la syntaxe JavaScript pure.

RiotJS est compatible avec Node.js environ ou dans les navigateurs, et pourrait être un excellente alternative à Vue.js étant donné les similarties.

HyperHTML

hyperHTML, comme le nom l'indique, présente les performances lors du rendu et de la manipulation de DOM. Vous pouvez l'utiliser pour créer un élément personnalisé et un composant Web. Cela fonctionne aussi facilement que jQuery dans lequel il peut être utilisé dans le navigateur par charger le script à partir du CDN et accéder à l'hyperHTML. Pas besoin de compliqué outillage.

Mithril

Aussi cool que cela puisse paraître, Mithril est un puissante bibliothèque JavaScript. En plus du VirutalDOM et des composants, Mithril est également équipé du routage et du XHR avec lequel vous pouvez créer une application Web d'une seule page sans faire appel à aucune autre bibliothèque. L’indice de référence montre qu’il surpasse certaines bibliothèques populaires telles que Vue.js, React.js et Angular..

SlimJS

SlimJS est une bibliothèque JavaScript pour créer un composant Web personnalisé à l'aide de l'API de composant Web natif. Depuis qu’il est construit autour du composant de navigateur natif, SlimJS est équipé d’un Polyfill qui cale l'API dans le navigateur qui ne le supporte pas encore. C'est un excellent cadre si vous préférez adopter la méthode native.

VSVG

Bien que sa syntaxe soit similaire à celle de HTML, SVG est un autre type de bête qui a ses propres bizarreries. Comme son nom l’indique, cette bibliothèque vous permet de créer et de manipuler SVG à la volée.

EmotionSH

EmotionSH est Infrastructure CSS-in-JS dont vous pourriez avoir besoin pour créer un site Web avec VirtualDOM. Cela vous permet de ne fournir que les bits de CSS nécessaires sur votre site et vous pouvez mettre à jour dynamiquement le style sans être convoqué avec la dénomination et la spécificité de classe car le style est réduit uniquement au composant auquel il est appliqué.

Kit de démarrage React

Si vous avez suivi le Web au cours des deux dernières années, vous trouverez React (presque) partout. C'est un 5 courts cours vidéo présentant React. Si vous voulez suivre le secteur, ceux-ci pourraient être le bon endroit pour commencer.

Éléments

Elements est une collection de Composants iOS pour créer un prototype d'application iOS dans Sketch. Il a été construit par Sketch et mis à jour avec l'iPhone X UI..

Modaal

Modaal est une bibliothèque JavaScript construite avec une accessibilité en tête. C'était vérifié pour “Support WCAG 2.0 niveau AA” que (je pense) le plus accessible “Modal” bibliothèque aujourd'hui. Ses léger, compatible jQuery, et peut être utilisé pour des images, des vidéos et même Instagram. De plus, ce court cours de Google vous aidera à vous familiariser avec l'accessibilité Web et à comprendre pourquoi c'est important..

WordPressify

Un package NPM qui vous permet de mettre en place un environnement de développement WordPress en quelques minutes. Tout est mis en place avec des outils modernes comme Gulp, LiveReload, PostCSS, Babel afin que vous puissiez vous concentrer sur le développement de votre projet plutôt que sur la configuration.

Lando

Lando est également un outil pratique pour créer rapidement et facilement un environnement de développement. WordPressify que nous venons de mentionner ci-dessus. Mais au lieu de Node.js, il faut avantage de Docker une conteneurisation légère technologie et offre plus de flexibilité en termes de pile que vous souhaitez utiliser dans votre développement.

Par exemple, vous pouvez spécifier la version de PHP, activer XDebug et installer Composer.

WP-Docklines

WP-Docklines est un collection d'images que vous pouvez utiliser comme base pour effectuer une intégration et une diffusion continues pour vos thèmes WordPress et pluins dans des services tels que Bitbucket, CircleCI et Gitlab. Chaque image est livrée avec outils couramment nécessaires lors du développement de WordPress tels que PHP Code Sniffer, PHPUnit et WP-CLI.

WP-Locker

WP-Locker est la configuration Docker Compose qui permet de créer un environnement de développement WordPress en quelques minutes à peine. Il est mis en place avec Apache, MySQL et phpMyAdmin et puisqu'il étend l'image WP-Docklines, il exécute également les outils supplémentaires sur l'image prête à l'emploi.

Simplement type bin / start pour le laisser, configurez le localhost et installer des plugins et thèmes que vous avez configurés dans le fichier de configuration.

Docusaurus

Une autre initiative open source de Facebook, Docusaurus est un outil pour créer un site web de documentation de votre projet.. Construit avec React et Markdown, vous pouvez facilement composer de la documentation, la maintenir et même créer un blog pour votre site. publiez-le sur Github Pages.

VSCode Yo

Yeoman est un package de nœuds qui vous permet de démarrer rapidement un projet en choisir un échafaudage préfabriqué qui convient à vos projets. Si vous utilisez le code Visual Studio, ce plug-in rationalisera davantage le flux de travail de démarrage, car il vous permet de: lancer le “Yo” commande directement à partir de la fenêtre de code Visual Studio.

BluebirdJS

Une bibliothèque JavaScript qui vous permet d'utiliser Promettre, attendre, async aujourd'hui dans tous les navigateurs; a dit que cela fonctionne même dans Netscape. Promettre est l’un des points les plus forts des dernières spécifications JavaScript qui rendre votre code plus léger, lisible et facilement maintenable.

Plus jolie

Plus joli est un outil pour formatez votre code pour le rendre conforme à la norme de codage de la langue. Il réécrira votre code à partir de scracth en respectant la règle vous permettant à votre équipe plus productif au lieu de débattre des styles d'écriture de code.