Since our nosedive in Javascript there is a ton of things to learn and the greatest new insights are written down in posts in this category.

Testing Vue components in an isolated way using Storybook

Posted in Javascript on October 12, 2017

Testing your components in Vue is a good idea. You can use unit tests or end-to-end tests. However, testing the look and feel of your components is also possible by simply watching how they render in the page for a specific state of the UI. In this post I’ll discuss two approaches for isolated testing of your Vue components inside a Laravel project.

Transitions in Vue

Posted in Javascript on September 28, 2017

Transitions are essential when you want to create an intuitive user interface. When using Vue, transitions are easily integrated in your application. Here we discuss a use case of one of our own projects.

Did js-beautify break the internet?

Posted in Javascript on September 19, 2017

Monday september 18th, the Vue world is in shock: the vue-cli doesn’t work anymore. A new release of the js-beautify package breaks the npm install command. An issue on Github quickly gets a lot of comments. People are yelling that they can not work and can not ship app X to customer Y. A breakdown of what went wrong.

Why and when do you apply Vuex in your project?

Posted in Javascript on September 18, 2017

In this post we will look into the why and when of applying Vuex to a Vue project. Not a detailed, code-heavy tutorial, we rather focus on a simple example in which it becomes apparent that Vuex is a solution to keep the codebase tidy and maintainable.

Coupling Redux to React

Posted in Javascript on November 28, 2016

In the first part of this introduction to Redux we talked about specific Redux things like actions, reducers and the store. So far we just applied these abstract things to our Silly App you probably know by now. However, nothing has been said about coupling Redux to React which is in fact the fun part since this will make the application do something.

Introduction to Redux without todo example

Posted in Javascript on November 22, 2016

When building apps with React managing the state can be hard, especially when the app grows and becomes more complex. Redux was built to make it easy to split the state of your React application from the views. With Redux your React components become even more reusable as they don’t need to be aware of the state no more. The one way flow in Redux as we will discuss in this post makes reasoning about the app also much easier. Combining React with Redux makes way for well designed and structured apps that can easily scale. Let’s go!

A React app inside a Laravel project

Posted in Javascript on August 30, 2016

Suppose you have a Laravel 5 installation that needs some heavy user driven JS on a specific page. The current JS solution does not yet use a JS framework but for this new piece it is definitely needed. Furthermore, assume we choose React to build this new piece of code. How to incorporate this stand alone React app in the Laravel project? We investigated this issue and today we describe our setup.

An introduction to React Router

Posted in Javascript on July 11, 2016

Consider a game with several screens. For example, a new user needs to register, change his settings and may choose an avatar. Then he proceeds to the game itself. In the past we would create a page for each individual URL and load them via the server. However, in modern client side apps, the URL is changed on the client and there are no page reloads. So how does this work in a practise? Well, React Router makes client side routing a breeze. In today’s post we introduce React Router and create a very silly app!

Unit testing React Components

Posted in Javascript on June 20, 2016

In the latest posts we set up a darts game in React. We discussed the setup and performance, but no word about testing so far. In today’s post it is time to change this: We are going to setup unit tests for the React components. Although this seems overkill for a small app, the small app may grow over time or you might refactor parts of it. Automatic tests keep you covered during development. Also, the tests describe the components in normal words which makes it more easy for others to use your components.

React toy project: Tactics (part 3)

Posted in Javascript on May 23, 2016

In parts 1 and 2 of this tutorial I created a working prototype of the Tactics dartgame in React. Playing it for a while you probably noticed it was not as performant as you would like. In this tutorial we discuss the reason for this. In short it all boils down to a correct implementation of the shouldComponentUpdate function. But you don’t have to write this function yourself, just use Immutable state in combination with the PureRenderMixin mixin to obtain a great boost in performance.