A frontend stack with ES6, knock­out and Foundation

2017-03-16 | #helper, #javascript, #knockout, #webdev

For work I regularily create frontend stacks with special purposes and sometimes I deem them worthy of being a reference stack I put on GitHub. Last time it was an "everything in one" general purpose frontend stack, while this time I built something a little more specific.

For a larger commercial page I built a stack with the intention of allowing a mixture of modern static HTML5 with highly dynamic parts where it counts. So I went along and created a frontend stack based on SCSS and (which I don't like as much as Stylus or SASS, but somehow it became standard and nicely integrates with) foundation.

On top of that I put a Babel- and requirejs-based ES6 structure for streamlined OOP-JS and coupled that with knockout.js, which can use ES6-classes more or less directly as ViewModels, which is awesome. Furthermore I implemented two logical code levels for knockout logic (application level and page level), which nicely and seamlessly integrate with each other, although being loaded indepentently of each other, depending on the necessities of the page.

So you can create an application, managing user and session stuff, while creating page logic individually for certain page types, without having to load everything all the time. This is realized by "bundling" and app-bundle and a page-bundle (one for every type) and loading them in a classical requirejs dependency.

The result is a page with a shared logical app space, with its own set of functionality, with the possibility to render the whole page statically and apply MVVM-functionality where needed. And even if we don't need MVVM, we still have a nice and clean place to implement JS-logic, without getting our usual jQuery "load this, load that" spaghetti code.