The new year 2018 is here. If we look at the progress in web development five years ago, it’s totally different from what we have today. Today there are new methods, tools, and even a whole new paradigm that changes the way we build websites today – and VirtualDOM is one of them.
DOM (Document Object Model) is a tree model that defines how a website is structured. Selecting, traversing, and manipulating the DOM could be a very expensive opreration and may hamper your site’s rendering performance.
However, in this post we won’t be discussing how VirtualDOM works, instead, along with the other tools, we’ll look into libraries that allow you to implement VirtualDOM right away. Let’s check them out.
This is one of my favourite VirtualDOM libraries, as it easy to pick it up just by looking at the syntax. With just 2Kb, you can build a fast-rendering web page or custom HTML component. The library consists two primary functions
el, to create or manipulate an element, and
mount to add it to a selected element. You can load it in the browser and server-side with NodeJS.
A templating UI library to build highly interactive web application. Originally built for TheGuardian, ReactiveJS is built to work across browsers and mobile devices; so you can depend on its reliability. ReactiveJS also comes with many features needed for modern web application right out-of-the-box, such as Scoped CSS, Custom Components, SVG, and animation.
RiotJS is compatible to Node.js environement or in the browsers, and could be a great alternative to Vue.js given the similarties.
hyperHTML, as the name implies, features performance when rendering and manipulating DOM. You can use it to create Custom Element and Web Component. It works as easy as jQuery in which it can be used in the browser by loading the script from the CDN and accessing the hyperHTML. No need of complicated tooling.
Polyfill which shims the API in browser that does not support it yet. It’s a great framework if you prefer to adopt the native way.
While it has similar syntax to HTML, SVG is another kind of beast with its own quirks. This library, as the name suggests, will allow you to create and manipulate SVG on the fly.
EmotionSH is CSS-in-JS framework that you might need when building website with VirtualDOM. This allows you to deliver only bits of CSS needed on your site and you can dynamically update the styling without being convulated with the class naming and specificity as the style is scopped to only the Component it is applied to.
React Starter Kit
If you’ve been following the web in the last couple of years, you’ll find React (almost) every where. This is a 5 short-video course introducing React. If you want to keep up with the industry, these might be the right place to get started.
Elements is a collection of iOS components to create iOS app prototype in Sketch. It’s built by the people by Sketch and been updated with iPhone X UI.
An NPM package that allows you to get a WordPress development environement up and running in minutes. It’s all set up with modern tools like Gulp, LiveReload, PostCSS, Babel so you can focus on developing your project rather tuning-up configuration.
Lando is also a handy tool to spin up a development environment quickly and easily, much like to WordPressify that we’ve just mentioned above. But instead of Node.js, it takes advantage of Docker a lightweight containerization technology and it offers more flexibility in term of the stack you’d like to use in your development.
For example, you can specify the PHP version, enable XDebug, and install Composer.
WP-Docklines is a collection of images that you can use as baseline to perform Continuous Integration and Delivery for your WordPress themes and pluins in services like Bitbucket, CircleCI, and Gitlab. Each image is bundled with tools commonly needed when developing WordPress such as PHP Code Sniffer, PHPUnit, and WP-CLI.
WP-Locker is Docker Compose configuration to spin a WordPress development environment in just minutes. It is set up with Apache, MySQL and phpMyAdmin and since it extends WP-Docklines image, it also carries out the extra tools on the image out-of-the-box.
bin/start to let it, configure the localhost and install plugins and themes that you have configure in the configuration file.
Another open-source initiative from Facebook, Docusaurus is a tool to create a documentation website of your project. Built with React and Markdown, you can easily compose documentation, maintain it, and even creating a blog for your site, and publish it to Github Pages.
Yeoman is an Node Package that allows you to start up project quickly by selecting pre-made scaffolding that suit your projects. If you’re using Visual Studio Code, this plugin will streamline the start up workflow even further as it enables you to run the “Yo” command right from the Visual Studio Code window.
async today in all browsers; said it even works in Netscape.
Prettier is a tool to format your code to conform with the coding standard of the language. It will rewrite your code from the scracth following the rule allowing you and your team be more productive instead of debating over code writing styles.