Clay Smith
Developer Advocate, New Relic
@smithclay - csmith@newrelic.com
Managing front-end anarchy
with build artifacts
Slide 2
Slide 2 text
About Me
• Lots of web and mobile app development (PagerDuty, Reuters, Flite)
• Been node.js since 0.4
• Dev Advocating at New Relic (focus on mobile and JS)
Slide 3
Slide 3 text
Front-end web dev is
• Building JavaScript apps is complicated and changes fast.
• Complexity and constant change introduce new modes of failure.
• Build artifacts simplify workflow. This talk is all about them.
Slide 4
Slide 4 text
Case study: Building a single-page
app in late 2015
CC A ND https://www.flickr.com/photos/jb912/15508099417
Slide 5
Slide 5 text
Choosing a language
• To JavaScript or not to
JavaScript?
• ES6, ES7 or ES-old?
• CoffeeScript, ClojureScript, Scala.js
• DogeScript, DART
CC A ND https://www.flickr.com/photos/quinnanya/5012153774
Slide 6
Slide 6 text
Now boarding on platform mobile
CC A ND https://www.flickr.com/photos/mrhayata/8714084144
Slide 7
Slide 7 text
• Do I build a separate app?
• Do I use build a native (Swift/Java) or hybrid app (PhoneGap)?
• If I build a single-page app, do I use a responsive framework?
• How do I test this on different mobile devices?
Difficult mobile app questions
Slide 8
Slide 8 text
CC A ND https://www.flickr.com/photos/sk8geek/4901169636/
JS Framework (n) -
Something to argue about
at dev conferences.
Slide 9
Slide 9 text
The battle for ★s
43, 046
29, 029
23, 092
14, 847
github.com, 10/6/15
Slide 10
Slide 10 text
google.com/trends, 10/16/2015
Slide 11
Slide 11 text
• 245 talks and events on Ember.js
• 746 talks and events on Backbone
• 777 talks and events on React.js
• 1222 talks and events on Angular
• 2434 talks and events on jQuery
lanyrd.com,10/6/15
5424 talks
Slide 12
Slide 12 text
Putting it all together with
build tools
Screenshot of my build environment
Webpack: so on fleek right now
(see also: AssetGraph)
Slide 15
Slide 15 text
Assets are nodes in a graph
index.html
about.html
header.png
style.css
about.js
custom.woff
shared.js
Example dependency graph
Slide 16
Slide 16 text
Also: webpack doesn't care what module load you use.
“webpack takes modules with
dependencies and generates static
assets representing those modules.”
http://webpack.github.io/docs/what-is-webpack.html
Visualization of the open-source package generator-webapp: http://npm.anvaka.com/ (MIT License)
So. Many. Dependencies.
Slide 19
Slide 19 text
npm install all-the-things
Slide 20
Slide 20 text
honestpullrequest.com
is 3068 lines long
npm list
https://github.com/yeoman/generator-webapp (BSD Licence)
Slide 21
Slide 21 text
Why does it seem like everyone
uses Bootstrap?
Slide 22
Slide 22 text
CC0 https://pixabay.com/en/iceberg-antarctica-polar-blue-ice-404966/
Welcome to iceberg web dev
Slide 23
Slide 23 text
Build artifacts are here to help
CC A ND https://www.flickr.com/photos/curtismacnewton/13826289
Slide 24
Slide 24 text
https://en.wikipedia.org/wiki/Artifact_(software_development)
An artifact is one of many kinds of
tangible by-products produced during
the development of software.
Slide 25
Slide 25 text
The /dist folder problem
github.com screen capture (MIT License)
Slide 26
Slide 26 text
• Problem #1: "Whoops, I forgot to rebuild in this commit"
• Problem #2: Very, very painful merge conflicts.
• ¯\_(ツ)_/¯
Slide 27
Slide 27 text
The hybrid app problem
iOS Android Browser
APP
Slide 28
Slide 28 text
• Multiple platforms and targets need some combination (and
potentially different versions) of JavaScript, CSS, HTML.
• Don't want to check in transformed source code.
• Don't want to make Xcode/Android do javascript builds.
• ¯\_(ツ)_/¯
Slide 29
Slide 29 text
So just run (gulp || grunt) on the
app servers before deploy?
Slide 30
Slide 30 text
http://stackoverflow.com/questions/13784600/how-to-deploy-node-app-that-uses-
grunt-to-heroku
I was wrong on StackOverflow.
Slide 31
Slide 31 text
Best practice: Don't put
"transformed" code into VCS...
or make other people build it.
Slide 32
Slide 32 text
Artifact repositories - a home for
artifacts
Slide 33
Slide 33 text
build artifacts (prod. JS/HTML/CSS)
repository (cloud storage, GH release, etc)
"something" that needs the archive
Build Artifact Workflow
Slide 34
Slide 34 text
Case study: npm
• npm doesn't want you to annoy people who use your package
with the details of how you built it.
npm package npm registry you
publish install
Slide 35
Slide 35 text
https://www.npmjs.org/doc/misc/npm-scripts.html
“The advantage of doing [compilation,
transformation, etc] at prepublish time
instead of preinstall or install time is that
they can be done once, in a single
place, and thus greatly reduce
complexity and variability.”
Slide 36
Slide 36 text
#YOBO
You Only Build Once.
Slide 37
Slide 37 text
Case study: Carthage
• Carthage is a new dependency manager for iOS.
• It compiles Swift or Objective-C code and produces dynamic
frameworks that can be used by other projects.
Slide 38
Slide 38 text
https://github.com/Carthage/Carthage
“Carthage can automatically use
prebuilt frameworks, instead of building
from scratch, if they are attached to a
GitHub Release on your project’s
repository.”
Slide 39
Slide 39 text
Demo
Slide 40
Slide 40 text
CC A ND https://www.flickr.com/photos/amymctigue/3161095736
Recap
Slide 41
Slide 41 text
Single page JavaScript is hard.
CC A ND https://www.flickr.com/photos/stanzebla/19332381963
Slide 42
Slide 42 text
Bundle assets created from your
build process.
CC A ND https://www.flickr.com/photos/marfis75/12185501694
Slide 43
Slide 43 text
Use an artifact repository to
mangage artifacts.
CC A ND https://www.flickr.com/photos/gbaku/475628242
Slide 44
Slide 44 text
Key takeaway: never check
transformed JS source into
VCS.
CC A ND https://www.flickr.com/photos/matteocarli/2489736887
Slide 45
Slide 45 text
Say hi at the New Relic Booth.
Clay Smith
Developer Advocate, New Relic
@smithclay - csmith@newrelic.com