principles, backbone and bottlenose

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 ?

Q & A Y A Y !

Me: Justin Halsall

Twitter: @juice10

E-mail: justin@bottlenose.com