Chinmay Joshi

Posted on Jul 12, 2018

Minimum Viable Product Rollout with ReactJS and Serverless Architecture

#react #serverless #aws #mvp

Recently, I joined a new organisation, Supahands!
As my first assignment, I was supposed to assess a few front-end frameworks for one of our products. It was a challenging task for me and I learned a lot through the process.

Story - For our new product, we had four frameworks in our mind. React / Vue / Angular / Ember.
After a few days of evaluation, we came to a conclusion that ReactJS is a perfect fit.

The product's goal was pretty simple to achieve. It was a simple CRUD operations app, with a few more service-calls to retrieve some data.
We already had a running product with Ruby On Rails + PostgreSQL stack.
After inspecting our objectives, we realised that we needed to adapt to better technologies and architecture.

We were trying to achieve the following things:

Move our business logic to independent services (AWS Lambda).
Introduce new UI design and Template System for the application.
Write a Client-Side application in React.
Restructure our current database and migrate to DynamoDB.
Automate CI processes and current deployment strategies with the help of AWS CloudFormation. Our business logic is tightly-coupled with the deployment stack.

And why were we doing this?

To minimize the cost.
To re-use services in other products.
To have a Client-Side single-page application.
To maintain and share a common database with multiple applications.

And... did we achieve our targets? YES!

What did I do in the process?

I participated in the app's UI design process. I converted those designs into JSX templates with the help of Bootstrap.
I successfully wrote code with React for our Client-Side application (from scratch).
I deployed our React app to AWS.
Adapted myself to Serverless architecture. And, still learning...
I wrote backend services in Python 3.6 for AWS Lambda.
I designed a better structure of the database in AWS DynamoDB.

Why was it challenging?

I was working with React and AWS for the first time.
I had no idea how Serverless technologies work.
I have never worked on a front-end framework on my own from scratch to go-live.

So, what's next?

Improve the app's code base.
Add test cases for front-end app.
Add Redux for state management.
Make the app mobile-friendly.

Special thanks to dev.to and the community. I have referred a lot of threads for React and Serverless development!

Top comments (8)

rhymes • Jul 12 '18

Cool!

It's hard to distill such a huge refactoring in a few lines but...

What was your experience about moving an entire app to serverless? What about startup times for the functions?

Especially thanks to this part you wrote:

I wrote backend services in Python 3.6 for AWS Lambda.

:-D

Chinmay Joshi • Aug 29 '18

Hey @rhymes .

The overall experience with Serverless was outstanding. And I learned a lot through the process.

I have never worked on Python before. So learning and implementing services in Python was a big task.
We reduced the overall cost, tremendously.
Well, I am not sure about the startup time. The function invocation was immediate. I never had to configure anything after deploying the function. The function auto-scales depending on the number of requests. We never had to worry about configuring anything. Which is an excellent thing about Lambdas.

I found this inside AWS docs about Automatic scaling -

AWS Lambda invokes your code only when needed and automatically scales to support the rate of incoming requests without requiring you to configure anything. There is no limit to the number of requests your code can handle. AWS Lambda typically starts running your code within milliseconds of an event, and since Lambda scales automatically, the performance remains consistently high as the frequency of events increases. Since your code is stateless, Lambda can start as many instances of it as needed without lengthy deployment and configuration delays.

rhymes • Aug 29 '18

Well, it sounds great! Thank you for the answer :)

I wondered about startup times with Python, it's not as bad as Java (due to the lack of JIT compilation) but it's not the fastest either. You definitely answered my question.

Chinmay Joshi • Aug 29 '18

I am glad I could help. I am still new to this technology stack. :)

Adekoyejo Akinhanmi • Jul 12 '18

I would really like to experiment with serverless. Could you share some starter tips? Cheers

Chinmay Joshi • Aug 29 '18

Hey @janguianof , thanks for sharing the tutorial!

@senornigeria , I would like to share the material I followed.

First, you can start learning more about service-based architecture.
Then you can move to know more about Serverless. You can follow different blogs on the official website.
We used AWS Lambda for writing our services. Various companies (Google, Azure, IBM) are offering the same thing as AWS Lambdas. You can start by reading about how what Lambdas are. Followed by multiple tutorials provided by AWS.
After that for solving different problems I just randomly followed posts on dev.to
Here's a repository by Serverless with tons of examples. And they are pretty good.