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!
