Building a website with StencilJS

Published: 2020-04-17

Welcome to my newest personal website upgrade, this time I went with a technology that has had huge improvements over the past few years. It has the usual pro and cons, in this article I will try to explain the why and how I did it.

I have been working with JavaScript based web technologies for a few years now. There are the big ones, like Angular or ReactJS or VueJS .There is also alot of smaller ones around.

Basically from what I have seen at most times, those frameworks can be classified in two different approaches, a functional approach , like ReactJS does it. And a more old-school separated approach like Angular doing it.

While I am personally not a fan of the functional approach , as it tends to mix up the output with the functions, it does have its advantages. Especially in the way modern frameworks does it. You have alot of the functionality inside the actual framework/library (how the makers of StencilJS want you to call it…), and rarely ever need to customize that part, rather you got your template file, which might hold maybe 3-5 functions in total and then you can adopt your template based on the depth of the overall application or website you are writing.

So, why not ReactJS then?

The simple reason why I did reevaluate the choices was, that one thing that you have in common with all kinds of frameworks is, that they are not holding to the standards that we have been given by the w3c and other boards in the web. That creates alot of boilerplate code one needs to use to make things display anything on the web and make browsers support it.

StencilJS On the other hand helps you build vanilla web components , which do not need any kind of polyfills to be rendered correctly in the browser. That makes it possible to:

  • Include StencilJS components with any of the common frameworks without additional imports.

  • Have browser rendering work totally without polyfills , thus reducing the load times and increasing the website/application performance.

  • In addition to not loading in polyfills , StencilJS also provides loading functionality only when its absolutely needed, it is chain loading your JavaScript , which goes contrary to most modern frameworks, who pack up all their code in one big load, that gets loaded at the initial visit, enhancing page load speed, depending on the type of your project, even further.

While one. Does not really apply for what I did, the second and third one are huge ones for me, I want you to be able to read what I write, independently from how current your browser is (with one exception, internet explorer, I could polyfill that one, but its 2020, so…).

Less code on the other hand also means naturally less space for bugs, there is coding styles, which might differ, depending on what you are trying to do with it and where you are originally coming from, but StencilJS documentation shows you pretty much all the things you will need for a small website or a webapp, I never needed more than above mentioned 3-5 functions in total for this website.

Yet another major feature of StencilJS is the included prerendering, it's a simple param to their "build-tool", it renders everything that is not coming from an interface into HTML and builds pages that can then directly be loaded into the browser, even further increasing speed on the browser end. It also, to a point, makes SEO work better, granted the times you will have web content not coming from a backend interface of sorts is rare.

The language that StencilJS decided you would write your webapps/website in was Typescript , which has proven to be a good choice. Typescript Basically give you type safety while you are coding and compiles down to a JavaScript version of your choice. By default StencilJS outputs to the most compatible JavaScript code standard of the current time.

How my choice will turn out to be any good will only prove over time, but I am looking forward for a good time with my choice, so far it has only proven to help me, since I am basically building the web components up, I can modify them directly to my needs whenever I want to change something or add another one, and the ideas are plenty.