In the last two years, we have been working substantially with React JS. One of our ongoing projects, involves displaying plenty of records after search. The user manipulates these records by editing, deleting, sorting etc. Earlier, we used plain CoffeeScript with jQuery for this. When we started building this application, data size was small and things were lot more under our control. But as it grew, we could see obvious dip in the overall performance. The page rendering was slow, the manipulation became slower with time.
It was one of those late night working sessions, we took a decision to rewrite the whole application, using React JS. We first started to rewrite the pages that dealt with of lot of data. And now things are more under control, with most parts of the application using React JS.
Oh! Wait a sec!!! We used plain React JS with Rails, using react-rails gem. But things started getting messy when the data started flowing all over the places. And the data manipulation code was present everywhere haphazardly. So, React JS also started giving us problems, if not implemented properly. That's where Redux came to the rescue.
Redux
Redux is a framework(!!!) based on the Flux pattern. Flux, simplistically, is a design pattern, that asks you take care of the data flow and data manipulation activities in a proper fashion. And Redux is a framework that implements this pattern. There are several implementations of Flux pattern, with Redux being a popular one. You can use Redux with any application. It so happens that React JS is a good candidate to use Redux. In this post, let's create a simple React JS application with Redux. We'll use ExpressJS in the backend.
I keep looking for remote jobs and one of the sites that I usually refer to is weworkremotely.com. So I decided to take a plunge and implement a simple version of this site using React and Redux. :) - Prabhu
Let's create an application called jobs. The jobs application will have two parts.
- jobs-reactjs, the React-Redux application which is the front end
- jobs-express-server, the ExpressJS application which is the backend
Here're some screenshots of the application, that will give you an idea what we are trying to build. It's not really formatted. So you can format it the way you want anytime.
Here's the dashboard, with the list of jobs
You can create a new job posting
You can view the details of the job posting
You can delete a job posting
