Dependencies Stack

The goal is to create as light a stack as possible so users don't have to use many resources to load the tool and so servers don't need to have tons of storage space and memory just for the app to run—storage space should be for storing data!

That said, there are some dependencies that are required for making everything work. To stay in line with the "light as possible" mantra, the goal should be to only use dependencies that are required and to only use dependencies that we utilize a majority of (i.e. not using something like jQuery or LoDash when all you need is one or two functions from the library). It also includes putting in the effort to find the lightest possible alternatives for things and when that doesn't work, making our own script that does what we need and only what we need.

Here is the current tech stack and a short description of what each does and is for (2019-09-10: This needs to be updated!):

Dev

Dev dependencies are tools that are installed on the developer's computer and does not get included into a bundle that the user needs to load on the front-end.

Utilities

• concurrently
  • Enables running multiple tasks at once. Used in npm run dev to bundle the front end and serve the back end without opening multiple terminal windows/tabs.
• rimraf
  • A platform-independent rm -rf function for clearing out build folders and caches that could be causing problems.
• sequelize-erd
  • Used to generate sequelize models into a database diagram that shows relationships between tables.

Dev Tools

• choo-devtools
  • Exposes the Choo object to the window in the front end, enabling debugging of states and events.
• faker
  • Generates all sorts of fake data for testing.

Project Bundling

• parcel-bundler
  • Bundles the front end JavaScript together into a single minified file (or one per reference in index.html) and the Sass/CSS into a file that all goes into a public folder, then puts the reference into the resulting public/index.html file.
• parcel-plugin-goodie-bag
  • Provides polyfills for Promise and fetch that parcel-bundler uses to load modules in the resulting bundled files so browsers like IE11 can actually load the files.
• autoprefixer
  • Allows parcel-bundler to add prefixes to the resulting CSS for browser-specific styling oddities like -moz- and -webkit-.
• sass
  • Allows us to use .scss files for styling that parcel-bundler converts into regular CSS, which is simply a much nicer experience for writing CSS.
• sharp
  • Processes images from one format into different formats and image resolutions. Used for social images and logos.

Front End

Frontend dependencies are things that are bundled into the resulting JavaScript bundle and help us do interesting things that are a little bit harder or more time-intensive to write ourselves.

• choo
  • A small (4kb) JavaScript framework that is easy to use and small enough to justify using in just about any project.
• picnic
  • A small (<10kb) CSS framework that provides a nice base for styling to build off of.
• Fontello
  • A tool for creating subsets of icon fonts so that we only force users to download the icons that are actually used and nothing more.
• Remissis Font
  • Preliminary font choice for logos. Free license, but prevents embedding the font in websites.
• babel-polyfill
  • A collection of scripts that provide older browsers with new JavaScript functionality. May be redundant when used with Polyfill.io?

Backend

Backend dependencies are used as-is by Node and live in the server/ folder.

Server

• fastify
  • A web framework for serving JSON api data quickly and efficiently using Promises. Handles routing and serves the front-end files as static files.
• fastify-caching
  • For modifying HTTP cache headers, but I don't think it's actually used and I don't understand it yet.
• fastify-compress
  • Used to gzip what is served to the browser for smaller bandwidth.
• fastify-cookie
  • Used exclusively to handle user login sessions by storing an HTTP only cookie containing a JWT with their user data.
• fastify-helmet
  • Adds HTTP headers important for security.
• fastify-jwt
  • Generates and reads the JSON Web Token from logged in users to determine access.
• fastify-plugin
  • Used to enable custom plugins for Fastify. Specifically used for the scripts in server/fastify-plugins/ to handle required plugins that are not kept up-to-date by the original creator.
• fastify-static
  • Used to serve the bundled output in public for the front end.
• nodemailer
  • Enables sending emails via an email server. If email_ settings are not set up in server/config.json, it is unused.

Database

• sequelize
  • Used to access any of the available database servers for Readlebee. Always returns and deals with Promises, which makes it great for fastify.
• mysql2
  • The MySQL connector for Node. Used by sequelize if server/config.json is set to use "db_engine": "mysql".
• pg
  • The PostgreSQL connector for Node. Used by sequelize if server/config.json is set to use "db_engine": "pg".
• pg-hstore
  • Used by sequelize to format data correctly for PostgreSQL.
• sqlite
  • A SQLite3 connector for Node that uses ES6 promises more appropriate for sequelize than the raw sqlite3 package. Used by sequelize if server/config.json is set to use "db_engine": "sqlite" (the default).

Utilities

• cross-env
  • Used to flag the NODE_ENV environment variable in any major operating system for toggling dev vs. production behavior.
• make-promises-safe
  • Adds an unhandledRejection handler that prevents filenames form being leaked if a rejected Promise does not have a catch() set up for it.
• marked
  • The Markdown parser, used in this project to render full page content in server/i18n/locales/{lang}/pages/.
• node-fetch
  • Used to enable external calls consistent with the front end API of window.fetch().