A simple stopwatch application which serves as an example of how to migrate an old JavaScript application to modern syntax, features, and technologies.
There is also a TypeScript fork of this project https://github.com/DunedinJS/migrating-to-modern-js-typescript
-
Git
-
Git Bash — if using Windows (included with Git)
-
Node.js version 6.9
Everything probably works with version 4 or higher but has not been checked. Run
node -v
to check your current version. Follow the instructions here to install Node.js -
A text editor with first-class JavaScript support.
Atom, VSCode, and Sublime Text are best.
-
A modern web browser with good debugging tools such as Chrome, Firefox, or Edge.
-
Clone this repository by running
git clone https://github.com/DunedinJS/migrating-to-modern-js.git
-
cd ./migrating-to-modern-js
If using NVM to manage Node.js versions you can also run nvm use
here to
make sure that the correct version is active.
-
Checkout the
00-original
branch by runninggit checkout 00-original
-
Make sure to view the readme file for each branch. These contain any further setup instructions and information about each stage.
-
Explore the code.
Make changes if you'd like. To discard changes before checking out another
branch run git reset --hard HEAD
.
- Checkout the next branch and continue.
Our starting application. Built on Backbone.js and state of the art from late 2010 to around 2013.
- Add NPM for package management
- Remove third-party libraries from repository
- Add Webpack and Babel to compile and bundle modular source code into a single browser-ready script
- Import third-party libraries as modules
- Separate all source code into ES6 modules
- Configure sourcemaps
- Configure Webpack to output bundle with a version hash suffix in its filename
- Configure Webpack to inject script tag into HTML file
- Configure Jest to test application logic and report code coverage
- Add ESLint with Airbnb styleguide rules
- Convert source code to modern syntax
- Convert Backbone's custom class extension to ES6 classes
- Convert child views from Backbone Views to React Components
- Convert main view from a Backbone View to a React Component
- Convert state management from Backbone Model to React state
- Revise tests to cover new logic implementation
- Configure different build environments for development and production
- Configure code optimisation for production builds