Building a JS View Library | Pragmatic Coder

It always bugged me to understand how shiny new JavaScript frameworks and libraries work. Essentially this was the reason why I’ve started contributing to Aurelia. But it didn’t stop there. Before that, I used to work a lot with AngularJS. Later with the advent of Angular (> 2.x) I started with doing consulting and training gigs. In order to do that I dug into Angulars internals and learned things I like and others I dislike. Before all of that, it was Durandal, Backbone and even a bit Ember.

But as one can see all of them came from the full-featured framework perspective. So it always fascinated me why React was or still is hyped that much. Because at the end of the day, it is nothing more than a simple view layer right?

Gonna make my own library

That was a good motivation to start my own project and learn some things. You can find the project over at GitHub called VLib. It started out as a simple DOM view engine, with a code-only focus and no HTML templating. Because that is the essence of React isn’t it?
The basics were quickly in place and soon following was possible:

export const content = (props) => div({"id": props.mountId},
  h2({"class": ["red", "blue"]}, props.greetingHeader),
  p({"style": props.styles}, "Lorem ipsum"));

export const model = {
  mountId: 'app-root',
  greetingHeader: 'Hello World',
  styles: 'color: red'
}

VLibRender(content, model, "body", model.mountId);

BAM … page created done. At this stage my library was 2.27kb. Beat that Inferno.

Markup the simple way

I started to understand why people seem to like JSX, as it truly is easier to express markup that way. So my next step was to bring in JSX and by refactoring my sample, learn what is necessary to support proper prop bindings. Heh :)
I found babel-transform-jsx and have been astonished how easy it is to integrate into my current build setup.

Re-render changes? Modules? Webpack!

Everything was great until I tried refreshing my props and getting result changes re-rendered. Crap. But thank god there is diffhtml.
Adding that needed a proper build structure to support module imports. So I decided to finally give Webpack a try. After several tryouts, I finally managed to come up with a working custom assembled config.

State-management

Ok now that we’re in a semi-react style situation, how about properly handling the apps state? Well here comes Redux. By embracing its model and letting it leak into my library design, I managed to cut down a lot of boilerplate and at the same time streamline the development process.

Server-side rendering

But heck, as soon as you think you’re done there is this new shiny thing, server-side rendering of the initial state. A little bit of Express magic, jsDom for server side rendering and tons of webpack adjustments, topped with some nice npm scripts and we’re done. Last but not least I got the testing story straight with Karma, Jasmine and Webpack.

Conclusion

What was really interesting with this project was the continuous learning process. Starting from scratch, I slowly understood how one thing requires the other and how things come together. It also made be understand some of the current best practices and libraries. Last but not least it motivated me to take a closer look at React and React Native. This time though I am prepared by understanding the basics and the underlying concepts from scratch.

photo credit: Nino Carè: Books Door Entrance Italy Colors via Pixabay (license)