Web Groundwork

Stacks

This section provides some recommended combinations of technology you can leverage. Feel free to use this guidance to build your own stack by adjusting them as needed (for example, by replacing certain elements or combining different stacks).

TIP

Have some technologies you enjoy using? See our Contribution Guide to add it here!

MERN Stack

Pros	Cons
The frontend and backend share similar languages and libraries.	React has a steeper learning curve than other front-end libraries/frameworks.
An abundance of external libraries and tooling available for these frameworks allows us to focus on application-specific logic instead of boilerplate code.	The abundance of tooling available can be initially overwhelming.

Frontend: React.js

• Frameworks and libraries
  • Component UI libraries: AntDesign (opens new window), MaterialUI (opens new window), SemanticUI (opens new window)
  • React Router (opens new window): allows us to build single-page applications with navigation
• Tooling
  • For getting started, create-react-app (opens new window) produces React boilerplate setup with no configuration needed
  • For debugging purposes, React Developer Tools (opens new window) is a Chrome extension that allows developers to inspect the component hierarchy
  • For managing application state, Redux (opens new window) is a popular choice
  • For build tools, Babel (opens new window) transcompiles modern JavaScript and JSX into older versions for compatibility
• Considerations
  • Pro: React's popularity in the community means that there is no shortage of learning resources
  • Con: React is less opinionated than other front-end frameworks like Vue or Angular and can become difficult to structurally maintain in the long run. React also uses a lot of "magic" and beginners diving deep into it without learning JavaScript fundamentals beforehand often find themselves struggling later
• References
  • React documentation (opens new window)
  • JavaScript resources
  • TypeScript resources

Backend: Node.js

• Frameworks and libraries
  • Express.js (opens new window): a minimal web application framework used for building REST APIs
  • Socket.io (opens new window): allows us to manage real-time event-based communication using web sockets
• Tooling
  • For productivity, nodemon (opens new window) automatically restarts the application upon changes detected
• Considerations
  • Pro: Node.js applications scale up well and are known for being performant. Like React, it is also backed by a large community and hence, learning resources are always available
  • Con: Being a single-threaded environment, Node.js is not suitable for CPU-intensive applications (e.g. audio/video processing)
• References
  • Node.js documentation (opens new window)

Datastore: MongoDB

• Frameworks and libraries
  • Mongoose (opens new window): a popular library for using MongoDB from Node.js applications
• Tooling
  • For visualizing and manipulating data quickly, Studio 3T (opens new window) can be installed on Mac, Linux, or Windows
• Considerations
  • Pro:
    • Being a NoSQL database, MongoDB is good for non-structured or schemaless data. The usage of JSON-like documents makes it pair well with Node.js
    • A Docker Image (opens new window) for MongoDB is available. If you have Docker installed, you can spin up a MongoDB container very easily without installing mongo locally
    • A cloud-hosted MongoDB service, MongoDB Atlas (opens new window) is available on AWS, Azure and Google Cloud. With this service, you can deploy, operate, and scale a MongoDB database in just a few clicks
  • Con: MongoDB Atlas Free Tier only allows 10GB in/out of a cluster per week - see Atlas M0 (Free Tier), M2, and M5 Limitations (opens new window)
• References
  • MongoDB documentation (opens new window)

Other Tooling:

• For managing dependencies, npm (opens new window) is the default for Node.js

Examples:

• ubclaunchpad/food-doods (opens new window) is an example of a microservice architecture where the recipe and user services use Node.js, Express.js and MongoDB Atlas with Mongoose

Sync Stack

Pros	Cons
Shared language means easier onboarding for inexperienced members. Unopinionated technologies allow for customizability - especially consider this stack if you have a niche use case.	React is not the easiest frontend framework to learn
Going "accountless" means much less overhead and initial set up, and skips the need to handle user accounts and credentials.	Complex data structures and data relationships may not fit well with a simple key value store. "Accountless" means it can be difficult to “attach” information to a specific user.

Frontend: React.js (TypeScript)

• Frameworks and libraries
  • Material UI: Material UI (opens new window) is React UI framework for easily building React components.
• Tooling
  • create-react-app (opens new window) is a simple way to setup the frontend.
• Considerations
  • Pro: React is currently (2020) the most popular frontend framework. This means that it has a lot of community support (eg. stack overflow), and large number of libraries/packages which can help with your project.
  • Pro + Con: React is unopinionated - meaning the build and structure of your application is up to you. There are many ways to do everything in React, and each approach has its own advantages and disadvantages, so it's up to you to decide which is best for your project.
  • TypeScript resources

Backend: Node.js (TypeScript)

• Frameworks and libraries
  • Express (opens new window) is a popular Node.js server-side framework. It provides a set of features that makes backend developing easier. Like React, it is unopinioated and there are many ways to solve the same problem. Express app generator (opens new window) can quickly set up application boilerplate
  • Logging: Pino (opens new window) is a low-overhead structured Node.js logger.
• Tooling

Datastore: Redis

• Frameworks and libraries
  • Redis (opens new window) is a versatile "key-value" store (like a big hashmap) which can be used as a database and/or a cache
• Considerations
  • Pro: Simple key-value storage, no schemas or column names required
  • Pro: In-memory database means it has high read and write speed - great for real-time applications
  • Con: In-memory database means data sets can't be larger than memory

Other Tooling: None

Examples:

• ubclaunchpad/sync (opens new window)

Rob's Stack

Pros	Cons
Strongly typed, use of code generation reduces boilerplate. GraphQL has good tooling.	Golang does not have a steep learning curve, but can seem intimidating

Frontend: Vue.js and Typescript

• Frameworks and libraries
  • GraphQL: Vue Apollo (opens new window)
• Tooling
  • vue-cli is a great way to kickstart the frontend - just follow the guide (opens new window)
• Considerations
  • Pro: Vue.js is a beginner-friendly template-based library with very nice tooling via vue-cli, and TypeScript gives a good foundation for non-trivial projects
  • Con: TypeScript can have a steep learning curve, and Vue library choices might be more limited
• References
  • TypeScript resources

Backend: Golang

• Frameworks and libraries
  • GraphQL: gqlgen (opens new window) is a great schema-first server generator - it will write most of the Go server boilerplate for you. You can also easily add an API playground (opens new window), which helps a lot during development!
  • Logging: zap (opens new window) is a versatile logger that can output both console-style and machine-readable JSON formats
• Tooling
  • The standard Go toolchain offers pretty much everything you'll need, from building to testing - see the go command reference (opens new window)
• Considerations
  • If you decide to not go with GraphQL, chi (opens new window) is a lightweight Express-style library for building standard REST APIs.
• References
  • Go resources

Datastore: DynamoDB

• Frameworks and libraries
  • dynamo (opens new window) is a Mongo-style Go client for DynamoDB
• Tooling
  • You can use the DynamoDB Docker container to run your application locally and build integration tests - see ubclaunchpad/pinpoint's testing Docker Compose setup (opens new window)
• Considerations
  • Pro: DynamoDB is basically free for most use cases! (no cost up to 25GB as of June 2020)
  • Con: DynamoDB table design requires special care due to the way it works - see the DnyamoDB best practices guide (opens new window)
• References
  • ubclaunchpad/rocket2 DynamoDB reference (opens new window)

Other Tooling: None

Examples:

• ubclaunchpad/ubclaunchpad.com (opens new window) is a good example of a Vue.js frontend
• The bobheadxi/timelines server (opens new window) has an example GraphQL implementation using gqlgen

Further Reading

• Analytics tooling at Launch Pad
• Repository management at Launch Pad
• Deployment options at Launch Pad