Introducing Sencha Touch: HTML5 Framework for Mobile
On Tuesday, we announced that Ext JS, jQTouch and Raphaël were combining to form Sencha. We said you wouldn’t have long to wait to see some amazing results. So here they are! Today, we’re overwhelmingly, insanely, ridiculously excited to introduce Sencha Touch, the first HTML5 framework for mobile devices. We think it’s the first cross-platform framework that builds web apps that make sense for mobile devices. It comes with a comprehensive UI widget library, complete touch event management with CSS transitions and an extensive data package.
An HTML5 Framework
We’ve blogged a lot recently about the HTML5 family of technologies, and we’re calling this a HTML5 framework. Why? A few reasons. First, HTML5 makes Sencha Touch applications offline capable. For example, our Solitaire demo uses HTML5 localStorage to save game state. Second, HTML5 Geolocation allows for ridiculously easy geographical awareness in your applications. Our GeoCongress demo uses this capability to find your local Congressional representation, for example. The third reason is that the framework uses CSS3 capabilities extensively. Apart from the icons, there are practically no images in the component library — they’re all built with CSS3. 
CSS3 gives us border styling, gradients, shadows and a whole big toolbox of styling beyond that. We’ve made our toolbars, buttons, sliders, meters etc. from pure CSS. It also provides us with the rich transitions and animations in the framework. There are even more HTML5 family capabililities that we want to expose in the framework as we go forward, like web workers and more.
The entire framework is only 80Kb gzipped, even before you take out the stuff you don’t need.
The Full Mobile Package
I won’t take this space to go over the entire feature list, but we feel confident that a majority of mobile apps today could be developed with Sencha Touch and deployed as pure web apps because they don’t need access to device capabilities like cameras or bluetooth. And let’s remind ourselves why web applications are amazing things. They work cross browser because they’re based on standards. You don’t need to update them. As a developer, you never need to worry about old versions that people won’t upgrade. They’re searchable and their content shows up in search engines, which do a far better job of figuring out what people mean than any app store hierarchy. Practically anyone can write them. And best of all, you can plug in multiple third party advertising, analytics, social connector, mashup, affiliate, etc. into your application trivially. While it’s true today that you need to wrap your Sencha Touch application in a native shell (such as PhoneGap) in order to get access to camera or accelerometer. But with the current industry trends, we don’t think this will be the case for too long.
Our First Public Beta Release
This is the first public beta of the framework and we welcome your feedback. There’s definitely still work to be done. We’re working on Android forms with great attention. We need to make it easier to build a HTML5 cache manifest. We need to build an Optimizer that will strip out parts of the framework that you don’t need. And then, we have some awesome graphics planned, hopefully before release.
Licensing
The initial beta is under a GPLv3 + FLOSS license. We’d like to give open source folks the benefit before we introduce a commercial trial license. And we’d like to take the opportunity to emphasize something that many people miss: that we have Free and Open Source exceptions as part of our GPLv3 license. So if you want to, you can include Sencha Touch in your Apache and OSI approved licensed projects without triggering the GPL’ing of your project.
The Third Web Era
If the Browser wars of the 90′s were the first era of the web, and the long dark of IE6 was the second, we think we’re now emerging into the third era of the web. Where amazing new browser technologies let developers create beautiful and useful applications to help people get more done in more places, and enjoy using the tools that let them do it.
Enjoy!
The Sencha Team
You can see all the demos from here. You need to view all of these from a webkit browser at the very least. They are intended to be seen in a mobile device browser.
http://www.sencha.com/deploy/touch/examples/
Congrats Sencha team. Your effort on supporting web standards in your products is outstanding!
Concrats Sencha team, its a really cool new product!!!
memory app: http://nils-dehl.de/m
Am I right in thinking this will not work with Apple’s previous iPhone OSes other than the new iOS4?
Isn’t this a bit pointless considering not everyone will update their iPhone OS to the latest version?
@Kevin, you’re not quite right. This will work with all the iPhone 3G and 3GS’s out there. We’d support first gen iPhone’s as well, but they’re just a bit underpowered.
We are using Ext.Direct as our backend for EXTJs applications, will the Ext.Direct client be sup[ported as part of Touch ?
I’m guessing Kiva and the Solitaire examples are supposed to be for larger devices like the iPad?
http://imgur.com/sfSO0.jpg
@Colin
Solitaire and Kiva demos are both for iPad at the moment. Kiva demo will be made available for phones in the very near future.
Fantastic work guys, I’ll definitely be having a go at a mobile version of my site in the near future! Solitaire is really smooth – feels like a native app and I’m loving the offline support. Great job!
Ok, I didn’t find that to be very clear but fair enough. The kitchen sink example is pretty compelling though, is that online anywhere yet?
@Tony
Ext Touch is using the same data package that will be distributed with Ext JS 4.0. This way you only have to write all your data management code on the client side once and can reuse it for both desktop and mobile applications.
@Colin Make sure you view in a Webkit Browser.
http://www.sencha.com/deploy/touch/examples/kitchensink/
@Tony: Much obliged!
Great work guys! :)
Thanks for releasing this, will help A LOT of us.
The solitaire gave me only 3 Jacks btw. Can’t finish the game! :P
http://recursive.gr/trash/phpY34zFcAM.jpg
@George – odd, does it come back if you refresh?
@Ed LOL, you are right, after the refresh the state restored properly.
http://recursive.gr/trash/phpP3bv6jAM.jpg
Excellent progress (!) but the iPhone 3G performance/stability is a little raw still…
@Chris Would love more detailed feedback on the forums on which parts you think need polish or stability
That is absolute coding beauty. The kitchen sink example is amazing, and I was only viewing it in Safari 5. Can only imagine how it will look on my iTouch!
This degrades quite beautifully to desktop browsers – I just looked at the demos using Chrome under Windows (I know, I know…) and almost all of them worked flawlessly. Could be a way to bring sexier web apps to desktop machines also.
At any rate, this is really, really beautiful work!
Great stuff, looking forward to trying it out.
Unfortunately GeoCongress does not work well in DC. It only detects a “District 0″ and does not display DC’s non-voting delegate, Eleanor Holmes Norton.
Amazing work Sencha team! I am really impressed. This is truly a framework, and not just a library. Before, we have had UI libraries, data frameworks, etc. as pieces, but you have really put it all together. This is what we have needed!
As I noted in my post about Sencha Touch (http://badassjs.com/post/707996695/sencha-touch-a-cross-platform-html5-mobile-application), it would be great if someone created a cross platform App Store for the web. I think that a central distribution mechanism, although not necessarily the only method of distribution, is a good one. Someone could do very well with this, I think.
I am blown away!
How cool is Sencha Touch, great job guys
Really cool stuff, love the kitchen sink sample.
Keep on with the good work.
@Devon Govett
Google is launching the Chrome Web Store later this year:
https://chrome.google.com/webstore
This is Amazing. 2 days back you said, we don’t need to wait for long to see results of Sencha. We thought it may take at least a month or two for you guys to come up with new things.
Boooom, Today I got shocked. Amazing work by Sencha Team.
Sencha Touch will set the new game in Mobile platform. I am so exited and happy about this.
“Examples” folder in the Sencha Touch download (sencha-touch-beta-0.90.zip) is must for every developer. Already our team started playing with that. We guess it is the best place to start. Like the “examples” folder with ExtJS.
In our quick overview, we guess it won’t be that hard for an ExtJS developer to work in Sencha Touch.
Our Special thanks for “David Kaneda” for bringing his huge knowledge and experience to Sencha Touch and this community.
So what next with “Raphaël”?
You guys have any plan to bring in the Raphael Charting(Analytics Chart, Multi Chart, Interactive Chart) or any other charting capabilities in Sencha Touch?
That may help in Business Reporting Mobile Application.
Wonder how long it will be Open source for? Well nothing lasts for ever I guess
@Lost. It will always be Open Source. Period. The best guarantee of that is that it’s GPL – which is the strongest open source license there is.
@Swam. Stay tuned for more amazing stuff. We’re not done adding features to Touch.
Congrats on this exciting new development!
Thanks Jean Christopher!
is there also a GWT version of Sencha-Touch?
Hi Arno. Right now Touch is javascript only.
Strange… demos doesn’t work on my Android HTC Hero phone…
Stuck on the same page as if i was on my desktop PC…
@Michael Mullany:
“right now” means a GWT version is planned?
Nice idea. Call me when it works on Palm webOS.
This is welcome indeed. I’ve been building a standard (i.e., not mobile-specialized) web app using Ext, which is generally a pleasure to use, and I’ve been bracing myself for the pain of building a mobile web app with even half the functionality of the standard web app, given the lack of a mobile-specialized library with anywhere near the power of Ext. jQTouch was among the better ones out there, but it still had some painful limitations (e.g., no support for tab-bar layouts). Just running the demos (on a Nexus One), I can see Sencha Touch is already a significant improvement. I’ll start using it immediately, and in view of the stellar work you guys have done with Ext, I look forward to its further development.
Been rooting for ext since yui-ext. This and many other things sencha (weird) produces confirms my allegiance. This is why my new ASP.Net MVC project uses ExtJS and not the built in choice JQuery.
I have been test in Nokia Browser, Opera Mini and Opera Mobile. And Doesen’t work in anyone. Very bad!
@Marcos. I hope we’re been very clear on the site that we only support Android and iOS right now. We hope we can support more webkit browsers going forward and eventually cover any HTML5/CSS3 capable browser.
It looks very good. I’m curious about how Sencha compares to Titanium.
Jon — Titanium is a technology that interprets your Javascript at runtime to create actual native UI. It’s not geared toward cross-platform development (Android & mobile browsers), nor is it really driven by standards like HTML5 and CSS3. Good question!
When can we see some use of Raphael library put into use for charting purpose. I am hoping to see a new Charting library for Ext JS and touch framework. YUI charts has lots of restrictions.. I would like to see a better library with more options and charts
The templating part is simply horrible. It really is a puke that can only come from the PHP/Ruby side of the web.
Learn from the jQuery guys how to embed html elements in your javascript code. It is unbelievable how in this day and age such solutions still shows up. If this is what you can do, I wish you did not snatch Raphael.
@florin
Do you mean the XTemplate system in general or the fact that we use them to render the components?
Can you please further elaborate your issues with them on the forum? We are always open to valid criticism. Are you talking about a specific jQuery plugin. Would love to check It out.
In firefox 3.6.3, the tabs control UI is messy.
@ WIN – I hope we’ve been clear that the beta is targeted for Android and iOS only. It mostly works with latest rev Firefox, but I am not surprised that it looks messy..
When do you expect to have full support for Android devices as well?
Anyway, congrats for what you’ve done so far.
@ Ciprian. We do support Android 2.1 and above right now, although we’re still working on some specific things like better forms support – which has issues in beta 1.
Can we develop iPhone apps with this API and have them approved by apple? Sorry if that sound stupid
antastic work guys, I’ll definitely be having a go at a mobile version of my site in the near future!
We love it!!! we are going to use it great job !!!
Hi,
very good product. But only a question. You thought to write a GWT API for Sencha Touch? Javascript for me and not only is not a good language.
Regards
Carlo
Do you have any timeframe in mind for a commercial license of Sencha Touch?
@kban You can take two approaches. If you develop it as a pure web app, then you can just get people to launch it in mobile safari and you won’t need to get approval by the app store. If you want to submit to the app store then you need to make it in to a native app by using phonegap.
@Carlo we’re talking to our GWT users to see how much interest there is in a java version. I take your comment as a vote “yes”
@rob we’ll have a commercial beta license option very shortly. We’ll have a proper commercial license option when we release version 1.
Looks great on my Nexus one (aside from the known forms issues)
Add me to the list of folks eager for a GWT-enabled version. Are there any short-term workarounds for making the javascript UI elements available to a GWT app? Having a decent phone-oriented UI but driving the app logic from GWT would be a powerful combination.
@Michael: Thanks for your answer. Currently I’m having an 1.5 Hero… but looking forward for HTC’s damn update in Europe :). Should happen anytime soon, so I guess I will check again once I have the upgrade done.
First of all congratulations to sencha for this rapid development in EXTJS. It is good news for all Extjs developers, to implement innovative ideas for this development. Keep going!!
Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…
Brilliant! I’m going to use Sencha Touch as HTML and then compile the pages into a native app to sell on the app store.
cool product..
i’m going to use it
^^.
:bd
“Brilliant! I’m going to use Sencha Touch as HTML and then compile the pages into a native app to sell on the app store.”
Doesn’t the new iOS SDK license prohibits that? To have a local (non web based) application that uses any third party framework to render components instead of the native one?
@diego Javascript gets an explicit pass from Apple for this.
I’m developing a web app to be run in Google Chrome on x86 desktop hardware, can I use Sencha Touch?
Regards,
Robert Keane
Why no love for WebOS?
We’re big fans of WebOS! Just haven’t got around to it yet.
@Robert. You *could*, but it’s probably a much better idea to use our mouse/keyboard oriented framework – Ext JS or if you’re a java programmer, Ext-GWT
Michael, What I should have said was: I’m developing a Web App to run on x86 hardware using a touch screen. Will Sencha touch work on x86 hardware?
Regards,
Robert Keane
Hello everybody i have a question XML Reader is not available right now to sencha Touch?
@robert. It’s really how the browser reports the events that matters. Mobile browsers add new touch events, which we use to detect things like pinches. However, Touch also treats mouse events as “touch events” when a Touch app runs on a desktop browser. So as long as the touches are getting reported as mouse events in your desktop browser we’ll do fine.
It looks like you are not planning on supporting sqlite local data stores, which are an attractive feature of HTML5 and are required for more high-performance offline applications. Is that true?
Amazing stuff!! I’m going to use in my next app. Thanks guys.
Do you know what the commercial license price will be?
Actually, the main reason you would want to wrap your app as a native app rather than as a browser based web app, is not necessarily so you can access native capabilities, as you mentioned, but it is much more so for the BRAND value of having the app icon on the home screen.
Users are still much more likely to use and interact with an application when they see it on their screen vs. having to go to the web site each time. Any additional level of indirection results in a dramatic drop off in access and frequency of use/interaction.
Add my voice to the general cry for a GWT version of this toolkit!
Hi,
Can you confirm what the implication of heavy use of CSS3 animations and effects are with regard to battery life of the phone compared with a native app for example? I heard it can be quite damaging.
Adrian
Hello everybody
I’m a developer from china.I’m using sencha to develope a twitter client.And the effect was very good.
I hope sencha will get better and better.