BUILDING WEBSITES WITH BUILDING BLOCKS Per Åström, Øredev 2010

!"#$%&'(#)*+%),"#-.(.#!"

*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#

VOCABULARY surdeg = sourdough

surdegskartan = sourdough map

http://www.flickr.com/photos/liorshapira/2350847573/

RIDE A BIKE!

WifiSushi

Vandrarhem

Jobb

Annons

Camping

Café

Vintage

Kyrko

Pizza

Bad

Hotell

Restaurang

Surdeg?

•No coding

•Useful

•Learn

DOMAIN NAME ! ! ! ! ! ! ! 99 KR

APPLICATION, CMS, TOOLS !! 0 KR

HOSTING ! ! ! ! ! ! ! ! ! 0 KR

WEBSITE !DEVELOPMENT!! ! <10 HOURS

BUDGET SURDEGSKARTAN.SE

GEOLOCATION + #SURDEG

Lat Long

AND TRY #SYSTEMBOLAGET + GEO

DOMAIN NAME ! ! ! ! ! ! ! 99 KR

APPLICATION, CMS, TOOLS !! 0 KR

HOSTING ! ! ! ! ! ! ! ! ! 0 KR

STICKERS + STAMPS !! ! ! ! 2000 KR

BUDGET SURDEGSKARTAN.SE

MARKETING

IT SCALES!

+Lattjolajban.se, Soko.se, Hockeykanalen.se, >150 blogs and more.

41

THE TEAM

PM ruby

/java

pare

ntal le

ave

CTO

css/js

/html

PM

ruby

/java

text-t

v

text-t

v

Features

Maintenance

Features

Maintenance

Time

Cost

Quality

”STANDING ON THE SHOULDERS OF GIANTS”

SaaS = Software as a Service(Disqus, Polldaddy, Lightspun)

PaaS = Platform as a Service(Heroku, Akamai, Google AppEngine)

IaaS = Infrastructure as a Service(Amazon AWS, Citycloud)

EVOLUTION OF PUBLISHING PLATFORMSGENERATION #1 - STATIC FILES

• Static html - Editors needed to know html

• No database

• No reuse of content

• No channel publishing

• Typical Feature: Server Side Include, ftp

• Cause Of Death: Too static and too limited publishing

EVOLUTION OF PUBLISHING PLATFORMSGENERATION #2 - HOME GROWN WITH DB

• Database!

• DIY - typically home made/home grown

• Depended on a few developers

• In the long run: expensive and complicated to develop

• Typical Feature: Tailor made for the own needs

• Cause Of Death: To complicated to continue develop (EOL)

EVOLUTION OF PUBLISHING PLATFORMSGENERATION #3 - A CMS PRODUCT

• A CMS - one product

• Multi channel publishing

• Typically offsprings of internal products

• Closed source

• Expensive (?)

• Typical Feature: A swiss army knife: customize for own needs

• Cause Of Death: Slow development pace, limited upgrade path

EVOLUTION OF PUBLISHING PLATFORMSGENERATION #4 - OPEN PLATFORMS

• Many different products and tools

• Open API:s

• Built to integrate or to be integrated

• Ready for cloud computing

• ”Small pieces connected”

• Open source?

• Typical Feature: Open for integration and agile development

• Cause Of Death: ?

Old platform New platform

Old platformPolopolyXcap

Basefarmsvn

New PlatformPolopolyWordpressDisqusAddthisPolldaddyGoogle APICover it Live

BasefarmAkamaiHerokuAmazon AWSGithub m.fl.

EXAMPLE - CHOOSINGTHE RIGHT PRODUCT

EXAMPLE SAAS - DISQUS

THERE’S AN APP FOR THAT

DISQUS IMPROVEMENTS• Mobile version of Disqus• iPhone-app• More Community functions• Like, Dislike and ”who does

what”• Security improvements with

Trusted Domains• Remake of the Commenting

experience• Updated Wordpress plugins

• Early Adopter Features and Settings

• Rewritten implementation for faster download and rendering

• Better Spam reporting and close commenting features

• Inline Moderating• Yahoo and Facebook login

EXAMPLE SAAS/API - ADDTHIS

EXAMPLE SAAS/API - ADDTHIS

EXAMPLE SAAS/API - CALENDAR

EXAMPLE SAAS/API - CALENDAR

EXAMPLE SAAS/API - CALENDAR

EXAMPLE API - LIGHTSPUN

flipresizerotateformatbackgroundquality}

http://img.lightspun.com/?flip=h&rotate=-45&background=ff00ff&format=png&resize=200x200&key=7d0dc9

5a-dcb6-4bfa-b9d3-c3e3c429080b&source=http://www.tv4.se/polopoly_fs/1.1899558.1289397260!image/2116905483.jpg_gen/derivatives/w450/2116905483.jpg

ADVANTAGES WITH SAAS

• Easy installation

• Easy configuration

• No maintenance

• It scales

• It improves all the time

EXAMPLE PAAS - HEROKU

• $ git push heroku master

-----> Heroku recieving push-----> Rails app detected-----> Launching..... done http://tv4play-production.heroku.com deployed

TRAFFIC

Peak

Average?

zzzzzzz........

$ heroku dynos 1

tv4play-production now running on 1 dyno

$ heroku dynos 24

tv4play-production now running on 24 dyno

$ heroku dynos ??

tv4play-production now running on ?? dyno

DOES IT SCALE?

”For dynos - there is no real limit. !You can already set your app to 100 dynos through the command line "heroku dynos 100". !If you need more, we can up that limit to just about any number you need. !Let us know a week in advance at least, and we'll get your limit increased. !If you're going to need a few thousand, it's best if we can work with

you to understand your demand.”

THERE’S AN APP FOR THAT

(ACTUALLY, THERE ARE AT LEAST TWO APPS)

EXAMPLE PAAS - AKAMAI

WAIT - ITS JUSTLIKE ELECTRICITY?

The definition of cloud computing according to Wikipedia is:

Cloud computing!is!Internet-based!computing, whereby shared resources, software, and information are provided to

computers!and other devices on demand, like the electricity grid.

PICK ONE

FOCUS

hardware OS patches network infrastructure scaling failover redundancy antivirus upgrades capacity

backup installation planning firewall specification design integrate

operations gui SLA maintenancenew features

FOCUS

hardware OS patches network infrastructure scaling failover redundancy antivirus upgrades capacity

backup installation planning firewall specification design integrate

operations gui SLA maintenancenew features

IF YOU USE API’S - BUILD API’S TOO

86

API

PRICELIST

WHATS RUNNING?

88

WHY DO THIS?

Time

Cost

Quality

THANKS FOR LISTENING

per.astrom@tv4.se" " " " " " " " <= Contact

http://twitter.com/perkovich/tv4-http" " <= Twitter

http://github.com/TV4" " " " " " " <= Code

Thanks for help with Surdegskartan: @tedvalentin, @fdqps, @ankerstal, @mptre, @plindberg, @jocap, @lemonadImages: http://www.clker.com/, http://www.flickr.com/photos/liorshapira/2350847573/