Managing front-end anarchy with JavaScript build artifacts

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

Managing front-end anarchy with JavaScript build artifacts

2ad55a66b8325eb097612c069ab76231?s=128

Clay Smith

October 15, 2015
Tweet

Transcript

  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 https://www.flickr.com/photos/jb912/15508099417
  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 https://www.flickr.com/photos/quinnanya/5012153774
  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 github.com, 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 lanyrd.com,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.” http://webpack.github.io/docs/what-is-webpack.html
  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.

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

    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.”
  17. 39.
  18. 42.

    Bundle assets created from your build process. CC A ND

    https://www.flickr.com/photos/marfis75/12185501694
  19. 43.

    Use an artifact repository to mangage artifacts. CC A ND

    https://www.flickr.com/photos/gbaku/475628242
  20. 44.

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

    A ND https://www.flickr.com/photos/matteocarli/2489736887
  21. 45.

    Say hi at the New Relic Booth. Clay Smith Developer

    Advocate, New Relic @smithclay - csmith@newrelic.com