Skip to content

Instantly share code, notes, and snippets.

@wolframkriesing

wolframkriesing/agenda.md

Last active August 1, 2016 20:12
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wolframkriesing/8b2dc5182d334ea730db to your computer and use it in GitHub Desktop.
Save wolframkriesing/8b2dc5182d334ea730db to your computer and use it in GitHub Desktop.
Download ZIP
ES6 + React.js workshop
Raw
agenda.md

Sign up for July 6+7th here
Trainer: @WolframKriesing, uxebu
Location: Munich, Germany

Goal of the workshop

Create and deploy a web application integrating the latest features of the upcoming JavaScript version ECMAScript6 (ES6) and test-driven development (TDD) in your workflow from the beginning and deploying a real app.

  • deploy continuously
  • go small steps
  • iterate fast
  • commit+push often
  • use TDD where useful

The technologies used will be:

  • nodejs,
  • npm,
  • browserify (for bundling),
  • ECMAScript6 with babeljs (the new version of JS),
  • react.js (as the view and for server-side rendering),
  • mocha (as testing framework)
  • travis (for continuous integration and deployment)

After this workshop you will have a good overview of ES6 especially in use with react.js. You will have used the ES6 module system to properly structure your project. Unit tests and TDD will easily integrate in your workflow and setting it up won't cost you time for your next project. NPM as the central tool for building, bundling and various tasks will be in your toolbox.

Day1

Project setup

  • git init
  • npm init
  • npm install: mocha
  • write a failing test

Setup npm scripts

  • npm test to run mocha tests
  • npm lint using eslint, jscs

Hook up external services

  • travis for build status
  • embed travis badge, to have build status on the project site
  • maybe quality services like: bithound, codacy, ...

Setup browserify

  • use babelify
  • write the npm run build task
  • write npm task for watcher, to automatically build on changes (for js, css, ...)

Start to write the app

  • intro to: ES6 modules and react.js
  • create HTML+CSS (will be provided mostly)
  • build files = ES6 modules
  • make the first thing render using react.js

Deploy static page using gh-pages

  • setup gh-pages to push to it and serve the app
  • enable travis to auto deploy on every green test run

Day 2

More ES6 features

  • intro to: destructuring, arrow functions, block scope, class, template strings, rest+spread operators
  • doing prepared katas for each, to not just see but also use them

Move forward the app

  • more TDDing on app features
  • apply the ES6 know how

Architecture discussion

  • introduce react's server-side rendering feature
  • analyze current apps, discuss necessary changes for making it server-side renderable
  • modify apps to enable server-side rendering

Enable server-side rendering in the build process

  • adapt the build/npm scripts
  • deploy statically a server-side rendered app
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment