Playground — NestJs, ReactJs, SSR, Glassmorphism for my Website
When programming is your passion, you will always want to test some stuffs, new or not, that you wondered about how will it work in real situation.
Few months ago, while making some projects using the NextJs framework with a backend server running using NestJs, i wondered if it is possible to completly get rip of NextJs and still have the SSR using only NestJs and ReactJs. Both are my favorite JS frameworks now. I also develop using PHP with frameworks like Laravel or Symfony and i liked the fact that the template engine was part of the framework especially for small project so i wanted that for NestJs.
I know that there’s many others template engine for express/nestjs application like PUG etc, but i really want to use ReactJs knowing that we could actually use it as template engine on server (thx Facebook).
So i knew that i’ll have to use NestJs as backend framework and ReactJs as template engine with SSR and they will be enough to get the content of my web page, but what about the form… the shape… the designs… I have read many articles on my Medium FYP (For You Page) about design systems and i discovered Neumorphism and Glassmorphism. I already knew Material design and Flat design and Neu/Glassmorphism were like a revelation… maybe cause they were different from Material and Flat. I start to read more and more articles about Neumorphism. I really liked the shape, the softness. I discovered it was cool but it lacked deeply of accessibilities where Glassmorphism not that much.
Event though Neumorphism lacks of accessibilities and is widely not recommended for large public audience, i recommend this article that explain how it can be used to make up for its deficiencies.
With the mentionned article, i knew that Neumorphism will ask much more effort for me to integrate accessibilities and i am not a designer so it will much more difficult. I decided to go with Glassmorphism that is easier to integrate.
Therefore for my development, i had four technologies in mind to integrate all together.
- NestJs for the backend
- ReactJs & SSR for views and rendering
- Glassmorphism for UI Design
To test all them, i decide to create my website. It is mine so i can do pretty much what i wanted there without thinking if the technologies suit well for the use case. My website is a simple one page site with some kind of resume of my activities and to build it i used those technologies like that.
NestJs for backend server
NestJs is a powerful backend framework for NodeJs environment. You can use for pretty much every types of backend application, from Monolythic, micro services to a basic Standalone application. It is simple to use, pretty well documented, has a huge community and has many available plugins.
I use its CLI that simplifies furthermore the development allowing with a single command to create a module, controller, service etc…
For my website, i had to create some services, one module and one controller. The services are providers of my activities from differents sources (Medium, Github and Twitter) and i used them to pass data to my view like that
This code is just a snippet. I won’t explain any code here as it is not the purpose of this article.
It was simple as that. NestJs allowing to use major design patterns like Dependency Injection and Inversion of Control i used them to inject the services in my controller and as NestJs can use Express templating method to render view, its API to do that is quite same as one of Express and the rendering part is done on server using another package that will be show in the next section.
ReactJs & SSR for views and rendering
SSR for Server Side Rendering consists in building the html of the web page and return it to the client. For that, in NodeJs development, there’s some template engine (or view engine) that is used to do that. The most famous is PUG for those that develop with Express.
As i use React in my views, i had to use a view engine that could build the html page from the server and return it. There was already an official library for server side rendering for ReactJs that’s ReactDOMServer but i didn’t want to have to integrate it to NestJs… So i look for a library that already does that and i found ReactSSR. A simple library that allows us to do SSR with ReactJs and it has a package that could be integrate for NestJs application.
I notice that the APIs provided by this library are quite similar to those used in NextJs framework and that helped a lot cause i already knew how this one works.
That was cool cause, i only had to create a react (tsx) page like that
Just simple as that. I also used tailwindcss cause it simplifies many things like accessibilities but my main UI Design system was Glassmorphism.
Glassmorphism as UI Design System
The Glassmorphism is quite simple to integrate to your page. Of course there are some rules to respect but the main point that i have in mind was accessibility. I really don’t know why i wanted so much to respect that. Maybe it was another point that i wanted to work on.
Glassmorphism is cool cause it allows you to make nice design and still respect the accessibilities. It consists mostly of a colorful background with your box or section of your page having a blurred background with some shadows and that’s all. After doing that you could apply others design system like Material, Skeuomorphism or Flat design. So i end up with a design like that
It is quite simple. I didn’t want to make something too complex or handle stuff like light and dark mode.
It was a cool experience and i really enjoyed testing all those technologies together. After that i test my page with the Lighthouse tools on Edge and Chrome browsers and had a pretty cool score.
Thanks for reading this.
