Ruby on Rails
Building Cross Platform Mobile Apps with Ruby and PhoneGap
Building Cross Platform Mobile Apps with Ruby and PhoneGap
by Ben SteinIn the presentation titled "Building Cross Platform Mobile Apps with Ruby and PhoneGap" by Ben Stein at GoRuCo 2009, the focus is on developing mobile applications for various platforms like iPhone, Android, and Palm Pre, drawing insights particularly for Rails developers. Stein, from Mobile Commons, shares his expertise in mobile app development, emphasizing the growing significance of mobile technology in communication and application usability.
Key points discussed in the video include:
- Importance of Mobile Features: Mobile devices offer unique functionalities such as GPS, accelerometers, multimedia capabilities, and push notifications, which are not available on traditional desktops.
- Challenges of Mobile Development: Issues like unreliable connectivity, multiple programming languages (Java, Objective C), and memory management are highlighted as significant hurdles for developers transitioning from web to mobile applications.
- Approaches for Rails Developers: The speaker outlines several strategies for integrating mobile compatibility into existing web apps, including:
- Using the web app as is, leveraging Safari's capabilities.
- Creating a mobile-formatted version of the site using alternate stylesheets and user-agent detection.
- Developing native client apps for each platform, which provide richer user experiences but require extensive learning of different programming languages.
- Rapid Prototyping and Technology Stack: Stein proposes a technology stack based on WebKit that emphasizes using HTML, CSS, and JavaScript, allowing developers to maintain business logic within their familiar web application environment. HTML5 is also highlighted for its powerful capabilities such as client-side storage and asynchronous operations.
- Real-World Examples: He cites examples such as Gmail's offline capabilities and PhoneGap, which facilitates access to device features via JavaScript, demonstrating the practical applicability of these concepts.
- Best Practices: Stein urges the importance of user feedback in agile development, recommending iterative testing and integration of user suggestions to foster better experiences.
In conclusion, Stein's talk underscores the evolving landscape of mobile app development, encouraging Ruby and Rails developers to adapt their skills to leverage the unique benefits of mobile technology, while keeping in mind the challenges and rapid prototyping practices that enhance development processes.
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!
