Øredev 2010. About Surdegskartan.se (personal project) and TV4 (professional work) and how to build websites on API, SaaS, PaaS.

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

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

3. *+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#
*+%#*+%#*+%#*+%#*+%#*+%#*+%#*+%#

4. VOCABULARY
surdeg = sourdough
surdegskartan = sourdough map
http://www.flickr.com/photos/liorshapira/2350847573/

5. RIDE A BIKE!

9. WifiSushi
Vandrarhem
Jobb
Annons
Camping
Café
Vintage
Kyrko
Pizza
Bad
Hotell
Restaurang
Surdeg?

10. •No coding
•Useful
•Learn

17. DOMAIN NAME !! ! ! ! ! ! 99 KR
APPLICATION, CMS, TOOLS !! 0 KR
HOSTING ! ! ! ! ! ! ! ! ! 0 KR
WEBSITE !DEVELOPMENT!! ! <10 HOURS
BUDGET SURDEGSKARTAN.SE

29. GEOLOCATION + #SURDEG

30. Lat Long

34. ANDTRY
#SYSTEMBOLAGET + GEO

38. DOMAIN NAME !! ! ! ! ! ! 99 KR
APPLICATION, CMS, TOOLS !! 0 KR
HOSTING ! ! ! ! ! ! ! ! ! 0 KR
STICKERS + STAMPS !! ! ! ! 2000 KR
BUDGET SURDEGSKARTAN.SE

39. MARKETING

40. IT SCALES!

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

42. THETEAM
PM
ruby/java
parentalleave
CTO
css/js/htm
l
PM
ruby/java
text-tv
text-tv

43. Features
Maintenance

44. Features
Maintenance

45. Time
Cost
Quality

46. ”STANDING ONTHE
SHOULDERS OF GIANTS”

47. 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)

48. EVOLUTION OF PUBLISHING PLATFORMS
GENERATION #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

49. EVOLUTION OF PUBLISHING PLATFORMS
GENERATION #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)

50. EVOLUTION OF PUBLISHING PLATFORMS
GENERATION #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

51. EVOLUTION OF PUBLISHING PLATFORMS
GENERATION #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: ?

52. Old platform New platform

53. Old platform
Polopoly
Xcap
Basefarm
svn
New Platform
Polopoly
Wordpress
Disqus
Addthis
Polldaddy
Google API
Cover it Live
Basefarm
Akamai
Heroku
Amazon AWS
Github m.fl.

54. EXAMPLE - CHOOSING
THE RIGHT PRODUCT

55. EXAMPLE SAAS - DISQUS

56. THERE’S AN APP FORTHAT

57. 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

58. EXAMPLE SAAS/API - ADDTHIS

59. EXAMPLE SAAS/API - ADDTHIS

60. EXAMPLE SAAS/API -
CALENDAR

61. EXAMPLE SAAS/API -
CALENDAR

62. EXAMPLE SAAS/API -
CALENDAR

63. EXAMPLE API - LIGHTSPUN
flip
resize
rotate
format
background
quality
}
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

64. ADVANTAGES WITH SAAS
• Easy installation
• Easy configuration
• No maintenance
• It scales
• It improves all the time

65. EXAMPLE PAAS - HEROKU

68. • $ git push heroku master
-----> Heroku recieving push
-----> Rails app detected
-----> Launching..... done
http://tv4play-production.heroku.com deployed

73. TRAFFIC
Peak
Average?
zzzzzzz........

76. $ heroku dynos 1
tv4play-production now running on 1 dyno

77. $ heroku dynos 24
tv4play-production now running on 24 dyno

78. $ heroku dynos ??
tv4play-production now running on ?? dyno

79. 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.”

80. THERE’S AN APP FORTHAT
(ACTUALLY,THERE ARE AT LEAST TWO APPS)

81. EXAMPLE PAAS - AKAMAI

82. WAIT - ITS JUST
LIKE 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.

83. PICK ONE

84. FOCUS
hardware OS patches
network infrastructure scaling failover
redundancy antivirus upgrades capacity
backup installation planning firewall
specification design integrate
operations gui SLA maintenance
new features

85. FOCUS
hardware OS patches
network infrastructure scaling failover
redundancy antivirus upgrades capacity
backup installation planning firewall
specification design integrate
operations gui SLA maintenance
new features

86. IFYOU USE API’S -
BUILD API’STOO
86
API

87. PRICELIST

88. WHATS RUNNING?
88

89. WHY DOTHIS?
Time
Cost
Quality

90. 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, @lemonad
Images: http://www.clker.com/, http://www.flickr.com/photos/liorshapira/2350847573/