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. Clay Smith Developer Advocate, New Relic @smithclay - Managing

    front-end anarchy with build artifacts
  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)
  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.
  4. Case study: Building a single-page app in late 2015 CC

    A ND
  5. Choosing a language • To JavaScript or not to JavaScript?

    • ES6, ES7 or ES-old? • CoffeeScript, ClojureScript, Scala.js • DogeScript, DART CC A ND
  6. Now boarding on platform mobile CC A ND

  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
  8. CC A ND JS Framework (n) - Something to

    argue about at dev conferences.
  9. The battle for ★s 43, 046 29, 029 23, 092

    14, 847, 10/6/15
  10., 10/16/2015

  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
  12. Putting it all together with build tools Screenshot of my

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

  14. Webpack: so on fleek right now (see also: AssetGraph)

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

    about.js custom.woff shared.js Example dependency graph
  16. Also: webpack doesn't care what module load you use. “webpack

    takes modules with dependencies and generates static assets representing those modules.”
  17. bundle splitting! async loading! packaging static assets!

  18. Visualization of the open-source package generator-webapp: (MIT License) So.

    Many. Dependencies.
  19. npm install all-the-things

  20. is 3068 lines long npm list (BSD Licence)

  21. Why does it seem like everyone uses Bootstrap?

  22. CC0 Welcome to iceberg web dev

  23. Build artifacts are here to help CC A ND

  24. An artifact is one of many kinds of tangible

    by-products produced during the development of software.
  25. The /dist folder problem screen capture (MIT License)

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

    commit" • Problem #2: Very, very painful merge conflicts. • ¯\_(ツ)_/¯
  27. The hybrid app problem iOS Android Browser APP

  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. • ¯\_(ツ)_/¯
  29. So just run (gulp || grunt) on the app servers

    before deploy?
  30. grunt-to-heroku I was wrong on StackOverflow.

  31. Best practice: Don't put "transformed" code into VCS... or make

    other people build it.
  32. Artifact repositories - a home for artifacts

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

    "something" that needs the archive Build Artifact Workflow
  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
  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.”
  36. #YOBO You Only Build Once.

  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.
  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.”
  39. Demo

  40. CC A ND Recap

  41. Single page JavaScript is hard. CC A ND

  42. Bundle assets created from your build process. CC A ND
  43. Use an artifact repository to mangage artifacts. CC A ND
  44. Key takeaway: never check transformed JS source into VCS. CC

    A ND
  45. Say hi at the New Relic Booth. Clay Smith Developer

    Advocate, New Relic @smithclay -