JavaScript DevOPS - Automating everything JS

The talk was about front end operations. It talks about the need for automating build tasks and the various means. It also discusses the role of front end operations engineer and how it shouldn't be looked at as a separate role.

This talk was presented at the Bangalore JS meet on Jan 24, '15.

Transcript

1. JavaScript DevOPS Automating everything JS @mananbharara
2. JavaScript DevOPS Automating everything JS @mananbharara
3. “Front-end operations engineers are the enablers of long-term progress” - smashingmagazine.com
4. Why? Front end Back end
5. Why? 40% will leave your site after 3 seconds Loading…
6. Why?
7. Why?
8. Why?
9. Weapons
11. • File based
12. • File based • Excellent community support with thousands of plugins
13. • File based • Excellent community support with thousands of plugins • Emphasis to configuration over code
14. • File based • Excellent community support with thousands of plugins • Emphasis to configuration over code • Aliases
15. • File based • Excellent community support with thousands of plugins • Emphasis to configuration over code • Aliases • Variables
16. • File based • Excellent community support with thousands of plugins • Emphasis to configuration over code • Aliases • Variables • Can be used as a deployment tool as well
26. grunt-concurrent
27. grunt-bower-install
28. Before
29. After
30. grunt-scp
31. grunt-usemin
32. Debugging the debuggable
33. Debugging the debuggable In action
34. { version: 3, file: "script.js.map", sources: [ "app.js", "content.js", "widget.js" ], sourceRoot: "/", names: ["slideUp", "slideDown", "save"], mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..." } Debugging the debuggable http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
38. In memory, to other streams Stream Stream Stream
40. • Stream based
41. • Stream based • Extremely fast due to reduced I/O. Concurrency in-built
42. • Stream based • Extremely fast due to reduced I/O. Concurrency in-built • Code over configuration
43. • Stream based • Extremely fast due to reduced I/O. Concurrency in-built • Code over configuration • Simple In, Out, Watch API
44. • Define tasks with gulp.task()
45. • Define tasks with gulp.task() • Watch the file system for changes with gulp.watch()
46. • Define tasks with gulp.task() • Watch the file system for changes with gulp.watch() • Open files/directories with gulp.src()
47. • Define tasks with gulp.task() • Watch the file system for changes with gulp.watch() • Open files/directories with gulp.src() • Output files/directories with gulp.dest()
52. Page speed insights YSlow
53. @mananbharara github.com/mananbharara