State machines are an old concept. They are a proven solution that provides a solid architectural foundation for application processes. In this article, I hope to provide an introduction to what they are and how they can be useful for a modern web or mobile application engineer. We’ll be focusing on one library in particular – xstate – and how it can allow anyone to easily leverage state machines for managing global or component state.
Weโve all seen and read the React tutorials. We know about classes and components and JSX and whatnot, but then there comes the time when you have to start doing things for real. โRealโ you say? Yes. Like connecting to a database or navigating around something larger than โHello World.โ Oh, then there’s that dreaded state thing. Well, letโs have a quick talk about the โExtrasโ that we can add into a React application.
In this blog, we will address adding routing using the React Router, adding data access using the JavaScript Fetch API, and creating a global state management feature using Reactโs built-in Context API.
Let us present this scenario. Youโre building a React application, and youโve been tasked to build a registration form. Seems simple enough, you think at first, but then you start hearing the requirements. The application needs to have validation on each field, and each field needs to have certain requirements, such as being required, being a certain type of field, having a certain length, etc. Your form must also be easily created and have an easily adjusted state during its usage. At this point, something you originally thought would be quick and easy is seeming more and more time consuming and complicated!ย
Well, worry no more and look no further; the community has come to your rescue. In this post, weโre going to talk about using the form library called Formik and the validation library called Yup to build out a simple validation form inside of a ReactJS application.
You canโt read any technology trend news for the upcoming year without reading about Progressive Web Applications (PWA). PWA offers the ability to add native-like capabilities to your web application.
One of the core technologies of a PWA is the service worker, so I thought I would take us through a question and answer session on service workers. Service workers have been around for a while now, but the momentum in their use has picked up with the popularity of PWA. My goal here is for you to be able to understand what a service worker is, what you can do with it, and the limitations of a service worker.
Earlier this year I blogged about creating a Lean Mean Vue Machine called Quotes on Demand. The application was a fully featured CRUD application served from a NodeJS server and had a self contained VueJS front end.
But wouldn’t it be a nice test to see if that same Vue application could switch over to another API, say something like a Python web server powered by Flask?
In this post, we will create a Python web application that will have 100% parity to an existing NodeJS web application. This will enable an existing VueJS front end to connect to the application with no additional code changes in the user interface code.