Serverless React On Lambda – Part 2(benefits of this project)

What are the benefits out of Serverless react on lambda project?

There were a couple of benefits that we wanted to get out of this project like being able to deal with spiking workloads. But there were also a couple of unexpected benefits that we found along the way.

And briefly those are

  • Using storybook for mail preview
  • Finding out that fixing the email copy using this project was surprisingly simple using
  • JSON schema as documentation for our back-end developers having robust
  • Localization and internationalization support
  • And also being able to do continuous deployment via our CI system.

Unexpected problems of serverless react on lambda

Storybook for mail preview

benefits of serverless reactjs on lambda

What all those means first let’s start with storybook I don’t know if any of you are familiar with this really handy project called storybook.

But basically what it allows you to do is to take a component that you’ve written or a section of your code and display it in a way that’s very friendly to see and easy to modify.

So in this case we’ve set up storybook with a bunch of our different email templates and we’ve added in some basic information that you can use to render the information as well.

We’re using this plugin called storybook knobs, so you can put in the base URL that you want the links to go to the username that you want to show up on in that email.

And a couple of other pieces of information as well it’s really easy to change, it’s really easy to instantly type in a different name type, in a different group name and so on. See how your email is going to look with that new information.

Now as an aside email HTML, HTML email is awful and just because something displays properly in in the latest version of Google Chrome does not mean that it’s going to display properly in an ancient version of Microsoft Outlook.

So you have to do more validation than just checking in storybook, but this is a good start.

Fixing email copy is easy

benefits of serverless reactjs on lambda

Another unexpected benefit that we found was easy copy edits, you’re all familiar with react, you’re all familiar with the JSF, with the JSX syntax.

Essentially, it looks more or less like HTML and we found that people at our company who were not developers but already knew HTML were able to understand what was going on.

In our email templates and to very easily make copy changes, so if we found that a word was misspelled or there was some phrasing that was a little bit awkward or something like that, the product managers and product owners didn’t have to wait for the developers to get started on this.

They could actually make their own pull requests to the repository and this happened multiple times which was really cool. Because it meant that the developers could focus on the more difficult deeper problems.

And the people who wanted to focus more on exactly how the emails were written and how they were displayed could focus on that very easily as well.

JSON schema as documentation

benefits of serverless reactjs on lambda

We also use JSON schema to validate the data coming in to our lambda function. So this serves two purposes one it makes sure that the templates that we’re using receive the data, that they need in order to render properly.

For example if you have a reminder email that is supposed to remind someone about an upcoming and event, but the data that gets sent to react mail emerge it doesn’t have any information about that event.

You’re not going to be able to generate an email that’s actually meaningful to send off to the user, so we use the schema validation to make sure that whatever the backend is passing is actually meaningful and has the correct structure.

But in addition, we found an extra unexpected benefit here which is that the people who are writing the backend of our software the people who needed to actually integrate with AWS lambda we’re able to use these schema files as a form of living documentation.

So they could simply read the JSON schema file and see exactly which information the lambda function was requiring and the format that it was requiring it in JSON schema is a pretty readable standard.

And you can learn more about it on the website we were using a library called a JV to handle the validation, It also does really nice error messages which is important.

Localization and Internationalization support

benefits of serverless reactjs on lambda

We also do localization in our emails because we need to be able to display information such as dates and times. In a way that is robust and works for lots of different users and if you don’t think that this is important then you’ve probably never had to deal with the user time zones.

Before we have users all over the world and all of them expect to see notifications in their native locale, it doesn’t help someone who’s living in Europe to see the date. That the date and time, that an event is closing if that time is in the u.s. Time zones or vice versa.

Everyone wants to see information in their own local time zone, so that’s why it’s important to be able to have information about your time zone. Fortunately, there’s a really handy library called Format.Js which handles localization.

React.Js really smoothly, I was shocked to find that it was by Yahoo. I didn’t know that Yahoo was still doing cool stuff these days, but apparently they are and lastly we’re doing continuous deployment as well.

Because lambda is very easy to deploy new versions of functions on – and very easy to test as well. By having lots of different functions destroyed deployed in staging services as well.

Continuous deployment via our CI system

We’re using a system called apex to manage how we upload and deploy all of our functions. I’ll be honest, I don’t know all that much about how apex works.

I’m a developer I’m not so much focused on the DevOps side. But it’s something that was very easy for our DevOps people to set up.

We have our system running on CI specifically we use “Circle CI”. And every time a commit is merged to master it just redeploys all of our lambda functions and it works beautifully.

You can also run automated tests to make sure that the code that you’re writing is safe and it is not going to break things and we have very high test coverage actually on our project. We have 100 test coverage at the moment.