Forem: Rommel Suarez

What I learned while building a Snake Game with React and Recoil

Rommel Suarez — Thu, 01 Oct 2020 03:23:35 +0000

Recoil is a new state management library developed by Facebook used for React applications. It has a very interesting concept that promises simplicity, but with powerful capabilities. Unlike redux, it has a simple framework without messy boiler plates. I decided to take a look and see how it works. However, instead of making a simple app, I thought of building a game with it. I ended up building a Snake Game to fully test my understanding of how the library works. I know some will say I don’t need to have a sophisticated state manager to build this game and I certainly agree. However, I also believe that the most effective way to learn a technology is to apply it in an unusual way or on a more complicated application. Writing a game in React is unusual and complicated, but is possible. It’s a perfect way to learn Recoil.

Atom

Unlike redux and react context, Recoil has the concept of multiple units of states called Atom, where components can subscribe to. Components will render only when the atom where they subscribe for changes. This will avoid unnecessary rendering when state changes. An atom can be defined by using the atom() function. An atom should have a unique key and a default value for its state. On my game I have created 3 separate atoms that represent its own data:

The SnakeTailState holds the information of all the snake's tail location, by default it has 3 tails. The FoodState holds the location where the food will appear in the screen. And lastly, the KeyPressState will hold the keyboard entries that will tell the direction of the snake.

React hooks

Recoil is designed for React Developers who love hooks. Yes, if you love developing functional components and use hooks a lot then you will enjoy the benefits of recoil. Recoil has some ready made hooks in order to access and update atoms.

useRecoilState(stateKey) returns a tuple where the first element is the value of state and the second element is a setter function that will update the value of the given state when called.
useSetRecoilState(stateKey) returns a setter function for updating the value of writeable Recoil state.

These sample hooks are just among the other hooks that you can use to access and modify your atoms. On my code I used useRecoilState to access the SnakeTailState and pass it to my snake component that display it on the screen. While useSetRecoilState is used to update the KeyPressState everytime a user pressed the keyboard.

Selector

Selectors are functions or derived state in Recoil. Recoil can have a get and a set function. Get functions can return calculated values from an atom or other selectors. A get function does not change the values of the state. However, a set function, also called a writeable selector can be used to change or update a state.

As you can see on my selector, I built the following logic that corresponds to my states. These selector can communicate with other atoms and other selectors to build a new set of states.

Calculate how to create new tails whenever the snake has eaten the food.
Decide where the food will randomly appear on the screen.
Check the snake's next direction based on the key pressed.
Check if the food was eaten
Check if the snake hit the walls

I don't have to write those logic inside the presentation layer which made my code very clean. All I have to do is use Recoils helper hooks to access the selectors from the presentation layer, the same way I access an atom.

Findings and opinion

For me Recoil is a better choice on state management. One reason is that it promotes one of the SOLID principle, Single responsibility principle. By designing your state to have different units of state that represents one thing you avoid making a convoluted state.

Why does a single global state is bad?

If our app is simple, probably we can get away with it. But, as our app becomes larger and more complicated, having a single global state that holds everything will be problematic.

Imagine our state as a database

When we first design our database, do we build one table to represent our data? Unless we have a very good reason, a database should always be normalized. Each tables on our database should represent one particular data, example: Employee, Department, Salary etc. And I believe that states should also be designed the same way. Each state should only represent a particular set of data.
On a database, if we want to combine rows between tables, we can define a view. On Recoil, we can do the same by using selectors.

Conclusion

Building a game with React is fun though not recommended, but it helped me understand Recoil much better. I will probably continue this by writing another version of my snake game app using Redux and share my experience.

WebAssembly and the evolution of web front end development

Rommel Suarez — Tue, 19 May 2020 08:37:40 +0000

Javascript has played a very important role in shaping web development over the years. It has evolved so much that it is now used to write software solutions other than browser applications. It has also been adapted to write server side applications and machine learning. Indeed, javascript has become very popular and powerful nowadays. However, as javascript matures, web front end development is still on its early stage.

Innovation starvation
The web browser has been around for about 30 years. However, better user experience on web apps only began just recently. It only started when smart phones arrived and dominated the market. Suddenly HTML5 was introduced and Single Page Applications or (SPA) conquered the web browser. Also, during this time, ECMAScript finally unveiled ES6 that gave modern features to javascript implementations. JavaScript libraries and frameworks such as ReactJS, Angular, Vue and more have sprouted everywhere. But why did it take a while for us to make these innovations? Why do we need to wait for smart phones and tablets to realize these needs?

Someone has tried to make innovations, but failed
Innovations like this has been done years before to help developers create modern and responsive web app without javascript. Notably, Sun Microsystems built and design Java to run Applets in the browser to make a better user experience. Who would forget Microsoft Silverlight and Adobe Flash that were built for creating rich internet applications. But ultimately there is one thing in common about them, they all failed because they are not naturally part of the browser as compared to javascript. You need to install a runtime environment in order to run these type of applications in the browser. For some reason, some browsers stopped supporting it, especially on mobile phones.

Why javascript alone is not sufficient?
When working with machine learning, API development and game development you could choose the tools and programming language you want. However, in the web browser there is only javascript. Javascript is good, but it's not the best. Sadly, it's the only one we have. There are a lot of pitfalls and weirdness on javascript. The good and the bad of javascript are widely discussed on the book "Javascript the good parts" written by Douglas Crockford. Even though ES6 tried to solve those issues, not all browsers supported it yet. So developers relied on transpilers. Transpilers read codes written in ES6 and spit out javascript guaranteed to work anywhere even on some old browsers. You can also use other programming languages to help you write better codes and again use transpilers to convert them back to javascript. However, the browser doesn't know these languages, they are just a facade. Try to debug your code from the browser and you'll be surprised. It would be great if one day we can have the freedom to build apps in the browsers where languages like C#, Java, C++ and your favorite programming languages can natively run and debugged in the browser. Just compile it into machine code and the browser can execute it faster without any third party run time environments. You don't have to use transpilers and other tools such as webpack, grunt and gulp to run your codes on the browser which I think are just hacks and workaround to make javascript work. And still, you have the option to use javascript. That means development will be easier and simpler. You can use one language to build your app. You can write better and efficient codes because most of the features that javascript is missing are already built in other languages.

WebAssembly to the rescue
On 2015 WebAssembly was first announced to the public. It has proved the possibility of running an application written in a language different from javascript. And yes, everyone was astonished. It's like a dream come true. It doesn't need a third party run time environment. A game written completely on Unity3D was compiled to target WebAssembly with a binary format. It can execute on the browsers with a performance close to native code. This has opened up a lot of possibilities for app development on the browser. Developers that have no background in web development can now write apps that run on browsers. They don't even need to be an expert on CSS,HTML or javascript. WebAssembly is very promising and most browsers are supporting it now. It's still very young and there's more work coming along to make it better. One of the major excitement is Blazor WebAssembly. It's a framework for building Single Page Apps using C# created by Microsoft. It's an open-source framework where you can use and build .Net Core components of your app and run it in a browser. Before, you can only use javascript to build this kind of applications. I'm pretty sure, with this innovation a few more technologies and frameworks that uses a different programming language will come out. It's a pretty exciting future ahead of us isn't it?