# Why Not?

• ## How to Reconnect Web Sockets in a Realtime Web App without Flooding the Server

Realtime web applications is has been a growing trend lately thanks to the technology behind it maturing in the major browsers. Over the next few years, it looks like more and more web apps are going to have realtime features in their UIs. As a developer, this is going to introduce some interesting challenges for us.

One such challenge is what should your app do when your backend becomes unreachable and your WebSocket gets closed. Generally, the best approach here is to gracefully turn off some features and get your application to start trying to reopen the WebSocket connection. Usually this results in some simple code that tries to create a new connection every few seconds:

https://gist.github.com/strife25/9310390

As a client developer, this logic makes a lot of sense and is simple to implement. However, there is a major problem here - every single client uses the same timing logic. This is bad news because of what will happen when your backend service finally comes back online; if everyone is polling at the same interval then they will all try to open a new connection to the backend at close to the same time. For example, say you have a large office (say a few thousand people) that has your web app running the entire day and their web socket connection is lost at the same time. Using the logic above, when the server is accessible again you will have a few thousand clients trying to create a WebSocket connection at exactly the same time. This will result in potentially flooding the server with requests and taking it down again.

A way to solve this problem is to use the Exponential Backoff algorithm. The benefit of this method is that it spreads out the reconnection attempts among the browsers to random intervals instead of everyone reconnecting to the server at the same time.

The algorithm works like so:

1. For k attempts, generate a random interval of time between 0 and 2^k - 1.
2. If you are able to reconnect, reset k to 1
3. If reconnection fails, k increases by 1 and the process restarts at step 1.
4. To truncate the max interval, when a certain number of attempts k has been reached, k stops increasing after each attempt.

An example of this algorithm in action can be found below in Javascript:

https://gist.github.com/strife25/9310539

The logic basically works like so:

1. When the WebSocket connection is closed, create a random time interval between 0 and 1 second.
2. If the connection is unable to re-open, increase the amount of reconnect tries by 1 and generate a new random interval. The interval this time will be a random value between 0 and 3 seconds.
3. Continue steps 1 and 2 until that maximum possible interval reaches 30 seconds. At this point, all future intervals will be a random value between 0 and 30 seconds.
4. Once connection has been re-established, reconnection attempts is reset to 1.

With realtime web apps becoming commonplace, maintaining your network connection to the backend services is an important technique to understand. Fortunately, this problem has already been solved for us and we can utilize a useful technique like Exponential Backoff to help us with this and not flood our servers with connection attempts.

If you’re interested in working on problems like this one and are located in Raleigh/Durham, NC or Indianapolis, IN, feel free to contact me (linus@johnryding.com) - we’re hiring at Interactive Intelligence!

• One of my favorite inspirational bits from Ira Glass.

• ## Github’s Plan for Atom

It was announced yesterday that Github will be releasing their own code editor, Atom. This editor looks interesting and is heavily influenced by the design of Sublime Text and TextMate. Although the editor will be entering a market that is swamped with products, I think Github has larger plans for this product than just providing a new editor for coders.

As some people have already mentioned on Hacker News, I think Github’s ultimate plan for Atom is to provide a tight integration between a coding tool and its suite of products (SCM, bug tracking, etc.). This is a smart plan because I know it works - IBM has been doing this since 2008 with Rational Team Concert(RTC). RTC provides all of the tools a software development team needs to manage a project (SCM, bug tracking, etc.) as well as a web UI to access all of this information from its server. The large value for developers came with its tight integration with Eclipse - I rarely needed to leave my IDE in order to collaborate with my team on bug reports and deliver code.

I fully expect that Github is going to add tight integrations with their services into Atom so that coders will never have to leave the editor. Another aspect of this is that it will give another way for Github to get a foothold into companies to sell their services to. If every developer downloads Atom for free and sees how easy it is to use Github instead of their company’s tools, then these developers will start asking management to move to Github. It’s potentially a great long-term strategy; grassroots movements is a solid plan to get enterprise companies to buy your product.

Atom could benefit Github tremendously as it’s another step towards them owning the entire development experience and getting users more ingrained into their ecosystem of products.

• ## Embedding Gists and Enable Code Syntax Highlighting in your Tumblr Blog

Since I moved my blog to tumblr a couple of years ago, I have been really bummed that there was no easy way to embed syntax highlighted code in a post. The best you could do with a default tumblr theme is have your code embedded in a pre tag.

To get syntax highlighting working there are a couple of methods that I found:

I really liked option #2, but hated how I had to add some special HTML syntax to get the code to work:

``````<div class="gist">https://gist.github.com/1395926</div>
``````

The problem with that code is that I first have to remember to add the wrapping div tag and class. On top of this, it prevents me from using the markdown editor in tumblr, which was the biggest deal breaker for me.

As such, I ended up making a newer version of the snippet embedding logic, called embedgist2.js. With this version, all you need to add to your post is the URL to the gist you wish to embed. Depending on the editor you are using, tumblr will convert this URL into an anchor tag with the appropriate href once it is published. When this happened, my code takes care of the rest.

You can see the code in action below as well as learn how to add it to your theme by just adding a few script tags to your tumblr theme’s HTML.

## Embed Gist Code

https://gist.github.com/strife25/8967034

• ## How to Suppress “Unused Parameter” Warnings in Objective-C and Xcode

I recently turned on the “Unused Parameter” warning in my iPhone project’s build settings in Xcode. This unveiled a LOT of warnings in my codebase, but mostly due to inherited methods in my classes that utilize UIKit (e.g. custom UITableViewControllers).

In order to suppress this warning in your code, add the following line for each of your (purposefully) unused arguments:

• ## Session Notes Roundup of Fluent 2013

I took notes from all of the sessions that I attended on during the Fluent conference last week. Here are the links to each one of them:

# Day 2

• ## Notes from A Practical Introduction to WebRTC (Anant Narayanan)

• Slidedeck
• A set of technologies to enable real time communication in web pages
• Still a spec recommendation - not finalized
• APIs needed to access web camera, P2P networking, etc.
• What can you build?
• Voice and Audio
• Screen Sharing
• Collaborative Editing
• Multiplayer Games
• File Sharing
• P2P CDN
• Need 3 things to do this
• Hardware access (web camera, microphone) - getUserMedia()
• P2P networking APIs - create UDP connection between clients - peerConnection()
• Display data to the end user - mediaStream()
• can render this data in a video or canvas element
• getUserMedia
• next args: the callbacks for success and failure
• widest browser support (opera, chrome, and FF, all under prefixes)
• webRTC is plugin-less, you just need a browser
• PeerConnection
• Create a P2P network channel for audio, video, and data
• high level API hides details of connectivity checks
• UDP channel - NOT TCP
• do have websocket-like API over peerConnection available
• reliable and unreliable data channel modes available
• only supported in Chrome and FF
• createOffer() creates and offer SDP piece of data
• createOffer() is completely async - lots of callbacks
• designed this way because they wanted to give the ability to change the SDP object between offer and answer
• ICE success rate is ~80%
• for the other 20%, TURN is supported
• prefixes are probably going to get dropped in the next 4 to 6 months
• The spec is low level by design, but there are libraries available
• P2P - peerJS
• CDNs built on P2P - peerkit, peerCDN
• user hostile because user is not aware of apps taking the bandwidth from the user
• Easy Audio and Video calls
• att.js
• trilio
• OpenTok on WebRTC - has flash fallback
• conversat.io
• phono
• vLine
• Helper Libraries
• Firebase
• webRTC.io - uses a promises approach to make code look cleaner
• simpleWebRTC - wrapper around createOffer and createAnswer
• Media
• VP8 for video
• Opus for audio - high quality codec for music and real time speech
• spec requires all browsers to supper g711 - the codec used on phone networks
• devs don’t need to worry about codec support unless we try to interoperate with another codec
• PeerConnection automatically chooses the most appropriate codec
• integration with audio data API coming soon
• currently thinking that they’ll have a web worker like API
• Opus is officially in the spec as the official audio codec, VP8 is still in the air, but the hope is to standardize on it
• The P2P connection is secure by default
• limit to message size is dependent on the optimization your app wants to do
• mobile browser support
• in FF for Android nightlies
• Chrome for android supported behind a flag
• The wire protocol is documented, so other end does not have to necessarily be a browser - just something that looks like a browser
• JS API needs to map correctly to what the lower level stack is
• Underlying protocols have reconnect, retry, and events that are fired
• ## Notes from Improving JavaScript Code Quality: Strategies and Tools (Ariya Hidayat)

• Slidedeck
• As a team grows, the application become more complicated
• more copy and pasting occurs
• how do you track code quality over time?
• Multi-layer defense
• use an editor that integrates with JSHint
• Pull Requests
• Automated Testing
• Commit hooks
• Feedback is Important
• feedback cycle between tooling and engineers needs to be small and immediate
• Track Quality Metrics
• Be Reasonable - attack big problems first
• Demo of meta.js
• Demo of Scrubby - live editing
• Composition: Chains of Responsibility
• parser outputs the syntax tree and a code generator outputs the source code
• Quasi-Endless Possibilities
• inspection
• static analysis
• dynamic analysis
• transformation
• Standard Off the Shelf Tools
• Syntax validation
• different from linting - it’s looking to see if the browser will accept the code
• Polluting Variables
• Unused Variables
• Code Complexity - analyze cyclomatic complexity
• jcomplexity.org
• Plato
• Editing Autocomplete
• Scope Visualization
• Rename Refactoring Assistant (esrefactor)
• Code Coverage
• Istanbul
• can place hard thresholds on code coverage
• String literal quotes
• Style Formatter (esformatter)
• helps make the formatting consistent
• Application Structure
• Boolean Trap Finder
• booleans used for choosing between 2 choices
• problem is that it is not readable
• don’t rely on booleans for input if you want readable code
• Nested Ternary Conditionals
• Performance: Measurement Confidence
• Fast = enough?
• Future quality checking ideas
• Copy past (mistake) detector
• Syntax Augmentation
• Syntax Query
• ## Fluent 2013 Thursday Keynote Notes

• Ben Galbraith and Dion Almaer
• Video
• The web has become more complicated (fronted and backend)
• A ton of choices on all aspects of the web applications now
• Abstractions help make us do more interesting work
• Abstractions are useful, but it is important to understand how these abstractions work - don’t just treat them like a black box
• The web doesn’t have a lot of great abstractions that hide us from the complexity that makes our lives more simple
• We see patterns when we look at other abstractions
• C hides us from the electrical aspects of the chips
• iOS abstracts away the complexity of interacting with a multitouch device
• What is the web? is it a publishing or application platform?
• we don’t have good enough primitives - people mix and match components from different libraries
• excited about Google’s fork of Webkit because of how it will try to remove a lot of complexity that Webkit introduced
• Complexity is scary - the more complex a system is, the less predictable it is
• Complexity was Doug Engelbart’s goal in his mother of all demos - he wanted to help humanity cope with complexity
• One of the problems for complexity in web apps is that more decisions need to be made as complexity grows
• As technologists, we end up fighting over very trivial things
• We focus so much on what the user wants out of our products and we delegate too much to UX - it requires collaboration between entire teams.
• The scare with Three Mile Island incident was that the control room was too complex and the root of the human error that occurred
• We have to be mindful of our rituals and make sure that we understand how it enables us to build our products
• Agile works well for the web because it is so easy to get direct feedback from the user
• The web has a powerful advantage compared to other platforms because it has zero gates to getting product in front of customers
• The web still has an ingrained idea of sessions and is extremely focused on never losing data because it wastes the user’s time
• People are enormously sensitive to latency.
• Async helpers
• local storage / app cache
• When people have a direct connection with their software, they are able to enter a flow
• Bill Scott (Clash of the Titans - nodes @ Paypal)
• Video
• NodeJS is an amazing piece of technology from an API and prototyping perspective
• Netflix in 2010 released 16 different UIs for PS3 UI in order to learn which one worked best
• At netflix, learned how to engineer for volatility, change, and learning
• Paypal Culture
• not invented here
• risk averse
• culture of long shelf life
• took a long time to ship a product and forever to take it down
• reason for why the paypal experience has barely evolved
• takes up to 6 weeks to make a text change on the website
• Former Paypal CEO really turned up the dial on risk averse culture
• Tangled up technology
• no thought of rapid experimentation
• Tech Stack
• JSP, java, and proprietary UI (UI had to be written in Java)
• didn’t understand the value of javascript at the time
• stack was not conducive to prototyping
• New DNA at Paypal
• started to experiment with JS tempting
• David Marcus became president of Paypal (total change from risk averse to someone who had a lean mindset)
• first project with David was to reinvent checkout
• Hermes Project
• got team into a single room and operated like a startup
• product design and frontend was in the same room
• used modern tools and sketched a bunch on the whiteboard to code on the fly
• from whiteboard to code => code to usability => learnings => start over
• node and dustJS was core to this - called out as most important technologies to the company
• Steps to make this happen
1. fire up a prototype stack
• wanted to break free of internal tooling and make modern UIs
1. Utilized Bootstrap
• able to create new branded look in a few hours and helped save time with moving sketches to code
1. Used javascript tempting
• chose dusts because they had a good relationship with the core team of dusts
1. Make UI bits portable to legacy
• needed to be able to easily port onto their production UI stack
1. bring node to production
• project kraken
• tried to harden node for paypal
• needed to enable normal paypal services, but in a friendly npm way
1. One stack to rule them all
• launching new product on node and java stack side by side to prove that node can handle the needs of production
• Getting node into your tent
• start like walmart labs or paypal
• do it with talent
• Jesse Freeman (Cross Platform Canvas Games)
• Video
• working on HTML5 games
• originally you needed dedicated hardware in order to play games
• mobile devices are forcing the change of how games are being played
• HTML5 is widely adopted now
• games are viable because plugins are not needed anymore
• biggest problem for HTML5 games now is distribution
• desktop browsers, mobile browsers, web markets, web view / native wrappers, windows store
• demo of Super Jetroid game
• written with Impact.js
• Focus on shipping instead of perfecting
• Nicholas Zakas (A “Thank You” can Change Your Life)
• Video
• Talked about how he got his first book published
• It’s very hard to accomplish things without other people
• Be excellent to each other
• The people you interact with matter
• Mike Hostetler (Remote Working Works!)
• Video
• remote working is a skill that can be learned
• it’s not enough - you need a manager that can understand how to manage remote work
• Benefits of remote work
• more productivity
• more time for family and work/life balance
• 98% reduction in emissions
• definition of word work is overloaded. to appendTo it means:
• level of effort
• location
• it’s important to get the managers to focus on the task first instead of location of where it occurs
• everyone can win - worker is happier, manager gets more productivity, organization is not dependent on local area for talent
• remote working is a skill that can be learned by reaching a common definition of work
• Lea Verou (Everything you wanted to know about Web Standards)
• Video
• Developers should know more about how the standardization process works
• Are all web standards made in W3C?
• IETF makes infrastructure standards
• W3C handles the majority of the languages standards and DOM APIs except for JS core
• What exactly does the W3C do?
• many people believe that all specs are written by W3C staff and all that W3C staffers do is write specs
• specs are written by the working groups
• W3C just sets the process rules
• A working group contains member companies (browser vendors, big websites, and others), W3C staff, and invited experts
• W3C is able to keep standards open because of the contributions from member companies
• W3C staff on working group helps bring news from working group to the community
• less than 10% of working groups are W3C staffers
• anyone can become an invited expert as long as they fill out a applications
• How do working groups make specs?
• working groups collaborate on mailing lists, wikis, IRC, etc.
• weekly teleconference
• quarterly F2F meetings
• every working group has at least 1 chair
• responsible for logistics and decisions
• Spec editors actually write the specs (usually a volunteer in the group)
• when a spec takes too long, it may be because of the spec editor - solution is usually to change the editor
• When does a spec become ready?
• spec starts with an idea, then some debate occurs, and the following outcomes occur:
• accepted
• rejected
• forgotten (happens way more often than it should)
• spec process
1. Editor’s draft (meant to spark discussion)
1. First Public Working Draft
1. Working Draft
1. Last Call Working Draft (tells people that it is last round of feedback, lasts a few weeks to a couple of months)
1. Candidate Recommendation (point where implementors are invited to start implementing, looking for tests, need at least 2 different implementations)
1. Proposed Recommendation (last stage for advisory committee to register any objections)
1. Recommendation
• W3C Transparency
• mailing lists are public
• Specs are free and public
• Telcon and F2F meetings are public
• F2F meetings are often open to auditing
• How Can I contribute?
• mailing lists and tests
• ## Notes Roundup from Fluent Day 1

I took notes from all of the sessions that I attended on day 1 of Fluent. Here are the links to each one of them:

• ## Notes from Classical Inheritance is Obsolete: Hot to Think in Prototypal OO (Eric Elliott)

• JS has something important that other languages lack - a sense of freedom
• different from other languages
• It’s easy to mimic classes in JS
• but none of the libraries that do this have become the defacto standard
• probably because inheritance hierarchies are trouble
• making a small change requires a lot of thought and rework
• probably because hierarchies become tightly coupled
• there is no tighter coupling than between a parent and child class
• duplication by necessity
• many slightly different versions of the same class
• The gorilla / banana problem
• you just want a banana but you end up getting the entire gorilla and jungle
• Golden age of JS
• jQuery, AJAX, module pattern
• Everything was golden until backbone was started to be used at his job
• He really likes backbone, good separation of concerns, elegant and minimal
• but its extend function ends up creating the same problems that is introduced by inheritance
• painful to detangle when Backbone inheritance is used
• JS has inheritance with none of the tight coupling problems
• there’s no class in jQuery, but there is \$.extend()
• Program to an interface and not an implementation
• Favor object composition over class inheritance
• if you are inheriting from a class - your child knows all about the implementation of its parents
• What is a prototype?
• a working sample
• 3 kinds of prototypes
• Delegate prototype (shared methods)
• what’s cool is that you get flyweights for free - properties on the prototype are stored on a single object in memory instead of new instances
• Cloning / Concatentation
• Functional Inheritance
• great for data privacy and encapsulation
• functional mixins
• can completely replace need for super
• Prototypal inheritance is problematic because it’s cumbersome to use at the moment
• can be fixed by utilizing factory functions
• created the stampit library
• specify which prototypes to use
• .methods() for delegation
• .state() for cloning/concatenation
• .enclose() for functional / data privacy
• showed demo of how to create objects with multiple ancestors and inherited private members
• ## Notes from Making It Rock - the Web Audio API (Chris Wilson)

Video of same talk from a different conference

• web audio provides hooks to analyze and visualize audio data on the fly
• web audio is useful for
• Gaming
• App UX feedback
• it’s more immersive if you hear that menu open
• musical applications
• audio processing
• web audio is really lightweight and easily garbage collected - can start playing a sound and you only need to keep a reference to audio object if you want to programmatically stop the audio
• ## Note from Benchmarking the New Front End: How to Quantify Single Page App Performance (Rachel Myers (ModCloth), Emily Nakashima (ModCloth))

Slidedeck

• Late to this talk
• Load the fast stuff first and the slower stuff later
• helped reduce the average page load
• leadership happy with performance numbers
• problem is that the new number is only 90% of the entire page load (didn’t update the performance monitoring)
• turned off performance monitoring for slowest part of site
• Used backbone to progressively load page
• Company leadership was not happy when it looked like that performance monitoring numbers were up for page load (even though everything was better)
• Be aware that ajax and frameworks may adversely affect your performance metrics because it may hide some actions

• Old Performance Tools

• YSlow / PageSpeed Insights
• works well for web optimization rules, but not good for monitoring what happens after the initial page load
• New Relic
• helps to find bottlenecks in the backend
• LogNormal
• uses histograms and medians to help remove outliers from your stats
• fantastic tool that they couldn’t use for their new use case
• WebPageTest
• also built for initial page load
• New things to track

• monitor the loading of single features as they may get loaded a bunch of times in different parts of the page
• determined by tracking the time from the initial load to when ALL features are done loading on the page
• Unresponsiveness (jank)
• poll the browser occasionally and see if it’s usable or not
• hardest to observe
• strategy is to look for moments when the browser isn’t free to take orders
• use setTimeout to set timestamps and see how far apart they fall (call setTimeout every 300ms and look into things when the callback doesn’t execute until 500+ ms)
• Surprise tools to the rescue

• supports custom / user timings - can track arbitrary data and attach it to your metrics
• Circonus
• swiss army knife monitoring tool that ModCloth incorporated into their fronted monitoring tool
• can send arbitrary data with javascript beacons - but doesn’t graph this data at the moment
• they want to use this to place their frontend stats alongside their backend stats
• The Future

• In the post page load era, the tools are not mature enough
• Developers need more discretion to track their feature performance (they are not sure how to automate it)
• Chrome does provide memory usage in its devtools
• They want to widen their metrics dashboard
• Still need to track initial page load times
• ## Notes from Building Web Apps with Knockout.js (Steve Sanderson)

• knockout.js being used in hundreds of prod apps
• mode is just some piece of data on the server
• knockout helps you build a view model - an OO representation of your interface
• knockout is all about keeping your view model and view in sync
• focused (light)
• ONLY deals with helping you build your UIs
• design to be integrated with any data you want to use
• Compatible
• all about legacy support - even supports IE6
• Reactive
• Reactive Programming or The Push Model
• might have a set of things that you are monitoring if they change
• knockout automatically re-evaluates the output of your computed functions as the model and its attributes change
• Gave demo of computed functions
• Summary
• MVVM
• Dependency Tracking / Reactive
• Bindings
• Custom Bindings