Advanced front-end automation with npm scripts

6 likes2,965 views

This document discusses using npm scripts for front-end automation and builds. It argues that npm scripts provide a simple, cross-compatible way to automate tasks like bundling, transpiling, testing and deployment without additional build tools. Npm scripts take advantage of existing CLI tools and allow decomposing complex automation into simple, composable tasks through lifecycle scripts and npm-run-all. Some tradeoffs are less extensibility and ongoing challenges with cross-platform support, but the approach aims to provide simpler mental models than alternative build systems.

Technology

Advanced front-end automation 
with npm scripts
@k88hudson
Mozilla

“Systems tend to grow, and as they grow, they encroach” 
“Systems tend to expand to fill the known universe.”
—John Gall, The Systems Bible

The more complex and self-sufficient the
automated system, the more difficult it
will be understand and operate.
The Paradoxes and Ironies of Automation, David Wentzel.

http://www.davewentzel.com/content/paradoxes-and-ironies-automation

Advanced front-end automation with npm scripts

1. Takes advantage of the natural interface presented 
by its component parts;
2. Breaks down complex things into simple, 
composable things;
3. Makes compromises intentionally, not
circumstantially
Your system can win, if it:

npm scripts =
shell + node + npm =
magic

npm scripts can:
transpile es2015, transpile jsx, minify/optimize code, optimize svgs, copy,
rename and move files, compile css via a pre-processor, add autoprefixing,
source maps for js/css development, build Android and Firefox OS apps from
source with cordova, run unit tests, run code linting, run style checking,
run test coverage reporting, deploy releases, run watch for developer
environment and live reload dev server, etc. etc. etc.
in twenty lines or less, with zero plugins.

Why is the npm script environment
better at dealing with our problems?

npm run environment
node executables via npmshell $PATH
{npm lifecycle

bash/cmd.exe -> good at:
File i/o
Chaining tasks
Running tasks in series/parallel

Cross-compatible!
rutabaga input.js | uglifyjs > output.js
tomato && cucumber && cauliflower

bash / node
cat / catw
mkdir / mkdirp
rm / rimraf
& / npm-run-all —parallel

A good automated system takes advantage of the 
natural interface presented by its component parts

Most tools already have a cli
browserify
webpack
mocha
lessc
joshing
eslint
sass
uglifyjs
svgo
karma

Browserify
“browserify -d -t reactify ./entry.js -o ./output.js”

module.exports = function(grunt) {
grunt.initConfig({
browserify: {
options: {
debug: true,
transform: ['reactify']
},
files: {
'./output.js': './entry.js'
}
},
});
grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default', ['browserify']);
};

npm version patch -m "Upgrade to %s for lolz"
> commit 522d0 “Upgrade to v0.0.1 for lolz”
> new tag v0.0.1

"scripts": {
"preversion": "npm run test && npm run build”,
"postversion": "npm publish && git push --tags"
}

pre- and post-
npm run potato
> prepotato
SO HUNGRY
> potato
mashing...
done.
> postpotato
YUM YUM

A good automated system breaks down
complex things into simple, composable things

http://www.infoq.com/presentations/Simple-Made-Easy
“Simple Made Easy”

Components of an automated system are simple 
when they have a single, well-defined objective.
 
Good complex tasks are composed 
of well-defined simple ones.

Simpler mental models instead of
performance.

Shell scripting is still hard, especially
maintaining cross-compatibility with Windows.

We need to build more tools, a 
set of common “recipes”… and more?

What can you do?
- Try it out, talk about what’s hard
- Work on cross-platform bugs
- Share your recipes
- File bugs or help improve npm docs

Go forth and script!

Show me what you build @k88hudson

Advanced front-end automation with npm scripts

1. Advanced front-end automation  with npm scripts @k88hudson Mozilla

2. <3 @brycebaril @dark_rost_ruth

3. Who writes code for browsers?

4. I love browsers

5. I hate build tools

6. “Systems tend to grow, and as they grow, they encroach”  “Systems tend to expand to fill the known universe.” —John Gall, The Systems Bible

7. The more complex and self-sufficient the automated system, the more difficult it will be understand and operate. The Paradoxes and Ironies of Automation, David Wentzel. http://www.davewentzel.com/content/paradoxes-and-ironies-automation

9. 1. Takes advantage of the natural interface presented  by its component parts; 2. Breaks down complex things into simple,  composable things; 3. Makes compromises intentionally, not circumstantially Your system can win, if it:

10. Why npm scripts?

11. npm scripts = shell + node + npm = magic

13. npm scripts can: transpile es2015, transpile jsx, minify/optimize code, optimize svgs, copy, rename and move files, compile css via a pre-processor, add autoprefixing, source maps for js/css development, build Android and Firefox OS apps from source with cordova, run unit tests, run code linting, run style checking, run test coverage reporting, deploy releases, run watch for developer environment and live reload dev server, etc. etc. etc. in twenty lines or less, with zero plugins.

14. Let’s dive in!

15. Why is the npm script environment better at dealing with our problems?

16. You already use node, npm

17. npm run package.json usage

18. npm run package.json usage

19. npm run environment node executables via npmshell $PATH {npm lifecycle

20. bash/cmd.exe -> good at: File i/o Chaining tasks Running tasks in series/parallel

21. Cross-compatible! rutabaga input.js | uglifyjs > output.js tomato && cucumber && cauliflower

22. bash / node cat / catw mkdir / mkdirp rm / rimraf & / npm-run-all —parallel

23. npm run: $PATH Works!

24. A good automated system takes advantage of the  natural interface presented by its component parts

25. Plugins add an extra layer

26. Most tools already have a cli browserify webpack mocha lessc joshing eslint sass uglifyjs svgo karma

27. Browserify “browserify -d -t reactify ./entry.js -o ./output.js”

28. module.exports = function(grunt) { grunt.initConfig({ browserify: { options: { debug: true, transform: ['reactify'] }, files: { './output.js': './entry.js' } }, }); grunt.loadNpmTasks('grunt-browserify'); grunt.registerTask('default', ['browserify']); };

30. Webpack

32. npm run environment node executables via npmshell $PATH {npm lifecycle

33. Lifecycle scripts

34. npm install npm publish npm version

35. npm version patch -m "Upgrade to %s for lolz" > commit 522d0 “Upgrade to v0.0.1 for lolz” > new tag v0.0.1

36. "scripts": { "preversion": "npm run test && npm run build”, "postversion": "npm publish && git push --tags" }

37. pre- and post- npm run potato > prepotato SO HUNGRY > potato mashing... done. > postpotato YUM YUM

38. A good automated system breaks down complex things into simple, composable things

39. http://www.infoq.com/presentations/Simple-Made-Easy “Simple Made Easy”

40. Components of an automated system are simple  when they have a single, well-defined objective.   Good complex tasks are composed  of well-defined simple ones.

41. Baseline

42. Sub-tasks

43. Sub-tasks with npm-run-all

44. Name-spaced sub-tasks

45. Complete example

47. What are the trade offs?

48. Simpler mental models instead of performance.

49. Less code, but less extensible

50. Shell scripting is still hard, especially maintaining cross-compatibility with Windows.

51. We need to build more tools, a  set of common “recipes”… and more?

52. What can you do? - Try it out, talk about what’s hard - Work on cross-platform bugs - Share your recipes - File bugs or help improve npm docs

53. Go forth and script! Show me what you build @k88hudson

Advanced front-end automation with npm scripts

More Related Content

Similar to Advanced front-end automation with npm scripts (20)

Recently uploaded (20)

Advanced front-end automation with npm scripts