Cube front-end code development.

Thousands of rules.

Two different files, bigger were the projects in the beginning. An HTML file with a CSS file attached to it. Of course, I am now exaggerating considerably, but what stood out was that we only used a single CSS file. As a result, in most cases these files consisted of thousands of lines, not really desirable and certainly not clear. It was high time to change this.

Time for structure.

Gradually, the jobs got a bit bigger and it was time to add some more structure to the CSS code. The solution to this was to use SASS. In SASS, you divide the code into several smaller folders and files to create more overview. In the process, we also started using so-called 'Variables' & 'Mixins'. This allowed us to write CSS code faster and more efficiently.

We also started working on the DRY principle, as DRY stands for Don't Repeat Yourself. Why write a certain piece of code again if it already exists? This too made our code cleaner and less bulky, and that too in shorter time.

New people, new techniques.

We are now in 2017, Brandcube has experienced tremendous growth and we have been working from the Gelderman factory in Oldenzaal for a while now. With the many new colleagues, we naturally also brought in a lot of knowledge of other and new technologies. Things also changed within the front-end landscape.

We started working with new Javascript techniques such as React and Vue.js. Advantages of Vue.js, for example, include:

• Very simple and straightforward user experience

• A large community with a lot of knowledge at its disposal

• Super fast user experience, even for very large applications

• Great choice of integration and packages

• Very good to use together with Laravel

As our assignments became more and more extensive and we therefore regularly started working with several developers on a project, it was time to start establishing rules and guidelines within our SASS code. We decided to start working them according to the BEM module.

It was also necessary to start choosing a fixed framework; after several team sessions, it was jointly decided that Bootstrap 4 was the most suitable.

Current techniques

So what (new) techniques do we use these days? Obviously HTML, CSS in the form of SASS and Javascript, which is the basis of every product. Especially in the field of Javascript, there are a lot of developments, for example, these days we no longer use the old familiar jQuery but write our custom Javascript based on the ES6 principle.

In addition, lately we have been developing a lot in Javascript frameworks like React and Vue.js, these are techniques that make it a lot easier to build dynamic and interactive websites, as the demand for them is increasing. For instance, the website you're reading this on right now is built with Vue.js with Nuxt.js on top. Nuxt takes away the client/server distribution and takes care of the entire UI rendering of the project. This has the great advantage that the Javascript is indexable in search engines.

What now?

At the time of writing, we have already been in our new office in the heart of Oldenzaal for more than six months. The team has gained a few more people, partly as a result of which it has gained knowledge and skills. However, we did face a dilemma. It was important to have a certain standard in our projects, so that every colleague could effortlessly take over a project from someone else. However, on the other hand, the techniques themselves keep innovating and developing.

This is why we have formed a team for each code language within Cube that closely monitors these developments. Every three months during a developers' meeting (with pizza & beer, of course), we present our findings to each other and a joint decision is made on whether to adapt or maintain our working methods.

And in the end, that is also what makes my profession so fun, every day I learn something new, discover something new and use something new.