Sencha Inc. | HTML5 Apps

Blog

Introducing Sencha Touch: HTML5 Framework for Mobile

June 17, 2010 | Michael Mullany

HTML5On 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. GeoCongressSolitaireCSS3 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

There are 104 responses. Add yours.

Michael Mullany

5 years ago

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/

Thorsten Suckow-Homberg

5 years ago

Congrats Sencha team. Your effort on supporting web standards in your products is outstanding!

Nils Dehl

5 years ago

Concrats Sencha team, its a really cool new product!!!

memory app: http://nils-dehl.de/m

Kevin

5 years ago

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?

Michael Mullany

5 years ago

@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.

Tony Steele

5 years ago

We are using Ext.Direct as our backend for EXTJs applications, will the Ext.Direct client be sup[ported as part of Touch ?

Colin Ramsay

5 years ago

I’m guessing Kiva and the Solitaire examples are supposed to be for larger devices like the iPad?

http://imgur.com/sfSO0.jpg

Tommy Maintz

5 years ago

@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.

Nick Poulden

5 years ago

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!

Colin Ramsay

5 years ago

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?

Tommy Maintz

5 years ago

@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.

Tommy Maintz

5 years ago

@Colin Make sure you view in a Webkit Browser.

http://www.sencha.com/deploy/touch/examples/kitchensink/

Colin Ramsay

5 years ago

@Tony: Much obliged!

George Antoniadis

5 years ago

Great work guys! smile
Thanks for releasing this, will help A LOT of us.
The solitaire gave me only 3 Jacks btw. Can’t finish the game! raspberry
http://recursive.gr/trash/phpY34zFcAM.jpg

Ed Spencer

5 years ago

@George - odd, does it come back if you refresh?

George Antoniadis

5 years ago

@Ed LOL, you are right, after the refresh the state restored properly.
http://recursive.gr/trash/phpP3bv6jAM.jpg

Chris the Developer

5 years ago

Excellent progress (!) but the iPhone 3G performance/stability is a little raw still…

Michael Mullany

5 years ago

@Chris Would love more detailed feedback on the forums on which parts you think need polish or stability

Alex Hall

5 years ago

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!

André Fischer

5 years ago

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!

Luigi Montanez

5 years ago

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.

Devon Govett

5 years ago

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.

Neil Hathaway

5 years ago

I am blown away!

How cool is Sencha Touch, great job guys

Americo Savinon

5 years ago

Really cool stuff, love the kitchen sink sample.
Keep on with the good work.

Luigi Montanez

5 years ago

@Devon Govett

Google is launching the Chrome Web Store later this year:

https://chrome.google.com/webstore

SwamBala

5 years ago

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”?

SwamBala

5 years ago

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.

LostInHessengue

5 years ago

Wonder how long it will be Open source for? Well nothing lasts for ever I guess

Michael Mullany

5 years ago

@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.

JC Bize

5 years ago

Congrats on this exciting new development!

Jamie Avins

5 years ago

Thanks Jean Christopher!

Arno.Nyhm

5 years ago

is there also a GWT version of Sencha-Touch?

Michael Mullany

5 years ago

Hi Arno. Right now Touch is javascript only.

Atkati

5 years ago

Strange… demos doesn’t work on my Android HTC Hero phone…
Stuck on the same page as if i was on my desktop PC…

Arno.Nyhm

5 years ago

@Michael Mullany:

“right now” means a GWT version is planned?

acarback

5 years ago

Nice idea. Call me when it works on Palm webOS.

Ralph Haygood

5 years ago

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.

Phil Strong

5 years ago

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.

Marcos Timm Rossow

5 years ago

I have been test in Nokia Browser, Opera Mini and Opera Mobile. And Doesen’t work in anyone. Very bad!

Michael Mullany

5 years ago

@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.

Jon Rosen

5 years ago

It looks very good. I’m curious about how Sencha compares to Titanium.

David Kaneda

5 years ago

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!

Abdel Olakara

5 years ago

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

florin

4 years ago

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.

Tommy Maintz

4 years ago

@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.

WIN

4 years ago

In firefox 3.6.3, the tabs control UI is messy.

Michael Mullany

4 years ago

@ 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..

Ciprian

4 years ago

When do you expect to have full support for Android devices as well?

Anyway, congrats for what you’ve done so far.

Michael Mullany

4 years ago

@ 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.

Kban

4 years ago

Can we develop iPhone apps with this API and have them approved by apple? Sorry if that sound stupid

Modellbau

4 years ago

antastic work guys, I’ll definitely be having a go at a mobile version of my site in the near future!

DC WEB DESIGN

4 years ago

We love it!!! we are going to use it great job !!!

Carlo

4 years ago

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

Rob Graber

4 years ago

Do you have any timeframe in mind for a commercial license of Sencha Touch?

Michael Mullany

4 years ago

@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.

Michael Mullany

4 years ago

@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”

Michael Mullany

4 years ago

@rob we’ll have a commercial beta license option very shortly. We’ll have a proper commercial license option when we release version 1.

Rob

4 years ago

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.

Ciprian

4 years ago

@Michael: Thanks for your answer. Currently I’m having an 1.5 Hero… but looking forward for HTC’s damn update in Europe smile. Should happen anytime soon, so I guess I will check again once I have the upgrade done.

Raja

4 years ago

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!!

corner kitchen sinks

4 years ago

Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…

Graham barker

4 years ago

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.

taufik junianto

4 years ago

cool product..
i’m going to use it
^^.
:bd

Diego Vilar

4 years ago

“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?

Michael Mullany

4 years ago

@diego Javascript gets an explicit pass from Apple for this.

Robert Keane

4 years ago

I’m developing a web app to be run in Google Chrome on x86 desktop hardware, can I use Sencha Touch?

Regards,

Robert Keane

Michael Mullany

4 years ago

We’re big fans of WebOS! Just haven’t got around to it yet.

Michael Mullany

4 years ago

@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

Robert Keane

4 years ago

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

Yoniel

4 years ago

Hello everybody i have a question XML Reader is not available right now to sencha Touch?

Michael Mullany

4 years ago

@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.

paul

4 years ago

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?

RC Reddy Kura

4 years ago

Amazing stuff!! I’m going to use in my next app. Thanks guys.

Linda

4 years ago

Do you know what the commercial license price will be?

Peter K.

4 years ago

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.

Peter S

4 years ago

Add my voice to the general cry for a GWT version of this toolkit!

Adrian

4 years ago

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

Grace

4 years ago

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.

Ernesto Hernández

4 years ago

Hello guys,

How can I start to use Sencha with Android, I mean tools that I need, configurations, setting, etc. I have been searching about this, but I just found news and videos showing apps running.

I would apreciate any kind of help you can give, thanks in advance!

Dani

4 years ago

Great job.

You call it HTML 5 framework, but most of the generated HTML just use DIV elements and not HTML 5 semantic elements.
Any chance this will change in the future?

Thanks.

Michael Mullany

4 years ago

One of the reasons why we had to go with div’s over some of the HTML5 tags is that some semantic elements weren’t fully stylable (like the progress element), and for others it would depend on context as to whether you use an for example. But I’d like to get to a state where semantic tags are better integrated into the SDK.

Dustin Schmidt

4 years ago

Really looking forward to playing around with the framework and integrating it into a mobile app for my website.

Having been a web designer for a few years and now shifting my focus to html 5 and css3 I’m really excited to get in mobile web development.  This should be a great starting point.

I know this is based mostly on ext-touch js, but is there support for flash/flex add-ons?

Thanks!

Fabian Koehler

4 years ago

+1 for a GWT version, would be willing to pay a license for such a gwt version.

Christian Lacerda

4 years ago

Sencha Touch for GWT? Good Idea! I vote “yes”

Ankur Garg

4 years ago

I’m too looking for GWT version, is there some workaround to use this API in GWT?

Phil Cockfield

4 years ago

Yes yes yes!  Add another enthusiastic vote (so 2 votes then) for GWT version of Sencha Touch.

Carl Cronje

4 years ago

Hell yea, for GWT version of Sencha Touch.

Jepse

4 years ago

Awesome!! It would be very useful to have a Sencha touch GWT as well!!

Vote +1!!!

Darin Boyd

4 years ago

Would LOVE a GWT version!  I actually dig the way it looks on Chrome on the desktop.

Mano

4 years ago

+1 for GWT!

Prowler

4 years ago

I tested sencha buttons and text input in skyfire browser and opera mini in apad with andoroid 2.0. So in skyfire works nice!!! but in opera don´t work anyway is Awesome!!!

Dirk

4 years ago

+1 for the GWT version!!!

David Lee

4 years ago

+1 gwt version ftw!!!

Niek Bech

4 years ago

+1 for GWT version!
That would be awesome, especially because integrating with Vaadin would become easy also.

Thomas Hoffmann

4 years ago

One more vote for GWT.

Think about how cool it would be to write a professional RIA and to be independent from devices and platforms. Javascript is, in my opinion, not a good option to write huge applications with growing logic and interfaces. The debugger in GWT is nescessary to bring web applications to business. Together with sencha touch developers could have the power for the next generation of platform independence.

Cheers
Thomas

Brahim

4 years ago

I would like to echo on the sentiment already expressed.
Large applications tend to require strongly typed languages like Java.
Reasons would include:
- Easy of refactoring the code through a RAD tool (IDE)
- RAD features like code insight go a very long way when dealing with a new API
- Make good use of already established OO designs and patterns
- Make use of the great framework that GWT is

Daren Bell

4 years ago

+1 for a GWT version.  We are just looking at getting into web apps targeted to mobile and they are quite large, making use of MVC, UIBinder, RequestFactory etc.  If Sencha touch used all these useful tools, then we wouls gladly pay for licenses.

Jaime González

4 years ago

Definitely “+1”  for GWT version.

Michael Vogt

4 years ago

+1 for a GWT version

Ron

4 years ago

+1 for a GWT API.  It would be much easier for us to use our Java development skills and tools directly.  I’d buy licenses right away.

Jay

4 years ago

+1 for GWT API

ScottJ

3 years ago

Do the demos work in standard browsers like Mozilla or IE?  I tried to get into numerous ones with just blank screens.  I’d like to find a way to program a website once for all platforms…

pegs

3 years ago

+1 for GWT API

Brock

3 years ago

I wanted to leave a simple thoughts to state your site was great. I found it on yahoo seek after dealing with many other information that’s not really related. I thought I would find this much earlier considering how good the information is.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.