Our Digital Legacy: The Technologies That Power Our Online Presence

With all the different languages and frameworks you may be interested to know what we chose to build nova on, we will be going through each of the different frameworks and languages we use to bring you the nova experience you know.

Back end

There are a lot of distinct parts to the back end so to make it simpler to understand we will split this up into category's

Database

For our database needs we use MongoDB¹ with the Bridge-Mongo² ODM¹⁸, we used to use PostgreSQL³ with the pg⁴ module but we recently switched as MongoDB¹ suited our needs more since it allows for easier access to embedded data and integrates with the complex data models that nova use's

With the switch to MongoDB¹ we can expect a slight increase in performance and a massive increase in developer productivity as MongoDB¹ is much easier to integrate with our current system. You can watch the video on MongoDB¹ below for more information or head down to the sources section at the bottom of the page.

Language

We use Typescript⁶ as our coding language of choice for its type safety⁷ and better developer experience through its pre-runtime error catching⁵, for example here is a snippet of code written in Javascript⁸, there are no errors shown so we would think that this code is fine to run

Example.js
let string = "2"

console.log(string.startsWith("2"))

string = 1

console.log(string.startsWith("1"))

but when we do run it we can clearly see that this code has an error due to 1 not being a string

Console Error

However if we were to write this same code in Typescript⁶ we get a type error in the IDE⁹ without having to run it

Example.ts
let string: string = "2"

console.log(string.startsWith("2"))

string = 1 // Type 'number' is not assignable to type 'string'

console.log(string.startsWith("1"))

this has saved a developer time spent debugging by catching the errors before the code is even ran, type safety⁷ is one of the biggest productivity boosts for any developer and love Typescript⁶ or hate it you cannot deny that it saves a lot headaches searching through a stack trace trying to figure out why this one random variable is undefined.

Don't deny it we've all been there.

If you want to learn more about how typescript⁶ works and how you can migrate your project over to it check out the sources at the bottom of the page where we will have links to all the resources we reference in this blog or you can watch the video below.

Packages

Discord.JS

We use a number of packages to help with development with the main one being Discord.JS¹⁰ often shortened to d.js which is a wrapper for the discord API¹¹ and also provides a lot of useful classes that nova relies on such as their Collection¹² class which extends the Map¹³ type with extra utility methods. Without discord.js¹⁰ nova would not exist in the same state it does today so it is not an exaggeration to say that discord.js¹⁰ is the most important package for nova.

Bridge-Mongo

Bridge-Mongo¹⁴ is a ODM¹⁸ for MongoDB¹ compatible with Mongoose⁵² ODM¹⁸ that allows us to manipulate database data based on native types and objects.

Other Services

Podman

There are some other services and software that we use that don't fall under any of the other category's such as podman¹⁵ which is the container²⁵ engine¹⁶ we use to run all of the nova backend processes such as the main bot code and the database instances.

Podman¹⁵ is very similar to Docker¹⁷ so we have linked a video on docker as most of the concepts transfer however if you want details on how podman¹⁵ works you can go to the sources section at the bottom of the page.

Jenkins

Jenkins¹⁹ is a part of a CI/CD²⁰ pipeline and acts as the main piece of software allowing changes to go live when pushed to our git²¹ repo²².

When a change is pushed to our git²¹ repo²² Jenkins¹⁹ detects this and starts a build process where it goes through multiple stages of testing²³ and building²⁴, once all of those pass the build is complete. For us part of the build process is the building of an image²⁶ and the deploying of that image to a container²⁵ which allows for seamless transition to newer versions of nova.

Jenkins¹⁹ is very similar to other CI/CD²⁰ tools such as github²⁷ actions²⁸, to further explain the process we have linked a video below on CI/CD²⁰ featuring github²⁷ actions²⁸. All concepts transfer across so everything in the video applies to Jenkins¹⁹ as well. There are also links to other resources at the bottom of the page

Git/GitHub

Despite their name Git²¹ and GitHub²⁷ are not the same things, Git²¹ is a distributed version control²⁹ system while GitHub²⁷ is a developer platform that allows developers to create, store, manage and share their code and it is built on top of Git²¹.

We use these for our version control²⁹ like many other people do, there are other solutions such as GitLabs³⁰ or BitBucket³¹ but we chose GitHub²⁷.

We have linked below two videos explaining Git²¹ and GitHub²⁷ or you can see the bottom of this page for links to more info

API

Express.JS

Our API³² (yet to be developed) uses Express.JS³³ for its routing³⁴ as it allows for the quick development of API³²'s.

Below we have linked a video on RESTful³⁵ API³²'s and you can also find more information in the sources section at the bottom of the page

Front end

There are lots of different frameworks and libraries we use for our front end, some of these are used exclusively by the dashboard (yet to be made but there is a concept site out, find at the bottom of the page)

Frameworks and libraries

Astro

Astro³⁶ is a static site³⁷ framework which speeds up sites by reducing the amount of javascript⁸ used and when it is executed through the process of islands³⁸ and partial hydration³⁹. An island as explain by Astro³⁶ is

...any interactive UI component on the page. Think of an island as an interactive widget floating in a sea of otherwise static, lightweight, server-rendered HTML.⁴⁰

Astro Islands

An island³⁸ always runs in isolation from other islands on the page, and multiple islands can exist on a page. Islands can still share state and communicate with each other, even though they run in different component contexts.

This allows our sites to have interactive elements while still being fast and responsive, this is currently used on both our marketing site and dashboard concept.

We have linked a video explaining Astro³⁶ below and there are other resources that can be found at the sources section at the bottom of the page

TailwindCSS

Tailwind CSS⁴¹ is a CSS⁴² framework that creates a large list of predefined utility classes⁴³ which you use to style your html⁴⁴ using inline classes, this does create larger html however it is much more maintainable.

We use tailwind CSS for our Marketing site and Dashboard concept as it is a great way to quickly create UI's and there is a large collection of premade components⁴⁵.

We have linked a video explaining TailwindCSS⁴¹ below and there are other resources that can be found at the sources section at the bottom of the page

Preact

Preact⁴⁶ is a lightweight alternative to React⁴⁷ that works with the same API's as react so it is very easy to migrate to it, Preact⁴⁶ describes itself as

...a lightweight and high-performance Virtual DOM⁵³ library that works with React components.⁴⁸

We use Preact⁴⁶/React⁴⁷ because it is quick and easy to make responsive UI⁴⁹'s however some of our sites may be moving away from react⁴⁷ such as the dashboard which may switch to using Vue.JS⁵⁰ in the future.

We have linked a video explaining React⁴⁷ below as the concepts transfer to Preact⁴⁶ and there are other resources that can be found at the sources section at the bottom of the page.

We also linked a video on Vue.JS⁵⁰ as it is very likely the dashboard will switch to it.

Vite

Vite⁵¹ is a Javascript⁸ build tool that makes it easier and faster to build web apps, it allows for fast building and handles bundling. It is used on our marketing site to speed up builds and development.

We have linked a video explaining Vite and other resources can be found in the sources section and the bottom of the page

Conclusion

Well thats everything we use right now, we hope you enjoyed learning about how Nova works and all of the different frameworks and libraries that help to get Nova to you. Below you can find the sources section where all the technical terms and sources for our information and we want to say a big thank you to Fireship for his in 100 seconds videos as they are perfect for explaining a concept in a concise manner go check out his channel.