State Management with MobX and React

Nick Brown JavaScript, Problem Solving, React, Technology Snapshot Leave a Comment

There are many options when it comes to managing the state of a React application. Choosing the right one for your application can feel daunting.

The most popular choice, Redux, is often thought of as verbose because it requires a lot of boilerplate code, thus slowing down development. Redux is also very opinionated so it will take time for those unfamiliar with its functional programming paradigm to become comfortable with it.

In this blog, we’ll take a closer look at an alternative that aims to solve issues in React application state: MobX. To do that, I built a simple calorie counter application that will be used to showcase MobX in use.



Getting Started with React and JSX

Chris Shatrov JavaScript, React, Technology Snapshot Leave a Comment

I have been with Keyhole Software for nearly four years. Every time I write a new blog post it is about a new framework that I had to pick up and learn that year.

I write a lot of JavaScript daily, but previously never had the chance to start coding a project with React. But this year, I worked on a project with React. So as expected, I wanted to share my thoughts and my experiences with React.

In this post, I will give a quick introduction to React and talk about its main, most important, components. We will also take a peek at JSX and explain it, and show some code examples, which will help you have a better understanding of this library before you can move on to more complex things…



Showcase of React + Redux Web Application Development

Jian Li JavaScript, React, Single-Page Application, Tutorial Leave a Comment

In the last few years, React has continuously gained popularity for the development of web applications. At Keyhole, we have several blogs talking about React and related technologies, including React, Formik, react-router, and many others.

So why would we need Redux? Quite often when we develop applications, we start with small pieces. As the business requirements change, new features/modules/components are added/removed/updated. Particularly in enterprise applications, you may end up with a deep hierarchy of parent-child relationships.

In a React application, parent component-states are passed down to its child component as property. Application states can be changed in many different places. If not managed perfectly (and, in many cases, it’s not), your system can behave differently than expected. It can become increasingly difficult for development, debugging, production support and code maintenance.

In this blog, I’ll talk about Redux and explain how it can benefit React front-end development. I’ll provide an introduction to using Redux with React and show a demonstration of reconstructing an example React application to React + Redux.

I’ll re-construct this React application into two projects. The first project will be the back-end server application which will handle all the typical business in the server end, like registration, authentication, database operation, etc. I’ll use MongoDB to persistent data and Node.js for REST API development. You can also reference RESTful API development to the Github repository open source khs-convo, released by Keyhole Software.

The second project will be pure front-end development, which will React with Redux for state management. React with Redux integration is the focus of this blog…



Keyhole Releases Open Source, React-Based Chat UI Component

Keyhole Software Company News, Conversational Apps, Keyhole Creations, React Leave a Comment

The Keyhole team is excited to announce the release of an open source UI chat component that can be embedded in applications. This UI Component is React-based and can be used for chatbot and chat-based user interfaces.

This component is stand alone. It has a configurable implementation to talk with any server-side API. This component abstracts away its data transport middleware and, in the absence of a consumer-provided implementation, emulates its own asynchronous reply….



Thoughts on Application State

Mat Warger Amazon Web Services, AWS, JavaScript, React Leave a Comment

Use Redux! Use MobX! Just use `setState`!
Redux is functional! Mobx is reactive! `setState` is built-in!
But Redux has so much boilerplate! But MobX is more difficult to debug! But `setState` doesn’t scale!
Why don’t you just use Rematch to abstract the Redux boilerplate? Do I use redux-thunk? redux-saga? redux-observable?
How about using Unstated? How about just using the Context API?

:head-explodes:

There are a lot of options for developers regarding how and when to use state management libraries (SML).

Remember those last two articles (The Joy of Forms with React and Formik & One Router to Rule Them All: React Router) about the massively underplayed game library? There was a third part to come — a follow-up meant to implement an example of state management for an application. The application was small, granted, but this somewhat contrived example would tie it all up. It’d be the cherry on top. It would complete the rule of threes. 😉

There is not going to be another tutorial about which state library we can use to better manage our game library. Rather, in this post, we’re going to look at how and why you might use a library to manage your application’s state, and why that particular application is a perfect example of when you might not need a SML at all.