TL;DR:

here’s the link to the GitHub repo.

Some time ago, in one of my articles I showed a way to paginate your data using WebAPI on the server and AngularJS on client-side. Funnily enough I wrote that post exactly two years ago, I just noticed it while writing this. Well, turns out a lot of people is still searching for it, so now, after two years, I have decided to write another couple of notes but with a different tech stack.

Yes, of course, I could have used the same backend from the old article, but where’s the fun in that?

Enter NodeJS and React!

So, let’s start with the server first. As you can see from the sources, I used Typescript this time. To be honest, I don’t feel “safe” while writing Javascript code, even with lots of unit tests. Having some form of “strongly-typed” language is a little bit of relief, at least for the .NET coder in me.

The architecture is very simple: we have an express application with just one Route ( /api/products/ ) exposing a GET action which reads from a Repository the paged list of available products. Due to the nature of the example, I decided to keep things simple and not add any kind of IoC container, just to avoid to overcomplicate the code.

I have also added two middlewares, one to console.log() all the incoming requests and the other to allow CORS for a specific domain ( eg. our client application ). In case you need to refresh your memory, here’s a nice article about NodeJS middlewares.

The core concept that you can see from the Products API is to return an object that exposes the list of Products along with some infos like the total number of pages, the total Products count and the current page number.

Let’s talk about the client now.

I was definitely not disappointed discovering that the learning curve for React is actually very, very low. Coming from the Angular world, I was expecting more difficulties, but in a matter of hours I have been able to setup my dev env with Typescript ( wanna know how?  ) and start coding my components.

Oh yes, don’t miss my webinar this Saturday! I’ll do a quick introduction about Typescript and React.

Ideally, I could have served the client part directly from the NodeJS application, but I preferred to keep everything separated. Yeah, I had to activate CORS, but it’s not really a big deal. Also, it makes everything more “microservices-oriented“, which is becoming more and more an hype these days. In my mind, for that kind of architecture you should have two servers talking, but bear with me.

In our small demo, the client is using a service to read the products, displays them in a table and renders a pager at the bottom. As you can easily notice, I am using the fetch() polyfill to perform the AJAX request.

Also, to make things more interesting, in this case I am using an IoC container, Inversify, to handle dependencies. However, since Components are instantiated directly by the React engine we cannot use constructor injection but have to revert to property injection….which in this case is handled by the @lazyInject decorator. I’ll write another post about the subject in the upcoming future.

For now, if you enjoy the example, don’t forget to write a comment!

Did you like this post? Then