ReactJs + NodeJs for Java Developers

 

Background

I am a Java Developer who enjoyed developing both server side web (frontend) and server side (backend) Http API. In recent years, Java or other JVM languages are predominantly used for server side API and NodeJs stack is the defacto standard for Frontend.

This page explores the frontend (UI) development using ReactJs + NodeJs stack using Java lens by comparing tools and framework in Java stack.

Source code available at: 

https://github.com/harishkannarao/react-nextjs-rest-api

In this repository, I explored the ReactJs ecosystem to build, test (unit and integration) and deploy a pure client side rendering (CSR) web application.

Development Stack

ReactJs is the basic building block to build the UI components and NextJs is built on top of ReactJs to create pages with routing and deployment tools for application built with ReactJs.

Axios is a very popular Http Client library to fetch data from server side Http APIs

NodeJs Java
ReactJs             Spring MVC with Thymeleaf or Velocity Macro
NextJs             Spring Boot
Axios             Spring RestClient or WebClient

Deployment Stack

Next Js offers various forms of deployment as:

  • Client Side Rendering (CSR)
  • Server Side Rendering (SSR)
  • Pre-rendering
  • Hybrid of above three

In this repo, I have explored the most simple form of deployement which is pure Client Side Rendering (CSR) by exporting the application as a static web site by substituing the parameters during export time. This static web site can then be copied to a AWS S3 storage bucket along with Content Distribution Network (CDN).

There are no additional tools needed as it NextJs provides out of box support for exporting as static website with parameter substituion using environment variables.

Testing Stack

Unit and Component Testing

Jest Library is a test runner tool with built in assertion library and retry utilities to test async behaviours of a ReactJs Web application.

Testing Library is used to render the ReactJs Components in a headless html renderer and allows to interact with the DOM elements.

MSW Library is used to stub and verify the server side Http API interactions during the test run.

Jest stack has very fast feedback time, however it was hard to test the bits in <head> section of the html and unable to test the cross page navigations.

NodeJs Java
Jest             Junit or TestNg
Jest             AssertJ
Jest             Awaitility
Jest-Stare             Gradle or Maven Html Reporter
Testing Library             Html Unit or Chromedriver
Testing Library             WebDriver (Selenium)
MSW             WireMock

Functional Testing

Cypress tool is a test runner tool with built in assertion library and implicit retry utilities to test any frontend Web application.

Higher level user journey based functional tests are mostly suitable for Cypress with very little mocking or stubbing. To simulate server side Http API or verify interaction with remote server, cypress has first class support using cy.intercept().

It runs the test against a running application, hence we need additional libraries like serve and start-server-and-test to start and run the application in background during the CI. Since it tests the application in a real browser, it is easy to test the behaviour of the app from the user's perspective.

In essence, test as much as possible in a meaningful way with Jest and have journey based tests in Cypress which cannot be otherwise tested with Jest.

NodeJs Java
Cypress     Junit or TestNg
Cypress     AssertJ
Cypress     Awaitility
Cypress     WireMock
Mochawesome     Gradle or Maven Html Reporter
serve and start-server-and-test     Spring Boot Test

Post Deployment Acceptance Testing


To test an application in a deployed environment, Cypress will be most appropriate as its easier to test a deployed application. Also, there is built-in http client cy.request() which can perform http calls to set up test data or fixtures in the server side Http API.

NodeJs Java
Cypress         Junit or TestNg
Cypress         AssertJ
Cypress         Awaitility
Mochawesome         Gradle or Maven Html Reporter

Comments

Post a Comment

Popular posts from this blog

JSON with curl and jq

This blog post captures some quick commands to deal with JSON from servers (Http APIs) using curl and jq command line tools About Jq: https://stedolan.github.io/jq/ Install jq: Mac: brew install jq Ubuntu or Debian: sudo apt-get install jq Sample JSON content: Assume the following JSON content will be returned from  URL http://api.example.com/some-json-content {     "user_name": "User 123",     "some_other_field": {         "sub_field": "sub_value"     },     "array_field": [         {             "field1": "value1",             "field2": "value2"         },         {             "field1": "value3",             "field2": "value4"         }     ] } URL http://api.example.com/some-json-array-content [     {         "field1": "array value 1",         "field2&
Read more

Import self signed in Linux for Chrome / Chromium headless testing

Chrome / Chromium browser offers headless mode, which is quite useful to run tests via Selenium WebDriver in CI servers. However under some circumstance your test will hit a server with self signed certificate or invalid certificate or expired certificate. This may happen for developers trying to write tests against a server started on localhost with self signed certificates or testers trying to write tests against non-production servers with expired certificates (invalid certificates). Chrome / Chromium browser ignores the SSL errors when running in non-headless mode. However in CI servers, then it should be running in headless mode and currently we cannot ignore the SSL errors for tests accessing non-localhost websites. This blogs explains the steps for import a certificate into Linux's trust store, which will make the Chrome / Chromium browser to trust the self signed certificate.  Please do not apply these steps in production servers as it will make server vulnerable to
Read more

Colima - Drop In replacement for Docker Desktop for Mac and Linux

Colima ( Co ntainer on Li nux Ma chines) is an open source alternative and drop in replacement for Docker Desktop on Mac and Linux. https://github.com/abiosoft/colima It is simple to setup and run containers without the need for sudo or root access. Images can be pulled form both Docker hub ( https://hub.docker.com ) or Amazon's public registry ( https://gallery.ecr.aws ) Amazon's registry is more permissive or friendly with pull rates for both clients and non-clients of AWS. This article show the setup and basics of running containers on mac. Installation command for Linux can vary based on the distribution type, hence please refer to official documentation for up-to-date steps at  https://github.com/abiosoft/colima/blob/main/docs/INSTALL.md Installation on mac: brew install docker  brew install docker-buildx brew install docker-compose brew install jq brew install colima Setup docker compose as docker plugin mkdir -p $HOME/.docker/cli-plugins ln -sfn $(which docker-compose) $
Read more