EN
fronteers15
Wes Bos – Modern Workflow + Tooling for Front-end Developers #fronteers15
- Lets compare tooling to plumbing
- new type of fitting: Sharkbite
- Lego for plumbing
- snaps together instantly
- can connect any material to copper
- can be redone
- less prone to leaks
- more expensive
- less error prone
- plumbers: too expensive, too new
- changes the industry competely.
- Some people write off tooling as over-engeneering, others see the benefits
- Fine line between tooling for tooling’s sake and tooling to get work done
- Let’s be smart about the tools that we’re using
- Investments need to pay beck
- Overwhelmed? Crying? 😭
- This talk: 😭-> 😃
- Build tools:
- biggest barrier to entry
- a lot
- what are they for
- compiling + converting styles
- concatenation
- test running
- deployment
- anything, really
- two big: grunt, gulp
- npm as a built system by using the CLI commands directly using scripts in the package.js, takes bash
- But probably best used with simple sites
- hard to maintain
- Webpack
- javascript modules focused - gulp meets browserfy
- bit of a hard to learn api
- react community likes it
- What should I use?
- Pick one. Whatever is best for you.
- Personally like gulp
- built speed
- packages available
- easy to understand and author
- overall industry acceptance
- 47% use gulp, 20% don’t use anything - Sass brought people to the built train
- Performance
- Critical: First paint is important
- Purify: Removes unused CSS
- Looks at JS and CSS and finds unused CSS
- Much smaller CSS files
- ImageMin: common interface to 17 different image compression libraries
- Recommendation: MOZJPEG
- Uglify.js: Minifies, compresses and mangles code
- Dependency + Module Management
- We’re seeing a huge shift on how we manage frontend dependencies
- Problem: Many scripts, duplicated, different versions of the same file
- The solution: Modules for javascript
- How does it work
- Install your libraries, ex. npm/bower install jquery
- Write your code, ex. var$ = require('jquery'); or in IE6: import $ from jquery
- Compile into a single or multiple bundles
- Browsify - simple, quickest setup
- WebPack - handles css
- JSPM - client side, close to JS spec
- Stop?! What about Gulp/Grunt?
- They are task runners, one of the tasks will be “bundle javascript”, they can call those bundlers.
- Small modules that do one thing, and one thing well
- Only need ajax, npm install fetch
- Pick and chose from lodash
- Is coded in a way that you can access all methods individually, exports only that module to use
- NPM or Bower?
- Libraries, similar
- NPM for everything!
- Ecosystems coming soon to NPM, helps categorize the modules
- The Future
- JS + CSS evolve rapidly
- Don’t need to wait with future code today
- Wasn’t possible before
- JavaScipt
- ES6/7/Next
- Arrow functions
- let and const for variable declarations
- template strings
- many more
- Babel
- Allows you to write IE6 code but will then compile it to code that will work today.
- gulp-babel
- What about new language features?
- polyfillable require babel/polyfill
- CSS4
- Everyone 😍 SASS, comes to browser
- Nesting
- Scoping
- Variables - CSSnext allows to write in CSS4 and compiles to CSS3
- part of postCSS ecosystem
- quantityQueries helps to work with those, also a postCSS plugin
- Everyone 😍 SASS, comes to browser
- Workflow treats
- Browsersync – like live reload but actually works
- Instant reload
- Includes server with cert for easy local HTTPS
- Proxies existing applications/servers: Wordpess, ruby, python
- Exposes server via local IP, can test on multiple devices
- Syncs clicks, submits, scrolls
- MAGIC
- Sourcemaps
- Code goes through several transforms before it is in the browser
- If there is an error that needs to be traced back
- Sourcemaps is standardized
- Can be used with a lot of plugins
- Browsersync – like live reload but actually works
- Tooling is extremely important
- Everyone should have built process
- Sky is the limit
- Better code