PRINCIPLES, BACKBONE AND BOTTLENOSE JUSTIN HALSALL - @JUICE10 DIRECTOR OF DEVELOPER PROGRAMS
Jul 08, 2015
P R I N C I P L E S , B A C K B O N E A N D
B O T T L E N O S E
J U S T I N H A L S A L L - @ J U I C E 1 0
D I R E C T O R O F D E V E L O P E R P R O G R A M S
W H O A M I ?
D I R E C T O R O F D E V E L O P E R
P R O G R A M S @
B U I L D I N G W E B S I T E S S I N C E
2 0 0 2
P R O G R A M M I N G S I N C E 2 0 0 4
U S I N G B A C K B O N E S I N C E 2 0 1 2
B O T T L E N O S E H I S T O R Y
C O N S U M E R P R O D U C T
S M A R T D A S H B O A R D
M A N Y C L I E N T S A N D
A S F E W S E R V E R S A S P O S S I B L E
A D V A N C E D P R O C E S S I N G I N B R O W S E R
• NLP
• Topic Extraction
• Sentiment Analysis
• Interest Classification
M I X T H I S W I T H
B A C K B O N E & S V G
• NLP
• Topic extraction
• Sentiment
• Interest classification
• Backbone.js
• D3.js
• SVG
B I G G E S T P O W E R U S E R S W E R E
M A R K E T I N G A G E N C I E S
S W I T C H T O E N T E R P R I S E
O C T O B E R 2 0 1 3
W E F E L T L I K E W E H A D A H U G E B L I N D S P O T :
W E A R E G R E A T A T N O W , B U T W H A T A B O U T
T H E P A S T ?
Great!
Not Great!
Not Great!
Not Great!
Not Great!
Not Great!
L E T S R U N E V E R Y T H I N G O N T H E S E R V E R !
A N D L E T S F E E D I T C R A Z Y A M O U N T O F
M E S S A G E S !
M A N Y S E R V E R S , F E W
C L I E N T S …
O U R A R C H I T E C T U R E O N I T S
H E A D …
E N T E R P R I S E R E V A M P T O O K 3 M O N T H S T O
C O M P L E T E A N D S T A R T C H A R G I N G M O N E Y F O R
I T
B O T T L E N O S E T O D A Y
P R I N C I P L E S
P R R R R R R I N C I P L E S
( I N C I D E N T A L )
https://www.flickr.com/photos/deerwooduk/579761138
P R O T O T Y P E !
P R I N C I P L E # 1
B U I L D P R O T O T Y P E S E A R L Y
A N D O F T E N
T R E N D D E T E C T I O N S Y S T E M
H O W W E P R O T O T Y P E D O U R
P R O T O T Y P E !
• 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!
M I N I M I S E T I M E B E T W E E N
C H A N G I N G C O D E A N D S E E I N G
R E S U L T S
P R I N C I P L E # 2
[photo] http://bit.ly/1y4t8nF
H O T S W A P
B R E T V I C T O R T A L K
F E B 2 0 1 2 H T T P : / / V I M E O . C O M / 3 6 5 7 9 3 6 6
H T T P : / / B I T . L Y / 1 V A T P R X
B A C K F I N
• require.js
• backbone.js
H T T P : / / G I T H U B . C O M / B O T T L E N O S E - I N C / B A C K F I N
https://www.flickr.com/photos/mobilestreetlife/8394430829
– B U D D H A
“Do not dwell in the past, do not dream of the future, concentrate the
mind on the present moment.”
[photo] http://bit.ly/1y4t8nF
I S O L A T E E V E R Y T H I N G , I T W I L L B E C O M E L E G A C Y
S O M E D A Y
P R I N C I P L E # 3
Photo by Sakeeb Sabakka, CC-BY-2.0.
M O D U L A R ( P L U G I N )
A R C H I T E C T U R E
https://www.flickr.com/photos/eepaul/7396791752/
I D E A W A S W E W A N T P L U G I N S S O T H A T U S E R S
C A N H A V E A V E R Y C U S T O M E X P E R I E N C E
D E P E N D I N G O N T H E I R N E E D S
T H I S F O R C E D U S T O M A K E T H E S E P L U G I N S
S U P E R M O D U L A R A N D I S O L A T E D F R O M T H E
R E S T
E V E R Y N E W C O M P O N E N T
B E C A M E A P L U G I N
C O N C E P T S S T O L E N F R O M N I C H O L A S C . Z A K A S
( S C A L A B L E J A V A S C R I P T A P P L I C A T I O N
A R C H I T E C T U R E )
http://youtu.be/vXjVFPosQHw https://www.flickr.com/photos/nicole_hugo/4526479595
A U R A . J S W A S F O U N D A N D S O M E
C O D E W H E R E B O R R O W E D F R O M
T H E R E
http://aurajs.com
M A R I O N E T T E . M O D U L E
M A R I O N E T T E H A S A S W E E T C O M P O N E N T S Y S T E M
P U B S U B
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");
var eventBroker =
_.extend({}, Backbone.Events);
eventBroker.on(
“new-project“, folder.addProject);
eventBroker.on(
“new-project“, cta.addProject);
var eventBroker =
_.extend({}, Backbone.Events);
eventBroker.on(
“new-project“, folder.addProject);
eventBroker.on(
“new-project“, cta.addProject);
eventBroker.trigger(
“new-project”, projectObject);
B A C K B O N E . E V E N T
W E C R E A T E D S O M E T H I N G S I M I L A R T O
M A R I O N E T T E ’ S
B A C K B O N E . R A D I O
A N O T H E R U S E F U L P U B - S U B S Y S T E M I S
https://www.flickr.com/photos/altemark/337248947
D O N ' T D O H U G E
M I G R A T I O N S
P R I N C I P L E # 4
https://www.flickr.com/photos/dkalo/4564484466
I T S O K T O L E A V E O L D C O D E L Y I N G
A R O U N D
A S L O N G A S I T S I S O L A T E D
https://www.flickr.com/photos/3336/10847066964
R E P L A C E O L D C O D E W H E N Y O U W O R K O N A
M O D U L E
https://www.flickr.com/photos/sigfridlundberg/14219989521
A L W A Y S B E M I G R A T I N G
P R I N C I P L E # 4
D O N ' T B E D O G M A T I C , B E
P R A G M A T I C
F I N A L P R I N C I P L E
Q U E S T I O N E V E R Y T H I N G …
B O N U S P R I N C I P L E
W H Y ?