We’ll be presenting at the HTML5 Dev Conf on 5/20/2012 in San Francisco.  The topic will be “Optimizing mobile HTML5 UX Performance - iOS and Android devices”

We learned a lot during the creation of jqMobi and jqUi and will cover the issues we’ve found, along with the lack of performance most frameworks have on Android.  We’ll have the slides up after the talk for everyone to view.

On another note, 1.1 is going well.  We’re at an alpha release right now with a lot of internal testing being done.  We hope to have a beta out in a few weeks.

Today I’m going to give you the background on how a plugin gets developed.  They usually are developed for one of three reasons

1. Enhance the framework/application
2. Fill a “missing” part
3. Fix a bug that exists in the native code

We have plugins that deal with all three.  The last type is generally the hardest to work around, as you are trying to figure out the root of the issue (-webkit-transform on android) and see what works/doesn’t in fixes.  My favorite type to develop are filling in a “missing” part.

jq.actionsheet.js is a plugin that fills in a missing part.  It is present in other frameworks and exists in the iOS native SDK.  Below I am going to describe how we went about creating the jq.actionsheet.js plugin.

First Step (whiteboarding)

Since there was already a clearly defined UI element and flow, it was fairly simple to replicate.  We started out with the HTML/CSS of the elements, trying to leverage existing CSS classes if possible.  Ee also wanted a standard scheme that followed Apple’s UI guidelines.

We started hacking around with the HTML to get the colors, borders, elements, etc working and lined up.  Once we were happy, we created the basic css classes for it.

Second Step (hacking)

Next we started prototyping out the animation/flow.  We wanted to make sure it loaded from the bottom and slid into view.  At first, we went with positioning it from the bottom, but it did not get proper acceleration support from CSS3.  This was fixed in a later release.  Once we got the animation/layout working we started writing the plugin.

Third Step (prototyping)

Now we started the actual plugin code.  We did the standard jqMobi setup, then created the actionsheet object.  The first part was accepting an HTML string and setting up the HTML to be appended to display it.  After it was displayed, we had to wire events for click handling/closing.  Once we had our prototype together we started testing it.

Fourth Step (testing/refactoring)

Since we had the prototype done, we started testing it and extending the API.  We added a json object for options, fixed bugs, tested more, etc.  This is usually the longest part and sometimes the plugin will sit for a day or two while we are working on other projects.  This gives us time to let the code settle and define exactly what the end goal will be.  We try to look at what others do and make it similar.  After we have gone through the ropes, we do a release to the public and integrate into jqUi if needed.

Fifth Step (fixes, enhacnements)

This is the final step and is never ending.  Once it’s in the public, people will find bugs and as for feature requests.  In the case of the actionsheet, we had submissions to fix animations (animate closing) and add a mask in the background. For the most part, development stops on the plugin except for the above.  We are always running the plugin through tests as other features get created and will often make minor tweaks/enhancements to it as needed.

That is a quick overview of how a plugin gets started and developed for the core of jqMobi. 

1.02 went live yesterday.  There were only a few minor bug fixes from 1.02RC2.  Get it from github.

I just uploaded the 1.02 Release Candidate 1 into Github.  You can get it here .  Please view the readme.txt and changelog.txt as there are big changes.

NOTE - This is NOT a drop in upgrade.  There are CSS changes that will break your app if you modified the original CSS file.  Below is from the readme.

———————————————————————————————————

This is the 1.02 Release Canidate 1.

There are major changes made to jqUi.  We have only supplied the default jq.ui.css theme currently so we can focus on that working and then we’ll update the other themes.

Change Notes

1) Transitions were pulled out of jq.ui.js into their own folder.  You can now include just one, or all of them.

2) Major changes were made to the css files dealing with transitions/positions.  Panels are no longer staged to the left.

   This is needed for the next major update that will introduce native scrolling on iOS5 devices.

3) We reworked a lot of the effects to take full advantage of -webkit-transform, like transitions, side menu animation and action sheet.

4) We’ve added the ability to add custom headers via the <header> tag.  You can reference them on the panel with the data-header attribute.

5) You can now put custom <header> and <footer> tags inline in panels and they will be used on that panel only.

6) $.ui.updateNavBar().  This has been deprecated.  We use a listener now to process clicks on navbars.

7) ui/jq.ui.js now is similar to the minified version, all plugins (minus jq.mobi.js) are included.  The source has been moved to ui/src/jq.ui.js (not included)

8) Added new jq.ui property - showLoading:true -  This will show the loading spinner on ajax requests. Setting this to false will not show a loading screen.

9) Added new jq.ui property- isAjaxApp:false - When set to true, this will treat every request as if the anchor had data-refresh-ajax=true and data-persist-ajax=true

   properties.  

10) jq.ui.css - Removed images for expand/collapse class and close button.  They now use CSS3.  Any other images have been converted to data-uri’s.

11) icons.css - removed SVG file and embedded TTF as data-uri.

Bug Fixes.

1) Fixed events not propegating on navbar anchors

2) Fixed transition bugs on iOS devices

3) Fixed spacing bug in default navbar - there was a 2 pixel space between tabs until a new footer was loaded.

4) Fixed z-indexing issues in the header with the back button and title

Just wanted to give a little dev update with jqMobi.  We’ve got a ton of features/fixes/rewrites that we’re working on, but here is a list.

1.02 -

1. Separate out transitions from jq.ui.js - A lot of people only use slide, so this cuts down on file size.
2. Re-do transitions/positioning.  They are no longer based 100% off the left, but now in the center (this is for a later release, but fixes other bugs).
3. CSS3 animation fixes - this helps with transition performances
4. jqDistribution - This allows you to build your own minified verison of selected jqMobi/jqUi/jqPlugin files.  
5. jqBoilerplate - This is a boilerplate app for jqUi apps.  It will be basic starting point with a simple theme

1.03-

1. jqMVC beta release -  basic MVC framework that works great with jqUi
2. Bug fixes
3. ??

1.1 - 

1. Native scrolling in iOS 5
2. Re-working of srolling library for Android and iOS<5
3. Theme builder (perhaps SASS/Less/Compass)

A lot of people have been asking how to get involved with the jqMobi project.  The first thing to do is go to http:///www.github.com/appmobi/jq.mobi and fork the repository.  Next, take a look at the source files to get familiar with the code base.

1. /jq.mobi.js - the query selector
2. /ui/jq.ui.js - jqUi js
3. /plugins/*  - Good idea to look at them all.

Once you are familiar with the codebase, I’d suggest looking for bugs in existing code.  Try hammering out the files and see if something breaks.  Often fixing a bug gives you a better understanding for the underlying architecture.  When you’ve found a bug and fixed it, submit a pull request on github for review.

If fixing bugs isn’t your thing, scan the code to see if you can find any optimization. There may be cases where our implementation is sub par, or we left old code in by accident that does nothing.  Make your changes, test them and then submit a pull request to github.

Got an idea for an enhancement or new feature?  If you have a change for jqMobi or jqUi, get in touch with us first to discuss it so we can understand the global impact.  If we agree that it should be added, we can discuss implementation guidelines and any expectations.  If you have changes to plugins, make the changes with the expectations any changes should not have impacts on existing codebase who wish to upgrade with the release.  What this means is if you are changing how something interacts, e.g the popup plugin doesn’t close when hitting “done”, it should be a config item that allows users to specify it.  That way, anyone upgrading will not be forced to figure out why their popup isn’t closing anymore.

Get involved now!

We need immediate help creating a LESS/SASS stylesheet for our CSS themes.  If you have experience with this, let us know.  With the sheet, we’re also going to create a tool that users can modify/change on the web.

1.0 is locked and ready for launch.  Look for it to drop in the next week at Github.

I’m happy with what jqMobi and jqUi have become.  We’ve found more and more people are reverting back from zepto.js to jQuery because of the lackluster performance of zepto.js.  With that, they are estatic with jqMobi’s performance and have been adopting that in frameworks.  Below are a few we’ve seen it in.

1. backbone.js
2. angular.js
3. knockout.js
4. twitter bootstrap (on the desktop…I know)

jqUi as been steadily evolving.  I’m still not happy with the lack of simple themeing, but we’re working on it.  The six themes provided now are good, but I want a tool (less/sass) that lets developers create their own easily.  We’ve seen jqUi used on websites, moibile apps, and a push to replace it in existing frameworks like Rhomobile.  

So where does that leave us going forward?

jqMobi - Mostly bug fixes.  I do not see too many API functions needed.  There are a few functions that need to be extended to support more jQuery compatibility (like object/function caching on attr).  We should also have jqMobi ready to be a replacement in twitter’s bootstrap in 1.02 release.

jqUi - Big focus on forms (jq-ui-forms are OK, but buggy), better themeing support.  I’m also toying around with basic MVC support, but it will be extremely minimalistic. Just something to make separation of code/presentation easier.

I’ve also been toying around with different projects using jqMobi/jqUi on my spare time.  I’ve got a neat “theme” I’m hoping to release soon and want to build support for another os (WP7 - I just need a phone :p ) but most of this will come from my own time.

I’m excited to say we are wrapping up development on 1.0 and are hoping to release a beta soon.  We’ve been using it on a few apps at appMobi, so it’s always fun to get real world usage to figure out “bugs”.  Here’s what’s left that will be pushed into Github before the 1.0 release

1. Dialog/Popup box plugin (native alerts cause double click issues on ios) - courtesy of Indiepath (I need to bug him about that :p )
2. Action sheet menu (menu system pops up from the bottom)
3. Themes - we have 6 of them
4. Examples - a jqMobi/Backbone.js sample, a Knockout.js/jqUi sample and a fake jqUi app to show customization

While I would have like to seen 1.0 get released a week ago, I’m psyched for what this release will have.  The features and functionalities added since the initial 0.9.0 release is way above what I was hoping for.  The feedback has been great and everyone wants “more more more”.  We’ve also tried to keep our main principals in tact.

1. Focus is mobile
2. Lightweight and fast
3. Performs great on android

Android has brought a ton of problems.  There are numerous bugs with -webkit-transform that has caused most companies to avoid using it…they’ve even commented in their  source code about “broken” OS versions.  Here are things we’ve fixed in Android that we are proud of.

1. Hitbox issue on select boxes and password boxes
2. Jumping inputs due to -webkit-transform
3. UI performance

#2 was interesting.  The screen tries to scroll back into view of the original hitbox, then to where it exists now.  The way we found to fix it was expose even more “bugs” in the browser.  When adding another -webkit-transform and hiding the overflow (original hit box), the browser stopped trying to render it as a “special” input.  This allowed the original styles to show (no white box over the top), but breaks Android 2.1 (oh well).

So there are a few steps we have to do to fix android.  The css hack above allows us to get access, but then we lose the ability for the page to scroll into view automatically.  What we need to do is capture any input focus events and force a scroll to that position then so it’s viewable.  But the scroll caused it to lose focus, so we have to delay a second (not the best).

The other drawback then is you can’t close the keyboard using the return key.  The hardware back key works fine…but clicking out of the input field still doesn’t cause it to lose focus.  So another hoop we jump through is that we have to keep track of any fields we’ve clicked into, then look for the next touch event and tell the previous field bur.

Android is a ‘hack of a hack on a hack hack hack’.  But rather then turn away from it, we came up with solutions that offer a great UI/UX experience…something other companies hope to do in future releases.

0.9.6 was released today. It was a minor update that added $().serialize and a few bug fixes for iOS in jqUi.

We’re excited with the code base we have and are doing final Q/A for the 1.0 launch. We’ve mad a boat load of additions, but there are some trade offs with that.

jqMobi - went from ~3k to ~ 4.5k.  Why?  We now have over 60 API calls, and added event support.  This means you can use jqMobi in backbone.js :)  We also squashed a boat load of bugs.

jqUi - We added a ton of new features to this.  We kept it under 20k for all javascript.  Here are a few things

1. “Badges”
2. side menu
3. custom footers
4. Re-wrote how animations are registered
5. Fixed iOS click delay bug (and brought support in for another platform…shhhh)
6. Fixed scrolling plugin with form assistant
7. Fixed android input bug

So while the file sizes grew, it was needed.   We added new features that created a greater offering and compatibility, while trying to keep the footprint the lightest.

There is some optimization still needed to be done, but 0.9.6 is a good preview release of 1.0.

The big thing to do for 1.0 release is some screen casts.

I just pushed the 0.9.5 release to github (I apologize for any bugs).   Tons of new features, fixes, etc.  This is the base for the 1.0 release, so please report any bugs so we can squash them.  Release notes below.

Release 0.9.5 - http://api.jqmobi.com  for documentation 

Tons of new features added.  Implemented $().on and $().delegate events (among others) in jq.mobi.js from ZeptoJS
jq.ui.js has touch events from ZeptoJS (tap, doubleTap, singleTap, swipe, etc)

Fixed bug in css3 animate and opacity
Fixed carousel dots spacing bug and orientation change bug
Fixed scroller killing propegation of events.
Added scroller.scrollBy({x,y},time) to allow users to scroll from the current location
Templates can be called with $().tmpl() now
Added jq.fx.js - $().fadeIn, $().fadeOut, and $().slideToggle were added.
Added NoClickDelay from cubiq.org - this fixes the click delay in iOS and also a big android bug
 - Android has issues with webkit-transform:translate3d and input boxes.  We are able to force the browser to stop trying to target the "bugged" input box on focus.
 - With the noclick, we also try to scroll them into view if needed.

Changed how transitions are handled so users can extend them easier

Fix #75 - data-transtion="none" added for no transition
Fix #71 - $.ui.resetScrollers property added (default is true) - this will turn off scrolling position being reset when panels are transitioned
Fix #68 - Opacity of scrollers set after it's finished scrolling now
Fix #67 - Events redone and modified from ZeptoJS