UBC Launch Pad Documentation

# Web Groundwork

WARNING

This page is a work in progress - see our planning document.

# 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

TODO

# 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