Tag Archives: programming

The Joy of Performance Improvements

I think that most developers get in to development for one of two reasons – they like solving problems, or they like building things. For me when I got into it is was the latter. I loved the fact that I would build things that people would then use (admittedly, I have often also built things that people didn’t use).

However as my career has progressed I have realised that by far a more enjoyable and satisfying element of development is working on performance improvements.

Since I moved into management I don’t get to work on development as much as I would like (which would be all the time), but recently I have built a system from scratch to delivery while also working on some performance improvements to an area of a site that had been declared “not fit for purpose”.

Comparing the two experiences, there was just no comparison. I’m talking about the experience of taking a failing system, investigating, manipulating, testing, making amendments, re-testing, assessing the impact of tiny changes, assessing the likely impact of large changes, finding out why elements that perform independently do not perform in combination, re-testing again, making another small improvement, re-testing, re-investigating and repeating it until performance is acceptable – then doing a few more rounds until performance is awesome. This was soooo much more enjoyable and rewarding than just building a system from scratch.

I’d recommend any developers to try to get involved in this side of development. That’s why I set up a performance management and improvement company!

By the way, if anyone is interested, the outcome of the performance improvements was taking a process that was taking 45 minutes to run down to running in 3 minutes. The target was 10 minutes.

Advertisements

1 Comment

Filed under Opinions

Persistent Navigation in JQuery Mobile

I have been doing quite a bit of work in mobile application development with JQM recently, and generally finding it a very useful product once you get your head around its idiosyncrasies.
One of the things I needed to do was to have a persistent navigation across the bottom of the page, to mimic the standard iPhone navbar.
Out of the box JQM offers a facility for persistent navbars. The documentation says…
“To tell the framework to apply the persistent behaviour, add a data-id attribute to the footer of all HTML pages in the navigation set to the same ID. It’s that simple: if the page you’re navigating to has a header or footer with the same data-id, the toolbars will appear fixed outside of the transition.”
And gives the following code example

<div data-role="footer" data-id="foo1" data-position="fixed">
 <div data-role="navbar">
 <ul>
 <li><a href="a.html">Friends</a></li>
 <li><a href="b.html">Albums</a></li>
 <li><a href="c.html">Emails</a></li>
 <li><a href="d.html" >Info</a></li>
 </ul>
 </div><!-- /navbar -->
</div><!-- /footer -->

And to set the current active button you use

<li><a href="d.html">Info</a></li>

This sounded a bit confusing, so I looked at the example code and it looked like they had simply pasted the same code into the bottom of every page and altered the active link. Thinking that I must be misreading the code I searched the internet for more information and it turns out that I wasn’t. The JQM solution to this problem was actually to mirror the footer on every page but with a different active link. The only way in which these were actually persistent was that if JQM saw that there was another footer on the incoming page with the same id then it would exclude that footer from the page transition.

The programmer in me would not let myself even consider that as a solution. Even early in development as I currently am, I have five files, some containing up to four pages. So that’s a minimum of ten places I’d have to maintain the navigation and that figure is only going to grow as development progresses. The thought of that made me actually feel sick. I simply wasn’t going to do it… simple as that.

Instead I decided to dynamically generate the navbar on first load and then inject into every page. The end solution to this is actually relatively straight forward.

In my index page I created a hidden div that contained the actual navbar html

<div id="hiddenFooter" style="display:none">
 <div data-role="footer" data-id="nav" data-position="fixed">
 <div data-role="navbar">
 <ul>
 <li><a href="page1.html">Page 1</a></li>
 <li><a href="page2.html">Page 2</a></li>
 <li><a href="page3.html">Page 3</a></li>
 <li><a href="page4.html">Page 4</a></li>
 <li><a href="page5.html">Page 5</a></li>
 </ul>
 </div><!-- /navbar -->
 </div><!-- /footer -->
</div>

The way the JQM works is to load any subsequent pages in using Ajax and keep them in a shared Javascript context. This means that events can be bound on the load of the first page and will apply to any subsequent pages called using JQM links.

Therefore I could read the contents on the hidden div into a Javascript variable

$("#index").live("pagebeforecreate", function () {
 Navigation.NavigationHtml = $("#hiddenFooter").html();
});

And this would be available to all subsequent pages loaded.

All that was needed then was to inject this html at the end of any pages that are created. To do that simply bind a pagebeforecreate event for all pages using the live rather than bind method (bind only binds events to items that exist at that time, live will bind to an item that comes into existence later).

$(":jqmData(role='page')").live("pagebeforecreate", function (event) {
 $("#" + event.target.id)).append(Navigation.NavigationHtml);
});

Now, when you navigate to any page (providing you have visited the index page first) it will display a fixed navigation bar at the foot of the page.
However there is one small problem…. the button you click is not correctly marked as the active tab. It is if you click it twice… but to me that is less than optimal, in fact that’s worse than it never being selected at all. The solution to this turned out to be trickier than expected.
The simple solution I came up with was to identify the url of the page and add the class “ui-btn-active” to the link. However getting the url of the current page was pretty tricky. Because JQM uses Ajax to load all the pages the current url (window.location) is always the first loaded page and because each file can contain multiple pages the JQM page object is only aware of those pages, not its parent file.

The solution I came up with was to use the pagebeforeload event which exposes a url, save that url and make it available to pagebeforecreate events defined earlier

$(document).bind("pagebeforeload", function (event, data) {
 Navigation.CurrentPageFilename = $.mobile.path.parseUrl(data.url).filename;
});

This meant that we needed to amend our earlier event to

$(":jqmData(role='page')").live("pagebeforecreate", function (event) {
 $("#" + event.target.id)).append(Navigation.NavigationHtml);
 $('a[href="' + Navigation.CurrentPageFilename + '"]').addClass("ui-btn-active");
});

I wrapped it al up in one Javascript object

Navigation = {
Navigation = {
 CurrentPageFilename: "",
 NavigationHtml: "",
 Initialise: function () {
 $("#index").live("pagebeforecreate", function () {
 Navigation.NavigationHtml = $("#hiddenFooter").html();
 });
 $(":jqmData(role='page')").live("pagebeforecreate", function (event) {
 $("#" + event.target.id).append(Navigation.NavigationHtml);
 $('a[href="' + Navigation.CurrentPageFilename + '"]').addClass("ui-btn-active");
 });

 $(document).bind("pagebeforeload", function (event, data) {
 Navigation.CurrentPageFilename = $.mobile.path.parseUrl(data.url).filename;
 });
 }
};

Then just needed to call

Navigation.Initialise();

From my index page.

As mentioned this solution only works if you go to the index page first. This was ok for my app as that should always happen so all I did for the sake of completeness was add the following code to every other page

if (typeof (Navigation) === 'undefined') {
 window.location = ("index.html");
}

To me this is an infinitely better solution that the original JQM suggested solution as it means I am managing my navigation is one place. It also gives me scope to dynamically manage the navigation contents if needed in future.

One last Gotcha on this subject. Be careful that you don’t have any pages across multiple files that have the same id. JQM keeps the DOM of some previous pages within its current DOM and duplicate page Ids can confuse it.

8 Comments

Filed under Code