This will clone this code using the git version control system. That will, amongst other things, let you switch between different branches (eg, the solution and the start of the exercise)
## Check it's working
Open `index.html` in the browser, and you should find yourself faced with Conway's Game of Life from Tutorial 3.
Open `index.html` in the browser, and you should find yourself faced with Conway's Game of Life from Tutorial 4.
## Set up Webpack
## Install loaders for Vue or React
Open a terminal in the `tutorial-conway-life-t4` directory.
If you're using Vue, the tutorial last week should already have installed the relevant npm modules: vue and vue-loader.
1. Install webpack, and loaders for typescript and vue
If you're using React, though, you'll need to install the modules for react:
3. Create a src directory, and move the typescript files into it
```sh
mkdir src
mv *.ts src/
```
4. Edit `tsconfig.json` to use ECMA2015 as its module loader, node to resolve modules, and to turn on experimental decorators. Also ensure it looks for sources in the `src` subtree.
and edit `tsconfig.json` to tell TypeScript to target React as the Virtual DOM for `.tsx` files
```json
{
...
...
@@ -55,7 +46,8 @@ Open a terminal in the `tutorial-conway-life-t4` directory.
"module":"es2015",
"moduleResolution":"node",
"target":"es5",
"experimentalDecorators": true
"experimentalDecorators":true,
"jsx":"react"
},
"include":[
"./src/**/*"
...
...
@@ -63,123 +55,39 @@ Open a terminal in the `tutorial-conway-life-t4` directory.
}
```
5. Now, let's create `webpack.config.js`. Take a look at the following and see what it does.
```js
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
```
### Now the challenge
6. Before we can run webpack, we're going to need to install its command-line interface. There are two, so let's install the official one
```sh
npm install webpack-cli
```
7. If we run webpack, via `npx webpack` we'll find we get an error. We don't actually have a `src/index.ts` file. So, let's create it and put in it the contents from the script tag in our html:
```ts
render()
```
We should now find that if we run `npx webpack` it generates a single js file `dist/build.js`
Replace the script tag containing the call to `render()` in `index.html` with a script tag to load this file.
Now reload the page, and the code should still work.
Note: some students who've set up npm on their own machine might find they don't have npx (at least, one in the tutorial did).
If so, just imagine you've run npx webpack and keep on going to step 8 -- we won't usually be using the npx command to run
webpack anyway.
8. Next, let's tell NPM that we build our project using webpack. In `package.json`, inside the `scripts` block, add
```json
"build": "webpack",
```
We can now tell npm to watch our project for changes, and rebuild it automatically:
It might be useful to get ready for development by telling npm to watch our project for changes, and rebuild it automatically:
```sh
npm run build -- --watch
```
9. Next, let's start using TypeScript modules. First, we should actually install d3, rather than only its types. If we're using modules, we can't also use globals.
The challenge:
```sh
npm install --save-dev d3
```
And let's alter our index.html to give the button and id, and remove the onclick that relies on a global.
Using *either* React or Vue, create a small block that will let us set up the Game of Life game. We're going to keep the game itself rendered through d3, showing how they exist on the page, but this should have:
* A button that when clicked will create the game (and trigger d3 to rerender it)
* A field for how long (in ms) each tick should be -- default it to 500
* A button that will toggle whether the tick-timer is started or not. This button should only be enabled when the game has been created.
10. In `src/gameOfLife.ts`, let's change the top line to:
For this exercise, we're not going to put the d3-rendered game inside the element controlled by Vue or React -- we'll just have them co-exist in different elements on the same page.
```ts
export default class Life {
```
### How to go about this
and in `src/render.ts`
As is typical, I'd recommend you start just by working out the data structure for what you want to render. Looking at the requirements above, something like this seems appropriate:
```ts
import Life from "./gameOfLife"
import * as d3 from "d3"
```
In render.ts, we'll need to export both the `life` constant and the `render`
function. Because we have two names to export, rather than use `export default`
All going well, if you rebuild the code and then refresh the browser, Life is now working using TypeScript modules and webpack.
### Vue, React, Angular?
Next week, the tutorial solution will be aroudn a challenge: above the d3-rendered
game of life, add some controls using your preferred client-side framework that
will allow you to alter the board's dimensions (resetting the game) and that
will allow you to start and stop a tick-timer moving the game forward automatically.
The next task I would suggest is just creating this object and rendering it to a little UI using your chosen framework. That'll let you fiddle around with the layout.
But for the moment, you have videos to critique, and should get started writing
the TypeScript model of your own app.
\ No newline at end of file
Then, wire up the functionality. Note that you'll probably need to change `life`. At the moment, it's a constant in that file. You will probably want it to be a variable that can be set by calling a function.
