It can be daunting to get started with a new Javascript web project, because there are so many technologies to use, and they all fit together in different ways. Each technology fills a particular niche.
This project contains various samples showing how to tie modern technologies together to build rich Javascript-powered websites.
The goals for each starter project:
- Minimum, but useful enough to be used as a "starter" template for new projects.
- Should at the very least render an index.html page and use some Javascript.
- Lots of code comments to explain technology choices.
- Be specific about versions of the technologies used.
- Specify an "updated" date, so it's clear how up-to-date a project is.
The starter projects are made up combinations of the following technologies:
- ES-2018 - the latest version of Javascript at the time of writing.
- TypeScript - Modern ES with static type checking.
- Webpack - Reads Javascript file dependencies (eg. imports) and builds bundles that contain all the necessary code.
- Babel - Transpiles modern ES and CSS (and other things) to plain code that the browser understands.
- SCSS - "Sassy CSS", modern CSS with many useful features.
- React - A Javascript library used to build user interfaces.
- Redux - A predictable state management library.
Since the projects themselves aren't of much use (they are only "starters" after all), we assign random names in the format: project-color-animal, just for easy reference.
To get started, find the sample with combination of technologies most relevant to you:
✅ Vanilla Javascript (ES5) ✅ Vanilla CSS 3 ✅ Webpack v4.40
❎ Babel (Not needed because we're using vanilla JS and CSS)
Updated: September 2019
✅ ES2018 ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12
Updated: September 2019
A starter project that uses the following technologies:
✅ TypeScript ✅ Webpack v4.40 ✅ Babel v7.6 ✅ Chai v4.2 ✅ Mocha v6.2 ✅ TS-Node v8.4
Updated: September 2019
✅ TypeScript ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12
Updated: September 2019
✅ ES2018 ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12 ✅ React 16.9
Updated: September 2019
✅ ES2018 ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12 ✅ React 16.9 ✅ Redux 4.0
Updated: September 2019
✅ TypeScript ✅ Webpack v4.40 ✅ Babel v7.6 ✅ SCSS 4.12 ✅ React 16.9 ✅ Redux 4.0
Updated: September 2019
These starter projects will "age" as technologies evolve, so any assistance to update the projects is greatly appreciated.
Existing starter projects can be updated within major versions. For example: Project-Navy-Cricket can be updated to use Webpack v4.50, but when Webpack v5 is released, a brand new starter project should be created.
Secondly, the goal is to keep the projects as lean as possible (but still useful), so if there is any way to "trim the fat" and remove code (eg. node modules) that are not necessary, please delete ruthlessly.