Preview of Sencha.io at the Sourc{ Dev Con, in Split, Croatia.

1. Sencha.io Preview - Sourc{ 2011
Aditya Bansod
Senior Director - Product Management
http://www.adityabansod.net
@hyperionab
Tuesday, May 10, 2011

2. Web Architecture is
Changing
Tuesday, May 10, 2011

3. Web Architecture is
Changing
Tuesday, May 10, 2011

4. Mobile is Changing Web Architecture
Then
• Servers generated markup specific for the browser
• Clients had JavaScript and CSS specific for the browser
• Clients pulled data from the server that generated the markup
Now
• Servers are thin, browsers are smart(er)
• Client frameworks deal with browser di erences
• Clients pull data from many cloud services as well as app server
Tuesday, May 10, 2011

5. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Tuesday, May 10, 2011

6. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Cloud
Tuesday, May 10, 2011

7. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Cloud
Tuesday, May 10, 2011

8. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you!
Cloud
Tuesday, May 10, 2011

9. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you!
Cloud Cloud
Tuesday, May 10, 2011

10. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you!
Cloud Cloud
Tuesday, May 10, 2011

11. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you! And you!
Cloud Cloud
Tuesday, May 10, 2011

12. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you! And you!
Cloud Cloud Cloud
Tuesday, May 10, 2011

13. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you! And you!
Cloud Cloud Cloud
Tuesday, May 10, 2011

14. Mobile is Changing Web Architecture
I’m a mobile browser!
Here’s my UA
Who are you? Oh no! Let me run a bunch of code
and generate markup specific for you!
Client Server
Thanks! Now gimme
some data Okay. Here’s some
a new page! (or some JSON)
Now you! And you! You too!
Cloud Cloud Cloud
Tuesday, May 10, 2011

15. Mobile (and Mobile Web) is...
• Social - you and me, games and apps on the go
• Hybrid - not just client-server, but often client only, or client-
server-cloud
• Unreliable - network issues, latency, disconnects
Tuesday, May 10, 2011

16. Introducing Sencha.io
cloud services for
the mobile web
exclusive preview at Sourc{
Tuesday, May 10, 2011

17. this is a preview! things will change.
Tuesday, May 10, 2011

18. Previewing Two Services
Sencha.io Sencha.io
Sync Src
cloud image and asset
synchronization optimization in
for your data the cloud
http://www.sencha.com/products/io/
Tuesday, May 10, 2011

19. Sencha.io
Sync
Tuesday, May 10, 2011

20. The Problem
Your Your
Phone Server
Data
Tuesday, May 10, 2011

21. The Problem
Your Your Your
Phone Carrier Server
Data
Tuesday, May 10, 2011

22. The Problem
Your Carrier
Latency
Your Bandwidth Your
Phone Availability Server
Unreliable
Tuesday, May 10, 2011

23. The Problem
Your Carrier
Latency
Your Bandwidth Your
Phone Availability Server
Unreliable
#fail
Tuesday, May 10, 2011

24. Sync Solves The Network
• Take your app o ine
• Reads and writes work when the
network isn’t there
• Data is backed up in the cloud
• Everybody has a full copy
• Infinite number of databases
• Multi-device / multi-user allows for
collaboration
Tuesday, May 10, 2011

25. Sync Solves The Network
Your Carrier
Latency
Your Bandwidth io
Phone Availability Sync
Unreliable
Data Data
Tuesday, May 10, 2011

26. Allows for Collaboration
User 1 - Device 1
User 1 - Device 2
Sencha.io
User 2 - Device 1
Sync
User 3 - Device 1
User X - Device Y
Tuesday, May 10, 2011

27. / Dev Key / Database Name
Developer Developer's
Portal Website
Deploy Download Read and Write
Get Dev Key Application
Application
Developer
User
Sync Workflow
Tuesday, May 10, 2011

28. Ev Dis
er cl
yt aim
Tuesday, May 10, 2011
ch hin e
an g r:
ge m
! ay
Sync Demos

29. Sync Enables Collaboration
Tuesday, May 10, 2011

30. Sync Enables Replication
Tuesday, May 10, 2011

31. Sencha.io
Src
Tuesday, May 10, 2011

32. Cloud Platform for Mobile Delivery
<img src="http://src.sencha.io/your_img"/>
<link rel="stylesheet" type="text/css"
href="http://src.sencha.io/your_css"/>
<script type="text/javascript"
src="http://src.sencha.io/your_js"/>
Transformation of assets to
best fit ever device
Tuesday, May 10, 2011

33. Image Manipulation
Tuesday, May 10, 2011

34. Image Manipulation
Deliver minimum number of bits to get the right image to every
device
Tuesday, May 10, 2011

35. Fixed Dimensions
<img
src='http://src.sencha.io/320/200/http://mysite.com/myimage.png'
alt='My image'
width='320'
height='200'
/>
Tuesday, May 10, 2011

36. Adaptive Dimensions
<img
src='http://src.sencha.io/-8/http://mysite.com/myimage.png'
alt='My image, constrained by 8 pixels less than the screen width'
/>
Tuesday, May 10, 2011

37. Future: Premium Features
imgs.yourdomain.com. IN CNAME
src.sencha.io.
Tuesday, May 10, 2011

38. Future: Premium Features
JS & CSS Minification in the cloud specific to the mobile device
Render SASS in the cloud and never worry about generating again
Automatically pipelining (data img) images when correct
More to come!
imgs.yourdomain.com. IN CNAME
src.sencha.io.
Tuesday, May 10, 2011

39. Ev Dis
er cl
yt aim
Tuesday, May 10, 2011
ch hin e
an g r:
ge m
! ay
Src Demo

40. Pricing and Availability
Sencha.io Price Availability
Free Today
Src
Premium features in the future
Limited
Sync Freemium
Preview
Tuesday, May 10, 2011

41. http://www.sencha.com/products/io/
Tuesday, May 10, 2011