About Pim Hooghiemstra

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.

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.

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.

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!

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.

In my previous post React Router was introduced to handle URL changes on the client side. We created a Silly app to show how it worked. In today’s post we extend the Silly app with some very useful functions 😉

Firstly we like to use the URL to update the styling of the Clickable component we constructed earlier. Secondly we want to display the number of clicks on the button. The first is quite easy as it is described in the React Router docs, for the latter we have to use React’s lifecycle methods.

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!

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.

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.

In part 1 of this series I introduced the dartgame Tactics. So far, only the static version was created. In this post the app becomes fully functional. First, we carefully define the state of the app. Then interactivity is added by hooking up events to the interface to enable playing the game. These events trigger state changes and rerender the interface of the game. Read on for all details!

Post navigation

This is the blog of webburo PLint-sites. We are very enthousiastic about designing and developing websites, in particular complex webapplications. We are not always working though but love to ride our bikes in our hilly surroundings in Limburg, The Netherlands, Belgium or the Alpes!