Skip to content

CRA Usability Performance Dashboard repository

Notifications You must be signed in to change notification settings

cds-snc/cra-arc-upd-tbpc

 
 

Repository files navigation

Usability Performance Dashboard

Stack overview & reading list

Core

Node.js is a JavaScript runtime built on Chrome's highly optimized V8 JavaScript engine. Nearly every part of the stack will use Node in one way or another, so it's very useful to know what it is and how it works.

npm is the official package manager for Node.js, and comes pre-bundled. It's used to install and manage third-party Node.js packages, as well as for running scripts and/or binaries.

TypeScript is a strongly-typed superset of JavaScript that compiles to plain JavaScript. The added type safety helps to prevent common programming errors and catches bugs at compile time rather than at runtime. And while the type system allows you to create very robust and strict types, it also allows you to use or create types that are loose or flexible enough to accomodate your needs without losing type safety entirely, which you can go back and refine as needed later on.

Nx is a bit difficult to describe concisely. Their home page describes it as a "Smart, Fast and Extensible Build System". But really, it is many things. I would describe it as a toolkit for managing, organizing, automating, and speeding up all or most aspects of the development cycle of a monorepo. (A monorepo being a single repository containing multiple projects)

The main features are:

  • Scaffolding
    • generators for Angular, Nest, etc. which can set up build tools and test infrastructure
      • modules
      • components
      • libraries
      • basically anything you might need
  • Build system with smart caching, which can cut compilation times by a lot
  • Full-project test integration with smart caching, so you only run tests for code that has changed
  • Fully extensible with plugins, custom generators, scripting capabilities, and more

Front-end

Opinionated, powerful, and flexible framework for building client applications in TypeScript.

State-management library for Angular very reminiscent of Redux. Can be a bit confusing at first, but it's not that complicated once you understand the concepts. Recommended to do some tutorials and play around with it to understand how it works.

A popular CSS library for building responsive, mobile-first projects on the web.

An Angular implementation of most Bootstrap components.

Back-end

MongoDB is a document-oriented NoSQL database that uses JSON-like documents. This makes it very flexible in terms of schema design, but can require a bit more attention to get good query performance in some cases, especially for aggregations.

NestJS is a framework for building server-side applications in TypeScript with a very similar module system as Angular. Comes out-of-the-box with a lot of useful integrations for various technologies, such as Mongoose (see below).

Mongoose is a MongoDB object modeling library for Node.js that allows you to use code to define schemas for your MongoDB collections and has lots of useful functionality to help simplify interactions with the database.

Testing

Jest is a JavaScript testing framework that is essentially the de-facto industry standard for writing unit tests for JavaScript. Has many utilities that make it powerful and easy to use.

Cypress is a powerful end-to-end testing framework with many features that allow you to simulate real interactions with your application. Not only that, but it also lets you watch these simulations in real time, and jump to different points in the execution, giving you "time travel debugging".

Production environment / Deployment / Continuous Integration

Cloud service provider by Microsoft. Has a lot of useful tools and services for building and deploying applications. We primarily only use a hosted virtual machine running CentOS (Linux).

Docker is a tool for building and running containerized applications. It's recommended to read up on it, at least to get an idea of what it is and how it works.

Github Actions is a feature in GitHub used for Continuous Integration allowing you to automate the building, testing, and deployment of your code.

Additional reading and references

About

CRA Usability Performance Dashboard repository

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • TypeScript 93.8%
  • HTML 4.9%
  • CSS 0.8%
  • SCSS 0.3%
  • Dockerfile 0.1%
  • JavaScript 0.1%