-
Notifications
You must be signed in to change notification settings - Fork 15
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.
The DAWG app is 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 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:
We use Vue for our frontend codebase ✌️For component files, we are fully embracing the composition API. For new components, the composition API should be strictly used. The Vue documentation is a great resource for learning :)
We use Tailwind CSS for styling components with a little vanilla CSS sprinkled on top. But what is Tailwind?
Tailwind CSSis 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 ready 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 📖
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!
PS:
Tailwind CSSworks very well with flex based design!
We do not use vuex for state management. We use a mixture of global, component and extension state to manage the state of the app. Check out the Architecture page for more information about extensions!
The io-ts TypeScript package that helps you validate types at system "boundaries". But what are "boundaries"? In my experience, this is things like localStorage (for web development), async-storage (for React Native) and REST APIs (for frontend and backend development). For example, localStorage allows you to storage key value pairs but the value must be a string. If you want to storage a different data structure (e.g. an array of strings or even a boolean value), you have to stringify the data using JSON.stringify before writing your data to localStorage. After extracting and parsing the same data, how do you know that the data you are receiving is in the same format? What if a month has gone by and you've changed your data structures? This is where io-ts comes in handy. I won't go into details here as they great docs which you can find here.
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 guide, 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.
GitHub Actions are used to automate testing and deployment. These "actions" are always located in the .github/workflows files.
Note: GitHub Actions (along with most GitHub features) are free for public repositories.
All of the tech used in this repository!