ReactJs – Minesweeper App

Leave a replyMinesweeper is well known and quite popular computer game from ’90. For purpose of this blogpost I decided to revive it in ReactJs technology.

ReactJs is JavaScript library providing a view for data rendered as HTML. React offers a model in which subcomponents cannot directly affect enclosing components (“data flows down”), and is also very effective in refreshing a view when data is changed. Its “virtual DOM” feature allows this framework to only render parts of view that actually need to be changed and that is a reason why ReactJs provides fastest reactions on user inputs for great user experience in front-end applications.

MVC architecture

Best practice when using ReactJs is to create a hierarchy with one master component on the top. That component presents the application itself and holds the global state of application. In MVC architecture, that component will be used as a controller and it will handle changes on a model state and trigger a rendering when necessary.

Creating a good model is a key step in developing any good application. Model will hold the data that represents the application current state. Each object should represent one specific element and should only contain at least outer dependency as necessary. Simpler model allows you easier data handling when changes occur.

View is implemented by creating low level React components that can be reused on multiple places in application. Each view component always represents a single model object and it contains that object as a property of a view. Each view component is also responsible for catching html events and forwarding them to controller. In order to be able to handle such events from input devices, each input device is also represented in model. In Minesweeper case it is the MouseModel that holds informations about  current mouse state and alerts controller when actions are made.

Handling state changes

Controller contains a whole global state of application. It reacts on state changes of input devices, delegates actions to a game model and updates application state when necessary. In order to be able to update application state, the controller must be aware of any state change on the model. For that purpose ‘event listener’ pattern is implemented on model.

Each model component implements interface that contains two methods:addEventHandler(eventHandler) and fireEvent(eventName, event). Each model object set an event handler callback to each of its children. So, when model object changes its state it can fire a ‘stateChanged’ event. Its parent will handle that event and fire the same event to his parent and so on and so on until event reach the controller on top of the hierarchy. Controller then handles that event by updating global state and starting render() procedure that will update the view.

This application was created as a full front-end application and requires only a browser to run. It was developed for Chrome browser and was not additionally adapted to other browsers. It was developed as full front-end but it also offers an option of adding a scoreboard that require a back-end REST service with some kind of persistence.

Live demo is available on:  http://dobilinovic.comsysto.com/minesweeper/

Source code is available on gitHub: https://github.com/Obee88/minesweeper-react

Hope you enjoy it!

Davor Obilinović