Earlier today at the Sourc{ conference in Split, Croatia we previewed two new cloud services from Sencha. To distinguish them from our SDK’s and tools we’re calling them “Sencha.io” services. The goal of Sencha.io services is to provide common application functionality as cloud services so that application developers (particularly mobile application developers) don’t have to reinvent the wheel every time they want to make an app. Our first two cloud services solve two common problems for app developers – resizing images for different mobile screen size/resolution combos, and making offline and collaborative data synchronization easy.
h3. Sencha.io Src
The first service we introduced was Sencha.io Src, which helps mobile apps resize images for the ever increasing number of mobile screen sizes. We’ve previously done a lot of work in Sencha Touch to make your UI resolution independent, io Src expands this to include your image assets. And it’s easy to use, simply add http://src.sencha.io in front of your IMG tags and Src will automatically scale the image appropriately from the origin to the right size for that mobile browser. The benefits of using SRC is that the browser doesn’t have to resize a one-size-fits-all image inplace (which helps performance), or download more image than it needs (which improves latency).
Not only does Src perform automatic manipulation based on the device’s screen size, but it also has a complete API to let you customize how to scale your image, ranging from simple scales and skews to using it within data URIs. To ensure the best performance in a mobile scenario, original and resized images are cached by Src for 24 hours and the correct caching headers are sent to the mobile browser. If you’re familiar with tinySrc, Sencha.io Src is built on the same codebase and technology as tinySrc, which already serves millions of requests a month helping hundreds of mobile sites deliver a better experience.
Best of all, we’re excited to announce that it’s available today and at no cost for any reasonable usage. We’ll be bringing premium features to Src in the future, but rest assured that the basic service will be free forever.
If you’d like to check out Src in action, head over to Teagrams and see how the Teagrams app uses Sencha.io Src to dynamically resize images from Instagram. You can take a look at the source on Github as well. Teagrams is best viewed on a tablet. We’ll be be making the full documents available later this week.
h3. Sencha.io Sync
We also previewed Sencha.io Sync, our multi-master synchronization service that allows Sencha Touch apps to take their data offline and sync their models. We decided to start work on Sync after hearing from developers (and from our own experiences!) how unreliable mobile networks can be. Since Sencha Touch and the entire Ext JS platform is moving to a MVC pattern we realized how well built the “M” in our architecture was suited to enable apps to go offline and sync as well as to collaborate on a shared data set.
Using Sync, apps can operate offline, ensuring that all writes made to the local storage are replicated to the cloud master; apps can use Sync to backup data so the cloud has a replica of everything that’s in the client, and to recover data if the mobile data set gets lost. Better still, since Sync is multi-master, if an app expects a user to be on multiple devices, the data set can be edited and synced seamlessly between devices; or, if the app is multi-user, the same data set can be edited by multiple users from their own mobile devices.
Essentially, Sencha.io Sync provides the app with a distributed object store. A complete replica of the entire object store is available to each client, and each replica can receive updates and exchange updates with its peers through Sencha.io Sync. Think of it as peer-to-peer Sync in the cloud. If you’re interested in seeing some demos, open two browsers (e.g. Safari and Chrome) and open a tab in each for either Contacts and Crosswords. In Contacts, you can edit the data of the address book, replicate it to Sync, then hit the circle arrow in the other browser and the changes propagate. In Crosswords, each change is replicated and automatically synched between each client allowing multi-player gameplay.
Sencha.io Sync is an state-based object replication (SOR) mechanism. There are many other flavors of replication and synchronization, but we think SOR is the most widely useful and applicable synchronization scheme that can work with a wide variety of apps. Unlike log or diff based replication, SOR can lose intermediate updates without corruption – which is handy when you’re on a semi-connected network. It’s also a more general purpose synchronization scheme than niche-ier approaches like Operational Transformation, which is most useful when doing synchronization within a list-object – for example Google Wave-style live collaborative editing.
We’re in the early stages of Sync and it’ll evolve as we work to get customer feedback. As of today Sencha.io Sync is in limited preview and we’re opening invitations for people who are interested. For more information and to sign up, please visit the Sencha.io page.
h3. Road Map
We’re excited in the coming months to share more about this new set of cloud services from Sencha. Src is available today and over the next few months we hope to expand the feature set and build out premium features that continue the mission of helping developers manage the complexity of mobile devices and enhance the speed of mobile delivery. Sync is in limited preview and we hope to role out a larger beta in the later summer.
Lastly, since this is a developer preview, please understand that everything might change. We want to make sure we’re sharing where we’re going with our community early and often so we can incorporate feedback properly. We look forward to seeing how you use the Sencha.io cloud services! Request an invitation today!
What's your reaction?
0
0
Plans for supporting cropping to a fixed size for Sencha.io Src?
Anyway, great news!
Just requested an invitition, was redirected to homepage after that without any confirmation message. Just a heads up that that might be a sign that the request doesn’t work? (I’m on iPad)
@Steffen — yes, fixed size is supported. We’ll post the full docs in the next few days.
>Think of it as peer-to-peer Sync in the cloud
I don’t get it, how come it’s p2p when it syncs _through_ a master server in the cloud?
Every day is a Sencha news day! Great work :).
I really want to make some test to deeply understand how Sencha.io Sync can be used uinside my applications.
@Steffen – I have been redirected to HomePage too without any message after requesting an invitation. I hope it was received successfully.
@Dmitriy — it’s just a way to think of it. It’s not * actual* p2p.
Sounds very interesting! I can think of some good uses of Sencho.IO Sync for some of my ExtJS projects!
How do you handle race conditions in the Sync service? Say for instance two (or even more) people update the same object at the same time?
@AwesomeBob — we’re trying to keep it as simple as possible. The default rule is last write wins. In the event they’re non-conflicting changes (e.g. two JSON objects that aren’t overlapping) we do a merge against the same ID. Our goal was to not over engineer it.
Sync sounds pretty sweet. I have not heard of “state-based object replication” – can you provide links to some background on it?
I worry that if you guys go too broad with your product range you will become a Jack of All trades – master of none. I can see the relation to your other products, but this is pushing it. Not trying to be a downer. Glad you guys are innovating. Haven’t been disappointed yet.
@Justin State-based refers to the objectstore replicas exchanging assertions about their state, rather than exchanging operations that occurred at those replicas. There’s not a great deal of documentation on the web about this kind of architecture, other than general distributed systems texts, and academic papers. The most public similar system is the Xerox Bayou project in the early 90’s. It informed, or preceded at least, various implementations of multi-mastered directory servers, including Novell’s, Netscape’s, and Microsoft’s.
@skeptic I have to agree – another product from Sencha when extjs is unpolished, incomplete and poorly documented?
These guys are doing too much and not focusing on their core, to their detriment.
funny;
using sencha io SRC, my PNG images were resized to a smaller size but more then quadrupled in size!!
test was made with safari on windows. here are the results:
original image: dims 444×323 , size on disk 21.13KB
SRC image(changed user-agent to IOS 4): dims 320×233, size on disk 130.78KB
is this how its suppoed to work? looks like the transcoders might not be optimized for some image or something.
@gkatz Yeah – that sounds wrong! Can you send us the URL to the image and the user-agent or API settings you were using? Thanks.
useful information
@James, here is my example:
using safari 5.0.5 open 2 tabs as follows:
1. go to http://i56.tinypic.com/5bwubq.png – it is a 22.7 KB image
2. open a different tab, set the user-agent to ‘Safari iOS 4.1 – IPhone’ and go to URL http://src.sencha.io/http://i56.tinypic.com/5bwubq.png. the dims are now smaller but the image is 127.5KB
thanks
@James;
using safari 5.0.5 and the image in address http://i56.tinypic.com/5bwubq.png
if you open 2 tabs, one regular and one with user-agent set to ‘Safari iOS 4.1 – iPhone’
you can see that the image, although smaller in dims, goes from ~23KB to ~127KB
thanks
sorry for the double post,
my laptop turned on me and I thought the first one failed to post
@gkatz – I’ve tried resizing that image in a variety of image applications, and it consistently balloons in size. Even just trimming 1 pixel off the width pushes it up to nearly 10 times the original size. I’ve also tried compressing a 443px PNG (vs the 444px), and the discrepancy remains: http://cl.ly/6bD1
I think this is because the original bitmap is so carefully matched to the raster (if you see what I mean) – there is no antialiasing at all on the country borders, for example. The minute the image is slightly resampled, there are many more blurred edges (and also hence colors) which the PNG compression is far less efficient at handling.
So my suggestion to you is to force sencha.io to switch to using JPEG for the resized image. This is a far better format for any size (other than the original) although slightly lossy. You simply add /jpg/ to the URL like this:
http://src.sencha.io/jpg/320/http://i56.tinypic.com/5bwubq.png
(which is 31k)
vs
http://src.sencha.io/png/320/http://i56.tinypic.com/5bwubq.png
(which is indeed 127k)
We just rolled out the ability to set JPEG compression levels too. It defaults to 85 (e.g. above), but you could increase or decrease the quality by placing a number between 1 and 100 after the ‘jpg’ token in the URL:
http://src.sencha.io/jpg100/320/http://i56.tinypic.com/5bwubq.png
(best quality, 63k)
http://src.sencha.io/jpg50/320/http://i56.tinypic.com/5bwubq.png
(moderate quality, 16k)
http://src.sencha.io/jpg1/320/http://i56.tinypic.com/5bwubq.png
(worst quality, but only 2k ;-) )
Thanks James!
I figured the complete API of Src would allow many manipulations that would help.
As far as my PNG compression go. I dont really know the technical stuff but i would say this:
the image was compressed using the Java Image IO package. code was written a long time ago but I did play with it a lot to get the best output i could so i can say the image was already super optimized which might support your explanation.
thanks for the help and I am lookoing forward to working with Src.
This is already done by Google. If Sencha really want to do something new create a image (png, jpg, img) to SVG server
@James two final questions:
1. are Src & Sync both considered a developer preview? should I wait a bit before I roll out an app using the Src API as mentioned in the blog and your example?
2. can you drop a word on performance of Src (with regard to transcoding time and other related asspects)?
thanks
@gkatz src.sencha.io presents the same API as tinySrc (http://tinysrc.net) which has been running for several years. The API and service should be considered stable and highly available. (Performance is obviously dependent upon size of payload, location, your server’s own response, and other factors)
sync.sencha.io is a new addition, hence the reason it’s been launched in a preview status.
How would this benefit me more if I have already written my own in-house image processors and the server code to auto-detect the client details? How does this improve latency and client performance if my servers already serve the code/img optimized for the presentation device?
I’m assuming you’re attempting to compete directly with TinyURL/TinySrc services. Neither of which I have need of.
I like the image scaling service. Another cloud service that would be really useful to the community would be images and PDFs from of JS intensive web pages. See: http://code.google.com/p/wkhtmltopdf/
@James, does your server support gif images? it seems like when trying to access gif images your server will transcode it to PNG…
found the answer in here http://tinysrc.net/documentation/file-formats/…
It sure takes a long time to load Contacts in chrome. Contacts & Crosswords doesn’t load in firefox.
@ken — the demos are built on Sencha Touch, which is designed to run in WebKit browsers such as Chrome or Safari.
Thx for your reply. From the above article
>If you’re interested in seeing some demos, open two browsers (e.g. Safari and Chrome)
Maybe change that sentence to “webkit” browsers and/or do a browser-detect in the apps.
Hi, Sencha.io Sync is very interesting and certainly an area ripe for development.
My query is – can I run my own instance of Sencha.io Sync? What if I have data that I don’t want to entrust to go through your servers? This is a very common requirement and very poorly serviced by Cloud providers.
Regards, Julian Knight
@Julian, there are no plans to provide this as a product for yourself, since we think its most valuable for those times when there is only a thin server or none at all (e.g. web apps in a store). Nevertheless, most server languages and frameworks have image resizing libraries, such as ImageMagick, libgd, PIL etc that would let you do this under your own control (and DeviceAtlas can also be installed locally)
@Julian Sorry – I misread your question as regarding the src service, not sync :-)
Currently the same limitations apply however. It is only available as a service, not a standalone product.
Yo, that’s what’s up trtufhluly.
Does it support video?
We only support images in the Src service right now.
Hi guys;
so i have an app that uses sencha io for image manipulation.
works perfect with iPhone and Samsung galaxy but it seems like on Motorola phone (specifically milestone) the picture returns blurry as hell. i guess its because sencha io manhandles it to the point its un-viewable. do you guys know anything about this behavior? i don’t have any Motorola phone at my disposal so its hard for me to check (but i got several complaints already – all from Motorola phone users).
thanks in advance.
@gkatz — can you DM me on Twitter (@adityabansod) so we can see what we can do?
@gkatz, the most important thing is to determine the user-agent of the device. In the meantime, I’ll push an update to the device capabilities database to see if that helps resolve things for you
thanks guys;
@James, can you comment once the update is pushed?
also, I will have access to one of the devices with the problem later today and will try to extract data from it
guys;
if I give you the exact hour of request to images that “went wrong” will yoiu be able to look it up inyour server’s logs?
also, when you forward the request to you forward it with the original user-agent? if so, I will be able to look it up in my server logs also,.
thanks
@gkatz hi, yes, we keep logs, so if you can give me the domain of your site or URL of the target image, I should be able to narrow it down. Timestamp would be very useful.
PS the latest device database update was pushed yesterday
@James;.gif’ in the original URL.
checked again with the motorola phone – picture is still blurry to the point of unusable even after your push.
on July 6th, I have requested aproax 4 pics from sencha IO, all pics urls have the token ‘newNavy
the time of the requests was approax 22:03 (GMT +3).
hope this helps.
I also took a look at my server’s access logs and If I understand my server logs correctly I see the following strange behavior:
1. JSON request is made to get a list of images, the request is as follows:
46.210.6.214 – – [06/Jul/2011:19:03:32 +0000] “GET /json/navyService?_dc=1309979011589 HTTP/1.1” 200 560 “-” “Mozilla/5.0 (Linux; U; Android 2.1-update1; he-il; MB525 Build/JRDNEM_U3_2.59.0) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17”
2. then the image request is as follows:
74.125.75.17 – – [06/Jul/2011:19:03:36 +0000] “GET /chart?filename=newNavy2253958538123485090.gif HTTP/1.1” 200 18135 “-” “AppEngine-Google; (+http://code.google.com/appengine; appid: tinysrc)”
it is very strange – looks like the image is loaded from a diferent user-agent than the one that requested the json data (even though they are supposed to be the same. is this a know thing?
can this cause the problem? I am not a 100% sure of my analisys (there are a lot of logs so I had to really dig into this)
thanks in advance
Hey guys. Any news?
bump bump.
@James do you need me to provide more info?
@gkatz I updated the API and that UA is being detected now as having a width of 320px (rather than 120px) so that should help you. I can’t test your exact example without knowing your domain name :-) but I think you’ll see it resolved – at least once any caching expires.
@James;
worked like a charm!
thanks.
Hello,
Thanks for your great work but what do you mean exactly by “at no cost for any reasonable usage” about SRC ?
Regards,
@Fabio — for most web sites, both commercial and personal, Src is available free of charge. We don’t plan on charging for the basic image resizing service, but I say “most” as it covers us in case of abuse of the service.
@Aditya—Thanks for your answer but it would be great to define what “abuse” is. For example, if I plan using your service for a 1 billion images loaded per month, is it abuse ?
Regards,
@Fabio — we’re looking to publish an acceptable use policy soon. In the mean time if you have specific needs, contact me at aditya [at] sencha [.] com.
Oh yeah, fbualuos stuff there you!