Managing front-end anarchy with JavaScript build artifacts

Transcript

1. Clay Smith
   
   Developer Advocate, New Relic
   
   @smithclay - csmith@newrelic.com
   Managing front-end anarchy
   with build artifacts
   

   View Slide

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)
   

   View Slide

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

   View Slide

4. Case study: Building a single-page
   app in late 2015
   CC A ND https://www.flickr.com/photos/jb912/15508099417
   

   View Slide

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
   

   View Slide

6. Now boarding on platform mobile
   CC A ND https://www.flickr.com/photos/mrhayata/8714084144
   

   View Slide

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
   

   View Slide

8. CC A ND https://www.flickr.com/photos/sk8geek/4901169636/
   JS Framework (n) -
   Something to argue about
   at dev conferences.
   

   View Slide

9. The battle for ★s
   43, 046
   29, 029
   23, 092
   14, 847
   github.com, 10/6/15
   

   View Slide

10. google.com/trends, 10/16/2015
    

    View Slide

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
    

    View Slide

12. Putting it all together with
    
    build tools
    Screenshot of my build environment
    

    View Slide

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

    View Slide

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

    View Slide

15. Assets are nodes in a graph
    index.html
    about.html
    header.png
    style.css
    about.js
    custom.woff
    shared.js
    Example dependency graph
    

    View Slide

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
    

    View Slide

17. bundle splitting!
    async loading!
    packaging static assets!
    

    View Slide

18. Visualization of the open-source package generator-webapp: http://npm.anvaka.com/ (MIT License)
    So. Many. Dependencies.
    

    View Slide

19. npm install all-the-things
    

    View Slide

20. honestpullrequest.com
    is 3068 lines long
    npm list
    https://github.com/yeoman/generator-webapp (BSD Licence)
    

    View Slide

21. Why does it seem like everyone
    uses Bootstrap?
    

    View Slide

22. CC0 https://pixabay.com/en/iceberg-antarctica-polar-blue-ice-404966/
    Welcome to iceberg web dev
    

    View Slide

23. Build artifacts are here to help
    CC A ND https://www.flickr.com/photos/curtismacnewton/13826289
    

    View Slide

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

    View Slide

25. The /dist folder problem
    github.com screen capture (MIT License)
    

    View Slide

26. • Problem #1: "Whoops, I forgot to rebuild in this commit"
    
    • Problem #2: Very, very painful merge conflicts.
    
    • ¯\_(ツ)_/¯
    

    View Slide

27. The hybrid app problem
    iOS Android Browser
    APP
    

    View Slide

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

    View Slide

29. So just run (gulp || grunt) on the
    app servers before deploy?
    

    View Slide

30. http://stackoverflow.com/questions/13784600/how-to-deploy-node-app-that-uses-
    grunt-to-heroku
    I was wrong on StackOverflow.
    

    View Slide

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

    View Slide

32. Artifact repositories - a home for
    artifacts
    

    View Slide

33. build artifacts (prod. JS/HTML/CSS)
    repository (cloud storage, GH release, etc)
    "something" that needs the archive
    Build Artifact Workflow
    

    View Slide

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
    

    View Slide

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

    View Slide

36. #YOBO
    You Only Build Once.
    

    View Slide

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.
    

    View Slide

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

    View Slide

39. Demo
    

    View Slide

40. CC A ND https://www.flickr.com/photos/amymctigue/3161095736
    Recap
    

    View Slide

41. Single page JavaScript is hard.
    CC A ND https://www.flickr.com/photos/stanzebla/19332381963
    

    View Slide

42. Bundle assets created from your
    
    build process.
    CC A ND https://www.flickr.com/photos/marfis75/12185501694
    

    View Slide

43. Use an artifact repository to
    mangage artifacts.
    CC A ND https://www.flickr.com/photos/gbaku/475628242
    

    View Slide

44. Key takeaway: never check
    transformed JS source into
    VCS.
    CC A ND https://www.flickr.com/photos/matteocarli/2489736887
    

    View Slide

45. Say hi at the New Relic Booth.
    Clay Smith
    
    Developer Advocate, New Relic
    
    @smithclay - csmith@newrelic.com
    

    View Slide