Principles, Backbone and Bottlenose

JUST IN HALSAL L - @JUICE1 0
DIRECTOR OF DEVELOPER PROGRAMS
PRINCIPLES, BACKBONE AND
BOT T LENOSE

DIRECTOR OF DEVELOPER
PROGRAMS @

BUI LDING WEBSI TES SINCE
2002

MANY CL IENTS AND
AS FEW SERVERS AS POSSIBLE

ADVANCED PROCESSING IN BROWSER
• NLP
• Topic Extraction
• Sentiment Analysis
• Interest Classification

MIX THIS WI TH
BACKBONE & SVG
• NLP
• Topic extraction
• Sentiment
• Interest classification
• Backbone.js
• D3.js
• SVG

BIGGEST POWER USERS WERE
MARKET ING AGENCIES

OCTOBER 2 0 1 3
SWI TCH TO ENTERPRISE

Great!
Not Great!
Not Great!
WE FEL T L IKE WE HAD A HUGE BL IND SPOT :
WE ARE GREAT AT NOW, BUT WHAT ABOUT
THE PAST ?
Not Great!
Not Great!
Not Great!

LETS RUN EVERYTHING ON THE SERVER!
AND LETS FEED I T CRAZY AMOUNT OF
MESSAGES!

MANY SERVERS, FEW
C L I E N T S …

OUR ARCHI TECTURE ON I TS
H E A D …

ENTERPRISE REVAMP TOOK 3 MONTHS TO
COMPLETE AND START CHARGING MONEY FOR
I T

( INCIDENTAL )
PRRRRRRINCIPLES
https://www.flickr.com/photos/deerwooduk/579761138

BUI LD PROTOTYPES EARLY
AND OF TEN

HOW WE PROTOTYPED OUR
TREND DETECT ION SYSTEM

PROTOTYPE!
• Just use the backbone/marionette components you need
• Start small and build it out
• If the router isn’t critical for the prototype, postpone adding it!

PRINCIPLE# 2
MINIMISE T IME BETWEEN
CHANGING CODE AND SEEING
RESUL TS
[photo] http://bit.ly/1y4t8nF

FEB 2 0 1 2 HT TP: / /VIMEO.COM/ 3 6 5 7 9 3 6 6
BRET VICTOR TALK

BACKF IN
HT TP: / /GI THUB.COM/BOT T LENOSE - INC/BACKF IN
• require.js
• backbone.js
https://www.flickr.com/photos/mobilestreetlife/8394430829

“Do not dwell in the past, do not dream of the future, concentrate the
mind on the present moment.”
– BUDDHA
[photo] http://bit.ly/1y4t8nF

PRINCIPLE# 3
ISOLATE EVERYTHING, I T WI L L BECOME LEGACY
SOME DAY
Photo by Sakeeb Sabakka, CC-BY-2.0.

MODULAR (PLUGIN)
ARCHI TECTURE
https://www.flickr.com/photos/eepaul/7396791752/

IDEA WAS WE WANT PLUGINS SO THAT USERS
CAN HAVE A VERY CUSTOM EXPERIENCE
DEPENDING ON THEIR NEEDS

THIS FORCED US TO MAKE THESE PLUGINS
SUPER MODULAR AND ISOLATED FROM THE
REST

EVERY NEW COMPONENT
BECAME A PLUGIN

CONCEPTS STOLEN FROM NICHOLAS C. ZAKAS
(SCALABLE JAVASCRIPT APPL ICAT ION
ARCHI TECTURE)
http://youtu.be/vXjVFPosQHw https://www.flickr.com/photos/nicole_hugo/4526479595

AURA. JS WAS FOUND AND SOME
CODE WHERE BORROWED FROM
THERE
http://aurajs.com

MARIONET TE HAS A SWEET COMPONENT SYSTEM
MARIONET TE.MODULE

PUB SUB
https://www.flickr.com/photos/altemark/337248947

Module is missing or broken?
Nothing happens here…

var eventBroker = _.extend({}, Backbone.Events);
eventBroker.on("alert", function(msg) {
alert("Triggered " + msg);
});
eventBroker.trigger("alert", "an event");

eventBroker.on(
“new-project“, folder.addProject);
var eventBroker =
_.extend({}, Backbone.Events);
eventBroker.on(
“new-project“, cta.addProject);

eventBroker.on(
“new-project“, folder.addProject);
var eventBroker =
_.extend({}, Backbone.Events);
eventBroker.trigger(
“new-project”, projectObject);
eventBroker.on(
“new-project“, cta.addProject);

WE CREATED SOMETHING SIMI LAR TO
BACKBONE.EVENT

ANOTHER USEFUL PUB -SUB SYSTEM IS
M A R I O N E T T E ’ S
BACKBONE.RADIO
https://www.flickr.com/photos/altemark/337248947

PRINCIPLE# 4
DON' T DO HUGE
MIGRAT IONS
https://www.flickr.com/photos/dkalo/4564484466

AS LONG AS I TS ISOLATED
I TS OK TO LEAVE OLD CODE LYING
AROUND
https://www.flickr.com/photos/3336/10847066964

REPLACE OLD CODE WHEN YOU WORK ON A
MODULE
https://www.flickr.com/photos/sigfridlundberg/14219989521

PRINCIPLE# 4
ALWAYS BE MIGRAT ING

F INAL PRINCIPLE
DON' T BE DOGMAT IC, BE
PRAGMAT IC

BONUS PRINCIPLE
Q U E S T I O N E V E R Y T H I N G …
WHY?

Q&A YAY!
Me: Justin Halsall
Twitter: @juice10
E-mail: justin@bottlenose.com

Principles, Backbone and Bottlenose

More Related Content

Viewers also liked (8)

Similar to Principles, Backbone and Bottlenose (20)

Recently uploaded (20)

Principles, Backbone and Bottlenose

Editor's Notes