GoRuCo 2009
Building Cross Platform Mobile Apps with Ruby and PhoneGap
00:00:23.599
Today, I'm going to talk about mobile app development, particularly for iPhone, Android, and Palm pre.
00:00:29.240
To give you a little background on where this talk comes from, I have a company called Mobile Commons.
00:00:35.719
We specialize in communication using text messaging and phone calls.
00:00:41.000
One important distinction is that we operate on the server side; we don't do any client-side mobile development.
00:00:47.320
Over the past few months, the mobile landscape has been very much on our customers' minds.
00:00:52.600
People are constantly asking us about iPhone and Android development.
00:00:59.199
I'm trying to figure out how a Rails developer can navigate this world and effectively work on mobile devices.
00:01:04.400
This topic will be relevant to everyone, if it isn’t already.
00:01:09.479
Mobile is the direction we’re heading in, and much of what I'll discuss is relevant to web development.
00:01:14.680
While there is a significant mobile component, there's also a lot of web development aspects to cover.
00:01:21.479
To clarify, I won't be discussing legacy phones like Symbian or Windows Mobile.
00:01:27.000
We're really focused on the next generation of phones.
00:01:32.280
In terms of Ruby code, there won’t be a lot in this talk, and that's okay.
00:01:39.000
What I’ll provide is a lot of relevant information to learn from.
00:01:44.320
This talk is going to cover a broad range of topics, and I'm including several parenthetical asides with interesting tangents.
00:01:52.320
So, why is mobile so compelling? I’m sure you all know the list, but it's worth reviewing.
00:01:58.200
Mobile is different from web development because there are unique things you can do with a phone that you can’t do with a standard desktop or laptop.
00:02:05.240
For example, location features are the coolest aspect.
00:02:10.800
Devices have GPS, accelerometers, and orientation sensors that let them know their position in space.
00:02:18.040
The fact that a phone is actually a phone is a major advantage.
00:02:24.480
Making phone calls, sending texts, and keeping an address book is significant.
00:02:29.519
Almost every phone has a camera, allowing for multimedia functionalities.
00:02:35.200
The ability to push notifications to users is also a game-changer.
00:02:41.120
With background processes, we can alert users to happenings, whether through Android or iPhone.
00:02:46.400
This leads to a whole host of new capabilities we were never able to explore in the web world.
00:02:52.599
How many here have built an Android or iPhone client-side app?
00:02:59.400
And among you, how many have released one in the App Store?
00:03:04.799
There’s a handful of you.
00:03:11.000
Now, let’s also address some of the downsides of mobile development.
00:03:18.640
One of the biggest challenges is unreliable connectivity; you cannot assume users will always be online.
00:03:24.040
Unlike web applications, which operate under the assumption that the user is online, mobile apps must navigate the possibility of being offline.
00:03:30.920
Another challenge is dealing with various languages such as Java.
00:03:37.640
Mobile developers also have to consider issues like memory management, which web developers typically don’t.
00:03:43.799
As a Rails developer, the first time I tried to write an iPhone app, I learned the importance of memory management the hard way.
00:03:55.760
So, let's review some options for Rails developers who have just launched a cool site, and the client requests mobile compatibility.
00:04:01.200
The first obvious answer is that your web app could be good enough as it is.
00:04:13.319
When Steve Jobs first introduced the iPhone, he emphasized that Safari was a real browser.
00:04:18.880
This means you may not need to modify your web app at all.
00:04:25.720
Another common approach is to create a mobile-formatted version of your site.
00:04:30.919
You basically serve up the same content but format it differently for mobile devices.
00:04:36.280
The third option involves building a client app for each platform, which has its pros and cons.
00:04:48.240
Let's ignore option one, since it's pretty standard. Let's talk about mobile-formatted sites.
00:04:53.919
This process typically uses an alternate stylesheet for mobile devices.
00:04:59.840
You would perform user-agent detection to determine if the request is coming from a mobile device.
00:05:06.000
You could serve a different stylesheet tailored for smaller screens, which is common practice.
00:05:11.880
Typically, this is done using a different subdomain for mobile users, which allows for varying content to each audience.
00:05:17.759
A best practice is to allow users to choose whether they want to view the mobile version or the full version.
00:05:23.840
When using this approach, you might encounter WURFL, the open-source database for user-agent detection.
00:05:30.360
WURFL provides thousands of strings identifying different phones associated with user agents.
00:05:36.039
In the web world, you normally only deal with a dozen user-agent strings, but WURFL gives you the full list.
00:05:42.080
It even provides useful information like screen size and color depth.
00:05:48.759
However, there are drawbacks to this approach.
00:05:54.479
You miss out on many cool mobile features since you're just serving a web application.
00:06:00.039
Additionally, you lose out on app store distribution.
00:06:05.520
While you can bookmark a web page, app store visibility is crucial for mobile applications.
00:06:10.599
The trend is leaning toward app stores as a significant venue for discoverability and revenue generation.
00:06:15.720
Now, let's quickly mention native apps.
00:06:21.479
Native apps offer a rich user experience as they have full access to device features.
00:06:27.880
The graphics are fantastic, taking advantage of powerful processors.
00:06:34.039
Apps also have the benefit of app store distribution.
00:06:41.480
Take a look at the Facebook native app; it looks significantly better than the mobile-formatted website.
00:06:47.960
What are the downsides of native apps?
00:06:52.680
One is that every platform uses different programming languages and frameworks.
00:06:59.600
This poses a practical problem as there are only so many hours in the day to learn them all.
00:07:06.720
Grappling with multiple languages like Objective C and Java while developing Ruby-based applications is tough.
00:07:13.920
Let’s propose an alternate technology stack that could be used for rapid prototyping.
00:07:19.760
This stack could also work in production, or be considered a theoretical model.
00:07:27.240
The foundation of the stack is WebKit, which is the rendering engine used in Safari and Chrome.
00:07:34.280
With WebKit, you use HTML, CSS, and JavaScript for the front end.
00:07:41.120
All your business logic can reside within your web application instead of being client-side.
00:07:48.440
This means your business logic can be built in a realm we all understand.
00:07:54.799
A significant insight here is linking libraries that expose mobile device features via a JavaScript interface.
00:08:02.720
HTML5 will be increasingly valuable.
00:08:09.679
With HTML5, you can achieve persistent client-side storage, which is quite powerful.
00:08:15.960
All of this can work effectively in both prototyping and production environments.
00:08:23.839
The most important takeaway here is rapid prototyping, which aligns with what Ruby and Rails developers do.
00:08:32.559
Fast iterations and user feedback are vital for getting the right features.
00:08:39.919
Clients often do not even know what they want in a mobile app.
00:08:46.080
Asking simple questions like what happens when the screen orientation changes or what occurs when offline can reveal insights.
00:08:54.240
It's vital to allow users to test and interact with the app to get their feedback.
00:09:02.280
Continuing along the architecture, you might serve your application from static HTML.
00:09:08.640
For example, shipping an application as an app store binary that includes a web view.
00:09:15.440
The app can serve local HTML or pull from a remote source for content.
00:09:23.360
This blurs the lines between native and web apps and online and offline capabilities.
00:09:30.960
Does anyone have questions or comments about this?
00:09:36.360
If yes, let's quickly go over WebKit.
00:09:40.960
WebKit is an open-source browser used by all mobile devices, making cross-browser development much simpler.
00:09:49.040
Web development becomes more enjoyable again, particularly as WebKit is pushing the boundaries of HTML5.
00:09:57.440
I encountered the HTML5 spec last week, and it is a bit confusing to navigate.
00:10:04.079
It has evolved over several years, and now things are coming together.
00:10:11.200
Some interesting features are coming up, such as canvas for vector graphics in HTML.
00:10:18.360
Also, the video tag will allow you to embed video directly without needing Flash.
00:10:25.760
There will be standards for geolocation integrated into HTML.
00:10:32.000
Furthermore, web workers will provide non-blocking asynchronous JavaScript operations.
00:10:39.680
Client-side storage is a topic I want to dive into because it’s quite fascinating.
00:10:46.560
Doesn't this sound a lot like Google Gears?
00:10:52.760
Google Gears was a set of extensions allowing similar functionalities.
00:10:59.280
While developed ahead of the standard, much of its functionality may get replaced by HTML5.
00:11:06.080
There are three types of client-side storage: structured storage, app cache, and transactional SQL databases.
00:11:13.280
Structured storage allows for an in-memory hashmap for ephemeral data.
00:11:19.840
App cache helps store application resources in the browser.
00:11:26.160
The third kind is a proper transactional SQL database on the client side.
00:11:33.520
This is useful for progress and efficiency in web apps.
00:11:41.760
Let’s take a look at productive ways to use client-side databases.
00:11:50.160
The key takeaway is working with callbacks in JavaScript.
00:11:57.440
This allows numerous operations to occur seamlessly, just like traditional SQL.
00:12:04.040
Asynchronous programming can become the norm for frontend development.
00:12:10.240
I want to reiterate the importance of having a client-side database.
00:12:16.800
It allows your app to persist data across sessions effectively.
00:12:23.440
The sample code I'll show will highlight how straightforward it is to set up.
00:12:30.020
Your database can maintain multiple entries, including district details, lat-long coordinates, and other functionalities.
00:12:37.120
You can also implement error handling through callbacks efficiently.
00:12:46.560
Just to shine light on local database behavior: how we store and manage the data effectively.
00:12:53.680
Also, navigating through different attributes improves user interactivity.
00:13:00.640
Let's quickly look at security and privacy aspects for client-side storage.
00:13:07.760
Privacy becomes a huge concern when dealing with persistent data storage on clients.
00:13:14.320
Cookie resurrection is a threat.
00:13:21.040
When users clear their cookies, they might forget about another separate data store.
00:13:28.360
To counter this, the same-origin policy is enforced, thus maintaining better user security.
00:13:35.480
Let’s take a look at real-world examples.
00:13:41.720
Gmail’s recent updates enhance their mobile offerings.
00:13:47.920
Consider how emails are cached and accessible despite network interruptions.
00:13:54.040
This enables users to work offline while still receiving access to their data.
00:14:01.799
Another example is PhoneGap; it connects you with device features through JavaScript.
00:14:08.200
With PhoneGap, you get native code allowing for a structured project.
00:14:15.480
You can create an app skeleton along with configuration to load content seamlessly.
00:14:22.799
All device features will be usable through JavaScript.
00:14:29.520
Navigating device functionalities effectively expands project capabilities.
00:14:37.200
Numerous companies are actively engaging in similar frameworks.
00:14:46.760
XUI, a JavaScript library, optimizes mobile web development.
00:14:54.040
This brings lightweight capabilities advantageous for mobile applications.
00:14:59.920
When we get into app development, think about using the framework responsibly.
00:15:04.960
The aim is to create applications that serve users effectively and efficiently.
00:15:10.960
Remember to test well, ensuring all functionality works as intended.
00:15:16.960
Lastly, don't forget to ask for user reviews.
00:15:18.760
Incorporate feedback into future development.
00:15:22.880
This kind of agile development will secure better user experiences.
00:15:28.640
Okay, let's wrap up soon.
00:15:34.480
Anyone with final questions or comments?
00:15:42.960
Thank you for your attention and participation!
