It’s been an exciting year for the mobile Web. Adoption of HTML5 and CSS3, improved performance in mobile browsers, and an explosion of mobile app frameworks mean it’s more feasible than ever to create rich, interactive Web experiences for mobile devices. Using a wrapper like PhoneGap, you can distribute them via the native app stores for iPhone, iPad, and Android —targeting multiple platforms with a single codebase.
Or can you?
I needed a platform for Pints — a mobile app that answers answer the question, “Which beer should I order?” As someone who works in Web technologies on a daily basis I saw HTML5 & friends as an alluring option.
Pints isn’t complicated: a home screen, a few lists screens, a few forms. Its greatest complexity lies at the data level: as an iPhone app destined for San Francisco bars it can’t possibly rely on an Internet connection, so it has to keep a local copy of the beer database and sync it with the server when that’s available. HTML5 has the necessary building blocks in the form of several offline storage options; it’s just a question of writing the synchronization code.
Mobile Web developers have a plethora of frameworks to do the heavy lifting for them: animated transitions, toolbars, buttons, list views, even offline storage. Most of these are new and the landscape is shifting rapidly. I started Pints in jQTouch, then migrated to jQuery Mobile, and finally rewrote the whole app (now in private beta) in Sencha Touch. Along the way I also investigated Appcelerator’s Titanium Mobile. Here’s what I found:
JQTOUCH
jQTouch is easy to use and relatively well-documented. It’s featured in the excellentBuilding iPhone Apps with HTML, CSS, and JavaScript. jQTouch takes a progressive-enhancement approach, building an iPhone-like experience on top of your appropriately-constructed HTML. It’s simple, providing a basic set of widgets and animations and just enough programmatic control to permit more dynamic behavior.
But even in my simple test app there were performance issues. Page transitions can be jumpy or missing, and there are periodic delays in responding to tap events. And while the project is technically active, the original author has moved on and development seems to have slowed.
jQTouch is available under the permissive MIT License, one of my favorite open source licenses.
JQUERY MOBILE
jQuery Mobile is the new kid on the block. Announced in August 2010, it’s quickly progressed to a very functional Alpha 2. It takes a similar – but more standards-compliant – approach to jQTouch and feels very much like that framework’s successor, with a broader array of UI controls and styles.
jQuery Mobile’s performance is variable (though better than that of jQTouch), particularly in responding to tap events rendering animations. It also lacks a small number of key programmatic hooks that would permit easy creation of more dynamic apps. For instance, there’s an event that triggers when a page is about to load (i.e. slide into view) but no way to tell the associated handler code what UI element resulted in the page switch, or to pass additional information to that handler. I was able to create workarounds but hope that future versions will take a cue from jQTouch and build out this functionality a little more.
jQuery Mobile’s documentation is a little scattered but improving; I’m hopeful that it will become as robust as that of the core jQuery library. (Note that jQuery Mobile is really a mobile counterpart for jQuery UI, not for jQuery itself, on which it builds.)
jQuery Mobile is available under either the MIT or the GPL2 license.
SENCHA TOUCH
Sencha Touch is the mobile counterpart to the Ext JS framework. Its approach differs significantly from jQTouch and jQuery Mobile: instead of enhancing preexisting HTML, it generates its own DOM based on objects created in JavaScript. As such, working with Sencha feels a little less “webby” and a little more like building apps in other technologies like Java or Flex. (It’s also a bit more like YUI than like jQuery.) I personally prefer the progressive enhancement approach, but it really is a matter of preference.
Sencha is far more extensive than its competitors, with a vast array of UI components, explicit iPad support, storage and data binding facilities using JSON and HTML5 offline storage, and more. (It’s very cool to manipulate app data in one of Sencha’s data structures and watch the corresponding list update in real time.) It’s also the only Web framework I’ve seen with built-in support for objects that stay put (like a toolbar) while others scroll (like a list).
For all that apparent extra weight, Sencha performed noticeably better and more reliably than either jQTouch or jQuery Mobile in my tests, with the exception of initial load time.
When working with a library or framework, it’s usually counterproductive to “fight the framework” and do things your own way. Given how extensive Sencha Touch is, that means your app will probably end up doing just about everything the Sencha way. I’d originally used WebKit’s built-in SQLite database for offline storage but ultimately eliminated both complexity and bugs by moving that functionality into Sencha’s data stores.
The documentation, while extensive, has odd holes. Between those and the sheer size of the framework, I spent a lot of time fighting bugs that were difficult to trace and to understand. Responses to my questions in the developer forums were more frequent and helpful than with the other frameworks, but still ultimately insufficient. Sencha provides paid support starting at $300/year; I strongly considered purchasing it but oddly, their response to my sales support inquiries was incredibly underwhelming given my interest in sending them money.
Sencha Touch is available under the GPL3; under a somewhat confusing set of exceptions to the GPL that seem similar to the LGPL; or under a free commercial license.
TITANIUM MOBILE
Much like Sencha Touch, Appcelerator’s Titanium Mobile allows you to write apps using a JavaScript API. But unlike Sencha, it compiles most of your code into a native iPhone or Android app. That means it isn’t really a Web framework, but a compatibility layer or compiler. (Note that its cousin Titanium Desktop is Web-based, allowing you to write HTML/JS applications that run inside a native wrapper on the desktop.)
So Titanium allows Web developers to produce high-performance, easily skinnable native apps using JavaScript and a little XML, i.e. without learning Objective-C or Cocoa Touch. My simple test app blew away the true Web frameworks in terms of performance, and wasn’t much harder to put together.
But that advantage is also its greatest disadvantage: you can only target the platforms Titanium supports, and you’re tied to their developer tools. As if to prove this point, my test app quickly got into a state where it wouldn’t launch on the iPhone. Titanium doesn’t include much of a debugger; Titanium projects can’t be run and debugged in XCode; and it ran fine in the simulator, leaving me with no real way to attack the problem.
ANALYSIS
Rebuilding my app on three of these four frameworks was tedious but educational. I like jQTouch but have trouble believing it will evolve much from here. I’m rooting for jQuery Mobile for its simplicity and its very Web-centric approach to development…but it lacks a few key features and doesn’t perform as well as Sencha Touch.
It’s unfair to compare an Alpha 2 product with a 1.0 one, except in one respect: I need something now. Which brings me to Sencha Touch. I was initially impressed with its performance and breadth, but put off by its development style. As I’ve dug in, the holes in its documentation have been frustrating but the breadth has continued to impress me, and I’ve gotten more used to the coding style. The option for paid support is tempting, and I’d probably buy it if they’d answer my emails. But for now, Pints is a Sencha-based app.
CONCLUSION
I haven’t answered the big question: can a Web-based app really hold its own alongside native apps? And if so, are the challenges of getting it there worth the benefit of a single codebase?
Two weeks ago I was leaning toward no. Pints was in performance and bug hell, hanging for 10-15 seconds at a time; scrolling was choppy; and other animations were inconsistent.
But I’m hopeful again. In my next post I’ll discuss why, what I’ve learned, and my perspective on mobile Web apps today. I’ll also cover PhoneGap and other methods of distributing a Web app in a native wrapper. Stay tuned.
相关推荐
Chapter 5: User Identity and Visitor Tracking 137 Tracking Visits through Cookies 138 Managing User Identity 140 Contents ftoc.indd xvi 9/10/07 11:33:03 AM xvii User Identity Model Objects 140 ...
帮您比较目前各种主流的Java网路框架, 协助您做好SA~~ <br>在您下载完之后, 您还可以点击进入我的空间, 里面还有许多非常好的免费资源~
NULL 博文链接:https://angkor.iteye.com/blog/1047736
此软件介绍webwork and struts and jsf的区别
I n t r o d u c t i o n t o 3 G M o b i l e C o m m u n i c a t i o n s vi CONTENTS 5 Spreading Codes 111 5.1 Orthogonal Codes 112 5.2 PN Codes 114 5.3 Synchronization Codes 117 5.4 Autocorrelation ...
1.Overview of jQuery 2.Installation and documentation 3.Quick summary of jQuery selectors 4.Data centric Ajax: the $.ajax function 5.Content-centric Ajax: the load function 6.Handling JSON data 7....
Attention Flows:Analyzing and Comparing Attention Mechanisms in Language Models
每节课包含一个或多个 Node.js + Express 服务器,以及一个前端 Web 应用程序,准备运行和试验。 要运行特定课程的代码,首先打开该文件夹并运行bower install && npm install以下载所有前端和后端依赖项。 然后...
很经典的一篇分析和比较蒙哥马利模乘不同的实现方式的文章
Chapter 5: PHP Functions—Changing, Splitting, Slicing, and Sorting Arrays Chapter 6: PHP Functions—Comparing and Merging Arrays Chapter 7: PHP Functions—Searching, Traversing, and Displaying Arrays
hash code comparing objects in java collections.
jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items ...
This document contains ...comparing an approximated Rayleigh PDF with the cor-responding analytical PDF correlated Rayleigh-distributed fading samples generation in MAT-LAB. Monte Carlo Simulation
安装:npm install diff或者bower install jsdiffAPIJsDiff.diffChars(oldStr, newStr[, options]) - diffs two blocks of text, comparing character by character.Returns a list of change objects (See ...
Characterizing and Comparing Phylogenies from their Laplacian Spectrum
Comparing Protocols and Programming Languages 307 The Internet Protocol Stack 308 A Little Bit About the Internet Protocol 309 Internet Addresses 309 Internet Ports 310 Sending Internet E-mail ...
fully updated for Swift 5, is perfect for those with no programming background, those with some programming experience but no object-oriented experience, or those that have a great idea for an app but...
fully updated for Swift 5, is perfect for those with no programming background, those with some programming experience but no object-oriented experience, or those that have a great idea for an app but...
Comparing GET and POST H Processing the Information from a POST-Method Form H G CONTENTS http://docs.rinet.ru:8080/Using_Perl5_in_Web/ (2 of 24) [2/17/2007 1:22:34 PM] Making Your Perl Code Modular...