-
Notifications
You must be signed in to change notification settings - Fork 0
Tech
This section will outline the important technologies that we use for development. A lot of links will be shared (e.g. to articles/documentation) that should be read or at least skimmed through if unfamiliar with the technology.
All of our frontend repositories are written in TypeScript. If you don’t already know, TypeScript is a superset of JavaScript that offers type-checking and compiles to JavaScript. It is pretty important that you know how TypeScript works but if you know how to write JavaScript, TypeScript should be pretty intuitive. Instead of going into detail in this guide, I’m going to link to some nice articles that you should read if you’re unfamiliar with the language.
- TypeScript for JavaScript Programmers is from the official documentation and provides a very nice/short overview of the most essential aspects.
- Porting a React Frontend to TypeScript by Gary Bernhardt which explains why someone would desire writing a frontend in a type checked language.
- Are Tests Necessary in TypeScript? by Gary Bernhardt which helps explain what TypeScript can and cannot check.
- Advanced Types is an essential guide for advanced type usage (which you will see within the repositories). You don’t have to read through this article yet but definitely keep it saved as a bookmark. Here are some of the sections which will be very applicable:
React is the JavaScript framework of choice for new development (although Vue was previously used). If you’ve used other JavaScript frameworks (such as Vue, Svelte or Angular), the transition to using React should be fairly painless. This guide will not really go through any React concepts and will leave that up to Main Concepts guide. Additionally, if you are not yet familiar with hooks, make sure to go through the hooks documentation. Understanding how hooks work is very important to writing good frontend code so be sure to thoroughly go through hooks documentation and/or educational videos. This article does a really neat comparison between hooks and class components which you might find useful 😊
We use Tailwind CSS for styling components with a little vanilla CSS sprinkled on top. But what is Tailwind?
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
We chose Tailwind CSS rather than a component library as it gives us more control/flexibility. Please read through the Core Concepts to ensure you have a good understanding of the Tailwind system (you don’t need to read through everything, use your best judgement while going through the documentation)! While you’re at it, take a look at some of the content in refactoring ui (a website from the creators of Tailwind CSS). They have a great set of design tips, articles and screencasts. If you really want to get into their content, I highly recommend purchasing their book 📖 (edit: ask @Matthew Sampson for our Gray Wolf copy).
The answer, my friend, is blowin' in the Tailwind is a good article that describes someone's transition from unstructured CSS to structured CSS to utility-first CSS.
Whether you’re doing mobile or web development, display: flex will be your best friend for doing your layout. It’ll take some time getting used to but it’s 100% worth it! A Complete Guide to Flexbox is the best article I’ve found as it explains the background, terminology and is a great reference for all of the different CSS flex attributes. Bookmark this link as you will definitely need to reference the documentation while developing!
We do not currently use redux in any of our repositories for state management. Although we might introduce it eventually, redux is usually unnecessary for most applications. Read this article by Kent C. Dodds to understand different ways of managing state (the most important information is near the bottom of the article although it would be a good idea to at least skim the beginning).
rest-ts is actually a library that based off RESTyped. Take a look through the README and make sure that you understand the purpose of this library. It's very important as it's used as an interface with our backend.
With the deprecation of TSLint, ESLint is the defacto linter for the JavaScript ecosystem. Each repository will be configured with a set of rules that the linter will use to lint your code. As mentioned above, it is essential that you use this during development to avoid common errors. For example, React Hooks publishes a Rules of Hooks that are enforced using eslint-plugin-react-hooks which you will need.
Prettier is an absolutely amazing utility (that you will quickly fall in love with) that is used to ensure that all code follows the same format. If you’ve followed the IDE Setup, prettier should automatically run when you save any file. Formatting while saving or before committing code is super important as it ensures a good commit history.
Sentry is one of many great tools for error reporting. Here is the description from their website:
Sentry provides self-hosted and cloud-based error monitoring that helps all software teams discover, triage, and prioritize errors in real-time.
We use Sentry to capture unexpected errors or unexpected states.
GitHub Actions are used to automate testing and deployment. These “actions” are always located in the .github/workflows files. GitHub Actions (along with most GitHub features) are free for public repositories so we don't have to worry about money 🤑
Snowpack is a "modern frontend build tool for faster web development." Traditionally, web development using React is done with Webpack and Parcel; however, Snowpack leverages the web's native module system (ESM) to create a fantastic development environment.