Neue Ressourcen für Webdesigner und -entwickler (Januar 2018)

Das neue Jahr 2018 ist da. Wenn wir uns den Fortschritt der Webentwicklung vor fünf Jahren anschauen, unterscheidet er sich grundlegend von dem, was wir heute haben. Heute gibt es Neues Methoden, Werkzeuge und sogar ein ganz neues Paradigma Das ändert die Art und Weise, wie wir Websites heute erstellen - und VirtualDOM ist eine davon.

DOM (Document Object Model) ist ein Baummodell, das die Struktur einer Website definiert. Das Auswählen, Durchlaufen und Manipulieren des DOM kann eine sehr kostspielige Operation sein und kann dazu führen behindern die Renderleistung Ihrer Website.

In diesem Beitrag werden wir jedoch nicht besprechen, wie VirtualDOM funktioniert, sondern zusammen mit den anderen Tools, die wir untersuchen werden Bibliotheken, mit denen Sie VirtualDOM implementieren können jetzt sofort. Lass uns sie überprüfen.

MaquetteJS

Ein Implementierung von VirtualDOM Auf diese Weise können Sie eine flüssige Benutzeroberfläche erstellen, die mit den umliegenden Daten aktualisiert wird. Es ist ein reines JavaScript und unbestimmt Bibliothek also ist es möglich Verwenden Sie es zusammen mit einer synthetischen Sprache wie CoffeeScript, TypeScript und JSX. Eine großartige alternative Bibliothek zu React.js; MaquetteJS ist viel kleiner (nur) 3 kb) vergleichbar.

ReDOM

Dies ist eine meiner Lieblings-VirtualDOM-Bibliotheken, da es einfach ist, sie durch das Betrachten der Syntax herauszufinden. Mit nur 2 Kb, Sie können eine Webseite für das schnelle Rendern oder eine benutzerdefinierte HTML-Komponente erstellen. Die Bibliothek besteht aus zwei Hauptfunktionen el, ein Element erstellen oder bearbeiten, und montieren um es einem ausgewählten Element hinzuzufügen. Sie können es mit NodeJS im Browser und auf dem Server laden.

ReactiveJS

Eine Vorlage UI-Bibliothek zum Erstellen hoch interaktiver Webanwendungen. ReactiveJS wurde ursprünglich für TheGuardian entwickelt und kann für Browser und mobile Geräte verwendet werden. So können Sie sich auf die Zuverlässigkeit verlassen. ReactiveJS kommt auch mit Viele Funktionen, die für moderne Webanwendungen sofort einsatzbereit sind, wie Scoped CSS, Benutzerdefinierte Komponenten, SVG und Animation.

RiotJS

RitoJS ist eine angenehm zu bearbeitende und viel einfacher zu erlernende Bibliothek für Anfänger ermöglicht die Definition einer benutzerdefinierten Komponente mit einem HTML-Element und die HTML-Attribute, während die vorherigen Bibliotheken die Verwendung reiner JavaScript-Syntax erzwingen.

RiotJS ist kompatibel mit der Node.js-Umgebung oder in den Browsern und könnte eine sein großartige Alternative zu Vue.js angesichts der Ähnlichkeiten.

HyperHTML

hyperHTML, wie der Name andeutet, Leistungsmerkmale beim Rendern und Bearbeiten von DOM. Sie können damit benutzerdefinierte Elemente und Webkomponenten erstellen. Es funktioniert so einfach wie jQuery, in dem es im Browser von verwendet werden kann Laden des Skripts vom CDN und Zugreifen auf die hyperHTML. Kein Bedarf an komplizierten Werkzeugbau.

Mithril

So cool es auch klingen mag, Mithril ist ein leistungsfähige JavaScript-Bibliothek. Mithril ist neben VirutalDOM und Komponenten auch mit Routing und XHR ausgestattet, mit denen Sie können eine einseitige Webanwendung erstellen, ohne sich auf eine andere Bibliothek zu verlassen. Benchmark zeigt, dass es einige beliebte Bibliotheken wie Vue.js, React.js und Angular übertrifft.

SlimJS

SlimJS ist eine JavaScript-Bibliothek zu Erstellen Sie eine benutzerdefinierte Webkomponente mit der systemeigenen Webkomponenten-API. Da SlimJS um die native Browser-Komponente herum gebaut wird, ist es mit einem Polyfill welche die API in einem Browser einstellt, der sie noch nicht unterstützt. Es ist ein großartiger Rahmen, wenn Sie es vorziehen, die native Methode zu übernehmen.

VSVG

Obwohl es eine ähnliche Syntax wie HTML hat, ist SVG eine andere Art von Bestie mit eigenen Eigenheiten. Diese Bibliothek wird es, wie der Name schon sagt, tun Sie können SVG im Handumdrehen erstellen und bearbeiten.

EmotionSH

EmotionSH ist CSS-in-JS-Framework, das Sie möglicherweise benötigen, wenn Sie eine Website mit VirtualDOM erstellen. Auf diese Weise können Sie nur CSS-Bits bereitstellen, die auf Ihrer Site benötigt werden Aktualisieren Sie das Styling dynamisch ohne mit der Benennung und Spezifität der Klasse konvrahiert zu werden, da der Stil nur auf die Komponente angewendet wird, auf die er angewendet wird.

Reaktiv Starter Kit

Wenn Sie das Internet in den letzten Jahren verfolgt haben, finden Sie (fast) überall React. Das ist ein 5 Kurzvideokurs zur Einführung von React. Wenn Sie mit der Branche Schritt halten möchten, sind Sie hier vielleicht an der richtigen Stelle.

Elemente

Elements ist eine Sammlung von iOS-Komponenten zum Erstellen eines iOS-App-Prototyps in Sketch. Es wurde von den Leuten von Sketch erstellt und mit der iPhone X-Benutzeroberfläche aktualisiert.

Modaal

Modaal ist eine JavaScript-Bibliothek, die unter Berücksichtigung der Zugänglichkeit erstellt wurde. Es war schon verifiziert für “WCAG 2.0 Level AA-Unterstützung” das (denke ich) am meisten zugänglich “Modal” Bibliothek heute. Es ist Leicht, jQuery-kompatibel und kann für Bilder, Videos und sogar für Instagram verwendet werden. Darüber hinaus hilft Ihnen dieser kurze Kurs von Google beim Einstieg in Web Accessibility und warum dies wichtig ist.

WordPressify

Ein NPM-Paket, mit dem Sie in wenigen Minuten eine WordPress-Entwicklungsumgebung einrichten können. Es ist alles mit eingerichtet moderne Tools wie Gulp, LiveReload, PostCSS, Babel Sie können sich also auf die Entwicklung Ihres Projekts konzentrieren, anstatt die Konfiguration zu optimieren.

Lando

Lando ist auch ein praktisches Hilfsmittel, um eine Entwicklungsumgebung schnell und unkompliziert zu starten WordPressify dass wir gerade oben erwähnt haben. Aber statt Node.js braucht es Vorteil von Docker: eine leichte Containerisierung Technologie und bietet mehr Flexibilität hinsichtlich des Stapels, den Sie in Ihrer Entwicklung verwenden möchten.

Zum Beispiel können Sie Geben Sie die PHP-Version an, aktivieren Sie XDebug und installieren Sie Composer.

WP-Docklines

WP-Docklines ist ein Sammlung von Bildern, die Sie als Basis für die fortlaufende Integration und Bereitstellung verwenden können für deine WordPress-Themes und -Plus in Diensten wie Bitbucket, CircleCI und Gitlab. Jedes Bild wird mit gebündelt Werkzeuge, die üblicherweise bei der Entwicklung von WordPress benötigt werden wie PHP Code Sniffer, PHPUnit und WP-CLI.

WP-Locker

WP-Locker ist Docker Compose-Konfiguration, um eine WordPress-Entwicklungsumgebung in wenigen Minuten zu starten. Es ist mit Apache, MySQL und phpMyAdmin eingerichtet Da es das WP-Docklines-Bild erweitert, führt es auch die zusätzlichen Werkzeuge auf dem Bild aus.

Einfach Art bin / start lassen Sie es konfigurieren localhost und installieren Sie Plugins und Designs, die Sie in der Konfigurationsdatei konfiguriert haben.

Docusaurus

Eine weitere Open-Source-Initiative von Facebook, Docusaurus ist ein Tool zum Erstellen einer Dokumentations-Website für Ihr Projekt. Dank React und Markdown können Sie auf einfache Weise Dokumentation erstellen, verwalten und sogar einen Blog für Ihre Site erstellen Veröffentlichen Sie es auf Github Pages.

VSCode Yo

Yeoman ist ein Knotenpaket, mit dem Sie das Projekt schnell starten können Wählen Sie ein vorgefertigtes Gerüst aus, das zu Ihren Projekten passt. Wenn Sie Visual Studio-Code verwenden, wird der Start-Workflow durch dieses Plugin noch weiter optimiert, je nachdem, wie Sie dies ermöglichen führe die “Yo” Befehl direkt aus dem Visual Studio-Code-Fenster.

BluebirdJS

Eine JavaScript-Bibliothek das können Sie verwenden Versprechen, erwarten, asynchron heute in allen Browsern; sagte, es funktioniert sogar in Netscape. Versprechen ist einer der stärksten Punkte in den neuesten JavaScript-Spezifikationen Machen Sie Ihren Code schlanker, lesbarer und leicht zu pflegen.

Hübscher

Hübscher ist ein Werkzeug dafür Formatieren Sie Ihren Code so, dass er dem Kodierungsstandard der Sprache entspricht. Es schreibt Ihren Code aus dem Scracth nach der Regel um und erlaubt Ihnen und Ihrem Team produktiver statt über Code-Schreibstile zu debattieren.