Verse hulpbronnen voor webontwerpers en ontwikkelaars (januari 2018)

Het nieuwe jaar 2018 is hier. Als we kijken naar de vooruitgang in webontwikkeling vijf jaar geleden, is het totaal anders dan wat we vandaag hebben. Vandaag zijn er nieuw methoden, hulpmiddelen en zelfs een heel nieuw paradigma dat verandert de manier waarop we vandaag websites bouwen - en VirtualDOM is daar een van.

DOM (Document Object Model) is een boommodel dat definieert hoe een website is gestructureerd. Het selecteren, doorkruisen en manipuleren van de DOM kan een zeer dure opreratie zijn en mogelijk ook belemmeren de weergaveprestaties van uw site.

In dit artikel zullen we echter niet bespreken hoe VirtualDOM werkt, maar in plaats daarvan zullen we samen met de andere tools kijken bibliotheken waarmee u VirtualDOM kunt implementeren meteen. Laten we ze eens bekijken.

MaquetteJS

Een implementatie van VirtualDOM waarmee u een vloeiende gebruikersinterface kunt bouwen die wordt bijgewerkt met de gegevens eromheen. Het is een pure JavaScript en unopiniated bibliotheek dus het is mogelijk om gebruik het samen met een synthetische taal zoals CoffeeScript, TypeScript en JSX. Een geweldige alternatieve bibliotheek voor React.js; MaquetteJS is veel kleiner in omvang (alleen 3 kb) vergelijkbaar.

ReDOM

Dit is een van mijn favoriete VirtualDOM-bibliotheken, omdat het eenvoudig is om het op te pakken door alleen naar de syntaxis te kijken. Met slechts 2Kb, u kunt een snel renderende webpagina of aangepaste HTML-component maken. De bibliotheek bestaat twee primaire functies el, om een element te maken of te manipuleren, en berg om het toe te voegen aan een geselecteerd element. U kunt het in de browser en op de server met NodeJS laden.

ReactiveJS

Een sjabloneren UI-bibliotheek om een zeer interactieve webtoepassing te bouwen. ReactiveJS is oorspronkelijk gebouwd voor The Guardian en is gebouwd om te werken met browsers en mobiele apparaten; zodat u kunt vertrouwen op de betrouwbaarheid ervan. ReactiveJS komt ook met veel functies die nodig zijn voor moderne webapplicaties, rechtstreeks uit de doos, zoals Scoped CSS, Custom Components, SVG en animatie.

RiotJS

RitoJS is een plezierige om mee te werken en een veel eenvoudiger te leren bibliotheek voor beginners hiermee kunt u een gebruikerscomponent met HTML-element definiëren en de HTML-kenmerken terwijl de vorige bibliotheken forceren om de pure JavaScript-syntaxis te gebruiken.

RiotJS is compatibel met Node.js environement of in de browsers, en zou een kunnen zijn geweldig alternatief voor Vue.js gezien de similarties.

HyperHTML

hyperHTML, zoals de naam impliceert, biedt prestaties bij het renderen en manipuleren van DOM. U kunt het gebruiken om een aangepast element en een webcomponent te maken. Het werkt net zo eenvoudig als jQuery waarin het in de browser kan worden gebruikt laden van het script van de CDN en toegang tot hyperHTML. Geen behoefte aan gecompliceerd tooling.

Mithril

Hoe cool het ook klinkt, Mithril is een krachtige JavaScript-bibliotheek. Naast de VirutalDOM en Components is Mithril ook uitgerust met Routing en XHR waarmee u kunt een webtoepassing met één pagina bouwen zonder te vertrouwen op een andere bibliotheek. Benchmark laat zien dat het beter presteert dan sommige populaire bibliotheken zoals Vue.js, React.js en Angular.

SlimJS

SlimJS is een JavaScript-bibliotheek voor bouw aangepaste webcomponent met behulp van de native Web Component API. Omdat het is gebouwd rondom de native browsercomponent, is SlimJS uitgerust met een polyfill die de API in de browser shims die het nog niet ondersteunt. Het is een geweldig framework als je de native manier wilt gebruiken.

VSVG

Hoewel het een vergelijkbare syntaxis heeft als HTML, is SVG een ander soort beest met zijn eigen eigenaardigheden. Deze bibliotheek zal, zoals de naam al doet vermoeden kunt u SVG on-the-fly maken en manipuleren.

EmotionSH

EmotionSH is CSS-in-JS-raamwerk dat u mogelijk nodig hebt bij het bouwen van een website met VirtualDOM. Hiermee kunt u alleen stukjes CSS leveren die u op uw site nodig hebt en dat kan werk de styling dynamisch bij zonder te worden gecolluleerd met de naamgeving en specificiteit van de klasse, aangezien de stijl wordt gescop naar alleen de component waarop deze wordt toegepast.

Reactiestartset

Als u de afgelopen jaren internet hebt gevolgd, vindt u (bijna) overal React. Dit is een 5 korte video cursus introductie van React. Als u de branche wilt volgen, zijn deze wellicht de juiste plek om van start te gaan.

Elements

Elements is een verzameling van iOS-componenten om protocollen voor iOS-apps te maken in Sketch. Het is gebouwd door de mensen door Sketch en is bijgewerkt met de iPhone X UI.

modaal

Modaal is een JavaScript-bibliotheek gebouwd met toegankelijkheid in het achterhoofd. Het is geweest geverifieerd voor “WCAG 2.0 Level AA-ondersteuning” dat (denk ik) het meest beschikbaar “modaal” bibliotheek vandaag. Haar lichtgewicht, jQuery-compatibel, en kan worden gebruikt voor afbeeldingen, video's en zelfs Instagram. Bovendien zal deze korte cursus van Google u helpen aan de slag te gaan met Web Accessibility en waarom het belangrijk is.

WordPressify

Een NPM-pakket waarmee u een WordPress ontwikkelingsomgeving binnen enkele minuten kunt gebruiken. Het is allemaal klaar met moderne tools zoals Gulp, LiveReload, PostCSS, Babel zodat u zich kunt concentreren op het ontwikkelen van uw project in plaats van het afstemmen van de configuratie.

Lando

Lando is ook een handige tool om een ontwikkelomgeving snel en gemakkelijk te laten draaien, net als naar WordPressify die we zojuist hierboven hebben genoemd. Maar in plaats van Node.js duurt het voordeel van Docker een lichtgewicht containerisatie technologie en het biedt meer flexibiliteit in termen van de stapel die u wilt gebruiken in uw ontwikkeling.

U kunt bijvoorbeeld specificeer de PHP-versie, schakel XDebug in en installeer Composer.

WP-Docklines

WP-Docklines is een verzameling afbeeldingen die u als basislijn kunt gebruiken om continue integratie en levering uit te voeren voor uw WordPress-thema's en voordelen in services zoals Bitbucket, CircleCI en Gitlab. Elke afbeelding is gebundeld met tools die vaak nodig zijn bij het ontwikkelen van WordPress zoals PHP Code Sniffer, PHPUnit en WP-CLI.

WP-Locker

WP-Locker is Docker Compose-configuratie om binnen enkele minuten een WordPress-ontwikkelomgeving rond te draaien. Het is opgezet met Apache, MySQL en phpMyAdmin en omdat het de WP-Docklines-afbeelding uitbreidt, voert het ook de extra hulpmiddelen op de afbeelding out-of-the-box uit.

eenvoudigweg type bin / start om het te laten, configureer het localhost en installeer plug-ins en thema's die u in het configuratiebestand hebt geconfigureerd.

Docusaurus

Een ander open-source initiatief van Facebook, Docusaurus is een hulpmiddel om een documentatie-website van uw project te maken. Gebouwd met React en Markdown, kunt u gemakkelijk documentatie opstellen, onderhouden en zelfs een blog voor uw site maken, en publiceer het naar Github-pagina's.

VSCode Yo

Yeoman is een Node Package waarmee je snel projecten kunt opstarten selecteren van vooraf gemaakte steigers die passen bij uw projecten. Als u Visual Studio Code gebruikt, stroomlijnt deze plug-in de opstartworkflow nog verder, omdat u hiermee kunt werken voer de ... uit “yo” commando rechtstreeks vanuit het venster Visual Studio Code.

BluebirdJS

Een JavaScript-bibliotheek die kunt u gebruiken Belofte, wachten, async vandaag in alle browsers; zei dat het zelfs werkt in Netscape. Belofte is een van de sterkste punten in de nieuwste JavaScript-specificaties maak uw code slanker, leesbaar en gemakkelijk te onderhouden.

prettier

Prettier is een hulpmiddel om formatteer uw code om te voldoen aan de coderingsnorm van de taal. Het zal je code herschrijven van het scraché volgens de regel die jou en je team toestaat productiever in plaats van discussiëren over schrijven van code.