Accelerated Native Mobile App Development Titanium Gem

Talks

Wynn Netherland

5 talks

Accelerated Native Mobile App Development Titanium Gem

by Wynn Netherland

In his talk at the LoneStarRuby Conf 2011, Wynn Netherland introduces the concept of accelerated native mobile app development using Titanium, a platform that allows developers to write applications for both iOS and Android using a single JavaScript API. This session aims to showcase how Rubyists can leverage their existing skills to create native mobile applications efficiently.

Key points discussed include:
- Introduction to Titanium: Netherland explains how Titanium compiles to native code, allowing developers to utilize JavaScript while targeting multiple platforms seamlessly.
- Trade-offs in Mobile Development: He discusses the pros and cons of developing native versus web applications, emphasizing that while web capabilities are improving, replicating a native feel in web apps remains challenging.
- Real-Life Examples: Netherland shares anecdotes from his experience building a golf application and a kiosk app for Gillette and Walmart, which guided him to choose Titanium for ease of cross-platform development.
- Leveraging Ruby Skills: The discussion highlights how Ruby developers can utilize frameworks such as Rails and Sinatra alongside Titanium for backend support, creating robust mobile applications.
- Technological Features: He introduces tools such as CoffeeScript and Sass to enhance the development process, offering cleaner syntax and improved organization within the development environment.
- The Ti Gem: Netherland mentions the creation of the TI Gem designed to streamline processes, allowing Ruby developers to generate projects quickly and efficiently while promoting high code reuse across platforms.
- Community and Resources: The importance of community contributions is stressed, encouraging participation in testing and development to improve the Titanium ecosystem.
- Conclusion: The talk wraps up with an invitation for questions, encouraging developers to engage with the Titanium platform and the Ruby community, highlighting the supportive nature of both spaces.

Overall, the session aims to inspire Ruby developers to adopt mobile app development through Titanium and utilize their existing knowledge in a new and exciting arena.

00:00:20.560 So, my buddy Russ set the bar high for me with a tweet earlier, expecting to crack up if he catches many of my talks. They're full of esoteric jokes that only he and I get. Sorry, Wes, you're probably going to be disappointed in this one; I'll just have to blind you with facts about mobile application development.

00:00:32.480 This is something I'm really excited about. I've been doing a lot of this mobile app development more and more lately, and it's been a fun diversion from the Ruby web stuff that I normally get to code on.

00:00:45.120 A bit about me: My name is Wynn Netherland, and I'm the CTO at Pure Charity, a nonprofit that is building an application to help people manage charitable giving accounts and direct funds toward charitable causes they care about. I'm also a co-host of 'The ChangeLog,' where we cover what's fresh and new in open source. Additionally, I'm authoring a book on Compass and Sass, which I talk about quite a bit with Adam on our podcast.

00:01:03.359 If you listen to our podcast, we discuss it frequently. This is the best cover for the book that we could get.

00:01:06.879 If you're interested in Compass and Sass, Manning has a deal going on: use the code SAS40 at checkout to save 40%. Sadly, the code SAS100 is not valid; I'm sure many have tried.

00:01:32.240 Now that everyone's in the room, how many of you consider yourselves mobile developers?

00:01:38.799 Mike, I know you are. Alright, a few hands. How many of you want to be mobile developers? Alright, cool, you're in the right spot! We'll see what we can do about that.

00:02:19.360 A buddy of mine, Jake Stutzman, an excellent designer who works at elevate.co, came to me back in the spring wanting to build a golf application similar to Gowalla. He had high-fidelity wireframes in Photoshop and asked for advice on how to bring this to market, debating whether to go native or web.

00:02:38.959 There are trade-offs either way, and the gap is narrowing. You can do a lot of things with web applications these days that previously required a native app, such as geolocation and other features which can now be used in the browser. It really comes down to the experience you want to provide and whether the barriers to delivering that experience outweigh using the app stores.

00:03:03.280 I was very excited about the design he showed me. As soon as I saw it, I wanted to be part of it because it was just such a beautiful application to manage your courses and log your scores in a social way. The app is really close to getting released in the App Store, and I encourage golfers to check it out at golfstatus.com.

00:03:36.319 When Jake wanted my opinion on the options available between native and web, I felt that delivering the iOS feel in a web application was just not possible. When you start mimicking native animations using HTML5, it's hard to pull off without it feeling fake or phony. Doing animations in CSS3 can be quite challenging, especially with extensive dropdown menus.

00:04:01.200 I'm hopeful that one day this won't be the case with jQuery Mobile, Sencha Touch, and other frameworks that are working to narrow that gap. However, for now, if you really want a native feel, you have to build it natively. It may always be that way, especially since native capabilities are continually evolving.

00:04:31.120 Another app we built started with an iOS version for a friend who had an agency contract with Gillette and Walmart. They wanted to create a kiosk app for users to select their shaver right at the end cap in Walmart. The challenge was that their agency had already built the kiosk on a Galaxy Tab and now only needed the software.

00:04:58.959 Given those constraints, the options for development were limited. They could either build it in Java or Adobe Air. Ultimately, for both of these projects, I suggested we build them in Titanium.

00:05:28.480 When you're building native applications to support iOS and Android, you're generally looking at either Objective-C and Java or both in order to accommodate both platforms. How many of you have played around with Titanium? Who hasn't heard of it? Okay, fair number of hands.

00:06:15.440 Titanium, from a company called Appcelerator, allows you to write applications using a single JavaScript API, targeting multiple platforms. The two main ones, out of the box, are iOS and Android, although there is additional support being added for Blackberry and potentially Windows 7 in the future.

00:06:39.680 Titanium compiles to native code, and I was skeptical when I first heard this, wondering how good it could really be. However, at the end of the process, you receive an Xcode project or an Android project with very decent code in both cases. They utilize the WebKit JavaScript engine for instances requiring code interpretation at runtime, but for most cases, they compile native objects ahead of time.

00:07:06.799 Additionally, there are numerous pay-for modules you can use within the Titanium ecosystem, including analytics, advertising, geolocation features, and even PayPal integrations. The project itself is open source and available on GitHub at github.com/appcelerator/titanium-mobile.

00:07:43.440 Appcelerator promotes Titanium Studio as a primary development object. Some of you might recall using RAD Rails back in the day. It is similar to Aptana. While most have likely moved on from that, it's worth noting there is a community of IDE users that still appreciate it.

00:08:00.960 Live debugging on Android is available with Titanium, where your code updates in real time on the device, which is crucial. While the experience on iOS is smooth in the simulator, deploying to the actual device can be excruciatingly slow, requiring many credentials.

00:08:26.560 On the other hand, deploying to an Android device is straightforward, but the simulator can be quite sluggish to boot up. For those who prefer the command line over IDEs, I have some good news: there's a CLI for Titanium, which I’ll demonstrate now.

00:09:04.320 So, I’ve aliased the Titanium command line to where it actually resides in the library. It points to Titanium Mobile SDK version 1.72. If I type 'titanium', I can see a number of cmd line options similar to what a Rubyist would recognize.

00:09:37.920 I can create a new project right from here. Let me create a project: I'm going to name it 'lsrc' and give it an ID, essentially the reverse DNS type of ID that is customary in this type of development. It tells me it created the project.

00:10:00.720 Now, if I change into the 'lsrc' directory and look at the generated main points in the project, there’s a resources folder that contains an app.js file. This is the entry point for the app, and it uses a factory pattern.

00:10:19.519 The API utilizes a factory pattern to create windows, and we add tabs to create groups and tabs. It's a somewhat verbose way to create applications, but it works.

00:10:30.240 Currently, Titanium does not have a graphical user interface for application design—it’s all quite verbose. Essentially, we create a window, add tabs, and potentially a label for debugging purposes, calling 'tabGroup.open()' at the end.

00:11:46.240 Now, I can run this with the command 'titanium run .' which builds an iPhone application. It's now compiling to Objective-C under the hood, which I can then load into the simulator. Here, we have a simplistic native app with two tabs that allows me to switch seamlessly between window one and window two.

00:12:09.600 Up until recently, even simple things like a tab control at the bottom of the screen required a native application because the position fixed in web applications meant fixed to the window and not the viewport, leading to issues with scrolling.

00:12:30.080 This is getting fixed in iOS 5, but even to accomplish something that simple still required a native app. That is a quick overview of the Titanium CLI, and fortunately, it's open source and available on GitHub.

00:13:07.440 If you ask about integrating with Ruby, this is where it gets interesting. If you're building mobile applications, you can leverage your Ruby skills. Typically, you will need a server API unless you're using someone else's commercial API.

00:13:39.440 For that, it usually means using Rails and Sinatra. We built the Golf Status app, where the team at Code Wranglers, led by Robert Evans, developed an API and website using Rails and other Ruby tools.

00:14:04.560 On the client side, you really need to embrace your inner polyglot, which means using CoffeeScript. Who here is using CoffeeScript? Matt will be giving a talk on CoffeeScript, so make sure to catch that.

00:14:40.480 CoffeeScript is a different dialect of JavaScript that compiles down to JavaScript, similar to how Sass or Haml compiles down to CSS and HTML. On the left is JavaScript and on the right is CoffeeScript. Personally, I prefer writing CoffeeScript because of its cleaner syntax.

00:15:03.600 For instance, here’s a button created in Titanium using a factory pattern. It looks quite verbose. In CoffeeScript, that same button creation would look much more concise and readable, cutting the verbosity.

00:15:32.320 You can also utilize JavaScript frameworks, such as Underscore or jQuery, but keep in mind that when developing these native applications, there is really no DOM. Underscore enhances JavaScript significantly, adding capabilities we often miss.

00:16:05.440 Titanium also has a notion of JavaScript style sheets. By defining properties for two buttons, you may notice some duplication; however, this is the factory pattern in action.

00:16:27.440 This structure allows us to factor common elements into a button class, assigning IDs for individual instances. The biggest advantage here is the ability to separate presentation from content effectively.

00:16:45.680 With CSS and the traditional web model, we often ran into issues, and Titanium resolves this by letting us introduce elements like style sheets, which can be changed quickly without needing to dive into behavior implementation.

00:17:07.200 The JavaScript style sheets function just like CSS, but for those who enjoy using Sass and Compass, you can implement those techniques in Titanium, which help further organization.

00:17:34.960 Using Sass and Compass, we can account for common elements within a mixin, benefiting both from brevity and maintainability. One initiative we've pursued allows us to create styled patterns across projects, eliminating the need to recreate common design features.

00:18:02.240 Now let's look at a little Ruby code. The application utilizes CoffeeScript, which compiles down to JavaScript. Organizing our resources, we’ve placed the CoffeeScript files in a separate source folder.

00:18:36.160 Every file in Titanium acts as an atomic unit, compiling into a central port for the application. For instance, we have a gameplay model utilizing CoffeeScript for state management.

00:18:49.760 Furthermore, we have an API wrapper for interacting with the API endpoint and returning data. Anyone familiar with Faraday or HTTP Party in Ruby would find this approach quite similar.

00:19:08.640 The callbacks are then managed in this structure, enabling efficient data operations without dropping down into lower-level Titanium code for API interaction.

00:19:44.040 When extending features in Titanium, we can generate modules to fill gaps in the API. The generator tool provides options such as creating a new project, models, views, and more. Using a single codebase, we can still support multiple platforms, although complete reuse is not guaranteed due to differences in application architectures.

00:20:35.440 The TI Gem was created to streamline processes, and although we aim for high levels of reuse, real-world experience has shown to expect around 80-90%.

00:21:06.679 We are seeking contributions from the community to help with testing; we've been using Jasmine for integrating tests, and there are existing projects looking at building views within Titanium.

00:21:34.640 Lastly, I'm happy to discuss any questions about the platform, including device-specific cases or differences in architecture between iPhone and Android.

00:22:20.640 If you wish to integrate custom fonts, you can use OTF or TTF formats, ensuring you have the right licenses. A Ruby library called Mobile also helps simplify this process.

00:22:43.040 The overall approach taken by Titanium facilitates using JavaScript while targeting native applications, supporting a rich community of developers and projects.

00:23:39.360 We took patterns from multiple projects and created a gem called 'ti' for Titanium, which installs easily. You can generate new projects with 'ti new', and you get a structured application setup, plus tools to compile CoffeeScript, Sass, and assets, which support easy changes and rapid development.

00:24:58.760 We are also looking into features like improved documentation, potential wrapper functionalities, and addressing challenges with getting Titanium fully operational on Android, among others.

00:26:55.680 If practical hands-on experience is what you're after, I encourage you to utilize the resources and communities available. Feel free to reach out for any clarifications or further conversation about the Titanium platform.

00:27:56.080 Thank you for your time! Please remember to provide feedback, positive or negative, at speakerrate.com. You can find me on Twitter as @penguin, and be sure to check out upcoming events like the CodeStrong conference.

00:28:51.920 I really appreciate everyone's participation, and I hope some of you are now excited to use Titanium for your development needs.

00:30:01.680 Now, I will open the floor for questions. Don't hesitate to ask anything!

LoneStarRuby Conf 2011