Going All Node: A Look at Front-End Tooling

DNNCon 2016 talk

Demo code: https://github.com/mocasalter/goingallnode
Deme site: http://goingallnode.dev2.gravityworksdesign.com/

Transcript

1. @DNNCon Don’t forget to include #DNNCon in your tweets! Going All Node: 
 A Look at Front-End Tooling Monica Salter
 @mocasalter
2. @DNNCon Don’t forget to include #DNNCon in your tweets! gravityworksdesign.com
3. @DNNCon Don’t forget to include #DNNCon in your tweets! OUR WORK
5. @DNNCon Don’t forget to include #DNNCon in your tweets! SIMPLIFYING THE SYSTEM
6. @DNNCon Don’t forget to include #DNNCon in your tweets! SIMPLIFYING THE SYSTEM
7. @DNNCon Don’t forget to include #DNNCon in your tweets! PART 1: NPM AS A BUILD TOOL
8. @DNNCon Don’t forget to include #DNNCon in your tweets!
9. @DNNCon Don’t forget to include #DNNCon in your tweets! What’s a build tool? “In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it… a [build tool] can do most of that mundane work for you—and your team—with basically zero effort.” —gruntjs.com WHAT IS NPM?
10. @DNNCon Don’t forget to include #DNNCon in your tweets! WHAT IS NPM?
11. @DNNCon Don’t forget to include #DNNCon in your tweets! npm = Node Package Manager
 It’s a “package ecosystem” for Node.js
 “Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine” npmjs.com nodejs.org/en WHAT IS NPM?
12. @DNNCon Don’t forget to include #DNNCon in your tweets! From npmjs.com: "npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing." docs.npmjs.com/getting-started/what-is-npm WHAT IS NPM?
13. @DNNCon Don’t forget to include #DNNCon in your tweets! package ≈ module “all modules are packages, but not all packages are meant to be used as modules” WHAT IS NPM?
14. @DNNCon Don’t forget to include #DNNCon in your tweets! WHY USE NPM AS A BUILD TOOL?
15. @DNNCon Don’t forget to include #DNNCon in your tweets! 1. Because it’s already in your build process 2. It leaves you with fewer updating woes 3. It reduces dependency bloat 4. It’s more universally usable 5. Because it frees up your package options blog.keithcirkel.co.uk/why-we-should-stop-using-grunt medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm- scripts-3d6853dd22b8#.6mmefne7f www.pluralsight.com/courses/npm-build-tool-introduction Why use npm as a build tool? WHY USE NPM?
16. @DNNCon Don’t forget to include #DNNCon in your tweets! medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm- scripts-3d6853dd22b8#.6mmefne7f WHY USE NPM?
17. @DNNCon Don’t forget to include #DNNCon in your tweets! blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool “To do the equivalent in Grunt, it'd take a Gruntfile of a few hundred lines, plus… around 10 extra dependencies. It's certainly subjective as to which version would be more readable…I personally think the npm scripts directive is easier to reason about (i.e. I can see all tasks and what they do, at a glance).” —Kieth Cirkel (@Keithamus) WHY USE NPM?
18. @DNNCon Don’t forget to include #DNNCon in your tweets! "With Gulp or Grunt, you must wait for plugin maintainers to provide updates, or fix it yourself. This delays your ability to utilize new versions of modern tools. In contrast, when I use npm scripts, I consume tools directly without an extra layer of abstraction.“ 
 –Cory House (@housecor) medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm- scripts-3d6853dd22b8#.6mmefne7f WHY USE NPM?
19. @DNNCon Don’t forget to include #DNNCon in your tweets! STARTING A NEW NPM PROJECT
20. @DNNCon Don’t forget to include #DNNCon in your tweets! Installing npm Download Node.js and npm comes with it! blog.npmjs.org/post/85484771375/how-to-install-npm STARTING A NEW NPM PROJECT
21. @DNNCon Don’t forget to include #DNNCon in your tweets! Make sure npm and Node.js are up to date In command line 1. Run node -v to check Node.js 2. Run npm -v to check npm docs.npmjs.com/getting-started/installing-node STARTING A NEW NPM PROJECT
22. @DNNCon Don’t forget to include #DNNCon in your tweets! STARTING A NEW NPM PROJECT
23. @DNNCon Don’t forget to include #DNNCon in your tweets! STARTING A NEW NPM PROJECT
24. @DNNCon Don’t forget to include #DNNCon in your tweets! STARTING A NEW NPM PROJECT
25. @DNNCon Don’t forget to include #DNNCon in your tweets! Initialize a New Project 1. Navigate to the folder you want npm to run in (in my case, Portals/_default/Skins/GoingAllNode) 2. In command line, run npm init or npm init 
 --yes for a more barebones install STARTING A NEW NPM PROJECT
27. @DNNCon Don’t forget to include #DNNCon in your tweets! THE PACKAGE.JSON FILE
28. @DNNCon Don’t forget to include #DNNCon in your tweets! This file keeps track of your project's dependencies, like whether you used a linter or a file compressor.
 
 That way when another dev pulls down your project, all they need to do is run npm install and they get the same set of packages that you have. docs.npmjs.com/getting-started/using-a-package.json THE PACKAGE.JSON FILE
29. @DNNCon Don’t forget to include #DNNCon in your tweets! THE PACKAGE.JSON FILE
30. @DNNCon Don’t forget to include #DNNCon in your tweets! THE SCRIPTS OBJECT
31. @DNNCon Don’t forget to include #DNNCon in your tweets! THE SCRIPTS OBJECT “As part of npm's core, it has the npm run-script command (npm run for short). This command dives into your package.json and pulls out the scripts Object. The first argument passed to npm run refers to a property in the scripts object” 
 —Kieth Cirkel (@Keithamus) blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool
32. @DNNCon Don’t forget to include #DNNCon in your tweets! Run a script: npm run-script scriptname Or for short: npm run scriptname THE SCRIPTS OBJECT
33. @DNNCon Don’t forget to include #DNNCon in your tweets! npm run custom or npm run custom -s -s = silent. This keeps npm from logging info from the subtasks, makes the output simpler. docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties THE SCRIPTS OBJECT
34. @DNNCon Don’t forget to include #DNNCon in your tweets! npm run test THE SCRIPTS OBJECT
35. @DNNCon Don’t forget to include #DNNCon in your tweets! • exit 1 = generic error • && = lets you run another command, if the one before it succeeds • ; = lets you run another command regardless of the success of the one before it THE SCRIPTS OBJECT
36. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
37. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
38. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
39. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
40. @DNNCon Don’t forget to include #DNNCon in your tweets! npm install package-name --save-dev
 • pwd = print working directory, aka the "you are here" command • i = short for install • --save-dev = add package to devDependencies RUNNING NPM MODULES
41. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
42. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
43. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
44. @DNNCon Don’t forget to include #DNNCon in your tweets! Exposed Commands 1. Look at the list in node_modules./bin or 2. Navigate to your project folder and run 
 ls node_modules/.bin 3. ls = list directory contents RUNNING NPM MODULES
45. @DNNCon Don’t forget to include #DNNCon in your tweets! uglifyjs --help RUNNING NPM MODULES
46. @DNNCon Don’t forget to include #DNNCon in your tweets! uglifyjs --output ./dist/js/main.js 
 ./src/js/main.js --compress --mangle 
 --lint --screw-ie8 && echo \”uglify was successful!\”” RUNNING NPM MODULES
47. @DNNCon Don’t forget to include #DNNCon in your tweets! • output = tell uglify where to write the compressed file and where to get the uncompressed file • compress = reduce file size by taking out spaces, comments, etc. • mangle = shorten variable names RUNNING NPM MODULES
48. @DNNCon Don’t forget to include #DNNCon in your tweets! • lint = show warnings for bad js • screw-ie8 = don’t include compliance for
 IE6-8 quirks • echo = print a message RUNNING NPM MODULES
49. @DNNCon Don’t forget to include #DNNCon in your tweets! npm run uglify RUNNING NPM MODULES
50. @DNNCon Don’t forget to include #DNNCon in your tweets! RUNNING NPM MODULES
51. @DNNCon Don’t forget to include #DNNCon in your tweets! Before Uglify After Uglify RUNNING NPM MODULES
52. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING THE POSTCSS TASK
53. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING THE POSTCSS TASK npm i postcss --save-dev
54. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING THE POSTCSS TASK
55. @DNNCon Don’t forget to include #DNNCon in your tweets! npmjs.com/package/postcss-cli/tutorial ADDING THE POSTCSS TASK
56. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING THE POSTCSS TASK
57. @DNNCon Don’t forget to include #DNNCon in your tweets! In the node_modules/.bin folder, run 
 ./postcss --help to see its options ADDING THE POSTCSS TASK
58. @DNNCon Don’t forget to include #DNNCon in your tweets! Autoprefixer ADDING THE POSTCSS TASK
59. @DNNCon Don’t forget to include #DNNCon in your tweets! npm i autoprefixer —save-dev ADDING THE POSTCSS TASK
60. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING THE POSTCSS TASK
61. @DNNCon Don’t forget to include #DNNCon in your tweets! postcss --dir ./dist skin.css --use autoprefixer --autoprefixer.browsers \”last 2 versions, ie >= 10\” 
 ./scr/css/*.css ADDING THE POSTCSS TASK
62. @DNNCon Don’t forget to include #DNNCon in your tweets! • dir = the output directory for the CSS file • use = define a postcss plugin to use • autoprefixer.browsers = tell autoprefixer which browsers to prefix for • final parameter = what CSS file to process npmjs.com/package/postcss-cli ADDING THE POSTCSS TASK
63. @DNNCon Don’t forget to include #DNNCon in your tweets! npm run postcss ADDING THE POSTCSS TASK
64. @DNNCon Don’t forget to include #DNNCon in your tweets! Before Autoprefixer After Autoprefixer ADDING THE POSTCSS TASK
65. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING THE POSTCSS TASK
66. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING
68. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING Goals 1. Add some file watching functionality so I don’t need to manually run the tasks for every single change 2. Make the PostCSS and uglify tasks run all at once
69. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING
70. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING npmjs.com/package/watch
71. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING
72. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING watch ‘npm run build:postcss’ ./src/css watch ‘npm run build:uglify’ ./src/js
73. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING
74. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING npm run watch:postcss
75. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING Change Made Run Watch Task Change Applied!
76. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING Goals 1. Add some file watching functionality so I don’t need to manually run the tasks for every single change 2. Make the PostCSS and uglify tasks run all at once
77. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING Run multiple tasks at once
78. @DNNCon Don’t forget to include #DNNCon in your tweets! SIDE NOTE: WHAT IS THE SHELL?
79. @DNNCon Don’t forget to include #DNNCon in your tweets! SIDE NODE: WHAT IS THE SHELL? “Simply put, the shell is a program that takes your commands from the keyboard and gives them to the operating system to perform.” “On most Linux systems a program called bash (which stands for Bourne Again Shell...) acts as the shell program.” —linuxcommand.org
80. @DNNCon Don’t forget to include #DNNCon in your tweets! SIDE NODE: WHAT IS THE SHELL?
81. @DNNCon Don’t forget to include #DNNCon in your tweets! SIDE NODE: WHAT IS THE SHELL?
82. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING parallelshell ‘npm run watch:uglify’ ‘npm run watch:postcss’
83. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING npm run watch
84. @DNNCon Don’t forget to include #DNNCon in your tweets! REFACTORING AND WATCHING
85. @DNNCon Don’t forget to include #DNNCon in your tweets! RECAP
87. @DNNCon Don’t forget to include #DNNCon in your tweets! PART 2: POSTCSS
88. @DNNCon Don’t forget to include #DNNCon in your tweets! WHAT IS POSTCSS postcss.org PostCSS is a build-your-own CSS processor that runs on JavaScript. 
 It works off of lots of little plugins instead of using a monolithic codebase like Sass and Less do.
89. @DNNCon Don’t forget to include #DNNCon in your tweets! & WHAT IS POSTCSS bigbitecreative.com/a-look-into-writing-future-css-with-postcss-cssnext/ twin.github.io/css-pre-vs-post-processing Post-processor Parse and process regular CSS Pre-processor Compile code that is not CSS (like an extension language) into browser-readable CSS
90. @DNNCon Don’t forget to include #DNNCon in your tweets! WHY USE POSTCSS
91. @DNNCon Don’t forget to include #DNNCon in your tweets!
92. @DNNCon Don’t forget to include #DNNCon in your tweets! WHY USE POSTCSS davidtheclark.com/excited-about-postcss “I think [Sass] offers too much — more than enough to become cleverly counterproductive… so if I include Sass at all, I must welcome into my work- home an API that is larger and more complex than I need or want.” —David Clark (@davidtheclark)
93. @DNNCon Don’t forget to include #DNNCon in your tweets! WHY USE POSTCSS sitepoint.com/build-css-preprocessor-postcss ashleynolan.co.uk/blog/postcss-a-review • It’s modular. • Anyone can write plugins for it. No waiting on The Sass Devs for new features or fixes. • It complies really fast! • Tons of cool plugins at postcss.parts
94. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS
95. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 1. PostCSS Simple Vars Enables use of Sass-style variables npmjs.com/package/postcss-simple-vars
96. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 1. PostCSS Simple Vars Before After
97. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 2. PostCSS Easy Import Lets you use the @import rule to pull multiple css files into one. 
 Also has a Globbing property that lets you import whole folders at once. npmjs.com/package/postcss-easy-import
98. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 2. PostCSS Easy Import
99. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 3. PostCSS Nested Unwraps nested rules similar to the way Sass does. npmjs.com/package/postcss-nested
100. Before After
101. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 4. PostCSS math.js Preforms simple math functions npmjs.com/package/postcss-mathjs
102. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 4. PostCSS math.js Before After
103. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 5. PostCSS mqpacker MQ = media query. This plugin combines matching media queries into a single statement. npmjs.com/package/css-mqpacker
104. Before After (with mqpacker)
105. Before After (without)
106. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 5. PostCSS mqpacker sort option = arranges min-width queries from lowest value to highest
107. Before After
108. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 6. PostCSS Mixins “A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.” –Sass guide sass-lang.com/guide npmjs.com/package/postcss-mixins
109. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 6. PostCSS Mixins Every time you call a mixin, another block of code is written in your compiled CSS file. 
 Mixins do NOT save you from outputting the same code multiple times, so be mindful of how you use them!
110. Before
111. After
112. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 7. PostCSS Extend Use extends. 
 Extends are similar to mixins in the way that they make a block of code reusable, but how that code is written in the compiled CSS file is very different. npmjs.com/package/postcss-extend
113. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS 7. PostCSS Extend %classname = silent class. Only shows up in the compiled CSS if it’s called by an @extend
114. Before After
115. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS
116. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS “It is vital that you are forming that relationship around the right characteristics.” 
 —Harry Roberts (@csswizardry) csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/ 7. PostCSS Extend: Mayhem
117. Before After
118. After Open Sans > Andalusia block_fancy ≠ Andalusia
120. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS “The issue here is that I have forced a relationship between unrelated rules… I now have a very unusual source order in which specificity is jumbled up. I am distributing selectors across my codebase for purely circumstantial reasons.” 
 —Harry Roberts (@csswizardry) csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/ 7. PostCSS Extend: Mayhem
121. @DNNCon Don’t forget to include #DNNCon in your tweets! BASIC PLUGINS Mixin or Extend? When in doubt, go with a mixin.
122. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS
123. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS npm i postcss-simple-vars postcss-easy- import postcss-nested postcss-mathjs postcss-mixins postcss-extend css- mqpacker --save-dev
125. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS
126. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS
127. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS
128. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS
129. @DNNCon Don’t forget to include #DNNCon in your tweets! ADDING PLUGINS npmjs.com/package/postcss-mixins
130. @DNNCon Don’t forget to include #DNNCon in your tweets! PLUGIN OPTIONS
131. @DNNCon Don’t forget to include #DNNCon in your tweets! PLUGIN OPTIONS
132. @DNNCon Don’t forget to include #DNNCon in your tweets! config = lets you set a json file to define options for the postcss plugins PLUGIN OPTIONS
133. @DNNCon Don’t forget to include #DNNCon in your tweets! = PLUGIN OPTIONS
134. @DNNCon Don’t forget to include #DNNCon in your tweets! PLUGIN OPTIONS
135. @DNNCon Don’t forget to include #DNNCon in your tweets! RECAP
137. @DNNCon Don’t forget to include #DNNCon in your tweets! SITE FILES & DEMO github.com/mocasalter/goingallnode 
 goingallnode.dev2.gravityworksdesign.com
138. @DNNCon Don’t forget to include #DNNCon in your tweets! THANKS TO ALL OF OUR GENEROUS SPONSORS!