Announcing Sencha Touch 2.4

Sencha Touch 2.4We’re proud to announce the release of Sencha Touch 2.4, which continues to enhance Sencha Touch support for the BlackBerry 10 browser and devices. About 18 months ago, we announced our collaboration with BlackBerry — optimizing Sencha Touch to run on the BlackBerry 10 browser and create a new theme and set of components to make building BlackBerry 10 applications as easy as possible. Sencha Touch 2.1.x, 2.2.x, and 2.3.x came with a BlackBerry theme and a set of components unique to BlackBerry.

Download Sencha Touch 2.4

Let’s dig into the details of this release and the enhancements.

Enhancements

The password field in the BlackBerry theme now has an eye icon to the right, which shows the password when tapped. The IndexBar for the list component is re-styled to match the native theme. Now when you press an index from the IndexBar, you see a magnified view of the index you pressed. We have also updated the styles for the Sliderfield to more closely match the native slider. A halo appears for the Sliderfield around the grip when it is being dragged back and forth.

Password field

Password field
IndexBar

Re-styled IndexBar
Slider Field

Updated Sliderfield

We have also updated the highlighting on list elements (onPress vs onRelease) to reflect BlackBerry 10 highlighting styles.

OnPress

onPress
OnRelease

onRelease

Sencha Touch 2.4 also introduces a new toast component that displays small messages, which expire and disappear after a predefined amount of time. The toast component can be used to provide information to users and allow them to continue with the application after the message expires.

Toast Component

Toast Component (Self-destructive Message)

Furthermore, Sencha Touch 2.4 extends its BlackBerry 10 theme support to Q10 and Q5 devices. The touch framework is now able to determine the screen resolution of the device and resize itself accordingly. As an example, if you run your Z10 application on a Q10 device, the tab menus and action overflow menus become scrollable and the action bar changes its height according to the screen size available on those devices.

In addition to the BlackBerry specific enhancements, we’ve included a number of bug fixes in this release, pertinent to both BlackBerry and other platforms. A list of all other fixes is available in the Sencha Touch 2.4 release notes.

We are proud of our collaboration with the BlackBerry team that helps us keep Sencha Touch on top of device diversity, so we can ensure Sencha Touch is available on the newest platforms as quickly as possible. The BlackBerry enhancements in Sencha Touch 2.4 provide a great opportunity for developers to build mobile applications that have the native-like look-and-feel of BlackBerry devices.

20140819-touch-2-4.png 16 Comments   Read more

Sencha Hosts Web Application Development Seminar in Seoul, Korea

Sencha is hosting a seminar in Seoul, Korea on May 16, 2014 &#8211 Sencha Web Application Development for the Enterprise with Mirae Labs.

The conference will focus on HTML5 and the Enterprise. With the proliferation of smartphones and tablets and the emergence of BYOD, organizations need to have a strategy for deploying applications for the web and multiple devices. This conference will help organizations by describing how HTML5 and Sencha solutions, which include frameworks, tools and application delivery platforms, can address these issues.

Presentations:

We will have two presenters at the event:

  • Stefan Stölzle, Sr. Solutions Engineer at Sencha, will talk about Ext JS in the enterprise
  • Jeff Pope, Managing Director at Sencha, will talk about Sencha Space and the issues of BYOD

Event Details:

  • Venue: Ferrum Hall, Ferrum Tower
  • Date: 16 May, 2014
  • Time: 13:30 – 17:40
  • Address: 3rd floor, Ferrum tower, 66 Suha-dong, Jung-gu, Seoul
  • Telephone: 82-2-6353-8989
  • Directions: Exit number 2 of Euljiro 1-ga station, Line 2
  • Registration: http://onoffmix.com/event/26741

If you’ll be in Seoul on May 16, sign up for the event. We look forward to seeing you there.

seminar-in-seoul.jpg 1 Comment   Read more

The Downside of Native Packaging

The 2007 introduction of the iPhone ushered in a new era of mobility. We now expect our applications and data to be accessible on the most convenient network-connected device. Our appetite for mobile technology has resulted in a massive influx of mobile devices supporting a myriad of different mobile operating systems.

Many application developers soon realized the inefficiency of developing native applications in this multi-device, multi-platform world. They chose instead to embrace web technology and the emerging open standards around HTML5. The shift, now called hybrid app development, created the need for a tool to package these HTML5-based applications, run them on the device, and provide access to common device hardware features like the camera, GPS, and accelerometer.

Starting in 2009, native packaging solutions were created to address this need. Developers have lauded native packagers for allowing HTML5-based apps to fit into the still-dominant public app store distribution model. More importantly native packagers meet a number of important needs for consumer applications and have enabled many HTML5 developers to access app store distribution who otherwise would not have had such an opportunity. Yet in subsequent years, the many deficiencies of native packagers have become painfully obvious to many application developers in the enterprise.

These deficiencies include:

  • Security – Sensitive data is stored unencrypted in the packagers’ caches and data stores
  • Complex app lifecycle – You have to build for multiple platforms and manage the deployment and maintenance of those binaries over the life of the application
  • Subject to frequent mobile OS changes – Any changes or backward-incompatibility from a mobile device vendor can break your packaged app
  • App Store Distribution – Distributing enterprise applications through consumer app stores is highly inefficient.

It’s now 2014; organizations have been dealing with this pain for long enough. They want a long-term solution for application and data mobility. The answer is to deploy HTML5 apps directly into a secure, managed runtime environment. This type of solution has many benefits:

  • End-users get a superior application user experience, relief from app fatigue, and protection for personal privacy. Their applications are always up to date.
  • Developers reap the benefits of both the web and today’s mobile devices. They no longer have to package the app for multiple platforms. They can also eliminate the hassle of dealing with consumer app stores to distribute their apps.
  • Organizations can instantly secure and manage the lifecycle of their apps, data, and users, fighting app sprawl in the process. Administrators can grant and revoke user access to apps and data as business needs dictate, wiping business data from users’ devices without touching personal data. Furthermore, their data is encrypted on the device, protecting them from data breach.

Native packagers have served you well at a time when you really needed it. But if these points concern your organization at all, there is a better way to solve these problems now. If you’re making apps for the enterprise, it’s time to let native packagers go.

Click here to learn more about how Sencha can ease your transition to a post-native packager world.

20140414-mind-the-phone-gap-teaser-v1.jpg 3 Comments   Read more

Announcing Public Beta of Ext JS 5

We are extremely excited to announce that the beta version of Sencha Ext JS 5 is available for public access and evaluation. This beta release enables you, our Sencha community, to test and evaluate our Ext JS 5 work in progress. For all the Ext JS developers out there, this a great opportunity to help make this the best Ext JS release ever.

And since this is a beta, we advise against putting it into production just yet.

Goals for Ext JS 5

We’re proud that Ext JS has become the industry standard for data-driven single-page applications. Engineered to grow with teams and projects, Ext JS powers applications that have successfully scaled to hundreds of screens and hundreds of thousands of lines of code. For intelligible, maintainable web applications, with clear separation of structure, behavior and visuals, we believe that the architected, component-centric approach of Ext JS is simply unbeatable.

When we sat down to design Ext JS 5, we wanted to take everything that made Ext JS great and make it even better. We had three themes for our development process. Our first theme was to Make Multi-Device Development Real. Ext JS 5 is our first release that allows the same code to power both desktop and touch device experiences, with a gesture system inspired by Sencha Touch. There are two fresh multi-device themes, so our rich set of UI components look and feel at home on both touch and desktop screens.

Our second theme was Evolution not Revolution. Perhaps the most important thing that hasn’t changed in Ext JS 5 is that we continue to make Internet Explorer 8 a first-class browser. We made this decision because a solid majority of you told us that IE8 support will continue to be a requirement for your applications through 2015 and beyond. We’ve also made smooth upgrades from Ext JS 4 a priority. As we’ve added and upgraded functionality, we’ve minimized breaking changes in our public APIs.

Our third and final theme was Developer Productivity. As we designed the new two-way data binding architecture, our goal was to vastly reduce the amount of code developers had to write to implement common UIs. In many cases, tasks that used to require several listeners can now be reduced to a few binding directives — which can be seen in some of our Kitchen Sink examples. Through the use of declarative listeners, views can now often be completely code-free, allowing developers to not only cut code size but maintain better separation of concerns at the same time.

As you can tell, we’re proud to release this beta to the community and hope that when compatibility, productivity and user experience matter most, Ext JS will continue to be your proven way to deliver the best engineered applications to your end users, customers and clients.

Announcing Public Beta of Ext JS 5

Now, on to the new features! Ext JS 5 has a myriad of new features and improvements. Here are some of the best:

  • Two-way data binding is a new mechanism that allows changes made in the view to be automatically written back to the model (and vice versa) without the need for custom event handlers.
  • Grid gadgets are new lightweight components useful for embedding within grid cells. Widgets and buffered updates make Ext JS grids even better, enabling richer data visualization and real-time data updates.
  • Touch-optimized charts is a new charting package that comes with features like 3D charts, financial charts, and multi-axis. It also has faster performance, cleaner code and a great experience on touch-screen devices. (The existing chart package is available as a separate package, so you can still use it.)
  • Routing allows application deep linking by translating your application’s URL into controller actions and methods.

There are numerous other enhancements and improvements related to MVC and performance in general. Read What’s New in Ext JS 5 for an exhaustive view of every new feature.

Another goal of Ext JS 5 is to converge much of the framework core between Ext JS and Sencha Touch. In Ext JS 5, we methodically converged code for the class system, data package, and feature/environment detection into a common core, so it can be shared across Ext JS and Sencha Touch. These shared components enable the creation of applications that share resources regardless of the framework.

Ext JS 5 supports IE8+ and the latest tablet platforms such as iOS6/7, Chrome on Android 4.1+, and Win 8 touch-screen devices (such as Surface and touch-screen laptops) running IE10+.

Beta Availability

Ext JS 5 beta is available for download immediately along with a beta version 5 of Sencha Cmd which is available for Windows, Mac OS X, Linux/64, and Linux/32. Check out our examples on a tablet.

We’re working hard to release Ext JS 5 in finished form as soon as possible, and we need your help and feedback to make that happen. Try out our new kitchen sink examples, migrate one of your smaller apps and report bugs, issues, or errors on the Ext JS 5 Public Beta forum. We look forward to your feedback.

20140401-ext-js-5-teaser.jpg 117 Comments   Read more

Top 5 Things A Game Can Teach Your Business App

Guest Blog Post

One of the reasons why I love programming is that it’s an incremental learning process. Every app that I develop at Fig Leaf Software teaches me important lessons that I can often apply to future projects. And my favorite projects are the ones that we develop purely for business-development purposes, where we get to show off all of our programming and design-fu…and usually find a few platform bugs and weaknesses along the way.

Sencha’s Raiders, depicted below, is a space-combat game developed in Sencha Touch over a period of six weeks. No other frameworks or libraries were used in its creation.

We undertook this challenge:

  • To demonstrate Fig Leaf Software’s competence and creativity with building mobile applications on the Sencha platform.
  • To illustrate that the Sencha Touch drawing and sprite components were mature enough to handle the demanding world of arcade game development.
  • To highlight some of the areas where HTML5 on mobile devices still falls a bit short in meeting critical gaming requirements.
  • To enter the app in various programming competitions (including the Blackberry App Challenge in which we were declared a winner)

While Sencha’s Raiders — or any game for that matter — would rarely be seen as a mission critical application, there are aspects of building a game app that can be applied to even the most data-centric, corporate application. In this article, I’ll share 5 key things we learned that you can apply in your business application development.

Monitoring Stylesheets Based on Deployment Mode

Conventional wisdom dictates that your mobile app’s images should be base-64 encoded into your CSS file. This process reduces the number of HTTP requests that need to be made to retrieve the files resulting in enhanced overall performance at the expense of file size (base-64 encoded images are generally 1.3X the size of their binary counterparts). In SASS & Compass, you can base-64 encode an image quite easily by invoking the inline-image mixin as illustrated below:

	.starbackground {
	   background-image: inline-image('starrybackground.png');
	}

In this example, the file ‘starrybackground.png’ is read from my project’s /resources/images/ folder, encoded as text, and stored in the stylesheet resulting in the following output:

	.starbackground {
	   background-image: url('data:image/png;base64,iVBORw...[truncated]...C');
	}

You can change the base path for the inline-image() mixin by configuring the images_dir variable in your config.rb file:

	dir = File.dirname(__FILE__)
	load File.join(dir, '..', '..', 'touch', 'resources', 'themes')
	sass_path = dir
	css_path = File.join(dir, "..", "css")
 
	// used by compass
	images_dir = File.join(dir, "..", "images")
 
	// used by sass
	images_path= File.join(dir, "..", "images")
 
	output_style = :compressed
	environment = :production

Since most Sencha Touch apps make relatively minimal use of artwork, base-64 encoding assets makes a lot of sense. However, Sencha’s Raiders used a series of high-quality PNG’s that generated a stylesheet in excess of 6 MB. Rather surprisingly, the app still loaded and ran with this overhead, it just did so…poorly (particularly on Android). Going back to using a standard CSS URL reference and reducing our stylesheet to less than 1MB in size resolved many of our performance issues, and since the app was primarily going to be downloaded and installed from an app store instead of run from the web, dealing with http latency was much less important than improving overall stability and performance.

Lesson learned: Best practices for mobile web are not necessarily the best practices for a packaged app.

Features Can Be Misinterpreted — Give Users Control

One of the features that I like to build into our apps is the appearance of breaking the “third wall.” That is to say, I like it when the action inside an app tries to “manifest” itself into the “real world.” During the game, when your ship’s hull takes a critical amount of damage, we simulate the “breaking” of your phone’s screen, which everyone considered to be a very cool effect.

However, one of the other features we added was that whenever your ship took a hit, the entire screen would shake. This was misconstrued by most users (and even some developers), as a glitch in the game. Unfortunately, we ultimately disabled that feature, requiring the user to activate it from their game preferences screen. Notwithstanding the above, if you’d like to add a screen-shake special effect to your app, just invoke the following code from a controller:

	onExplosion: function() {
	   // shake viewport
	   this.getViewport().setLeft(-5);
	   Ext.Function.defer(function() {
	   this.getViewport().setLeft(5);
	   }, 20, this);
	   Ext.Function.defer(function() {
	   this.getViewport().setLeft(0);
	   }, 40, this);
	}

Lesson learned: You need to either make app features clearly understandable or give the user the ability to control their implementation.

No one reads instructions, ever.

It should go without saying that users don’t read instructions. And yet, everything that I’ve ever learned in life, I’ve had to learn again.

Sencha’s Raiders seemed vaguely familiar to the 40 and older crowd (it’s based on the 1979 Atari 400/800 classic, Star Raiders). However, these new young whippersnappers who were born the year I graduated from high school and will never know the utter enjoyment of typing in thousands of lines of AtariBasic code with a membrane keyboard had no earthly idea of how to play the game. Forcing users through the instructions screen when they first launch the game helped somewhat in this regard, but we ultimately wound up having to re-engineer the gameplay to use on-screen controls that would be familiar to the touchscreen generation, e.g. a virtual joystick:

During playtesting, most users expected to use either the device accelerometer or swipe motion to change the ship direction. None used the navigation gestures that we detailed in the instructions. Since I’m not a big fan of trying to tweak the accelerometer for precision control, we went with the virtual joystick (based loosely on the Sencha Touch Slider) as it seemed to be the lowest common denominator.

And, when all else fails, you can try to force the user to read the instructions by making it a prerequisite for using the app:

Lesson learned: if your app requires reading detailed instructions for a user to get started, then you should probably re-think your UX.

Animating Sprites is easy!

There aren’t a lot of great Sencha sprite examples available. This is truly unfortunate since the Sencha Touch draw package, which is the underpinning of the Charts system, is quite powerful. Even if you’re building a corporate app, you should at least pitch the idea of adding either gratuitous animation or gamification to your apps. Studies have shown that gamification improves user engagement, return on investment, data quality, timeliness, and learning.

To animate a sprite, simply call the fx.setDuration() method as illustrated below. Any transforms that you subsequently apply to the sprite will occur gradually over the specified time period (in milliseconds).

	var component = new Ext.draw.Component();
	Ext.Viewport.setLayout('fit');
	Ext.Viewport.add(component);
	var sprite = component.getSurface().add(
	{
	   type: 'rect',
	   x: 50,
	   y: 50,
	   width: 50,
	   height: 50,
	   fillStyle: 'blue'
	}
	);
	sprite.fx.setEasing('easeOut');
	sprite.fx.setDuration(3000);
	sprite.setAttributes({
	   x: 200,
	   y: 200,
	   rotationRads: 3
	});

You can apply this technique to adding interactive effects to Sencha Charts. After all, who doesn’t want to see a Klingon battlecruiser fire a photon torpedo at a pie chart, obliterating one of the data series?

Protip: You could easily modify this code to theme it for zombies.

Lesson learned: Canvas-based animation outperforms CSS animation, but GPU performance in mobile browsers varies significantly.Tread lightly, develop multiple proof-of-concepts, and test frequently on a broad range of physical devices.

HTML5 Audio — You won’t need to purchase a “crazed screaming developer” sound effect

Cross-device compatible precision HTML5 audio still isn’t available for all devices. While you can try to “make do” with the JavaScript methods of the basic HTML5 <audio> element, this level of support is typified by poor performance, bugs, and memory usage issues. Developers have come up with a lot of kludges (“Audio Sprite”) to try to mitigate these issues, but make no mistake about it — working with HTML5 audio is just a big bucket of disappointment.

In the near future, we hope to see broader implementation of the more robust HTML5 Audio API, whose support is currently limited to the following browses/devices:

  • Google Chrome for Android 28 (enabled by default since 29)
  • Mobile Safari 6
  • Mozilla Firefox 23 (needs configuration at about:config)
  • Tizen
Lesson learned: Low latency, cross-device audio support isn’t quite ready for prime time yet.

It’s a Wrap!

So, there you have it. We suffered so hopefully you won’t have to!

No Comments   Read more

BlackBerry 10: The HTML5 Scorecard

In our last HTML5 scorecard, we took a look at the Microsoft Surface vs. the iPad gen4 and gave our nod to the iPad as the best HTML5 platform on tablets. This time, we’re putting the just launched BlackBerry Z10 running the new BlackBerry 10 OS through the test wringer. Going in, we were expecting very good things from the Z10. Last year, we gave a thumbs up to the Playbook OS2 HTML5 experience, and had good experiences with pre-release versions of the Z10 when developing Sencha Touch 2.2. So, prejudices firmly in mind, we headed out to a Best Buy and got ourselves a Z10 for scorecard testing.

In our tests, we found that the Z10 is a worthy addition to the top tier of mobile HTML5 devices that includes the iPhone 4+, the iPad gen 2/4 and the Microsoft Surface. We found solid advances in HTML5 feature implementation and very good performance in general. Most exciting to us is the support for getUserMedia(), which allows streaming video capture directly from the browser. We think BlackBerry’s UI for video capture is nicely designed. We did find a few feature glitches in our version 10.0 device that we expect to be cleaned up in the 10.1 release.

Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. Since the feature scope of HTML5 is enormous, we focus on testing newer features and graphics and animation performance. We use a variety of homegrown and third party test-sites, including modernizr, html5test, html5rocks, haz.io, and in-the-wild web demos to check feature presence and correctness.

Got a great app idea, or a Sencha Touch app you want to port to the latest BlackBerry platform? Join us for the free half-day technical and highly interactive Sencha Touch on BlackBerry 10 Bootcamp led by top BlackBerry developer evangelists at SenchaCon 2013. Register today!

Device Essentials

First up, some essentials for the web developer. If you’re looking for traffic from the Z10 (or the forthcoming Q10, search for the following user agent string:

Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko)
Version/10.0.10.822 Mobile Safari/537.10+

The Z10 supports at least 10 simultaneous touches, which we gamely verified by cramming our fingers and thumbs onto the test screen. Multiple touches were very reliable up to 4 simultaneous touches: above that new touches and a move of an existing touch seemed to get a little mixed up. Since there are practically no applications that rely on more than 4 fingers on a screen, this is just fine.

In our tests, we found that the Z10 is a worthy addition to the top tier of mobile HTML5 devices that includes the iPhone 4+, the iPad gen 2/4 and the Microsoft Surface.”

Next, JavaScript timer resolution. BlackBerry has changed its default timer resolution from 17ms to 4ms in this release. This is the same interval supported by iOS and desktop browsers, so script animations paced by a setTimeout() loop will now run at the same pace (last we checked Android was still at anywhere from 4s to 17s though). The timer is a little noisy with occasional spikes to 20ms or more, so the even better news is that BB10 now supports requestAnimationFrame so animation can be smoother and more efficient.

HTML5 Features

The Z10 has a very complete set of HTML5 features, scoring 485 on the current html5test.com feature test. New this year is IndexedDB, File API, Microdata, in-browser WebGL, some new HTML5 form features, getUserMedia(), as well as support for the Ogg audio codecs Ogg Vorbis and Ogg Opus.

What deserves showcasing is the Z10’s WebGL support: it’s pretty darn good. The standard WebGL demos worked extremely well. We were excited to see the many planets animated demo running happily at 35fps. In fact, the only demo that showed any noticeable stutter was Mozilla’s animated raytracing demo.

Khronos Group’s Many Planets demo (35fps!)

In addition to WebGL, the new audio codecs played perfectly, and seamless iframes displayed correctly. We also tested getUserMedia() and it worked correctly for video capture (although audio-only is not supported yet).

On the other hand, we found some bugs in other newly implemented features. IndexedDB demos did not run correctly or crashed the browser. The W3C test page for Microdata crashed, and scoped styles did not appear to work in a minimal demo. We talked to BlackBerry, and found out that all three bugs are being investigated already and should be fixed in dot releases. Lastly and as a side note, some of the built-in HTML5 form inputs look like they were ported directly from the Playbook OS without adjustment for the smaller screen of the Z10. For example, the HTML5 color input was not sized correctly and we had to scroll within the control in order to select colors.

Graphics & Animation Performance

In real world tests, Canvas and SVG performance was respectable. Canvas color cycle was very smooth. In Microsoft’s fishbowl demo which stresses the compositor, with 50 fish sprites and the fps meter active, we got 50fps. With all effects active, the performance dropped to 20 fps. Zynga’s informal goal for casual games is 125 sprites at 60fps, so Canvas could be a little better. CSS3 animation demos worked well, handling multiple simultaneous animations smoothly and consistently. CSS filter shorthands as well as more complex SVG filters were also properly supported. We did find some SVG regressions: a problem with SVG filter light sources, malfunctioning gradient animations and a crash with David Dailey’s classic SVG floating balloon. Talking to BlackBerry, many SVG bugs are fixed and will roll out in dot releases.

Finally, we’re happy to say that BlackBerry continues to have a fantastic implementation of position: fixed, and overflow scrolling. It’s rock solid.

A Solid Upgrade to an Already Fine HTML5 Browser

With the release of BlackBerry Z10, the BlackBerry browser team once again delivers a very solid HTML5 platform. An industry leading HTML5 score, solid WebGL performance and a terrific getUserMedia implementation are the standouts for us. With the forthcoming performance and bug fixes, the Z10 has a solid shot at being the best mobile platform for HTML5 app deployment.

20130501-bbz10-blog.png No Comments   Read more

Introducing BlackBerry 10 Support to Sencha Touch

BlackBerry 10 Hero

We’re excited to announce the availability of BlackBerry 10 support for Sencha Touch! Developers can use Sencha Touch 2.1.1 to create amazing web applications that run fantastically well on the BlackBerry 10 browser. We’ve been collaborating with the team at BlackBerry for the last few months on two paths: first, to optimize Sencha Touch to run on the BlackBerry 10 browser, and second, to build a whole new theme and a set of components to make building BlackBerry 10 applications as easy as possible. Developers can use these new features in Touch 2.1.1 to build new BlackBerry 10 applications or port existing Sencha Touch apps over to run on the BlackBerry 10 platform. BlackBerry has published a handy guide for porting applications.

Download Sencha Touch 2.1.1

Let’s dig in to the details of the new theme and the new components.

Theme

Once you download the latest version of Touch, if you want to check out the theme, you’ll need to enable it. As with all of our themes, in the resources/scss directory, there is a new “bb10.scss” file, which can be used to compile the theme from scratch. Of course, the compiled theme already exists in resources/css as bb10.css.

If you want to get up and running quickly, in examples/kitchensink/app.json, there’s a section of JSON you can uncomment (make sure to comment out the default app.css) to enable the BlackBerry 10 theme for the Kitchen Sink. Load it up in your browser, and you’ll see the Kitchen Sink look and behave like a BlackBerry application.


BlackBerry 10 Icons


BlackBerry 10 List

Components

In addition to the BlackBerry 10 theme, we’ve included a new component that is central to building a BlackBerry user experience: the CrossCut menu. The Kitchen Sink, when viewed from the BlackBerry 10 browser automatically uses the CrossCut menu for navigation, but if you’re interested in using the component, it’s the new Ext.bb.CrossCut component (xtype: crosscut).


BlackBerry 10 Cross Grid

We’re excited to have had the chance to work with the BlackBerry team to help make this happen and wanted to say thanks to teams there for collaborating with us to help get Sencha Touch to BlackBerry 10. Build new apps for BlackBerry or port your existing apps, either way, Sencha Touch makes it easy to build to stay on top of device diversity and get to new platforms like BlackBerry 10 as fast as possible.

bb10-preview.png No Comments   Read more

Survey Says: Windows Phone 8 Support Strong, HTML5 Important for Multi-Device App Dev

We recently conducted a survey to our developer community about the impact that today’s multi-device world has on businesses and application development. Over 1,400 developers, managers, and IT execs responded and shared their insights on a variety of topics, including Windows Phone 8, Apple’s iOS 6, and the challenges of IT in a Bring Your Own Device (BYOD) world.

A key finding from the survey is that almost half (46%) of companies intend to support Windows Phone 8 within the next 6-to-12 months. This early indication of broad support for Microsoft’s mobile platform continues the growing trend of corporate support for multiple mobile platforms.

In addition:

  • 83% of companies support two or more mobile operating systems, with 34% supporting three or more.
  • Apple’s iOS is the first or second most important mobile platform for 63% of companies (33% ranked it as the most important) while Android was selected as first or second by 57% (20% ranked it as the most important).

58% of companies either have or will have a formal BYOD policy within the next 12 months.

The continued broad acceptance and importance of HTML5 to multi-device application development was apparent as well. The survey showed:

  • 61% replied that they conduct mobile app development in house for deployment across multiple platforms.
  • 68% of the companies polled believe that their greatest skills in development are in Web technologies such as HTML5, JS, and CSS rather than in native development (iOS was selected by only 14% and Android by 13% as the biggest programming skill in their organization).

It’s clear to us from this survey and other sources that the mobile market will continue to fragment, and the need for application developers to support multiple platforms and devices will only grow. You can see the formal press release on the survey results here.

20121120-blog-survey-thumb.png 3 Comments   Read more

Sencha Touch 2.1 is Here with New Charting & Tools

Sencha Touch 2

Today marks a major milestone for the Sencha platform. We are announcing the general availability of Sencha Touch 2.1, general availability of the Sencha Cmd 3.0 build tool, an update to Sencha Architect, and a beta release of the BlackBerry 10 theme for Sencha Touch!

Sencha Touch is the market leading HTML5 mobile framework and with this release we’ve updated it to be even better. We’ve made performance better across the board, added charts, and more. Sencha Architect has been updated to include support for Sencha Touch 2.1. Starting today, designers and developers can take advantage of all the new Sencha Touch 2.1 features through Sencha Architect. And as if that wasn’t enough, we are also releasing Sencha Cmd 3.0 and a beta theme for BlackBerry 10.

Let’s jump into the details.

Sencha Touch 2.1 Released

As noted in last week’s What’s New blog post, this release contains enhancements and new features that boost developer productivity and application performance. Additionally, an all-new, ultra high performance version of Charts is included as a part of Touch (available as GPLv3 or as a part of Sencha Complete and Complete: Team). Below are a few of our favorite enhancements in Sencha Touch 2.1:

  • Adding a new and updated set of charts, such as our new candlestick charts and updated bar and pie charts
  • Providing retina support for Sencha Touch Charts
  • Performance improvements with faster rendering layout
  • Advanced list component with Infinite scrolling
  • Fixing critical customer issues, such as complex layout on Android

Download Sencha Touch 2.1

Sencha Architect Updated

You can take advantage of all the benefits in Sencha Touch 2.1 with this updated version of Sencha Architect. We’ve integrated the new Touch Charts in to Architect, so building mobile data visualizations is as easy as drag and drop. In addition, this update to Architect also supports Sencha Cmd 3.0 for Sencha Touch 2.1 projects, so you’ll get all the benefit of being able to use the package and deploy features of Cmd from within Architect.

Here is a short video showcasing how seamlessly Architect works with Sencha Touch 2.1.

If you want to get the latest Architect, you can download it directly below. For existing Architect customers, we’ll be rolling out an auto-update shortly.

Download Sencha Architect

Sencha Cmd 3.0 Released

Sencha Cmd 3.0 is our revamped build tool for the Sencha JavaScript frameworks. Previously called the SDK Tools, Cmd provide a full set of lifecycle management features to compliment your Sencha projects such as new project template creation, application deployment, code minification and more.

Sencha Cmd works with both Sencha Touch and Ext JS to do things like minification and custom builds, but also includes specific features for each of the platforms. For example, the Sencha Mobile Packager is included in Cmd and in this release has been improved to provide access to additional native APIs. The new Cmd tool is also much friendlier to enterprise environments, as it no longer needs administrator rights to be installed.

Read more about the new Sencha Cmd in this blog post.

Download Sencha Cmd 3.0

Beta Theme for BlackBerry 10

In addition to the final release of Sencha Touch 2.1, we are extremely excited to include a beta version of the BlackBerry 10 Theme. As mentioned at BlackBerry Jam 2012, we’re committed to supporting BlackBerry 10 as part of our next version of Sencha Touch. And now, with this beta support you can start building BlackBerry 10 themed HTML5 applications using our framework. We continue to work together with Research In Motion, to deliver the best platform for building BlackBerry 10 applications with open web standards.

You can download the beta BlackBerry 10 theme below.

Download Beta Theme for BB 10

The products and components we released today make it very easy for you to take advantage of the Sencha platform and develop rich and compelling universal applications for any mobile devices. We’re excited to get them out in your hands, so download the products and happy coding.

20121106-sencha-touch-2-1.png 10 Comments   Read more

A Survey of JavaScript Timers on Mobile

It wasn’t too long ago that web developers were struggling with poor implementations of JavaScript timers in desktop browsers. John Resig’s survey of desktop browser timers at the end of 2007 showed serious problems with timer resolution and/or timer consistency on all tested browsers. The practical effect of this was that JavaScript animations could run at different rates in each browser, choke up when too many concurrent timers were active, and often display stutter and jerkiness. (For more background on how timer resolution affects the user experience (and why we need a special Animation timer), Nicholas Zakas blog post on JavaScript animation is quite helpful.)

Chrome 1.0 was the first to introduce a high resolution, deadly consistent JavaScript timer platform.”

Since then, JavaScript timers on desktop browsers have improved vastly. Chrome 1.0 was the first to introduce a high resolution, deadly consistent JavaScript timer. This was soon matched by other browsers, and as a result, web developers have become used to respectable performance from JavaScript animations in desktop browsers. The most recent version of every major browser except IE has a 4ms timer with very good consistency even as the number of concurrent timers gets larger than 100. Internet Explorer before Windows 7/IE9 used the low resolution system timer as its JavaScript timer – which gave a 15.6ms timer resolution. This changed in Windows 7, which now offers two different resolutions, the old 16ms timer when your device is in power-saving mode and a new 4/5ms timer when in normal mode. (This configuration can be changed in advanced power options.)

Chrome 20

Firefox 12

Figure 1: Chrome 20 and Firefox 12 have high resolution, scalable and consistent timer implementations

JavaScript Animation on Mobile

However, mobile browsers have been a different story. The conventional wisdom has been that JavaScript animations on mobile can suffer from stutter and synchronization problems. This is one of the reasons that CSS Transforms and Animations have become a popular way to perform mobile animations since content movement is performed in hardware by the GPU and gets the benefit of sub-pixel tweening. However, there hasn’t been much written about mobile timers, so we decided to do a semi-scientific study of timer performance by running John Resig’s timer test on 20 or so of our mobile test lab devices. The test animates a pixel using setInterval() at 0ms timeout at various levels of concurrency and call stack depth. We tested devices running iOS3 through iOS5 on iPhones, iPads and iPods, Android 2.2 through 4.1 on Samsung, LG, HTC, Huawei and Motorola devices, as well as the RIM Playbook 1 and 2. Here’s what we found:

Timer Resolutions

Most mobile devices we tested had timers set at 10ms resolution. This was the case for the vast majority of Android devices, as well as devices running iOS3 and iOS4. Chrome for Android and iOS5 had faster timers: their timer resolution was 4ms. And the Blackberry Playbook 2 had the slowest timer: approximately 17ms. One outlier for the Android browser was the Motorola Droid 2 Global which had a timer resolution of 16ms. Finally, when we ran the timer test on our “straight-from-Google-IO” Nexus 7 tablet running Android 4.1 and Chrome for Android, we got an odd result which showed the timer whipsawing from 4ms to 10ms. (This may due to some webkit behavior that backs the timer off to 10ms, if it’s already processing a timer callback, but would love to see if anyone from the Chrome team has insight on this.)

In other words, the most recent devices running Android 4, Chrome for Android and iOS5 have desktop-class timer resolutions, while older Androids and RIM devices have timers that are 2x to 4x coarser grained.

Timer Consistency and Scalability

Next we looked at the variability of the timer measurements at various levels of timer concurrency and stack depth. The ideal performance result is a horizontal line at the y coordinate of the timer resolution—whatever that is. Here the results were a little varied.

Our star performers were the iPhone and iPad2 (below left), as well as the Motorola Xoom running the stock Android ICS browser (below right). Each were highly consistent at their respective timer resolutions of 4ms and 10ms, with no deterioration as the number of timers increased, and just one or two spikes. Other notable performers were Chrome for Android on the Motorola Xoom and one of our Samsung Android 2.3 devices.

iPad2 running iOS5

Motorola Xoom running Android ICS

More typical, however was a drift of anywhere from -5ms to +10ms around the expected timer resolution, particularly when the number of concurrent timers exceeded 8. This was true across all Android handset makers and all versions of Android 2. The typical result from an Android 2.x device looked something the example below—in this case, a Samsung phone running Android 2.3.5.


A Samsung phone running Android Gingerbread


Finally our worst performing devices. Surprisingly, one of these was from Apple. While all our iPods had noisy performance graphs, our iPod/iOS5 was particularly poor—with a few spikes that were literally off the chart. We also found the Playbook 2 timer to be extremely noisy, regularly spiking to 2x the 18ms timer resolution.

iPod running iOS5

Blackberry Playbook running Blackberry OS

Lessons learned and conclusions drawn

Our survey of mobile timers shows mostly good news. The most recent mobile browsers on Android—both stock Android and Chrome for Android now have desktop quality timers. Surprisingly, it doesn’t look like Apple is taking particular care to achieve good performance on the iPod browser. For highest performance on iOS, this probably means it’s best to stick with GPU-accelerated 3D transforms for the moment. It also reiterates the need for wide adoption of the work-in-progress animation timing spec.

20120712_survey-javascript-timers.png 1 Comment   Read more