Slide 1

Slide 1 text

Clay Smith Developer Advocate, New Relic @smithclay - [email protected] 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

Slide 13

Slide 13 text

{com,trans}pile, optimize *.js, *.css, *.html, *.woff *.js, *.css, templates

Slide 14

Slide 14 text

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

Slide 17

Slide 17 text

bundle splitting! async loading! packaging static assets!

Slide 18

Slide 18 text

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 - [email protected]