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
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 https://www.flickr.com/photos/jb912/15508099417
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
6. Now boarding on platform mobile CC A ND https://www.flickr.com/photos/mrhayata/8714084144
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 https://www.flickr.com/photos/sk8geek/4901169636/ JS Framework (n) - Something to argue about at dev conferences.
9. The battle for ★s 43, 046 29, 029 23, 092 14, 847 github.com, 10/6/15
10. google.com/trends, 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 lanyrd.com,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.” http://webpack.github.io/docs/what-is-webpack.html
17. bundle splitting! async loading! packaging static assets!
18. Visualization of the open-source package generator-webapp: http://npm.anvaka.com/ (MIT License) So. Many. Dependencies.
19. npm install all-the-things
20. honestpullrequest.com is 3068 lines long npm list https://github.com/yeoman/generator-webapp (BSD Licence)
21. Why does it seem like everyone uses Bootstrap?
22. CC0 https://pixabay.com/en/iceberg-antarctica-polar-blue-ice-404966/ Welcome to iceberg web dev
23. Build artifacts are here to help CC A ND https://www.flickr.com/photos/curtismacnewton/13826289
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.
25. The /dist folder problem github.com 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. http://stackoverflow.com/questions/13784600/how-to-deploy-node-app-that-uses- 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. 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.”
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. 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.”
39. Demo
40. CC A ND https://www.flickr.com/photos/amymctigue/3161095736 Recap
41. Single page JavaScript is hard. CC A ND https://www.flickr.com/photos/stanzebla/19332381963
42. Bundle assets created from your build process. CC A ND https://www.flickr.com/photos/marfis75/12185501694
43. Use an artifact repository to mangage artifacts. CC A ND https://www.flickr.com/photos/gbaku/475628242
44. Key takeaway: never check transformed JS source into VCS. CC A ND https://www.flickr.com/photos/matteocarli/2489736887
45. Say hi at the New Relic Booth. Clay Smith Developer Advocate, New Relic @smithclay - csmith@newrelic.com