Frontend DevOps

JSFoo 2013



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)


  • 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


have I said this already?
"Automate Automate Automate"

Better options

  • upload to master server, let all others rsync the changes
  • twitter's Murder/bittorrent (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

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


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

Flush out old code remotely

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


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


  • interaction events
  • heap usage


User interact with your app that you never thought of.

window.onerror (yay for the 5th param)

try catch
Experiment, Share, Collaborate

Rendering specs


JSFoo 2013

By netroy