Android 5.0 Lollipop: As Sweet as Promised

Android 5.0 Lollipop: As Sweet as PromisedAndroid 5.0 ‘Lollipop’ has certainly positioned itself to be one of the more significant updates Google has released, so far, to its mobile platform. With a brand new look via Google’s Material Design and over 5000 new APIs, it’s sure exciting!

Sencha is firmly committed to HTML5 and the Web, so we always keep a close eye on how new releases impact both developers and end users who rely on web technology. Because Android holds a dominant 51.5% share of mobile devices in the US (and almost 85% globally), we decided to dig into the new release and pull out the Web-specific details we felt were most important.

The Web on Android 5.0

Android 5.0 ships with Chrome for Android 38 as its default browser. This is not a big change for most Android users as they have been able to access this browser from the Google Play Store for a while now. We also know that Chrome for Android 39 is already rolling out to people and expect that most of ‘Lollipop’ device owners will be updated soon enough. The more interesting story for web developers lies in the new Android WebView.

Improvements to the WebView

The new Android 5.0 WebView is now based on Chromium 37 — but probably the biggest change we see on Android 5.0 is the fact that the core WebView is no longer coupled to the Android OS. Google is now able to push updates, changes and fixes to the WebView via the Google Play Store — allowing hybrid applications to benefit from more frequent updates than the whole Android OS release cycle. You can dig into all the info on this change by reading the Chromium WebView sections of the Google developer docs.

Now, with this great power comes potential disaster. As users have the final say on which things from the app store actually make it to their devices, this awesome feature could easily result in some serious fragmentation. For example, one user might be running a Chromium 37 powered WebView while others have already updated to 38 or 39.

If you are truly looking for a solution that cleans up such fragmentation on any mobile environment, check out Sencha Space.

You can also view our webinar recording:

Sencha Space — The Secure Way to Deploy and Manage Desktop and Mobile Apps

The New Goodies

We already pointed out how the WebView on Android 5.0 will run Chromium 37 — yet the default browser is Chrome for Android 38. This will cause some headaches for a while, as we can see in the difference between the middle and right columns of this chart. There’s a significant amount of green in the right column that is missing from the middle column.

The 5.0 WebView will be missing features like FileSystem, FileWriter, Battery Status, Full Screen and Web Speech. Interestingly enough, the Web Speech API seems to exist in Chromium 37, but there are simply no voices to actually do the speaking. And from what we can tell, the Web Audio API does seem to be working in Browser 37 even though it has not been verified on caniuse.com yet.

Needless to say, we hope Google will push out an update to the WebView soon with all of the Chromium 38 improvements.

In the meantime, lets take a look at some of the key features the WebView gained in Android 5.0 over 4.4.4:

HTML Import

As Android already supports HTML Templates, HTML Import is a very important feature update for the future of Web Components. This will allow developers to include HTML documents in other HTML documents without having to use messy hacks, iframes or JavaScript.

Web Animations API

This is another huge feature for the evolution of the Web Platform. The browser is now aware of the fact that users want to animate elements and will handle this natively. For example, instead of needing to manually track CSS values and modify them, you can simply use the element.animate() call and pass in animation properties. This will return a AnimationPlayer, which is useful for adding listeners or controlling your animation.

getUserMediaStream API

This API will open up access to external device data such as webcam video allowing for a whole different caliber of applications to be created.

WebRTC

We will finally have built-in support for peer-to-peer communication directly via the browser. This could be huge for enterprise communication applications or mobile gaming.

SVG Fragment IDs

As we mentioned in our previous iOS 8 blog post, this is a sneaky but powerful feature that opens up the ability for vector-based spritesheets. This is now available across the board on the latest browsers and is a great step forward.

WebGL 3D Canvas Graphics

Of course, the biggest monster feature we are all excited about is full hardware-accelerated 3D graphics support. Game developers will certainly be thrilled to see adoption of this feature across IE, Safari, iOS, Android and Chrome — but we have no doubt that app developers will be looking to tap into the power here as well.

Cordova and PhoneGap users will be extremely excited to see this boost for their applications, and as we look forward, we can see the ever expanding potential for the web as a mobile application platform. Sencha Space goes one step further and now provides an Android client app with a single WebView based on Chromium 38 for all Android 4.x devices. This improvement brings hardware accelerated graphics to the vast majority of the current Android install base.

Performance breakdown

HTML5 developers are always excited to see new features supported by modern browsers because they enable web applications to deliver rich experiences on any device. But beyond the capabilities of HTML5, developers also need their applications to be fast. How do web applications stack up on Android 5.0?

Unlike the recent iOS 8 update, Android 5.0 doesn’t ship with any across-the-board gains in HTML5 performance. On the one hand, the Android stock browser has been based on Chromium for a while and iterations on this have not “accelerated” a lot of major speed bursts.

We can however see how things are moving forward in the space as we break them down, particularly with the WebView. As one would expect, running Chrome 38 on 4.4.4 or 5.0 had no noticeable advantages in any of our tests. Note: all of these tests were done on our Nexus 7 (2013) running the Android 5.0 GA.

Octane V2

Here, we’re looking at Google’s own Octane v2 scores. We can see the Android 5.0 WebView has some remarkable improvements. For example, the Splay test is seeing a 324% improvement, Deltablue increased 87% and Box2DWeb gained 68%.

Seeing that Chromium 37 will be the baseline for all devices coming out with Android 5.0, performance certainly does appear to be moving in the right direction with this update.

Dromaeo Dom Core Tests

In the Dromeao Dom Core Tests, we can see the 5.0 WebView saw improvements in all areas except Dom Attributes — where it actually saw almost a 20% drop in performance. Dom Query, however, is a clear winner and a big boost in performance for Chromium 37. The charts make it hard to see, but the Android 5.0 WebView actually has an 18% increase over Android 4.4.4.

Dromaeo CSS Selector Tests

In the Dromeao CSS Selector Tests, you can see a lot of orange and blue in the lead here, which means CSS selector tests are a loss for us moving forward into Android 5.0. It’s fair to say that overall CSS Selector performance will not be as speedy.

Dromaeo JavaScript Tests

Here, we see another loss in performance as we move to Android 5.0 — we saw a drop in almost all of these tests. The most dramatic being a 16.8% loss of performance for Code Eval in the Android 5.0 WebView compared to Android 4.4.4. Though none of these are extremely major hits, we would always like to see the charts moving the other way.

IE Fishtank Test

We see another major loss here for Android 5.0, looking at 2D canvas drawing. In the more realistic tests of 100 Fish, we see about a 40% drop in performance for the Android 5.0 WebView. These kinds of FPS will not be welcomed by a lot of the web-based game developers out there.

SunSpider Tests

SunSpider tests are also not exciting to look at as the current leader across the board is the 4.4.4 WebView. String, Crypto and Date tests all saw about a 15% decrease in performance between the WebViews. We can see that the WebView performance did come out better than the Chrome 38 Browser for now.

HTML5 Tests

Last but not least, here is a simple look at the overall HTML5 ratings.

Hybrid applications running in the WebView gain a ton of features in Android 5.0 (score of 493) compared to Android 4.4 with a score of 434. Developers should be really excited to see the improved performance and new features in the WebView.

Conclusion

The release of Android 5.0 brings a mixed bag of reviews for HTML5 developers.

Although we are disappointed with the performance comparison this time around, it is worth noting that nothing really felt ‘slow’ or ‘sluggish’ on our devices. As we look forward to the new Nexus 6 and Nexus 9 (with their improved hardware), we can expect that performance will not be a key factor anymore.

Along with a huge gain in WebView features, we also are seeing a really nice developer workflow for Android. The independent updates should make innovating with the Web on Android devices a much better experience for everyone.

Anytime we see this many new features and this much support for HTML5, we can’t help but have a positive outlook on the future of the Web. We hope you found this information useful. Please feel free to drop us a line below in the comments.

To learn more, view our webinar recording:

Sencha Space — The Secure Way to Deploy and Manage Desktop and Mobile Apps

lollipop-teaser.jpg 1 Comment   Read more

Using GapDebug to Test Hybrid Web Apps Built with Sencha Frameworks

Introduction

Using GapDebug to Test Hybrid Web Apps Built with Sencha FrameworksDevelopers have been using PhoneGap (and subsequently Cordova) to deploy hybrid mobile applications since 2009, when it was first created. By allowing web applications to run on native devices, the HTML5 community fully embraced PhoneGap and thousands of apps have since been released on iOS, Android and a wide variety of other platforms. But while the wrapper itself is great, unfortunately the debugging tools have lagged far behind their browser counterparts — and debugging across multiple platforms has often been painful.

In this post, we’ll introduce you to the new Genuitec GapDebug tool and explain how it makes debugging hybrid applications deployed with PhoneGap far easier than ever before. We will also compare GapDebug to the popular Weinre debugger and highlight the key differences between them.

GapDebug LogoGapDebug

GapDebug is a free cross-platform mobile app debugger developed by Genuitec for use with Android and iOS PhoneGap (or Cordova) applications. It runs on both Windows and Mac OSX and is packed full of killer features for exploring every aspect of a hybrid app’s state and execution.

GapDebug is a free cross-platform mobile app debugger developed by Genuitec for use with Android and iOS PhoneGap (or Cordova) applications.

Many Sencha developers use Cordova or PhoneGap every day to deploy their hybrid applications — but debugging an HTML5 app directly from the device can be a very frustrating experience. GapDebug makes this process much easier, using a single interface for all apps and devices, and without requiring the developer to add special code.

How GapDebug Works – Plug and Debug

Before you can begin debugging, your iOS or Android devices require a simple 1-time configuration as outlined here. With your device configured, simply plug and debug by connecting your device to the GapDebug host computer using a USB cable. The device may prompt you to approve the connection. Once the connection is completed, the device info will appear on the left of the GapDebug user interface in the Device Panel.

On the mobile device, launch the app that you wish to debug. If the app is not already present or up to date on the device, use the app installation button GapDebug Download Image found next to the device info to select and install a new version of the app. Alternatively, you can drag and drop a binary app executable file on the device to install it. When the app is launched, the app’s ID and icon will appear just under the device in the GapDebug Device Panel.

Selecting the app in the Device Panel will start a debug Inspector in a new tab pane on the right side of GapDebug user interface. Two versions of the inspector are provided: for iOS apps a custom version of Apple’s Safari Webkit Inspector is presented, while Android apps get a custom version of the Chrome Developer Tools.

GapDebug (Windows version)
GapDebug (Windows version)

Before we dig in and start debugging, let’s first examine how GapDebug is different than the popular debugging tool Weinre.

GapDebug vs Weinre

Until GapDebug, Weinre was the go-to cross platform debugger for PhoneGap apps. Weinre was developed in early 2011 by Patrick Meuller as an open source solution for remote debugging of iOS and Android PhoneGap applications. It consists of a JavaScript library that is dynamically loaded by the app at startup, a debugger user interface that runs in your browser, and a server that handles communications between the application and the user interface.

Weinre is implemented in JavaScript and requires Node.js to install and execute locally, although you can avoid setting up a local installation by using one of several freely available online Weinre servers.

Weinre debugger user interface
Weinre debugger user interface

While Weinre remains an innovative tool, it is beginning to show its age. Let’s look at some of the pros and cons of using Weinre:

Pros

  • The debugger provides tools for DOM and CSS inspection, resource browsing and analysis, and a JavaScript console
  • Developers can simultaneously debug multiple apps across multiple devices
  • Mobile devices only require a network connection, no USB tether required
  • No special device configuration required
  • Weinre debugging works for a wider range of iOS and Android OS versions than GapDebug. (GapDebug supports Android v4.4 and above and iOS v5 and above)
  • Open source under Apache license

Cons

  • The Weinre user interface is a dated version of the WebKit Inspector
  • No JavaScript debugging and profiling
  • Not easy to reload the app for testing events such as deviceready
  • Requires modification of application code to include a special instrumentation script
  • Device must be online with a network connection, can’t debug offline scenarios
  • Requires processing time for communication with remote Weinre server
  • Server connection frequently times out, terminating your debug session unexpectedly

Using GapDebug to observe frequent Weinre network XHR activity in an application
Using GapDebug to observe frequent Weinre network XHR activity in an application

By contrast, GapDebug first debuted in June 2014 and is being rapidly enhanced with monthly updates by a small team at Genuitec.

Pros

  • Provides the most powerful hybrid app debugging features available through the use of special versions of Safari WebKit Inspector and Chrome Developer Tools
  • Professional Windows and Mac OSX installers, with automatic updates
  • Free for all users including commercial use
  • Simultaneously debug multiple apps across multiple devices
  • No requirement to modify application code with special instrumentation library
  • Device does not require a network connection, can debug offline apps
  • Easy app reloading to test events such as deviceready
  • Windows users can remotely debug iOS apps
  • Remotely view, control and debug Android apps over the internet

Cons

  • USB tethering may be considered a negative by some users
  • At this time, no common inspector UI (for cross-platform debugging, you must learn both the Safari WebKit Inspector tool and the Chrome Developer Tools — Genuitec is working towards a common UI in future release)
  • Currently only supports Android v4.4 and above and iOS 5 and above

Using GapDebug with Sencha

Because Sencha Cmd already has tight integration with Cordova and PhoneGap, Ext JS and Sencha Touch developers can immediately benefit from the superior tooling of GapDebug.

Using GapDebug, you can simultaneously debug multiple apps running on iOS and Android, and you can even debug iOS apps from Windows. Considering all of the HTML and CSS inspection, JavaScript debugging, and resource profiling capabilities, using GapDebug is a great choice when it comes to wrapping Sencha applications with PhoneGap or Cordova.

Summary

In most areas, GapDebug exceeds the capabilities of Weinre. While both GapDebug and Weinre applications require instrumenting to support debugging, GapDebug is not invasive and does not modify your application code. The GapDebug inspector tools are state of the art and function even when the device is offline. Lastly, GapDebug continues to be rapidly improved by the Genuitec team.

Download GapDebug for free and start debugging your Ext JS and Sencha Touch applications today.

analyzing-the-roi-of-javascript-in-enterprise-software-development-1.png No 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

Addressing Mobile Data Security (Part 2)

In Part 1 of this series, we explored how the increasing cost of data breaches coupled with the risk of increased mobility poses formidable challenges for IT-based organizations. The post discussed how MDM/MAM solutions can help to provide a basic level of protection, but fall short in certain key areas. In particular, MDM and MAM solutions do a poor job of providing application-level security unless organizations choose to rebuild or recode their applications. Organizations should complement their MDM/MAM deployments with solutions that use strong encryption and digital signatures to protect their sensitive data.

Using strong encryption and digital signatures can add another layer of protection if a mobile device containing sensitive data is lost or stolen. MDM/MAM solutions typically provide remote wipe of the device in the event of loss or theft. However, because this feature works at the device level, it erases all data on the device, including the end user’s personal data. This lack of granularity in MDM solutions is often cited as a barrier to end user adoption of corporate BYOD programs.

An ideal solution instead would be to manage cryptographic data security, maintain separation between personal and professional data, and constrain the scope of the remote wipe capability to the organization’s proprietary data, leaving the end user’s personal data untouched.”

An ideal solution instead would be to manage cryptographic data security, maintain separation between personal and professional data, and constrain the scope of the remote wipe capability to the organization’s proprietary data, leaving the end user’s personal data untouched. In addition, this approach would potentially address the privacy concerns many users have about turning their personal devices over to the control of their employer’s IT department.

Another growing threat to mobile data security is the explosion in mobile malware and network-borne threats. These are additional threats, under which MDM solutions fall short. Because an MDM solution works at the device level, if mobile malware manages to get on the device, it can access and exfiltrate proprietary data on the device. If the device is connected via a device-wide IPSec VPN to data center assets, the malware could potentially spread or gain access to data center resources as well. If the data were secured using fine-grained encryption (i.e. each data chunk encrypted with its own unique, long encryption key) then a malware data thief would have a very difficult time recovering anything useful in a timely manner.

Similarly, if a user connects to the internet via an insecure WiFi hotspot, all proprietary data should be encrypted on the wire or face the risk of a man-in-the-middle attacker gaining unauthorized access to sensitive data. An application level VPN can help to protect data-in-motion from this sort of threat. Unlike the device-wide VPN policy, an MDM solution can manage the application-level VPN and prevent other applications on the device from accessing intranet resources.

Managing devices can provide a minimum baseline for security compliance. However, organizations should focus instead on deep security of their applications and data itself, regardless of whether it resides on IT-issued or user-owned devices. This data-centric approach is especially important in scenarios where non-employee collaborators such as partners, contractors, and consultants require access to sensitive data.

In these scenarios, MDM/MAM solutions are particularly ineffective because IT cannot realistically mandate these external entities to subscribe to their particular MDM/MAM policies and applications. By combining encrypted storage with encrypted transmission at the application layer, an organization can help to ensure that their data is managed and as safe as possible from potential security threats. The solution should provide these benefits even when authorized business collaborators, such as partners and contractors, who are not subject to corporate IT policies access the data.

To learn more about how Sencha solutions can help to address mobile data security challenges, please click here.

20140227-space-security.jpg 2 Comments   Read more

Top Support Tips: July 2013

Increase App Performance by Disabling Image Slicer

Cmd’s image slicer is awesome when you have to compensate for some of Internet Explorer’s CSS3 deficits. However, if you’re not targeting Internet Explorer, you don’t need to go through the image slicing process! You can simply add skip.slice=1 to your .sencha/app/sencha.cfg file and you are good to go, sans slicer.

You can read more about customizing Sencha Cmd here.

Hello Global — Using Ext JS Custom Functions

Users always need to utilize custom functions and variables in a global perspective but knowing how to integrate them can be a little tricky. This is where creating a custom Utilities.js file saves the day. Simply add your custom functions to the statics block of a definition. Then, you can create reusable code that is easily accessible and readily available.

	Ext.define('MyApp.utils.Utilities', {
		statics: {
	    	MyFunction: function () {
	        	return “hello world”;
	    	},
	   	   MyVariable: 100
		}
	});

In the above example, your custom MyFunction() function could be called like this:

	MyApp.utils.Utilities.MyFunction();

Or similarly, you can retrieve your custom variable like so:

	MyApp.utils.Utilities.MyVariable

You can read more about static methods here.

Building Responsive Apps Using Button Sensitivity in Sencha Touch

As device resolution gets bigger and better, some users may experience issues with the button sensitivity in Sencha Touch. Fortunately, we introduced a new event recognizer configuration item called moveDistance in Sencha Touch 2.2.0. MoveDistance determines the maximum distance in pixels a touchstart event can travel and still be considered a tap. On larger devices, the default 8px may be a bit too low, so some taps may be disregarded. To adjust this sensitivity, simply add the following to your application block.

	Ext.application({
		name : 'MyApp',
		eventPublishers : {
	    	touchGesture : {
	        	recognizers : {
	            	tap : {
	                    xclass   	: 'Ext.event.recognizer.Tap',
	                    moveDistance : 20 //This was adjusted from the default 8
	            	}
	        	}
	    	}
		}
	});

You can read more about the moveDistance configuration here.

No Comments   Read more

Top Support Tips: June 2013

Check for Sencha Cmd Updates

Sencha Cmd moves very quickly. Sometimes it can be difficult to know if you are as up to date as possible. Luckily, Cmd now includes an awesome new feature. By executing the following command, you can check to see if you have the most recent GA.

sencha upgrade --check

Oh, you like living on the edge? You can find the most recent beta version with this handy snippet.

sencha upgrade --check --beta

Check out the docs.

One Store to Rule Them All

When building an app with Ext JS, conventionally, you give your store a storeId, which can then be shared via multiple components. However, if Grid A and Grid B share a store, and you filter the store, both grids will now present filtered data. What if you don’t want all of your components to be modified when the store changes? Have no fear!

When you define the store, you can give it an alias of ‘store.storealias’ (where storealias is your chosen alias name).

For example:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
storeId: 'MyStore',
alias: 'store.mystore',
fields: ['foo', 'bar'] });

Now, when you attach your store to your component, you’re actually attaching a new instance of the store and your components can remain separate.

store: {
type: 'mystore'
}

Android’s Got Your Back

If you want to use Android’s hardware back button, you will need to make some special concessions in your application. The back button consumes the browser’s window.history. Since most applications are single “pages”, the back button is ineffective in a Touch application since history is only populated with the app’s index page.

The best way to properly utilize the back button is to take advantage of the Sencha Touch routing system, which allows for deep linking. This works because routing will populate the browser’s history and allow for application navigation via the back button.

To take this a step further, you can manually manage window.history by pushing and popping views to and from the history object. This allows Android’s back button to function as you switch views in your application.

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 RC—Now with Native Packaging

Today, we’re happy to announce the release candidate of Sencha Touch 2 as well as our “native packaging for Windows and Mac”:#native-packaging.

Download Sencha Touch 2 RC   View Release Notes

*UPDATE*: Sencha Touch 2 GA is now available. Go download that instead!

h3. Six full-featured example apps

To provide some inspiration, we’re shipping six combination examples written by the Sencha Touch core team. Each uses best practices to help you get started on building your next great application.

  1. Jog with Friends Jog with Friends
    Combines Facebook’s social graph with a favorite activity.
  2. Touch Style Touch Style
    An infinite carousel of endless fashion items to keep every shopaholic happy.
  3. O'Reilly O’Reilly
    A conference template that’s as impactful as its content.
  4. TouchTweets TouchTweets
    Highlights how easy it is to consume all those @Sencha tweets.
  5. KivaTouch KivaTouch
    Help individuals around the globe.
  6. GeoCongress GeoCongress
    Keep a watchful eye on what your elected officials are up to.

In addition to the new examples, we have fixed various bugs and added some more features:

h4. Ext Direct

Combined with your favorite server side stack, you can now invoke remote methods client side using Sencha Touch.

// Calling a method on the server
myRemoteClass.myRemoteMethod();

h4. Enhancements to DataView

We now have a new option on DataViews that give your lists padding and rounded corners.

Ext.create('Ext.List', {
        ui: 'round'   // It's that simple
});

While we’re all accustomed to using carousels when transitioning between cards, we thought it would be helpful if we could add in the ability to horizontally scroll Lists. DataViews can now scroll horizontally giving you all the momentum scrolling goodness you’ve come to love.

Ext.create('Ext.List', {
     inline: { wrap: false }  // Smooth horizontal scrolling
});

h4(#native-packaging). Bridging to Native APIs

While we wait for native APIs to be exposed in standard browsers (WebKit just landed Vibration API), you can get access to many commonly requested APIs by packaging your app in a native shell. With the release of our native packager, you now have access to these popular APIs via JavaScript. In addition to a sample app and demo video, we’ve written a guide on Using Native APIs to show how simple using native APIs from JavaScript can be. This release candidate has the following APIs:

* Connection – tells you whether or not the device has a current connection to the internet
* Notification – allows you to use native notification windows (the native version of Ext.Msg)
* Orientation – gives you as much information as the device provides about its current orientation
* Camera – allows your app to take pictures or select from the camera library (with your user’s permission)

h4. Screencast

Quick walkthrough of packaging your web app for native distribution. View on Vimeo

h3. SDK Tools Update

Back in October of last year, we previewed our native packaging for iOS and Android as part of our SDK Tools. Although we only released the Mac OS version, we talked about being able to build these mobile applications on multiple platforms. Today’s release now supports the ability to package and sign iOS applications on Windows.

Download SDK Tools
Download for Mac   Download for Windows

h4. Getting Started

Once you download and install the SDK tools, you can start packaging your HTML5 app in a native shell by running a simple command.

notextile..

// Packaging made simple
sencha package ios.json

Let’s take a look at the json config file for packaging on Windows

notextile..

// Source of your ios.conf
{
                "versionString":"1.0",
                "iconName":"icon.png",
 
    "applicationName":"MyGreatApp",
    "applicationId":"com.yourcompany.MyGreatApp",
 
                // Your webapp path
    "inputPath":"C:/projects/MyGreatApp/www/",
 
             // Native app destination
    "outputPath":"C:/projects/MyGreatApp/ios/",
 
             // Destination App Store!!!!
    "configuration":"Release",
 
                "platform":"ios",
    "deviceType":"iPhone",
 
                // Your Developer Cert
    "certificatePath": "c:/certs/Developer.p12",  
                "certificateAlias":"iPhone Developer",
 
 
                "orientations": ["portrait",
        "landscapeLeft",
        "landscapeRight",
        "portraitUpsideDown"
    ]
}

If all goes well you should see the following:

notextile..

The application was successfully packaged
The application was successfully signed

To help get you started, we’ve written a native packaging guide to help get you started with the process. We think this functionality opens up a whole new world for web developers around the globe. Sencha is excited to offer these capabilities to the mobile community free of charge.

h3. Summary

We are extremely proud of this progress we’ve made in this release candidate. We’ve worked around the clock refining and polishing Sencha Touch 2 for general release! We believe that Sencha Touch 2.0 raises the bar for mobile web experiences. We hope you think so too.

h4. Follow Sencha Touch 2 Development

If you missed all the great progress in our development of Sencha Touch 2, catch up with our release blog posts from the last three weeks:

* *Feb 1*: “Sencha Touch 2 Beta”:http://www.sencha.com/blog/sencha-touch-2-raising-the-bar/
* *Feb 8*: “Sencha Touch 2 Beta 2″:http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/ and a tutorial on DataView
* *Feb 14*: “Sencha Touch 2 Beta 2″:http://www.sencha.com/blog/sencha-touch-2-beta-3-kindle-fire-and-chrome-support/ added support for Kindle Fire, and Chrome for Android
* *Feb 22*: Sencha Touch 2 Release Candidate
* *Mar 6*: “Sencha Touch 2 GA”:http://www.sencha.com/blog/announcing-sencha-touch-2/

native-packaging.png 66 Comments   Read more