Using the New Sencha Extensions for Microsoft Azure 2.0

Using the New Sencha Extensions for Microsoft Azure 2.0A few months ago, Sencha released a package of connectors that combined the power of Sencha Touch with the capabilities of Windows Azure cloud services. The Sencha Touch Extensions for Windows Azure made building mobile cloud applications both easy and seamless by:

  • connecting to your data and custom APIs hosted on Microsoft Azure
  • authenticating users via Microsoft, Google, Facebook and Twitter
  • managing push notifications for iOS, Android and Windows Phone
  • using Microsoft Azure’s advanced Table and Blob storage

Thousands of developers have since looked at the Sencha Touch Extensions for Windows Azure, and we received a lot of positive feedback, so we naturally wanted to take the next step and make them compatible with Ext JS 5.

While all of the APIs remain the same, a number of things have changed under the hood. Let’s take a look at what’s new in our rebranded Sencha Touch Extensions for Windows Azure.

Note: to use the new sencha-azure package, you need to be using the latest version of Sencha Cmd (>= 5.0.2.264). Upgrading Sencha Cmd is easy — just run the following command:

sencha upgrade

Updated Package Name

When we first released these connectors, the package was named touch-azure per the Sencha naming convention (“touch-” because it was only compatible with Sencha Touch at that time). Now that we’ve made these extensions compatible with both Sencha Touch and Ext JS, we wanted the package name to reflect the update. The new package name is therefore sencha-azure — and it can be installed directly via Sencha Cmd.

First, simply add sencha-azure to your application’s app.json file under “requires”.

//…
"requires" : [ "sencha-azure" ],
//...

Then use Sencha Cmd to refresh your application:

sencha app refresh --packages
//or
sencha app build development

Sencha Cmd will then download the sencha-azure package from our CDN and install it into your machine’s local repository (e.g. /Users/arthurakay/bin/Sencha/Cmd/repo/pkgs/). As part of the refresh/build process, Sencha Cmd will copy sencha-azure to your application (or workspace) and rebuild your application’s dependency chain.

Despite the package name having changed, touch-azure is still 100% backwards compatible thanks to the Sencha Cmd package architecture. touch-azure is now an empty package which simply requires sencha-azure, so updating any applications to the latest version should be trivial. Nevertheless, we recommend using the new sencha-azure package moving forward.

New Package Architecture

In order to make sencha-azure compatible with both Ext JS 5.0.x and Sencha Touch 2.3.x, we first needed to solve the problem of framework-specific code. While most of the code in the Sencha Extensions for Microsoft Azure is shared between the frameworks, one of the first problems we encountered involved the inheritance chain.

The AuthOptions widget is a notable example. Ext.azure.AuthOptions is a simple interface for choosing an authentication provider, but Ext JS and Sencha Touch have very different inheritance chains involved with Ext.container.Container (Ext JS) and Ext.Panel (Touch).

Another example is Ext.azure.Push which requires a few Sencha Touch classes (e.g. Ext.device.Push) which don’t exist in Ext JS.

Using the New Sencha Extensions for Microsoft Azure 2.0

The solution, as seen in the file tree above, was to move our framework-specific code into /src-{framework}/ folders. This is a relatively easy solution to implement using Sencha Cmd — where we simply replace the following line in our /.sencha/package/sencha.cfg file:

package.classpath=${package.dir}/src

with:

package.classpath=${package.dir}/src,${package.dir}/src-${framework.name}

Doing so allows Sencha Cmd to index the source files of /src and /src-touch for Sencha Touch applications, or /src and /src-ext for Ext JS applications.

We also pull this same trick for framework-specific overrides:

package.overrides=${package.dir}/overrides,${package.dir}/overrides-${framework.name}

In short, most of the code for the Sencha Extensions for Microsoft Azure is shared between the frameworks, but we need to isolate the framework-specific bits and use Sencha Cmd to stitch it all together.

Sencha Extensions for Microsoft Azure 2.0 from Sencha on Vimeo.

We’re very excited about our strategic partnership with Microsoft, and we can’t wait for you to try the updated Sencha Extensions for Microsoft Azure.

By combining the power of Sencha frameworks with the capabilities of Windows Azure cloud services, we know that you’re going to build some fantastic applications. Tell us about them in the comments or on the forum.

sencha-extensions-for-azure.png 2 Comments   Read more

Creating Native Windows 8 Apps with Ext JS 5

Creating Native Windows 8 Apps with Ext JS 5Microsoft has a long and storied history in the field of web development. After Internet Explorer (IE) effectively won the first ”browser wars“ of the late 1990s and early 2000s, development on IE stagnated. IE6 was released in 2001 and quickly amassed 90% of the browser market share at that time — but IE soon received a poor reputation because it was not updated to support the newly emerging web standards in the years that followed. The subsequent ”browser wars“ of the late 2000s, coupled with the introduction of mobile devices, quickly eroded IE’s dominant market share.

But in recent years Microsoft has fought hard to improve its reputation as a leader in the tech community, specifically under the banner of HTML5. Microsoft first began touting the benefits of HTML5 back in 2010, and soon added their first HTML5 features in IE 9.

Microsoft’s support for HTML5 has continued to grow and expand since then (read the Sencha whitepaper). With the arrival of Windows 8 in 2012, Microsoft elevated web technologies as first-class development options to build native Windows applications. For the first time, developers could use JavaScript, HTML, and CSS to build and distribute as native Windows applications without the use of special wrappers or compilers.

As a developer excited by all things HTML5, I jumped at the chance to begin building Windows 8 applications. I even spoke about creating Windows 8 applications with Ext JS at SenchaCon 2013… but I quickly discovered how Windows 8 apps built with HTML5 were very different from those running in a browser.

Fast forward to 2014, and Sencha has released Ext JS 5. Among the many new features is a little known improvement that makes building Windows 8 applications completely seamless. Let’s take a quick look at how Windows 8 applications are different from basic web apps, and then dive into how Ext JS 5 makes it easier to develop Windows 8 apps.

Windows 8 Applications

Windows 8 originally shipped with IE10 as its browser, and now Windows 8.1 comes with IE11. According to multiple sources (HTML5Test.com, HTML5Readiness.com, and even Sencha) both IE10 and IE11 have pretty awesome support for HTML5 — which is important because native Windows 8 applications built with web technology effectively use the same rendering and JavaScript engines as IE10/11.

HTML5test.com score over the years.

However, because native Windows 8 applications can access the native Windows APIs, Windows 8 applications built with HTML5 are subject to the security model of the Windows shell. This security policy restricts many practices JavaScript developers take for granted — things like using the window API and dynamically adding HTML. But because many JavaScript frameworks handle DOM operations under-the-hood (Ext JS included), building native Windows 8 applications with your favorite JavaScript framework has historically been a challenge.

Ext JS 5.0.1 and the ext-win8 Package

With the recent release of Ext JS 5.0.1, Sencha has committed to making Ext JS comply with the Windows 8 security policy. This process involves two important parts:

  • Ext JS 5.0.1 was carefully crafted to include a special hook that, when configured, elevates restricted JavaScript and DOM operations into the proper execution context.
  • We created a special Sencha Cmd package containing the configured hook (ext-win8) that is incredibly easy to install.

As a result, you can build native Windows 8 applications using Ext JS, just as you would any other web application.

To install the ext-win8 package, simply add ”ext-win8“ to your application’s app.json file under ”requires“.

//…
"requires" : [ "ext-win8" ],
//...

Then use Sencha Cmd to refresh your application:

sencha app refresh --packages
//or
sencha app build development

Sencha Cmd will then download the ext-win8 package from our CDN and install it into your machine’s local repository (e.g. /Users/arthurakay/bin/Sencha/Cmd/repo/pkgs/).

As part of the refresh/build process, Sencha Cmd will copy ext-win8 to your application (or workspace) and rebuild your application’s dependency chain, ultimately including the necessary Windows 8 hooks.

Watch the following short video to see how it all works:

The sample application from the video is also available on GitHub.

Conclusion

By embracing HTML5, Microsoft has opened new doors for developers and provided access to new markets for HTML5 developers. Equally important, Microsoft has shifted from laggard to leader in HTML5 support—and in so doing has signaled strong support for the idea of multi-device, multi-platform, universal apps.

With Ext JS 5 fully primed, now is the time for developers to take a fresh look at the Windows 8 platform to evaluate how HTML5 creates new options for their businesses and their customers.

creating-native-windows-8-apps-with-ext-js-5.png 4 Comments   Read more

Connecting Your Sencha Touch Apps with Windows Azure

At SenchaCon 2013, our CEO Michael Mullany announced the beginning of a strategic partnership with Microsoft that connects our developer communities, combining the power of Sencha Touch with the capabilities of Windows Azure cloud services.

Today, we are introducing the Sencha Touch Extensions for Windows Azure — and it’s available now on Sencha Market or installed directly through Sencha Cmd:

sencha package get touch-azure

In this article, I’ll introduce you to the Sencha Touch Extensions for Windows Azure and give you some tips on getting started with using it in your Sencha Touch applications.

For more information and detailed instructions for getting started with the Sencha Touch Extensions for Windows Azure, check out our API documentation and guides. The package also ships with several examples to help you get going!

Sencha Touch Extensions for Windows Azure

The Sencha Touch Extensions for Windows Azure are a package that easily connect your Sencha Touch application to your Windows Azure mobile and storage services. It seamlessly supports:

  • connecting to your data and custom APIs
  • authenticating users via Microsoft, Google, Facebook and Twitter
  • managing push notifications for iOS, Android and Windows Phone
  • advanced Table and Blob storage

With Sencha Touch and Windows Azure, it has never been easier to develop mobile applications that live in the cloud! Check out this video: Using Sencha with Windows Azure Mobile Services.

Getting Started

Using the Sencha Touch Extensions for Windows Azure package in your Sencha Touch application is simple! After the Sencha Touch Extensions for Windows Azure are installed on your machine, the first step is to add the package to your app.json as a required resource:

requires : [
    'touch-azure'
]

Next, add Ext.azure.Azure as a required dependency in your Ext.application():

requires : [
    'Ext.azure.Azure'
]

Azure Mobile Services

If you are connecting your application to your Windows Azure mobile services account, the last step is to initialize Ext.Azure with your mobile services credentials:

Ext.application({
    requires : [
            'Ext.azure.Azure'
    ],
 
    //...
 
    launch : function() {
            Ext.Azure.init({
                    appKey : '...',
                    appUrl : '...'
 
                    //optional configs for authentication 
                    //and push notifications
            });
    }
});

At this point, we can choose to connect to our mobile service’s data using the Ext.azure.Proxy class. Just attach the proxy to any model or store as usual:

Ext.create(‘Ext.data.Store, {
    //…
 
    proxy : {
            type : ‘azure’,
            tableName : ‘mytable’ //from your Azure account
    }
});

With the azure data proxy, we don’t need to define a url on the store — Ext.Azure automatically knows where to connect to pull its data. The azure proxy will also correctly format the paging/filtering parameters and cross-domain HTTP headers for us, making it incredibly simple to interact with the Mobile Services REST API.

If we need to authenticate users, we can easily do this through Windows Azure as well. The Ext.azure.Authentication class (and optionally the Ext.azure.AuthOptions view) seamlessly handle the necessary oAuth redirects to authenticate users via Microsoft, Google, Facebook or Twitter:

Ext.azure.Authentication.login(‘twitter’); //launched oAuth dialogue/redirect

Finally, we can use the power of Windows Azure to manage push notifications across a variety of mobile devices. Using a Sencha Touch application packaged with Cordova, we simply need to add a pushConfig object to our Ext.Azure configuration:

Ext.application({
    requires : [
            'Ext.azure.Azure'
    ],
 
    //...
 
    launch : function() {
            Ext.Azure.init({
                    appKey : '...',
                    appUrl : '...',
                    pushConfig : {
                            ios : true,
                            android : ‘...’,
                            windowsphone : ‘...’
                    }
            });
    }
});

The Ext.azure.Push singleton will automatically register your device to receive push notifications. While the logic for managing and sending push notifications physically lives in the Windows Azure portal (see our user guide), your Sencha Touch application only needs to listen for the “pushnotification” event. Then you can notify the user as you see fit.

Azure Storage Services

If you are connecting your application to your Windows Azure storage services account, we can simply create Table and Blob components, as needed, in our application code:

var blobAccount = Ext.create('Ext.azure.storage.Blob', {
    accountName : '...',
    accessKey   : '...'
});
 
blobAccount.getBlob(
    //params here...
);

Using Sencha Architect

The Sencha Touch Extensions for Windows Azure are fully compatible with Sencha Architect. While you’ll need to follow our guide on installation, using Ext.Azure with Sencha Architect is very easy.

First, check that the Sencha Touch Extensions for Windows Azure package is available in your Toolbox:

Next, create a new property on your Application node named “azure”. It should be an object and look like this:

azure : {
    appKey : '...',
    appUrl : '...'
 
    //other configs for authentication
    //and push notifications
}

The last step is to drag Ext.azure.Controller into your Project Inspector. This class will automatically initialize Ext.Azure for us when the application starts — and now we can begin using the Ext.Azure utilities however we want.

To the Cloud!

We’re very excited about our strategic partnership with Microsoft and we can’t wait for you to try the Sencha Touch Extensions for Windows Azure.

By combining the power of Sencha Touch with the capabilities of Windows Azure cloud services, we know that you are going to build some fantastic applications. Tell us about them in the comments or on the forum!

20140220-touch-apps-azure-teaser.jpg 2 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

Microsoft Surface vs. the iPad gen 4: The HTML5 Scorecard



This week, we’ve been putting both the iPad gen 4 and the Microsoft Surface tablet through their paces to see how they stack up as HTML5 platforms. HTML5 is the next generation of web technologies that is increasingly being adopted to develop applications that can be written once and run on multiple operating systems, browsers and devices. Having comprehensive, high performance HTML5 support is now a “must-have” feature for new mobile devices. For end users, both these devices should deliver solid user experiences from well-designed HTML5 apps.

In our testing, we’re happy to say that both tablets are solid HTML5 platforms. The Microsoft Surface comes with Internet Explorer 10 and Windows 8 while the iPad comes with Mobile Safari and iOS 6. Internet Explorer 10 on the Surface has a broad, well implemented HTML5 feature set that mostly meets and occasionally exceeds Mobile Safari’s. On the performance front, the iPad 4 leads in JavaScript, interaction and Canvas performance: the Surface has a faster vector graphics (SVG) implementation.

Going in, we were bringing expectations set by the iPad gen 3 and our developer hardware for Windows 8. When we reviewed the iPad 3 in the Spring, we were disappointed with iPad performance. Ordinary web pages as well as HTML5 apps had stutter and visible tiling. Raw JavaScript performance was actually lower on the iPad 3 than the iPad 2. In our opinion, it was an underpowered device, so we were not entirely surprised to see the iPad 4 arrive with vastly improved hardware specs so quickly. On the Microsoft front, when we took our first look at the IE10 preview last Fall, we were very impressed with its HTML5 feature list, but wondered if performance would hold up on tablet-grade hardware. Read on to see what we found.

The Microsoft Surface

Since there are already plenty of reviews of the Surface tablet for the regular user, we won’t spend much time on its general features except to say that

  • The mixed keyboard/touch interface that Windows 8 pioneers is a winner,
  • Bezel gestures to activate control and navigation become natural quickly (but tend to activate inadvertently)
  • The integrated (and very sturdy) kickstand should become a standard tablet feature.

We’ll also note that if you plan to evaluate the Surface yourself, it’s essential to install all waiting upgrades including the pre-installed Office Preview. Before upgrading, entering text was absurdly and unpredictably laggy not just in Office, but also in browser-based input fields.

If you’re looking for Surface traffic, its user agent is: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0; Touch)

The Surface supports multi-touch, with up to five separately tracked simultaneous touches. Its JavaScript timer resolution is the Windows standard 16ms (or 64 ticks per second) when on battery power. When plugged in, the timer jumps to what appears to be a 4ms resolution (the same as iOS and Chrome for Android), but the timer became so noisy at this resolution that it was hard to establish exactly what the resolution was supposed to be. As we’ve noted before, JavaScript animations that use a setTimeout of zero to pace their progress will now run faster or slower depending on whether the Surface is plugged in or not. Using explicit time or requestAnimationFrame for JavaScript animation is once again highly recommended.

IE10 has a new collection of CSS properties and events to control touch event handling. All HTML5 apps (and web pages to boot) will want to use the ms-touch-action: none, to suppress OS pre-emption of touch events within their app. WebKit style touchstart, touchend etc. are not available. Instead we have Microsoft’s new pointerEvents, which unifies mouse and touch events under one roof. This makes use of a gesture abstraction library or a full framework pretty much essential for building cross-platform web apps. The Surface has a rock-solid implementation of position: fixed, and even makes a jittery attempt at supporting background-attachment: fixed — which Mobile Safari still ignores.

HTML5 feature coverage

We tested HTML5 feature presence using Modernizr. IE10 on the Surface has a long list of HTML5 features. This includes indexedDB, CSS animations, 2D and 3D transforms, gradients, transitions, workers, websockets, video and audio playback, and file API. Leapfrogging the iPad 4, IE10 even has a *-implementation of CSS Regions and Exclusions — which we think is a first for a shipping mobile HTML5 browser. Grid layout — which looks to be a permanent IE-only feature is also supported.

There are some notable omissions and deficiencies compared to the iPad 4. There is no support for the input tag for camera or video capture (introduced in iOS 6), the flexbox implementation is the older, superseded version. There is no border-image support (admittedly the border-image support in mobile Safari is not completely correct either.)

Neither platform supports WebGL, but Microsoft has previously said that it won’t support it. Nor were the more esoteric HTML5 inputs like color supported. Notifications and server sent events were likewise absent from both platforms.

JavaScript Performance

We ran both the iPad 4 and the Surface through Sunspider and Google’s V8 benchmark. Although Sunspider is an imperfect test, it has great historical comparability. The figure below shows the performance of the Surface and iPad 4 indexed to the iPad 2 = 1.0. As can be seen, raw JavaScript performance on both platforms is roughly 2x the iPad 2. The iPad 4 has a performance advantage with an average 20% performance edge over than the Surface. On version 7 of the V8 benchmark, the performance difference was more stark. The iPad 4 clocked in at 1565 vs. 775 for the Surface (higher is better), a 2x advantage for the iPad.

We should also note that if you’re running an app in a UIWebView on iPad 4, you’ll experience a dramatically slower JavaScript experience thanks to the pre-Nitro engine — about 30% of the speed in Mobile Safari.

SVG Support and Performance

Since IE10 has a hardware-accelerated SVG implementation, we decided to dig into performance for SVG. First, we ran David Dailey’s decahedra demo which combines rotating and overlapping shapes with SVG gradient animations. The Surface comfortably handled an entire screenful of 50 shapes with solid performance. In comparison, the iPad 4 started to show visible frame transitions at around 15 shapes. A more dynamic pseudo 3D corridor navigation game, reached approximately 18 fps on the Surface vs. 12 fps on the iPad 4.

The SVG implementation in IE10 on the Surface is rich with a full complement of SVG features. It’s fantastic, for example, to see broad support for SVG filter effects like color channel manipulation. We did notice a few minor blemishes. The performance of the lighting effects we tried was very poor (10s+) and the feSpotlight primitive was not supported. Lighting effects were noticeably darker than the reference SVG test images. And although Modernizr reported SMIL support, we were unable to get any declarative SVG animation to run successfully. SVG Filter effects are also imperfect on Mobile Safari, and anyone looking to use them should expect vigorous testing and cross-browser normalization.

Canvas Performance


The Microsoft Surface and the iPad 4 now join the iPad 2 and the RIM Playbook 2 as impressive HTML5 tablet platforms.

Raw canvas benchmarks like this one from mindcat showed the iPad 4 with about a 2x advantage over the Surface. In our benchmark, the iPad 4 scored 1.81 vs. the Surface’s 0.90. In a variety of Canvas test apps we saw perfectly acceptable performance from the Surface. This included canvas color cycling (once guaranteed to bring a mobile browser to its knees) as well as a variety of Impactjs-based games. On the other hand, the Craftymind videos that pull and manipulate video frames using Canvas worked smoothly only on the Surface. The iPad 4 showed no video playback at all. Other demos combining Canvas and Video worked perfectly on the Surface, but also did not work on iPad.

Beyond test apps, Microsoft’s own fishbowl demo seemed to be a good stress test of real world Canvas use. This demo composites multiple separate canvas contexts together on top of a background video, with sound effects in a separate audio element. There are also CSS transforms and CSS opacities present. With all effects disabled except basic sprite animation, the Surface managed about 110 concurrent sprite animations at 60fps, while the iPad 4 managed about 135. Strikingly, when we enabled more effects (masks, background, shadows and more.), the iPad 4 held up well while the Surface struggled. With all effects enabled except the background water video, shadow effect and audio, the iPad 4 could support about 100 concurrent sprite animations at 60fps, whereas the Surface was able to support only 10. Canvas compositing appears to be a particularly challenging graphics operation for the Surface vs the iPad.

CSS, DOM and Other Performance

Early mobile platforms had issues with CSS performance, but we saw good CSS performance with transition and animation effects. Although we had to hack together a non-Webkit version, our boat rocking CSS animation which combines 5+ concurrent animations was smooth and jitter free. Anti-aliasing of transformed edges (a notable problem for desktop Chrome) was quite good on both platforms although there is still a little work still to do. Gradients on both platforms were smooth and free of banding. Video playback was also trouble free.

Finally, on the DOM Interaction and CSS Selectors portions of the dromaeo benchmark, the iPad 4 simply crushed the Surface. For some time, Webkit has had a speed advantage over IE’s engine in DOM manipulation, but it’s shocking how wide the performance gap remains. Although DOM interactions are typically a small part of application time, expect some performance penalty from this source in highly dynamic applications.

(higher is better) iPad gen 4 Surface iPad Advantage
DOM Attributes 161.84 37.5 4.3 x
DOM Modification 136.5 13.9 9.8 x
DOM Query 4560.0 356.6 12.8 x
DOM Traversal 138.3 4.9 28.2 x
CSS Selector (Avg) 1654.7 458.7 3.5 x

An Embarrassment of Tablet Riches

The Microsoft Surface and the iPad 4 now join the iPad 2 and the RIM Playbook 2 as impressive HTML5 tablet platforms. Both are a big improvement over the iPad 2 — the previous best tablet for HTML5 apps. It’s also very encouraging to see Microsoft stepping up to the plate and delivering an HTML5 implementation that’s comprehensive and performant. There’s still work remaining of course. It would be nice to see SVG from both companies with native graphics performance in their next generation tablets. And getting camera and video access from a web page is a notable item on the Surface’s to-do list. We’re looking forward to reviewing the upcoming Surface Pro tablets with higher powered Intel processors.

SUMMARY FINDINGS Apple iPad (gen 4) Microsoft Surface (WinRT)
JavaScript Performance Excellent (2x iPad 2) Good (1–2x iPad 2)
DOM & CSS Interaction Excellent Poor
Graphics & Fonts Good (no webgl, svg perf -) Good (no webgl, SMIL)
Audio & Video Fair (limited manipulation) Good
CSS3 Styling Excellent Excellent
CSS3 Position & Layout Good (no grid) Good (old flexbox)
CSS Animations Excellent Excellent
Input & Semantic Elements Excellent Excellent
Multi-Touch Excellent (10 touch points) Good (5 touch points)
Timer Resolution Excellent (4ms) Good (16ms)
Database, File & Workers Fair (no IndexedDB) Good (no WebSQL)
Communications Good Good
Device access Good (no streaming) Poor (geo only)
Experimental features Poor Fair (Regions & Exclusions)
20121119-surface-vs-ipad-preview.png 11 Comments   Read more

Sencha Touch with Windows Phone 8

Today, we are thrilled to jointly announce with Microsoft Open Technology, Inc upcoming support for Windows Phone 8 in Sencha Touch. Since earlier this year we’ve been closely engaged with Microsoft Open Tech, who provided early access to the Windows Phone 8 SDK and technical support. This new support for Windows Phone 8 makes it easy for HTML5 developers to use Sencha Touch to develop and publish rich, powerful applications to the Windows Phone Store.

At Sencha, we’ve been bullish on Internet Explorer 10 for a long while now, and the advances in IE 10 on Windows Phone 8 are fantastic news for mobile application developers. Our customers are bullish too: In a recent survey, nearly 50% said they are planning to build apps for Windows Phone 8 devices in the next 6–12 months. We knew that Windows Phone support would be critical to them, and of course it is important to our larger mission of enabling developers to build universal applications that run on any mobile platforms.

Sencha Touch is the industry-leading JavaScript framework for mobile developers. Leveraging the cross-platform support of Sencha Touch, developers can add Windows Phone 8 support to their business applications with minimal effort while focusing on delivering core value through their applications.

As we noted in our original HTML5 scorecard for Internet Explorer 10, Microsoft has implemented the HTML5 spec as a first class citizen in the browser including many of the features required to make rich web applications, such as CSS3 transforms, CSS regions, CSS animations, and more. With the rich HTML5 support in Windows Phone 8 and through our collaboration with Microsoft Open Tech teams, we’ve now enabled Sencha Touch on Windows Phone 8.

We had a chance to talk to Jean-Christophe Cimetiere, Director Partner & Developer Programs, Windows Phone, Microsoft Corp. about this joint announcement:


We are very impressed by the outcome of this added support for Windows Phone 8 in Sencha Touch. The enhanced web standards support in Internet Explorer 10 allows web developers to deliver a great experience to their users,” said JC. “We welcome Sencha Touch to the Windows Phone 8 partner ecosystem and we are looking forward to the great applications developers will publish using Sencha Touch.”

We’re also adding a Windows Phone 8 theme allowing our developers to integrate their applications into the Windows Phone 8 experience, taking advantage of the new platform’s designs and layout. If you’d like to explore this for yourself, download the Sencha Touch Windows Phone 8 examples, including the Kitchen Sink. Please note that you will need the Windows Phone 8 SDK and a Windows Phone developer account to run this example.












A few of our customers have had the chance to use an early version of Sencha Touch with Windows Phone 8 support and shared with us their first impressions.

Craig Walker, CTO, Xero

“We’re thrilled that Sencha Touch will support Windows Phone 8. We chose Sencha Touch for our mobile app, Xero Touch, because the framework is built on open web standards and enables us to build a universal app that supports a wide range of platforms,” said Craig Walker, CTO, Xero. “Using Sencha Touch, we get to focus on delivering a beautiful user experience,” he continued.

Jay Garcia, CTO, Modus Create

“Sencha Touch support for Windows Phone 8 is seamless. We built our Diablo III companion mobile app with Sencha Touch because the open platform allowed us to quickly build and publish our app to multiple devices,” said Jay Garcia, CTO, Modus Create. “Using the same HTML5 and JavaScript code base, we got our app to run on Windows Phone in just a few days. The new Sencha Touch theme gave our app a Windows Phone look and feel, making it even more intuitive for users,” he continued.

An update to the Sencha Touch framework with Windows Phone 8 support will be released later this year. Feel free to browse the examples to see how well Sencha Touch works on Windows Phone 8. We look forward to seeing the applications our developer community will unleash in the market.

See also:

Announcement in the Microsoft Interop Blog

Read more about Modus Create Diablo III companion mobile app on Windows Phone 8

20121029-blog-wp8-thumb.png 36 Comments   Read more

Building SharePoint Web Apps using Sencha Touch

Guest Blog Post: Luc Stakenborg of Oxida

Building SharePoint Web Apps using Sencha Touch In this post we will explore how to build a SharePoint mobile web app using Sencha Touch, a great mobile JavaScript framework for building HTML5 apps. SharePoint 2010 is a very comprehensive platform, but mobile support is fairly limited. Although it is technically possible to customize the mobile user interface on the server side, this is not allowed in cloud-based SharePoint (e.g. in Office365).

An alternative approach is to build a web app where the UI is generated in the browser and connects to one of the SharePoint APIs to access data stored in SharePoint. SharePoint 2010 offers three data APIs which can be used in web apps:

* SP Web Services (SOAP)
* REST (ListData.svc)
* CSOM (Client Side Object Model)

Although each of the APIs offer a distinct set of capabilities, the REST interface is simple and lightweight and I prefer this for mobile use. The SharePoint REST interface offers full CRUD access to items in SharePoint lists and libraries, which might be all that you need for your mobile web app.

h3. Getting Started

Because of the Same Origin Policy, your html file must be served from the same domain as the SharePoint site you want to access. You can place your html file containing your app on the server file system or in a SharePoint document library (e.g. site assets).

If you are using SharePoint Online (Office365), you will notice that when you select a .html file in a doc library, it is presented as a download, not opened in the browser. This is due to SharePoint settings which you are not allowed to change in SharePoint Online. As a workaround, simply use an .aspx file extension, instead of .html. This way, you can start your single page SharePoint application from a file in an asset library.

So, to get going, you need to create an app.aspx file to include all the CSS and JavaScript for your Sencha Touch app.

<!DOCTYPE html>
<html>
        <head>
        <title>SharePoint web app example</title>
             <link rel="stylesheet" href="sencha-touch.css" type="text/css" />
             <link rel="stylesheet" href="app.css" type="text/css" />
             <script src="sencha-touch.js"></script>
             <script src="app.js"></script>
        </head>
        <body>
        </body>
</html>

The app.js file contains the basic Sencha Touch start-up and shows an alert:

new Ext.Application({
    launch: function () {
        Ext.Msg.alert('Hello world', 'Ready for action!')
    }
});

You can put these files in any SP doc library. Let’s assume you have put this file in the Site Assets library of a SP site called demo:

image

Now you can open up the following url on your iPhone or Android device:

http://[[SPserver]]/demo/siteassets/app.aspx

After logon, you will see the following result:

IMG_0724

Not quite what we expected… SharePoint has detected that we accessed the page with a mobile device and responds with the default mobile UI. You can suppress the default mobile UI by appending ?mobile=0 to the url.

So, let’s try: http://[[SPserver]]/demo/siteassets/app.aspx?mobile=0

IMG_0725

Yes! We now have a Sencha Touch web app running off a SharePoint server.

h3. OData proxy

The next step is to connect Sencha Touch models and stores to SharePoint items and lists through the REST interface using the OData protocol. For this, you will need an OData proxy. I developed an OData proxy as an Ext user extension. It is designed to access SharePoint data using the SharePoint ListData.svc REST service which is based on OData. You may use it for other OData sources.

You can find the OData SharePoint proxy for Sencha Touch on GitHub.

Ext.ux.ODataProxy features:

  • create, read, update and delete SharePoint items as Sencha Touch models
  • fetch multiple items from a SharePoint list in a Sencha Touch store
  • JSON payloads
  • partial updates: only changed attributes are sent to the server during an update
  • fixes issues in Sencha Touch data Model implementation (e.g. missing destroy() method)

Let’s look at some examples of how you can use the SharePoint proxy. In these examples, we will assume you have a subsite ‘/teamsite’ in which you have created a Contacts list based on the standard Contacts list template.

First, we need to define the Model.

var Contact = Ext.regModel('Contact', {
    fields: [
            // please note CamelCase convention for SharePoint column names
            { name: 'Id', type: 'int' },
            'LastName',
            'FirstName'
        ],
 
    idProperty: 'Id',
 
    proxy: {
        // use the special odata proxy defined in odataproxy.js
        type: 'odata',
 
        // the proxy will connect to the List
        // named 'Contacts' in the /teamsite subsite
        url: '/teamsite/_vti_bin/ListData.svc/Contacts'
    }
});

We can now use the following CRUD operations on the Contact data model:

 // Create an instance
 var contact = new Contact({ LastName: 'Johnson', FirstName: 'Al' })
 contact.save();
 ...
 
 // Read an instance from the server by id
 var id = 200;
 Contact.load(id);
 ...
 
 // Update an instance, loaded from the server
 Contact.load(id, {
         success: function (contact) {
                 contact.set("LastName", "Maxwell");
                 contact.save();
         }
 });
 ...
 
 // Delete an instance
 Contact.load(id, {
         success: function (contact) {
                 contact.destroy()
         }
 });
 ...

Using the Contact model, you can now easily define a Store to fetch multiple items:

var store = new Ext.data.Store({
        model: 'Contact'
});
store.load()

h3. Build Your Application

Using the odata proxy to configure your Models and Stores that connect to the SharePoint server, you can develop your app further just like any other Sencha Touch app. Check out the tutorials on Sencha.com for more info.

I will conclude with an example of a contact list through the normal SharePoint UI and through a Sencha Touch app:

image

image

Just as easily, you can expose the content of document libraries:

image

image

h3. Live Demo

A live demo is available at http://oxida.sharepoint.com/demo. You can open the mobile web app and also explore the content of the SharePoint site with a desktop browser.

image

Sencha Touch and SharePoint are a great combination and open up exciting new opportunities for companies using SharePoint. Give it a try!

sharepoint-thumb.png 32 Comments   Read more

IE10 Preview: HTML5 First Look

Internet Explorer 10 logo

Over the last year we’ve been putting every new major mobile platform through a battery of tests to assess how they stack up as an HTML5 application platform. So far, it’s been thumbs up on Apple, RIM and HP tablets and thumbs down on Android tablets. But we’re still crossing our fingers that the Ice Cream Sandwich release of Android will make the grade.

To date, we haven’t spent time on Windows phones, mostly because the Windows Phone 7 browser was so poor that it wasn’t worth evaluating. However, at the Windows Build conference last week we got our hands on a developer preview tablet running Windows 8 and Internet Explorer 10. We wanted to share our first impression of the HTML5 experience. Simply put, (and with the caveat that we were running on the notably overpowered developer preview hardware) the IE10 HTML5 experience is one of the best we’ve seen on any platform to date. After a decade of web neglect, Microsoft is back with a vengeance.

h3. The Windows 8 Web Platform

Windows 8 Metro platform

Before we go into the details of HTML5 support in Win8/IE10, it’s probably worth stepping back and covering some essentials of Windows 8. Windows 8 represents a big shift in Microsoft strategy because it makes web technologies a Tier 1 development option for native Windows apps.

To repeat: **applications developed in JavaScript/HTML/CSS can now be built and distributed as native Windows applications**.

The core Windows services for graphics, i/o, device access etc. all have JavaScript bindings equally as rich as the bindings for developers working in .NET or C++. The Microsoft message is that you can now build any native Windows app using web technologies.

So… what will be the differences between simply developing a web-based app for use by IE10 and developing a web app that gets delivered as a Win8 native app? The first difference is the resources that you’re allowed to access and how you’re allowed to access them. As a web-based app, you don’t get access to protected system resources such as camera, printers etc. To package your web app as a native app, you must create a permissions manifest file describing the protected resources that your app wants to access, and then submit your app to the (forthcoming) Windows app store. On submission, it will be checked for compliance with a battery of technical and policy tests.

Although it wasn’t altogether clear from Build, our guess is that app store compliance testing will be Microsoft’s mechanism for controlling web technology evolution on the Windows platform.

h3. HTML5 Support

So, what’s new in IE10? A huge number of new features, particularly in the area of UI elements and effects. The IE10 preview supports almost every visual HTML5 and CSS3 feature that’s been introduced in the last three years and several more besides. IE9 was already a serious step-up for Microsoft with capabilities such as hardware accelerated Canvas, but IE10 introduces much more including:

* CSS Transforms and Transitions: 2D and 3D transforms work smoothly and at high quality. Anti-aliasing and perspective handling for 3D transformed elements is visibly superior to many other browsers. And the smoothness of transforms is impressive which means that they’re probably hardware accelerated.
* CSS Animations: are fully implemented with the syntax pioneered by WebKit. This is very exciting for us because it means that Sencha Animator animations play easily on IE10 with a simple find/replace of –webkit to –ms.
* CSS3 Shadows: both text and box shadows are completely supported (including inset shadows!). Combining shadows with other effects works flawlessly.
* CSS3 Gradients: fully supported with new style webkit/mozilla syntax which allows circular and elliptical radial gradients among all the other options
* And that’s just the start. There are also web workers, web sockets, web fonts, Indexed DB, SVG filters, flexbox layout. Border-image seems to be the only thing not implemented.

Remarkably, particularly for developers trained to look out for Microsoft platform tie-ins, there are none on this list. Microsoft simply implemented the draft standards with no extensions or gotchas.

h3. Microsoft Gets Some Firsts

In addition to substantial catchup on UI-related features, IE10 also pioneers some new technologies that haven’t made it into other browsers yet such as CSS Regions and positioned floats. CSS Regions is a working draft authored by Adobe that enables newspaper style layouts with features like irregular inserts that span multiple columns, as well as configurable text flow around floating elements. These are very useful for publications that want to duplicate print-style layouts on the web. (Finally, Microsoft is still pushing grid layout, although it continues to be the sole browser that implements it, and predecessor specs have languished in the CSS working group for years.)

IE10 also has some nice extensions for touch interfaces that control scrolling and pan/zoom on elements. For example, the new -ms-content-zooming CSS property controls zoomability and the -ms-scroll CSS properties control scrolling behavior. These do not seem to be standards track yet, so it would be good to see some working drafts from Microsoft covering these new properties.

h3. What’s Missing From IE10?

With all the substantial catchup, there are a number of notable HTML5 technologies that haven’t appeared in IE10, and given Microsoft’s platform strategy, seem unlikely to ever show up there. First, WebGL is explicitly off the menu. To work with 3D graphics, it seems that web developers will have to use the JavaScript bindings to Windows Direct graphics APIs and distribute their apps only as Windows apps. Similarly, media capture and Device APIs are missing and given the thrust of the strategy, seem unlikely to show up anytime soon. These are the types of API’s that Microsoft wants you to consume via native bindings.

h3. And What Will Ship?

If you couldn’t tell already (!) we’re very excited by Windows 8 and IE10. We think it cements HTML5 as the standard cross-platform app development tech. We wish we didn’t have to use native packaging to get access to interesting device API’s, but Microsoft is unlikely to implement these without a competitive spur. The final, but major, caveat is whether all these technologies will retain their speed and performance when Windows 8 is squeezed onto next year’s $299 tablets which are likely to have a GigaByte of memory and a lower-powered ARM processor.

We certainly hope so.

sencha-HTML5-IE10-metro-thumb.png 25 Comments   Read more