Frontend DevOps



JSFoo 2013





\o/

@NetRoY
github.com/netroy




I build Wunderlist
(with a handful of some seriously amazing people)

But, Before we start.


  • 3rd year, 5th edition.
  • Bravo to Hasgeek & BangaloreJS.
  • Bravo to us. We are all awesome


We are JSFoo
We are "teh interwebz"

Time to "Level up"
Time to get involved.

PS: please switch your phones to silent mode atleast





So, What is Dev Ops?

And Why should front-end engineers care?



(╯°□°）╯︵ ┻━┻


part of your job is flipping tables every single day.

Stop doing it live



Server deployments are hard, complicated & probably the least appreciated 
Stop doing things manually, learn to automate
Learn to build replicatable infrastructure.

Automate Automate Automate

Why, again?


Web has evolved in the last few years.
JS is more than just getting that Dynamic-Drive snippet for DHTML magic.


Open Web is a platform, a platform as good as any other.

It's indeed the base of many new platforms.


As web is evolving, so are the apps that are built for it.

But most of our deployment is stuck in the 90s.

Let's evolve the way we deploy these amazing apps.

Take these apps live to millions of users around the world.


Time to stop having a "WebMaster"

Time to take things into our own hands.
Every frontend developer becomes a frontend engineer.

Each of us take responsibility of taking our own code live & automate all of it (because we like being lazy)



Write beautiful code


  • Lint
  • Comments
  • Specs (of all sorts)
  • CI



Be a Jerk


Say "NO" to bad code.

Automate Automate Automate

(use git hooks)



Build/Concat/Minify


  • Templates
  • Stylesheets
  • Language data
  • SVG icons


So many options,

  • requirejs
  • closure-compiler
  • browserify
  • etc....

Time to Deploy


create a zip file
upload it to all the servers
unzip it everywhere over ssh


"NO"


have I said this already?
"Automate Automate Automate"


Better options

  • upload to master server, let all others rsync the changes
  • twitter's Murder/bittorrent https://github.com/lg/murder (probably an overkill)
  • upload to a S3 bucket & trigger a s3cmd sync on all machines (great if you are on ec2)
  • use immutable infrastructure with EC2 or docker http://chadfowler.com/blog/2013/06/23/immutable-deployments




"Caching Bit my Finger"


Edit -> deploy -> ctrl+f5 -> WORKS ON MY MACHINE

Oh Wait, why do the users still have the buggy app?

We forgot to invalidate the cache with one of the million ways that neither of us think about.



Prefetching


load less, render fast, prefetch the rest,
Or even better, do it on demand.

https://developer.mozilla.org/en/docs/Link_prefetching_FAQ


Flush out old code remotely


Force users to move on.
Have full control what users get.

Performance


You probably profile your app before you roll it out 
(You really should, if you don't)

so, Thumbs up for that.

But what about the code that you might be missing out while profiling.

What about the activity that you don't control.


  • Measure Memory usage
  • Measure Page load timings
  • Measure XHR timings

Track


  • interaction events
  • heap usage

Errors


User interact with your app that you never thought of.

window.onerror (yay for the 5th param)

try catch
http://jsperf.com/fn-try-catch
Experiment, Share, Collaborate

Rendering specs


(demo)
Made with Slides.com