Modern Web Development Workshop

Modern Workflow

Mike Juniper :: Washington DC R&D Center

mjuniper.github.io/presentations/modern-webdev-workflow

github.com/mjuniper/presentations

Automate repetetive tasks

At a minimum, you'll want to automate:

  • linting
  • testing
  • serve/livereload

You will probably also want to automate:

  • JS transpilation
  • CSS preprocessing (less/sass)
  • Image optimization
  • Combining/minifying HTML, CSS, JS
  • Precompile templates
  • Deployment
  • More!

Three general approaches

  1. Build your own lightsaber (with npm, grunt, gulp, etc)
  2. Yeoman
  3. Opinionated Systems (ember-cli, mern, angular-cli, marionette-cli)

Roll yer own

Compose your own system with:

npm

gulp

grunt

mimosa

brunch

Roll yer own

Pros:

Complete control - build it to do exactly what you want.

Cons:

You have to build it yourself.

Will probably take extra effort to get working smoothly cross platform (if just using npm).

Choose this route when:

You have unusual requirements.

You have lots of time.

You are a masochist.

Demo/Hands-on: Roll yer own

Yeoman

Scaffolding system with huge generator ecosystem.

Webapp generator is a great place to start. It comes with:

  • Serve/livereload with BrowserSync
  • Sass preprocessing
  • CSS source maps
  • ES2015 with Babel
  • Image optimization
  • Linting
  • Testing
  • CSS autoprefixing
							
yo webapp

Yeoman

Pros:

Easy to scaffold an app

Extensible - easy to add your own tasks

Cons:

Choosing a generator!

Understanding what's going on in a system somebody else built.

Choose this route when:

There is no opinionated system available for your framework of choice.

You need more flexibility than opinionated systems allow.

Hands-on: Yeoman

  1. 								
npm install -g gulp
npm i -g bower
npm i -g yo
mkdir mwd-yo-workflow && cd mwd-yo-workflow
yo
  2. Choose: 'Install a generator'
  3. Search for/choose: 'webapp'
  4. Choose: 'Webapp' under 'Run a generator'
  5. Choose default options

Hands-on: Yeoman - continued

  1. 								
gulp --tasks //to see the tasks that have been defined by the generator
gulp serve
  2. edit index.html & watch page reload
  3. edit css and watch css reload - without full page reload!
  4. edit js and watch page reload (note that the js source is ES2015)
  5. dig into the gulpfile (which is also ES2015) and try to understand what's going on!
    1. How would you get the tests to run?
    2. Once you have the tests running, figure out how to add a test.
    3. What other tasks can be run?

Opinionated Systems

Use a prebuilt opinionated system tailored to a particular framework:

ember-cli

mern

angular-cli

marionette-cli

							
ember new my-app

Opinionated Systems

Pros:

Opinionated - there is a clearly defined way of accomplishing common tasks.

Cons:

Opinionated - the opinions may not fit your particular use case.

Choose this route when:

You are using one of the frameworks they go with and can live with the opinions.

Hands-on: Opinionated Systems

Pick one and scaffold an app:

ember-cli

mern

angular-cli

marionette-cli

Hands-on: Opinionated Systems - continued

Once you've got an app scaffolded and running:

  1. Edit html, css, js - does the page reload?
  2. How would you get the tests to run?
  3. Once you have the tests running, figure out how to add a test.
  4. What other tasks can be run?