JS101 Session 09 February - Build tools + React

[katjad]

The two overriding topics for this day were probably build tools and React. In the coding session, several of us started on React - with one successful creation of a component, plus accidental installation of React Native and the realisation that the new spread operator in ES6 (...) is hard to google..

Before that I talked about adding first gulp and browserify to our project, then moving to webpack. Here a summary

A quick discussion of various build tools

Tasks in a project that make sense automating: For production: Concatenate, minify, compress images etc (to help with performance); during development: linting, automatic reload on save; in general: transpiling if necessary (for example, ES6 to ES5, JSX to JS)

Tools that help with that (only a few!):

1. Npm Manages dependencies, and can also run scripts. Both are defined in package.json file at root level of the project. Commands: npm init -> creates a package.json file npm install (or npm i) [module] -> install a module npm i --save-dev [module] -> install module and save to the package.json file as dev dependency npm i --save [module] install and save as dependency The node modules are stored in the node_modules directory which is automatically created when modules are installed via npm i. This folder is normally not commited to the repository of a project. It is enough to have the package.json. If you are at root level and do npm i the dependencies will automatically be installed.
2. Task runners The most well-known ones are grunt and gulp. The main difference seems to be that with grunt you configure each task and the output is written to disk each time, whereas gulp strings tasks together, keeping the outputs in memory and only writing the final output to disk, making it faster. With grunt you write a configuration object to define the task, with gulp you write node-style functions. Some people argue that you could run most of the tasks just with npm. This is an interesting article already written a while ago. http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt This comment quite interesting in terms of why you would want to use - in this case - gulp after all. http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/#comment-2330244047
3. Client-side dependency managers (bundlers?) I don't know if these have a generic name. In any case, they make it possible to use the CommonJS module style ('require "[module]"') used by node to define dependencies, then wrap the files up in such a way they can run in the browser. There are again two main contenders, browserify, and more recently, webpack. Both can be run from the commandline, or via npm, grunt or gulp etc. I won't go into the differences now.

I have previously not worked much with build tools beyond using what others have set up. For our project, I had a go at introducing them to the existing codebase. You can see the results directly in the code, when you clone the repository :) : https://github.com/CodeHubOrg/organisations-database

The latest changes are now merged. There is some description of the changes in the README. Basically, I used webpack (see 3.), running it via an npm script. Webpack has a configuration file at root level, webpack.config.js. Depending on whether you type npm run webpack or npm run dev-start different configuration objects will be loaded. Note: There is also a babel configuration file (`babel.rc') which declares the needed presets ES2015 and react.

At the moment webpack loads babel to turn ES6 to ES5 and JSX to JS, and bundles all dependencies together in one file. Depending on whether in development or production mode, webpack will just write a bundle, or start its own development server and only keep the bundle in memory. This allows automatic browser refresh when changes to css or React components are saved. There are a lot more tasks that could be added to the process. If you are interested in how the webpack config file is put together, I roughly followed this tutorial mentioned earlier: http://survivejs.com/webpack_react/ Please add any links that were discussed (if you remember). It doesn't need to have to do with the above. Anything we talked about.

Next time we will hear from @mjg17 about working with git. After that we should have everything in place to start working on the actual app :)

[mjg17]

Great write-up, thanks Katja!

[katjad]

Finally googled this link that I had talked about: React roadmap https://github.com/wesbos/react-roadmap

Also, "browserify for webpack users" by substack, the creator of browserify: https://gist.github.com/substack/68f8d502be42d5cd4942 (called by one blogger JS Drama)

[katjad]

As for React, I really like it but also find an interesting question when to use it and when not. What do you really need it for. Perhaps we could make the session after next about React. @gicela?

[katjad]

@mjg17 thanks :)

[wingedeel]

Thanks for the React roadmap, Katja. Its really useful.

[Gicela]

@katjad Sure thing. Let's talk about it at the next session. Still trying to keep up!

[wingedeel]

Found this useful as a very brief React overview (link from Flux for Stupid People as mentioned by Paul): http://blog.andrewray.me/reactjs-for-stupid-people/

[Gicela]

I also found this React abd Redux Cheatsheets that might be useful: https://egghead.io/react-redux-cheatsheets?utm_source=drip&utm_medium=email

[katjad]

Thanks @gicela, downloaded. Also thanks @wingedeel for the link.