Managing front-end anarchy with JavaScript build artifacts

2ad55a66b8325eb097612c069ab76231?s=47 Clay Smith
October 15, 2015

Managing front-end anarchy with JavaScript build artifacts


Clay Smith

October 15, 2015


  1. 2.

    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)
  2. 3.

    Front-end web dev is </hard> • 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.
  3. 4.

    Case study: Building a single-page app in late 2015 CC

    A ND
  4. 5.

    Choosing a language • To JavaScript or not to JavaScript?

    • ES6, ES7 or ES-old? • CoffeeScript, ClojureScript, Scala.js • DogeScript, DART CC A ND
  5. 7.

    • 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
  6. 9.

    The battle for ★s 43, 046 29, 029 23, 092

    14, 847, 10/6/15
  7. 11.

    • 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,10/6/15 5424 talks
  8. 15.

    Assets are nodes in a graph index.html about.html header.png style.css

    about.js custom.woff shared.js Example dependency graph
  9. 16.

    Also: webpack doesn't care what module load you use. “webpack

    takes modules with dependencies and generates static assets representing those modules.”
  10. 26.

    • Problem #1: "Whoops, I forgot to rebuild in this

    commit" • Problem #2: Very, very painful merge conflicts. • ¯\_(ツ)_/¯
  11. 28.

    • 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. • ¯\_(ツ)_/¯
  12. 33.

    build artifacts (prod. JS/HTML/CSS) repository (cloud storage, GH release, etc)

    "something" that needs the archive Build Artifact Workflow
  13. 34.

    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
  14. 35. “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.”
  15. 37.

    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.
  16. 38. “Carthage can automatically use prebuilt frameworks, instead of building

    from scratch, if they are attached to a GitHub Release on your project’s repository.”
  17. 39.
  18. 42.

    Bundle assets created from your build process. CC A ND
  19. 43.

    Use an artifact repository to mangage artifacts. CC A ND
  20. 44.

    Key takeaway: never check transformed JS source into VCS. CC

    A ND
  21. 45.

    Say hi at the New Relic Booth. Clay Smith Developer

    Advocate, New Relic @smithclay -