It is difficult to imagine the modem web without complex build tools like Webpack and Rollup. Only 25 years ago, when JavaScript was born, things were quite different. Websites were so simple it was enough to open a notepad, launch a web server and proceed to write your code. Basic html, a sprinkle of css, a pinch of javascript and you were a good enough developer to launch your website, a books catalogue, or a calendar. Just reload your site to see the changes you made in your notepad and get that instant feedback to aid you in your development. This made web dev attractive in its simplicity and openness to experiments.
So what has changed over the years and why is the web so much more complex now? Here’s a few reasons why:
- First off, the websites themselves are much more powerful these days - they can work offline, support complex multimedia and behave more like apps, rather than websites;
- The number of scripts has gone up to megabytes and to make things work fast you have to compress your scripts, delete unnecessary code and develop modules;
- Rapid growth of JavaScript led to a permanent lagging of browser capabilities from the current specifications, so you are forced to compile JavaScript into JavaScript for your browser;
- npm as a package manager has won the masses giving web developers access to a plethora of ready-made solutions backed by security audit. This however popularized CommonJS not supported by browsers;
- Meta Languages like TypeScript, Scss, Less, Pug emerged as a response to the limitations of standard languages. Compiling them is now a part of our building pipelines;
- Last but not least, frameworks that serve template engines, like JSX, Vue and Svelte brought back declarativeness and simplicity to components. They were the answer to a forgotten E4X or incomplete HTML Imports specs, but added another reason why the modern web needs to be compiled.
Not to mention the routine operations like image compression and composing service workers and setting up HTTPS.
All of the above procedures were naturally added for a reason, as we can truly develop impressive projects – coop 3D games using WebGL, group calls using WebRTC or something as mundane as a chat using WebSockets. The baggage we have accumulated over the 25 years helps us develop high quality solutions ready to scale and easy to maintain. That’s all good, but you know what? The simplicity that started the boom off 25 years ago is gone, along with the time to market, and the instant feedback from simply updating your page to see the changes you’ve made.
In 2018, to help ease the pain of modern web development, hq was born. A modern smart static web server and build tool that just works. Hq distributes your source files, eliminating the difference between what you write and what the browser understands. In addition, each file is processed on demand, making your work incredibly fast. By analyzing UserAgent, hq understands what your browser can do and converts a minimum of code to ensure its functionality. So in the latest Chrome, your code will remain virtually unchanged. All modules are converted to ESM format, metalanguages are compiled in JavaScript, CSS and HTML. So no matter what frameworks or technologies you use, hq will simply work out of the box.
To start the server you need:
-
Install hq from npm using
npm i -g @ hqjs/hq -
Make sure that your project has an
index.htmlfile with connected scripts and styles (unless of course they are connected in JavaScript). For instance:
<html> <head> <title>Hello HQ</title> <link rel="stylesheet" href="/main.scss"> </head> <body> <script src="/index.ts"> </body> </html> -
Start the server in the root of the project with a command
hq
After that, the development server with a live reboot will instantly be available at the address that appears in the console (usually this is http://localhost:8080).
If you are using VSCode it's even more simple than that. Install the HQ Live Server plugin and start
hqwith one click!So you need a PRODUCTION solution? Set the
NODE_ENVenvironment variable toproductionandhqwill launch this mode:
NODE_ENV=production hq
Do you need HTTP2/HTTPS? Just add certificates anywhere in the project folder,
hqwill find and use them for signing (during development, you can use the mkcert tool to generate certificates).-
If you need a static build, no problem, one
hq build
command will assemble your project in a modular and non-modular mode (to support older browsers). The build result will be placed in thedistfolder and can be used by any old-generation static server.
There is no configuration in hq, which is enough in 99% of cases, but if you need to crank up some non-standard transformations with the code, you can extend hq using the babel, postcss and posthtml plugins. Just install the necessary plugins and add the appropriate configuration file (for example .babelrc) to the root of your project.
I hope this tool will simplify your life and bring back the ease and fun of experiments that we saw at the very beginning of the journey. If like hq, support the project with a like or a star on GitHub, join me in developing it and report problems. I will be happy to help.
Top comments (0)