Thursday, June 28, 2012

jQuery Mobile, Backbone, ASP.NET MVC, and Las Vegas

I would like to thank all of the people who attended my talk in Las Vegas on June 28, 2012, to the dot Net Group.

All of the source code is currently on GitHub at: JQMContacts.

The slides are at: SlideShare.net/RocknCoder.

Also, if you attended please take the time to rate my talk at SpeakerRate. Helpful feedback enables me to improve both the material and my delivery.

Wednesday, June 27, 2012

Viva Las Vegas - dot Net Group Talk

I will be giving a presentation to the good people of the dot Net Group in fabulous Las Vegas on June 28th at 7PM. The topic will be familiar ground for me: jQuery Mobile, Backbone, and ASP.NET MVC - A Framework for Making Mobile Web Applications. If you caught this presentation at SoCal Rock & Roll Code Camp on the 23rd of June, you will still want to attend. I will dive deeper into the code than is possible in a 55 minute code camp presentation and I will have more time to answer questions. Beside this will be in Vegas, baby, so I'm sure that I will be in a rockin' good mood.

For more information and direction please go to the dot Net Group's website: dot Net Group.


jQuery Mobile, Backbone, and ASP.NET MVC - A Framework for Making Mobile Web Applications

Websites designed for smartphones are one of the fastest growing segments of the internet. jQuery Mobile makes it easy to create sites for mobile devices, but it is mostly about UI. It doesn’t address the needs of an enterprise application. Things like how to load data from and persist data to the server, how to tie the JavaScript and HTML together, and minimize the amount of data transmitted. In this session I will show how to combine jQuery Mobile with Backbone.js and a ASP.NET MVC back-end. The result is a website which is fast, efficient, and easier to maintain.

Tuesday, June 26, 2012

Three Quick Performance Tips for PhoneGap and jQuery Mobile

For even more mobile performance tips - this time in JavaScript - check out my upcoming So Cal Code Camp Session: 5 Quick JavaScript Performance Improvement Tips.

PhoneGap when combined with jQuery Mobile sometimes exhibits sluggish performance. Here are three tips to improve its performance. I have tested these tips under iOS and Android, and they work. I am still trying to find more, but these should help for now.

Prevent Default Event Behavior

The system can spend a lot of time bubbling through events. Once your code has handled an event use both event.preventDefault(); and return false; to stop the system code from also handling the event. This is by far the biggest performance improvement that I've found. Adding these two statements to the event handler for the <button> tap dramatically improved the performance of the JQMCalculator app from a previous tutorial.

Cache jQuery Selectors

Searching the DOM is taxing. Once you have used jQuery to find an element or elements, store it a variable. By convention we begin a variable with a dollar sign, $, when it is holding the results of a jQuery selector.

Narrow jQuery Selectors

Similar to the previous tip, searching the DOM is taxing, so make sure to search as little of it as necessary. Don't search the entire document when all you are looking for lies with a <div>. When using jQuery Mobile, you can restrict the search to the active page by using $.mobile.activePage.

With the variable $entryLine, we narrow the selector by restricting it to the active page. Remember: jQuery Mobile can have multiple pseudo-pages in memory simultaneously. Restricting the selector to the current page can eliminate a lot of unnecessary searching.

With the variable, $li, we do another form of narrowing. We search only the <li> tags which are descendants of id #paperTape. Id selectors are usually the fastest ones in jQuery since they translate directly into a JavaScript method, document.getElementById().

Summary

Let me know if these tips help your app, and if you have some tips please share them. BTW: These tips will help even if you are simply using jQuery Mobile without PhoneGap.

Sunday, June 24, 2012

SoCal Rock & Roll Code Camp San Diego 2012

I had an amazing time presenting my three sessions at SoCal Rock & Roll Code Camp. Big thanks to all of the people who took time out of their busy weekends to squeeze into the hot and packed sessions. Here is how to find all of the things I presented.


Source code for the sessions is on my account on GitHub:

RocknCoder's GitHub Account

The repos are IntroToNode and JQMContacts. Please check out the other repos as well.

The slides are on my account on SlideShare.net:

RocknCoder's SlideShare Account

To rate my talks and provided feed please go to SpeakerRate:

Troy Miles' SpeakerRate Account

And finally, please don't be shy about contacting me directly:

Send Mail To Me

Now, I won't do your work for you, but if I can offer any advice I will. Normally I respond to emails within 24 hours except if I am on vacation, or in crunch mode trying deliver a project.

Monday, June 18, 2012

SoCal Rock & Roll Code Camp San Diego 2012

I will be giving three talks at SoCal Code Camp this Saturday, June 23rd, on the lovely campus of UCSD in San Diego California. This is a free event with dozens of speakers and hundreds of sessions, so please make time to attend. For more information please go to the SoCal Code Camp website.

jQuery Mobile, Backbone, and ASP.NET MVC
A Framework for Making Mobile Web Applications
Saturday, June 23rd, 10:00 AM

Websites designed for smartphones are one of the fastest growing segments of the internet. jQuery Mobile makes it easy to create sites for mobile devices, but it is mostly about UI. It doesn’t address the needs of an enterprise application. Things like how to load data from and persist data to the server, how to tie the JavaScript and HTML together, and minimize the amount of data transmitted. In this session I will show how to combine jQuery Mobile with Backbone.js and a ASP.NET MVC back-end. The result is a website which is fast, efficient, and easier to maintain. 

JavaScript Test Driven Development using JsTestDriver and WebStorm 4.0 
Saturday, June 23rd, 1:30 PM

Unit testing JavaScript used to be painfully tedious. It required that you, the developer, set up HTML scaffolding to hold the code to be tested and the unit test framework. Once the test page was loaded, your life was a long series of F5 presses, as you modified code and press F5 to re-execute the test. Blah. JsTestDriver is a JavaScript unit testing tool from Google. The project’s stated goal is: to make JavaScript unit test development as seamless as and easy as Java unit tests. When combined with JetBrains’ WebStorm 4.0, unit testing become a breeze and TDD a dream. In this session, I will show how to set up your JavaScript projects for easy TDD. 

An Introduction to Node.js Development with Windows Azure 
Saturday, June 23rd, 12:15 PM

Node.js has taken off in popularity. Find out why major internet companies like Yammer, CouchOne, DocumentCloud, and LinkedIn are using Node to power their servers. And why Microsoft added support for it to Azure. In this session we will build a simple yet functional web server using Node, enhance it using plugins known as Modules, and hopefully explain why Node is such a powerful new web server paradigm.

Wednesday, June 13, 2012

Converting the jQuery Mobile Calculator to PhoneGap (iOS version)

When I wrote the tutorial detailing the steps necessary to convert my jQuery Mobile Calculator into an Android app with PhoneGap, I promised a tutorial for iOS as well. So, here is the promised iOS tutorial. 


One of things I really like about the combination of jQuery Mobile and PhoneGap is that it really easy to put together a decent UI for the non-designers amongst us. While not as slick as some of the UI put together by design gurus, it is a UI perfectly suited for an internal app or other type of small app.


Create an iOS Project

First thing we need to do is make a regular iOS project. Nothing difficult here.
  • launch Xcode
  • select File -> New -> Project
  • select "Cordova-based Application"
  • click "Next"
  • fill out the Product Name and Company Identifier text boxes
  • make sure that the "Use Automatic Reference Counting" check box is NOT selected
  • click "Next"
  • select the "Create" button
The first steps above can actually be executed now. You should get an error message, "ERROR: Start Page at 'www/index.html' was not found."


Make it a PhoneGap Project

When you use the Cordova template, it creates the "www" folder for your HTML, it includes the missing "index.html" and also "cordova-1.7.0.js", but Xcode needs to be aware of these files for them to be functional. PhoneGap's tutorial suggests that you drag-and-drop the "www" folder. I find this a little risky since if you miss the drop target, you won't be sure how to recover. I instead prefer to:
  • right click the project root, labeled "jqmcalculator 1 target, iOS SDK 5.1"
  • click the menu item, "Add Files to "jqmcalculator"...
  • expand the "jqmcalculator" folder
  • highlight the "www" folder by clicking it
  • click "Add" in the lower right corner
This will the "www" folder to your project. PhoneGap includes a starter index.html with the project. Run it now. If you did everything right, you should see the alert dialog.

Now Make it jQuery Mobile Calculator PhoneGap App 

Now we are ready to move the calculator project into PhoneGap. 
  • rename index.html to oldIndex.html
  • right-click the "www" folder and click "Show in Finder"
  • open the calculator project in the Finder
  • select the "content" and "scripts" folders and the "index.html" file
  • right-click and choose "Copy 3 Items"
  • right-click on the "www" folder and click "Paste Items"
  • this will copy the calculator files to the "www" folder
  • the copied items should also appear below the "www" folder in Xcode
  • copy the Cordova script tag from oldIndex.html to index.html, it should be the first script tag
Adding the Cordova <script> tag

Run the app in the iPhone simulator now. You should see the calculator. We only needed to make one minor change to get the app to work in PhoneGap. Pretty cool huh? 

Summary

That's it for this tutorial. Be sure to add a custom splash page and icons for a more profession look. If you would like to add ads to the calculator, please see my tutorial, "Cordova (PhoneGap) and AdMob Together: iOS Version".



Tuesday, June 12, 2012

jQuery Mobile Twitter Search

See the working Twitter App

Twitter is one of my favorite tools. I used it to let the world know that I've written a new blog post and to keep up with all things going on in the world wide web. So following the great tradition established by a long list of other authors, I too have created a twitter app. Specifically, it uses Twitter's Search API. Simply type in a term, then tap go. The application will then make a call to Twitter and return the last 25 tweets which match your query.

This tutorial is a little rough around the edges. Unfortunately, I am preparing for SoCal Code Camp San Diego 2012, which takes place the weekend of June 23-24, so I don't have as much time as I liked to prepare this tutorial. But I prefer to let my code do the talking anyways. 

The meat of the code is in the RocknCoder.Tweet object of the twitter.js module. All of the work is in the load method. People are sometimes surprised when they see jQuery method calls inside of jQuery Mobile and I find myself reminding them that jQuery Mobile is built on top of jQuery, so of course I can make such calls.

One thing that the jQuery project was working on but has since stop is templates. Templates allow you to build HTML markup in a clean fashion using a snippet of HTML, the template, and some data. Since jQuery doesn't currently have a template engine, I am using another trusted tool, Underscore.js. Underscore.js is an incredibly useful toolbox, with large collection of methods, the templating engine is but one. If you are familiar with the ASP.NET MVC aspx engine, you will find the syntax similar but not identical. The templating engine is a critical piece of making your mobile web code small, but it is too complex to cover right now. Please take a look at the code and be sure to check out the template documentation at Underscore.js.

One small thing that needs a bit of explanation is the use of the setTimeout() at the end of the load method. The question is always raised as to why I didn't use a setInterval() call instead since it seems to be exactly what I want here. The answer for me is simple. I never use setInterval(). SetInterval() can be problematic, especially when combined with Ajax calls since the timing of such calls can never be known in advanced.

A more full featured app would have availed itself of the search API's methods which would allow us to ask only for the data added since our last call then the it would inject the new HTML in front of the old. But I just took the lazy way and simply do another full call and wipe all of the HTML of the previous call out. Someday after Code Camp I will revisit this and improve its behavior.

This is it for now. I will have at least one more planned tutorial before Code Camp, convert the calculator app to PhoneGap for iOS and I will probably throw Windows Phone 7 in as well since I really enjoy that platform. After Code Camp I will have tutorials which delve deeper into the PhoneGap API especially dealing with location and the camera.

Tuesday, June 5, 2012

Converting the jQuery Mobile Calculator to PhoneGap



PhoneGap, now known as Apache Cordova, makes it amazingly easy to turn your jQuery Mobile web application into a mobile device application. So let me show you how to turn the JQM Calculator into an Android app. I am not going to cover how to set up the Android SDK and Eclipse, that is way too much work plus there are plenty of tutorials already covering that. Instead we will start by assuming that you have the Android SDK set up, have the JQM Calculator code available, and have downloaded the latest version of PhoneGap. By the time we are finished you will have a working Android application.


(In case you missed the post about creating a jQuery Mobile calculator, here's the link:  jQuery Mobile Calculator )

Create an Android Project

We begin by a creating a normal Android project. Start up Eclipse and choose File > New > Android Project. Give your project a name. I chose PhoneGapCalculator for mine. Then choose your Android version. I chose Android 2.2. And finally set your package name. At this point you have a regular Android project nothing special here. 





PhoneGap-ize The Project

Now we start adding all of things necessary to PhoneGap-ize the project. Begin by adding a libs folder to the root of your project. Be careful not to add it to any existing folder. Then add a www folder to the existing assets folder. If for some reason the assets folder doesn't exist, create it and then add the www folder to it.

If you haven't already unzipped the PhoneGap zip file, please do so now. Find the android folder. It will be under the lib folder. You need to copy the cordova-1.7.0.jar file to your projects libs folder. Then the cordova-1.7.0.js file to the www folder. And finally we need to copy the entirety of the xml folder to the res folder. Remember to copy these files and folders and don't move them. You will need them for other projects in the future. Your project should look similar to the image.

Fix the Build
Now we need to make the build process aware of the cordova jar file. To do that right click on the libs folder then choose: Build Path > Configure Build Path. Click on the Libraries tab, the click on Add JARs.... Then you need to find the cordova jar file and choose it. After clicking OK, you project should have a new item, Referenced Libraries. If you don't see this item, don't continue, something is wrong. You may need to press F5 in order to make Eclipse refresh.




Now we need to modify the generated Android source code to make it a PhoneGap app. Expand the src folder until you reach the java file, mine is named PhoneGapCalculatorActivity.java. Near the top of the file below the import lines, add the following line:

import org.apache.cordova.*;

Change the line which reads:

public class PhoneGapCalculatorActivity extends Activity {

To read as follows:


public class PhoneGapCalculatorActivity extends DroidGap {

And finally replace the line:

setContentView();

With the following line:

super.loadUrl("file:///android_asset/www/index.html");

Now lets copy our calculator files into the project. All of your CSS, HTML, and JavaScript files go into the www folder. So we simply copy the entire contents of the JQMCalculator project to the www folder. Please note: PhoneGap works with the project structure the way that it is, no need to flatten folders.


Once the files are copied, the app will actually run, but let's be neat and fix an issue. The JQMCalculator project includes code to hide the URL bar on Android. In a PhoneGap app, that isn't necessary. So we need to delete hideAddressBar.js file. Then remove all references to it in the code. In the index.html file delete the hideAddressBar.js  script tag.

Delete the script tag
Then replace the method RocknCoder.Events which looks like:

RocknCoder.Events = function () {
$("div[data-rockncoder-jspage]").on(
'pagebeforecreate pagecreate pagebeforeload pagebeforeshow pageshow pagebeforechange pagechange pagebeforehide pagehide pageinit',
RocknCoder.Pages.Kernel).on(
"pageinit", RocknCoder.hideAddressBar);
}();


With the following:

RocknCoder.Events = function () {
$("div[data-rockncoder-jspage]").on(
'pagebeforecreate pagecreate pagebeforeload pagebeforeshow pageshow pagebeforechange pagechange pagebeforehide pagehide pageinit',
RocknCoder.Pages.Kernel);
}();
Delete the ".on..." code
Now if you run the application, you should get see the following:

That's all it takes to turn your jQuery Mobile web app into an Android app using PhoneGap. 

Complete Source Code for PhoneGap Calculator



Sunday, June 3, 2012

Calculator Updated

I made a few fixes to JQM Calculator. All of the modifications were made to the JavaScript file, app.js.

The first bug revealed itself after I ported the app to PhoneGap. During testing on both my iPhone and Nexus One, it was unacceptably sluggish. After spending sometime analyzing the code I realized that I had neglected to put an "event.preventDefault()" in the event handler. This is something I normally do automatically when I don't want the system event handler to take care of things. For unknown reasons, in PhoneGap, this causes extreme performance degradation.


Next there were problems with the input code in RocknCoder.Display. First, it was possible to type more than one decimal point in. And second, there was no upper limit to the number of digits which could be type. I fixed the decimal point bug and set the limit on digits to 20.

Finally, I restored the URL hiding code. I am not in love this implementation, but Android really needs this. So I restored the code to handle it in the RocknCoder.Events function.

The source code is hosted on my GitHub repository: JQMCalculator Source Code


A Live demo of the calculator is at: jQuery Mobile Demos