Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building collaborative HTML5 apps
using a backend-as-a-service
João Parreira

CTO for Realtime Framework
Realtime.co Cloud Services

Enterprise-grade services with global presence
Realtime.co Cloud Services
Used in TOP500 global websites
Realtime.co Cloud Services
Used in TOP500 global websites
Realtime.co

Backed by $100M funding
Backend?

Usually consists of three
parts: a server, an
application and a database.
Backend-as-a-Service?

How?

What to look for?

(an example would be nice ...)
Why? (10 reasons)
caching
sharding data sync
server provisioning
scale-in/scale-out

read replicas

cluster management
CAP...
Why? (tl;dr)
You love building great web apps.

You don’t want to waste time
operating highly available
distributed backen...
A little story from the trenches
Babblr: a chat platform for Tumblr users
They are ...
frontend developers
JavaScript ninjas
not SysAdmins
friends of a guy with 600K+ Tumblr
followers 
They wanted to ...
develop a chrome extension in 4 weeks
keep their hands off servers
launch it with a bang
reach eve...
Their solution?
“do what you do best and outsource the rest”
find someone to do the heavy-lifting
use a backend-as-a-s...
They had great press
before launch
th 6PM PST. They launched!
May 7
One hour later ...

“… we got 34,000 downloads in a
matter of 30 minutes. And what
that did is that the servers couldn’t
h...
What went wrong?
But you promised me love
Promised me love, love, love

Cee Lo Green
What to look for?
Scalable
Mobile ready
Available at all times
Real-time enabled
Truly secure
Lack of scalability
will doom your success
 Remember Babblr:
 the prototype was easy to develop ...
 everything worked ...
Your success depends
on your backend scalability
 Understand how your BaaS provider scales . Ask.
 Never talks about ops...
Mobile is
the new black!
 ~40% of internet time now on mobile devices
 Native iOS and Android SDKs are mandatory

 Push...
Your user is king
and he demands you’re available
 Data must be stored in multiple datacenters
 Periodic backups? Disast...
Life supports real-time,
your app should too
 Collaboration is easier with real-time data sync
 No persistent connection...
Thou shalt have
a truly secured app
 If there’s a security option... turn it on!
http://robinverton.de/blog/2013/08/27/be...
Thou shalt have
a truly secured app
 Favour ACLs with CRUD permissions
 Look for SSL enabled providers
 Look for provid...
Scalable
Mobile ready
Available at all times
Real-time enabled
Truly secure
BaaSWho’s who?
It’s Scalable
 Reserved capacity scaling model
 Different capacity for reads and writes
 Powered by Amazon DynamoDB
 H...
It’s Scalable
(remember Babblr?)

Relaunched
with 120K+ users
It’s Mobile ready
 Objective-C SDK for iOS
 Java SDK for Android
 Push notifications with APNS+GCM
(in private beta, pu...
It’s highly-available
 100% uptime
(source: Site24x7)

 Multi-region
(US, EU, BR and ASIA)
 Data is saved in 3
differen...
It’s real-time enabled
 Data sync through WebSockets (with fallbacks)
 Powered by high-performance pub/sub message broke...
It’s secure
 Token-based authentication
 Permissions by ACLs with Create-Read-Update-Delete
 Roles for easier user mana...
It’s cost-effective
 Pay-as-you-go
 Starts from $1.5 USD/month (2 operations/sec)
 $500 USD developer offer including:
...
One cloud backend, one API, multiple platforms

API

DynamoDB

Highly scalable

Real-time
notifications

API

Realtime Clo...
(yes, with an example)
Building a collaboration
HTML5 app in 5 minutes
 Group chat
 Realtime Cloud Storage (backend)
 AngularJS (MVC framework...
Developer resources
 https://github.com/jparreira/Html5DevConf
 https://github.com/realtime-framework/Storage
 http://f...
Realtime Cloud Storage : use cases
A unified backend for modern applications across platforms











Collabo...
@jtparreira
Thank you
Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF)
Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF)
Upcoming SlideShare
Loading in …5
×

of

Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 1 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 2 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 3 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 4 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 5 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 6 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 7 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 8 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 9 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 10 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 11 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 12 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 13 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 14 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 15 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 16 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 17 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 18 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 19 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 20 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 21 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 22 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 23 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 24 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 25 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 26 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 27 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 28 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 29 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 30 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 31 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 32 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 33 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 34 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 35 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 36 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 37 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 38 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 39 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 40 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 41 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 42 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 43 Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF) Slide 44
Upcoming SlideShare
MBaas - Mobile Backend as a Service presented by Rinish KN, CTO, RapidValue Solutions at MOBConf
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF)

Download to read offline

Slide deck for talk at the 2013 HTML5 Developers Conference in San Francisco. Covers the main BaaS critical success factors: SMART (Scalable, Mobile-ready, Available, Real-time enabled and Truly secure)

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building collaborative HTML5 apps using a backend-as-a-service (HTML5DevConf 2013 SF)

  1. 1. Building collaborative HTML5 apps using a backend-as-a-service
  2. 2. João Parreira CTO for Realtime Framework
  3. 3. Realtime.co Cloud Services Enterprise-grade services with global presence
  4. 4. Realtime.co Cloud Services Used in TOP500 global websites
  5. 5. Realtime.co Cloud Services Used in TOP500 global websites
  6. 6. Realtime.co Backed by $100M funding
  7. 7. Backend? Usually consists of three parts: a server, an application and a database.
  8. 8. Backend-as-a-Service? How? What to look for? (an example would be nice ...)
  9. 9. Why? (10 reasons) caching sharding data sync server provisioning scale-in/scale-out read replicas cluster management CAP theorem load balancing monitoring
  10. 10. Why? (tl;dr) You love building great web apps. You don’t want to waste time operating highly available distributed backend clusters.
  11. 11. A little story from the trenches Babblr: a chat platform for Tumblr users
  12. 12. They are ... frontend developers JavaScript ninjas not SysAdmins friends of a guy with 600K+ Tumblr followers 
  13. 13. They wanted to ... develop a chrome extension in 4 weeks keep their hands off servers launch it with a bang reach every Tumblr user
  14. 14. Their solution? “do what you do best and outsource the rest” find someone to do the heavy-lifting use a backend-as-a-service And so they did, they went with Firebase.
  15. 15. They had great press before launch
  16. 16. th 6PM PST. They launched! May 7
  17. 17. One hour later ... “… we got 34,000 downloads in a matter of 30 minutes. And what that did is that the servers couldn’t handle that traffic …”
  18. 18. What went wrong? But you promised me love Promised me love, love, love Cee Lo Green
  19. 19. What to look for?
  20. 20. Scalable Mobile ready Available at all times Real-time enabled Truly secure
  21. 21. Lack of scalability will doom your success  Remember Babblr:  the prototype was easy to develop ...  everything worked during private beta ...  but production launch was a disaster!  The backend service was not up to the task.  It didn’t scale when Babblr most needed it.
  22. 22. Your success depends on your backend scalability  Understand how your BaaS provider scales . Ask.  Never talks about ops/sec? Hummm ...  Favour reserved capacity scaling models  Look for scaling APIs and autoscaling processes  Be suspicious of scale limited developer plans. What is the provider affraid of?
  23. 23. Mobile is the new black!  ~40% of internet time now on mobile devices  Native iOS and Android SDKs are mandatory  Push notifications are a nice plus (APNS, GCM)  If you’re not flirting with native apps ...you should.
  24. 24. Your user is king and he demands you’re available  Data must be stored in multiple datacenters  Periodic backups? Disaster Recovery != Business Continuity  Rolling deploys must be the standard procedure  Look for service status pages  A 99,999% SLA is quite normal ... don’t let anyone tell you otherwise.
  25. 25. Life supports real-time, your app should too  Collaboration is easier with real-time data sync  No persistent connection to each user? Sorry, no real-time for you.  We’re talking about time, latency matters. Measure.  Look for WebSockets. They’re new but they’re awesome
  26. 26. Thou shalt have a truly secured app  If there’s a security option... turn it on! http://robinverton.de/blog/2013/08/27/becareful-when-going-client-only-firebase/  Don’t trust the client …  You should be able to say “who can do what”
  27. 27. Thou shalt have a truly secured app  Favour ACLs with CRUD permissions  Look for SSL enabled providers  Look for providers using certified infrastructure  Look for cryptographic methods to authenticate users and prevent unauthorized data access
  28. 28. Scalable Mobile ready Available at all times Real-time enabled Truly secure
  29. 29. BaaSWho’s who?
  30. 30. It’s Scalable  Reserved capacity scaling model  Different capacity for reads and writes  Powered by Amazon DynamoDB  Highly-scalable NoSQL database  Shazam at SuperBowl 2012: 500.000 writes per second
  31. 31. It’s Scalable (remember Babblr?) Relaunched with 120K+ users
  32. 32. It’s Mobile ready  Objective-C SDK for iOS  Java SDK for Android  Push notifications with APNS+GCM (in private beta, public in 3 weeks)
  33. 33. It’s highly-available  100% uptime (source: Site24x7)  Multi-region (US, EU, BR and ASIA)  Data is saved in 3 different datacenters
  34. 34. It’s real-time enabled  Data sync through WebSockets (with fallbacks)  Powered by high-performance pub/sub message broker  Simple event-based API: var tableRef = storageRef.table("SomeTable"); tableRef.on("update", function(item) { console.log(“Got an update:", item.val()); });
  35. 35. It’s secure  Token-based authentication  Permissions by ACLs with Create-Read-Update-Delete  Roles for easier user management  SSL encryption
  36. 36. It’s cost-effective  Pay-as-you-go  Starts from $1.5 USD/month (2 operations/sec)  $500 USD developer offer including:  10.000 concurrent users  200GB storage  10 million real-time notifications/month
  37. 37. One cloud backend, one API, multiple platforms API DynamoDB Highly scalable Real-time notifications API Realtime Cloud Storage BaaS API API
  38. 38. (yes, with an example)
  39. 39. Building a collaboration HTML5 app in 5 minutes  Group chat  Realtime Cloud Storage (backend)  AngularJS (MVC framework)  Nicolas Gallagher PURE CSS SPEECH BUBBLES (pizzazz) http://nicolasgallagher.com/pure-css-speech-bubbles/
  40. 40. Developer resources  https://github.com/jparreira/Html5DevConf  https://github.com/realtime-framework/Storage  http://framework.realtime.co/storage
  41. 41. Realtime Cloud Storage : use cases A unified backend for modern applications across platforms           Collaboration applications Multiplayer Online Games Social networks streams Digital Advertising E-commerce Publishing Project Management Chats and comments Systems monitoring dashboards The next big thing ...
  42. 42. @jtparreira Thank you
  • CristianAlvarez11

    Apr. 24, 2014
  • RodnyLobos

    Oct. 25, 2013

Slide deck for talk at the 2013 HTML5 Developers Conference in San Francisco. Covers the main BaaS critical success factors: SMART (Scalable, Mobile-ready, Available, Real-time enabled and Truly secure)

Views

Total views

4,956

On Slideshare

0

From embeds

0

Number of embeds

181

Actions

Downloads

21

Shares

0

Comments

0

Likes

2

×