PhoneGap & jQuery Mobile – First Impressions

As an intern at Pariveda Solutions, I worked with PhoneGap and jQuery Mobile for the first time. I have to admit, prior to my internship I had heard these terms thrown around a lot but had no idea what they meant. My mind simply translated them to “mobile dev stuff.” After I learned we would be working with them, I did some research with my fellow interns and started to get the picture.

How PhoneGap Broke My Heart

With PhoneGap, I was super pumped about the possibilities of deploying one app to multiple platforms. It seemed like a dream come true for mobile. But nothing is ever that simple. It’s kinda like the phrase “no such thing as a free lunch.” Really, you can get a lunch without paying for it with money, but usually there’s some sort of extra effort involved, time, energy, blah blah blah, thus not so free.

PhoneGap is kinda like that. You think you are going to program one app and deploy to many (if you’re a young, naive programmer like me), but really there’s an extra layer of code you have to program somewhere in between the limited native code and all that JavaScript/HTML/CSS/jQuery to handle the quirks of Android, iOS or whatever platform you deploy to.

That said, I’m not against PhoneGap. The idea of a cross-platform app that can be deployed in multiple app stores is brilliant in my mind. Furthermore, developing these kinds of apps takes a lot less programming language know-how (one language vs. more than one language) and a lot less time to focus on GUI building, which often takes the greatest chunk of time if you develop your app with good UI and UX. Thus, I’m not opposed to PhoneGap. I’m just relating how PhoneGap crushed my dreams because I thought it was going to be easier than that.

But there is a part two to this sad story.

How jQuery Mobile Broke My Heart

So after I finished researching PhoneGap, I launch Xcode, start my PhoneGap project and dig into the code to see what’s going on, to figure out how PhoneGap does its magic. That takes a while. For those of you who are unfamiliar with PhoneGap and how it works, it basically displays a web view without the search bar and toolbar to display a web page. It also (of course) has to translate both ways between native code and JavaScript. You code the app using HTML, CSS and JavaScript. So I figure that out and start planning how I’m going to code my app.

I want my app to look like a real iPhone app. I also want it to look like a real Android app. Or at least I want both users feel like they are using a native app. That’s when I realize, I can’t accomplish this goal, or at least not entirely. It’s hard to fool an experienced iOS or Android user that they are using a native app. They know what the buttons look like, how the generic user experience goes, what the generic color schemes are, etc. Furthermore, I’m not going to accomplish the native experience by just coding basic HTML and CSS. So that’s when, as a developer, you turn to solutions like jQuery Mobile and Sencha Touch.

So I read up on jQuery Mobile and start coding it into my app. Everything works great and it looks awesome. I’m stoked because jQuery Mobile is making my web view look like a native app.

Then I get past the basics and I start coding in lists. And I want them to load content dynamically. I also want to transition from one list to another list. I want the lists to be scrollable. Then I want to include an input field on a page that is scrollable. Etc. etc. This all works in jQuery Mobile. It’s awesome. I’m pretty impressed at all the features jQM has to offer.

At the same time though, I can’t get past the feeling that all the jQ coding, jQM coding and HTML attributes sorta feels like a hack. Plus it’s hard to replicate native code when with something that’s not native. jQM does a great job at recreating the native experience, but transitions between pages aren’t as smooth always. jQM has bugs that need to be worked out for certain features. It’s a product in development and it’s new, so it’s bound to have a few weak points.

Key Takeaways for Me

PhoneGap and jQuery Mobile are powerful tools to use for cross-platform mobile development. They offer a lot of features to make cross-platform apps look native. They are not the same experience though, so don’t get any similar preconceived notions. They have their place and there are reasons why you’d want to use them.

jQuery Mobile in my experience can be slow and appear glitchy as you transition between pages and when pages render dynamically. Rendering HTML UI content is inherently different from rendering native UI content. Many of the UI “flaws” are imperceptible on a desktop or laptop due to faster hardware. However, these differences truly can affect the user’s experience. With time, I think many (not all) of these issues will go away. jQuery Mobile will be optimized, mobile hardware will be faster and so on.

For those of you who are experts on jQuery Mobile, I’m sure you could teach me a thing or two. I’d love to learn.

iPad App Review: Notes Plus vs. Notability

Notes Plus App for iPadVS Notability App for iPad

Since I recently acquired an iPad 2 (last October-ish), I decided I wanted to use it to take notes in some of my classes, mostly in ECON 110. We graph supply and demand curves 90% of the time in that class. Taking notes on my computer wasn’t practical; I tried making graphs in PowerPoint. I also tried using the pre-installed Grapher app that comes with OS X Lion. Nothing was really working for me. Drawing with a track pad is very tiresome. So I went ahead an bought a stylus on eBay for about $7.00 and started researching apps. The two apps I ended up trying are Notes Plus and Notability.

(If you don’t want to read about my experience, just skip to the Epilogue: General Features & Screenshots)

Notability: An Impulse Purchase

I first purchased Notability because I saw it was “on sale” for a couple days and bought it for ~$1.99. I was very impressed with most of the functionality.

My greatest disappointment was adding figures and drawing. In order to draw with this app you have to insert a figure. In other words…

While all other functionality was more than satisfactory, I felt like I really needed an easier way to draw straight into my notes. So I spoke with a friend of mine who also has an iPad and who I had seen using it to take notes in some of my classes. He recommended Notes Plus.

Notes Plus: Referred by a Friend

So I give my friend a short demo of Notability and then let him try it out for himself. He seemed reasonably impressed and didn’t have anything really bad to say about it. Then he gave me a short demo of Notes Plus. It seemed pretty comparable. They had some different approaches to the same problem but both were well executed. However, what caught my eye most was that with Notes Plus you can draw straight into your notes. No extra, separate figures. AND it has great options for automatically detecting, smoothing and straightening lines and shapes. I bought it and downloaded it within the hour.

My first fuss with Notes Plus was that the drawing/note-taking space wasn’t big enough. I had to keep adding more pages to my economics notebook. However, that was just a dumb move on my part. There is actually an option for making the pages bigger. So I tried that for a while. It worked great.

My biggest beef came down to this: my hand writing is so sloppy even with a stylus that writing out notes on the iPad was messy and inefficient. Even with the gorgeous character smoothing, it just wasn’t enough. I would write and undo and rewrite and erase and…yeah. And as easy as adding textboxes is in Notes Plus, it just isn’t simple enough or hassle-free. It takes a lot of extra time to move the text boxes around and resize them. In the end, I was getting more and more behind in my notes and I never had time to really focus on what the professor was actually lecturing on. I spent all the time people were asking questions just catching up. Eventually, I decided I would just have to resort to the old graph paper notebook.

Conclusion

So it’s a sad story of how I fought the battle of traditional mediums vs. technology. But if tech just doesn’t do the trick, why bother? Why inconvenience yourself? Besides, my wife still uses the apps to draw, and I’ve found they are great for other things like entertaining children at church or visiting nephews. Though, I’ve found better drawing apps for that too…

Something worth noting about both apps is that they can sync your notes to Dropbox.

For all general purpose note-taking (when I don’t need to draw), I use Evernote or Simplenote because they sync to my existing accounts online where I store all my notes. What has been your experience with note-taking on the iPad? What works for you?

Epilogue: General Features & Screenshots

I’ve included the primary features (as described by the developers on the AppStore) for those of you potentially interested in either of these two apps.

Notes Plus

1. CLOSE-UP HANDWRITING
Hand write comfortably with your big finger, your text will show up as fine as with pen and paper. Auto-advance feature let you write even with your eyes closed. Advanced stroke smoothing algorithm makes your writing look as good as ever; the faster you write, the better it looks.

2. PALM HANDLING
Lay your palm comfortably down with Palm Pad.

3. TYPED TEXT MIXING
Let you insert keyboard text anywhere on the page with many type faces, font sizes, and colors.

4. SHAPE AUTO-DETECT
Let you draw a basic shape (ellipse, rectangle, line, polygon, …) with your finger, auto-detect and insert the perfect vector shape, then let you edit it.

5. VOICE RECORDING
Let you record audio while jotting down the note. Perfect for meetings, classes, or conferences. Recordings are linked with pages to provide easy playback.

6. EASY EDITING
Let you select handwriting text by just circling around it, then erase or re-arrange it. Erasing a writing is as easy as drawing a line over it. No awkward switching between erase tool, selection tool, and draw tool.

7. EASY ORGANIZING
Provide a complete folder structure. Private folders can be password-protected. A folder can have many notebooks; a notebook can have many pages. Pages are listing with thumbnails. Provide ability to move, copy, duplicate and delete notebooks or individual pages.

8. RECOVERING FROM YOUR MISTAKES
Full undo/redo support. Yes, it does have REDO function; touch and hold undo button to reveal the undo/redo action sheet. Also let you recover your deleted notebooks or pages.

9. CUSTOMIZING TO YOUR TASTE
Many options are provided including: stroke color, thickness, transparency; text font, size, color; paper background, etc.

10. (LAST AND MOST IMPORTANT) CLEAN & NATURAL USER INTERFACE
As you can see from the screenshots below, this app stands out for its clean interface. A great effort was put in to hide controls so that it would not cluster the interface. You should be able to start without a tutorial.

The developer encourages you to email him with any questions concerning features since he has only listed his “top 10.” It might be worth your time since he tries to respond to all emails within 24 hours.

Notability

** Full-featured Handwriting **
Amazingly smooth ink makes capturing ideas easy and awesome. Notability’s zoom window helps you quickly and clearly draw every detail and the palm rest protects your notes from unwanted marks. Our scissors let you copy, move and even re-style the color and width of any ink. Reordering notes is a joy: drag-and-drop thumbnails, while adding or removing pages as needed. Your notes should be as unique as you are, so choose a paper to fit your style and use a variety of pen colors and widths to create beautiful notes.

** PDF Annotation **
The same tools that help you take beautiful notes in Notability equip you to annotate PDFs: record, type or handwrite on anything. It’s easy to share your annotations with anyone using email or Dropbox and more.

** Advanced Word-Processing **
Notability’s features like styling, outlining, and spell check are the perfect tools to get the job done quickly and accurately. Other tools like bullets, bold, italic, underline, font presets, cursor controls, and more, seamlessly integrate to help you create rich notes.

** Linked Audio Recording **
Audio recordings automatically link to your notes, so go ahead and take notes with confidence. While reviewing your notes, just tap a word to hear what was said at that moment. Our advanced audio processing features create brilliant recordings in any setting. Use the recording feature to capture your own voice for memos, presentations, or speech practice.

** Auto-sync **
Work with confidence: with Notability’s auto-sync, your notes are always backed up in the cloud. Easily collaborate at work or school sharing ideas and notes on the fly.

** Media Insertion **
Enhance your notes by adding pictures from your photo library or from the iPad camera. Insert web clips, figures, and drawings to compliment your notes. Crop, resize, and draw on images to make them perfect. Your text will automatically flow around them.

** Library Organization **
Your ideas and notes are incredibly important to you, so Notability makes it simple to organize, protect and share this information. Drag and drop notes into a subject and use a password to keep notes secure. Auto-sync makes backing up simple: your notes are automatically uploaded to Dropbox, iDisk or WebDAV. Import notes, PDFs, and RTFs from the cloud or web. And share notes via Email, Dropbox, iTunes File Sharing, and AirPrint.

Screenshots

Notability - Mainscreen

Notability – Mainscreen

Notes Plus - Notebooks

Notes Plus – Notebooks 

Notability - Writing

Notability – Writing

Notes Plus - Writing

Notes Plus – Writing

Notability - Note Taking & Figures

Notability – Note Taking & Figures

Notes Plus - Drawing Figures

Notes Plus – Note Taking & Figures