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
×

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

4,681 views

Published on

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)

Published in: Technology
  • Be the first to comment

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

×