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.
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.
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
Rendering specs
(demo)
JSFoo 2013
By netroy
JSFoo 2013
- 3,475