UBC Launch Pad Documentation

# 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
  • Tooling
    • For getting started, create-react-app produces React boilerplate setup with no configuration needed
    • For debugging purposes, React Developer Tools is a Chrome extension that allows developers to inspect the component hierarchy
    • For managing application state, Redux is a popular choice
    • For build tools, Babel 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

Backend: Node.js

  • Frameworks and libraries
    • Express.js: a minimal web application framework used for building REST APIs
    • Socket.io: allows us to manage real-time event-based communication using web sockets
  • Tooling
    • For productivity, nodemon 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

Datastore: MongoDB

  • Frameworks and libraries
    • Mongoose: a popular library for using MongoDB from Node.js applications
  • Tooling
    • For visualizing and manipulating data quickly, Studio 3T 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 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 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
  • References

Other Tooling:

  • For managing dependencies, npm is the default for Node.js

Examples:

  • ubclaunchpad/food-doods 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 is React UI framework for easily building React components.
  • Tooling
  • 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 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 can quickly set up application boilerplate
    • Logging: Pino is a low-overhead structured Node.js logger.
  • Tooling

Datastore: Redis

  • Frameworks and libraries
    • Redis 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:

# 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
  • Tooling
    • vue-cli is a great way to kickstart the frontend - just follow the guide
  • 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

Backend: Golang

  • Frameworks and libraries
    • GraphQL: gqlgen 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, which helps a lot during development!
    • Logging: zap 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
  • Considerations
    • If you decide to not go with GraphQL, chi is a lightweight Express-style library for building standard REST APIs.
  • References

Datastore: DynamoDB

Other Tooling: None

Examples:

# Further Reading