Building iOS Apps with RubyMotion

Aloha RubyConf 2012

Ray Hightower

4 talks

#rubymotion

#ios-development

#minimum-viable-product-mvp

#test-driven-development-tdd

#object-oriented-programming-oop

#user-experience-ux

#mobile-applications

Building iOS Apps with RubyMotion

by Ray Hightower

In the presentation titled "Building iOS Apps with RubyMotion," Ray Hightower introduces RubyMotion, a tool that allows Ruby developers to create native iOS applications using the Ruby programming language. This talk takes place during the Aloha RubyConf 2012 in Honolulu, Hawaii, and is aimed at individuals without prior knowledge of Ruby or iOS development. The agenda includes an overview of what RubyMotion is, its advantages, how to use it effectively, and a Q&A session for attendees.

Key points discussed in the presentation include:
- Introduction to RubyMotion: RubyMotion compiles Ruby code into LLVM bytecode, which ensures that apps are compiled rather than interpreted. Users need a Mac with OS X and Xcode to run RubyMotion, available for a fee of $200.
- Reasons to Use RubyMotion: Hightower emphasizes several reasons for utilizing RubyMotion, including the ability to quickly develop a Minimum Viable Product (MVP) for those already familiar with Ruby. The MVP concept focuses on releasing a product with just enough features to attract early adopters.
- Learning RubyBetter: RubyMotion serves as a gateway for Ruby developers to deepen their understanding of the Ruby language, especially for those who often felt that Rails made some of Ruby’s functionality feel like magic.
- Interactive Demo: Hightower provides a live coding demonstration, showcasing how to create a simple RubyMotion app, manipulate UI elements in real time, and utilize standard features like Rake for building projects.
- Testing with TDD: Emphasizing test-driven development (TDD), Hightower discusses using a testing framework similar to RSpec called MacBacon. Automated tests can be organized in a directory structure as part of the RubyMotion application.
- Use of Interface Builder: The presentation includes showing how RubyMotion can integrate with Interface Builder for GUI design, allowing for the creation of graphical interfaces non-programmatically.
- Challenges and Advantages: Hightower mentions potential drawbacks, such as concerns regarding the longevity and support of RubyMotion from Apple, along with the differences between developing in RubyMotion and Objective-C.
- Final Thoughts: Hightower advocates for the use of RubyMotion, particularly for developers with Ruby backgrounds as a quick way to get MVPs to market, with the potential to transition to more extensive application development.

In conclusion, RubyMotion is recommended for Ruby developers looking to create iOS applications quickly while also serving as a tool to enhance proficiency in Ruby programming. The session emphasizes the importance of adhering to Apple’s Human Interface Guidelines to create user-friendly applications. The talk concludes with a Q&A segment, addressing various inquiries about RubyMotion’s capabilities, integration with other libraries, and future development prospects.

00:00:15.759 Okay, good morning, good late morning to everybody. Thanks for coming! My name is Ray Hightower, and I'm here to talk to you about building iOS apps with RubyMotion. Before we do anything, what a wonderful place to have a conference! We're in Hawaii, in Honolulu. Let's give a hand to the organizers for putting this together. Lunch yesterday was great, and lunch today is going to be awesome as well. Thank you for that; I know you put a lot of work into what we're doing here.

00:00:27.039 I'm going to talk to you about building iOS apps with RubyMotion. That's me, and I'll throw that slide up at the end. Bottom line is I run a user group called Chicago Ruby and a software company called Wisdom Group. We build Rails and iOS apps. Thank you for having me here! Here's our agenda for today: we're going to go through what, why, how, and then have a Q&A. Specifically, we will cover what RubyMotion is, why we care about it, how to do something productive with it, and then we'll have some questions and answers.

00:01:03.719 I think we'll spend more time on the why and how than on the other parts today because that's where the meat of the talk is going to be — where we'll be able to answer some questions for you. So, what is RubyMotion? RubyMotion lets you, as a Ruby developer, write iOS apps. The apps that you're writing with RubyMotion are compiled into LLVM bytecode. These are compiled apps; they're not interpreted. In order to run RubyMotion, you need to have a Mac.

00:01:30.560 Someone asked me earlier if I can do RubyMotion without a Mac. You actually need a Mac running OS X and Xcode. You buy RubyMotion for $200 at rubymotion.com. You also need an editor — I use Vim, but you can use TextMate, Sublime, Emacs, or any other editor you prefer.

00:01:42.720 Now, why RubyMotion? Why not just write apps in Objective-C on Xcode? Why bother doing it in Ruby? Well, there are a couple of reasons why you might consider doing that. If you need an MVP right now and you know Ruby, then RubyMotion is probably the way for you to go. Let me talk about MVPs for a second. MVP stands for Minimum Viable Product, as defined by Steve Blank in his book 'The Four Steps to the Epiphany.' I hear many people attacking an MVP by trying to throw feature after feature into it before getting it out the door.

00:02:09.280 The main idea behind the MVP is that you want something small with the minimum number of features necessary for your clients to consider purchasing it. You put that in front of your clients and determine if they're willing to buy it. It's not an opportunity to cram a bunch of features into something and get it out there. You want to have a product that is both minimum and viable at the same time so you can determine if they want to buy the product. If you already know Ruby and you're building an MVP on iOS, RubyMotion is a great way to go.

00:02:33.800 Another reason to learn RubyMotion is if you want to learn Ruby better. I discovered a side effect that I did not predict: as I dove further into RubyMotion, I began to learn Ruby better. I understand more about mixins, inheritance, and modules than I ever did before. Before I came to Ruby, I predominantly came to Ruby from Rails. How many people here came to Ruby from Rails? The rest of you were probably pure Ruby beforehand? Well, to me, coming to Ruby from Rails meant that a lot of the things happening in the background felt like magic.

00:03:10.760 If you dive into Ruby via RubyMotion, you'll understand why a lot of these things are happening. Ruby is truly a very beautiful and effective language. But why not RubyMotion? There are some good reasons not to use it. If you already know Objective-C, then you probably don't need it and might not want to go that route. I did meet a guy who is an Objective-C developer wanting to learn Ruby so that he can build backend APIs for his Objective-C apps, and he sees RubyMotion as a gateway to Ruby, just as some may see RubyMotion as a gateway to Objective-C.

00:03:40.319 So the bridge can be a two-way street. Another reason you might hesitate to use RubyMotion is if you're concerned about what Apple is going to do with Ruby in the future. What if Apple intentionally or unintentionally breaks RubyMotion? We don't know what's going to happen there. Worst-case scenario, though, you'll know a lot more about Ruby and object-oriented design and programming. In that case, it's really not a losing proposition.

00:04:01.480 Now let's jump into how this all works. You've heard me talk enough. I’m going to show you a demo of creating a RubyMotion app. RubyMotion is handled at the command line. Can the people in the back see that all right, or do I need to zoom in a bit? Should I zoom in? Okay, here we go. We’ll start with 'motion create Hello.' For example, when you create a Hello app, a bunch of files get created. It almost looks like you're doing something with Rails.

00:04:51.039 I'm going to go into another directory for a Hello app that I created earlier. If you run the tree command, you’ll see the files that were created. There's a Rakefile; those of us who use Ruby are quite familiar with Rake. Rake is RubyMake. The app directory is where we define our app delegate. The app delegate is the entry point for the application. Now let's go ahead and run it; to run your RubyMotion application, you just run rake. It looks in the Rakefile, and here we go: 'Hello, oh, Magic Ruby!'

00:05:18.639 I better fix that! What you can do is hold down your Command key and mouse over the object right here. You’ll notice that right here at the command prompt, this changes as you hover over an object. Mouse over it and click it; you can grab that object by typing 'self.' See that self.text says 'Hello, Magic Ruby?' We don’t want it to say that; instead, let’s change it to 'Aloha' because we’re at Aloha Ruby. How about we add two exclamation points? There it is! So while the app is running live, you can actually change the attributes of the app live right there in the middle of running the app. Let’s get back to the slides.

00:05:56.640 Okay, so that’s how it works. I just showed you this; you never know when you’re doing something live if it’s going to fail or what have you. So, we want to ensure we have everything in the slides, too. Rake compiles and here’s the directory structure. The name of the app is 'Hello Ruby,' and here’s the structure using the Unix tree command. You can see our Rakefile from which we specify things like the app name. The resources directory is where you drop in your images or your audio files, should you have any.

00:06:24.560 It’s also where you would drop in your Interface Builder files. Yes, for those coming to RubyMotion from Objective-C, if you want to know if you can use Interface Builder with RubyMotion, yes, you can, and I’ll show you that later in this presentation. The spec directory is where you put your specs, which look just like RSpec. RubyMotion uses an RSpec clone called MacBacon. You put your specs — your automated tests — in this spec directory, and they all end with an underscore spec.

00:07:02.880 The main spec would, of course, be one of those tests. The app delegate.rb is the entry point for the application. Let's take a closer look at that. Now, what I did with these slides is we have code at the bottom, and I’m highlighting a line of code with a red rectangle. If you can’t see that, the line I'm focusing on is at the top. So, app delegate is the entry point for the application; this is what iOS looks for when it starts running your app.

00:07:30.400 Here’s where you're defining the actual entry point with the application didFinishLaunchingWithOptions method. What a long method name! This certainly does not look like a Ruby method; it looks more like an Objective-C method, and it is. In RubyMotion, some methods will look more like Objective-C methods. There’s a gem called BubbleWrap that wraps a lot of these Objective-C methods and makes them look more Ruby-like. I'll show that in the demonstration as well.

00:08:03.840 Here we go: didFinishLaunchingWithOptions. Here’s where we define the window. Essentially, we are telling it to create a window — alloc, which is kind of like new. You would allocate in C; in Objective-C, you use alloc. We’re telling it to take up the whole screen. 'Occupy bounds' means to take up the whole screen. We’re assigning a root view controller, which in this case we’re calling 'HomeController.' We're making it key and visible; key means this window will receive user input, and visible means we’ll make it visible.

00:08:29.919 Here’s where we're coloring the background. We can change all of that! The HomeController is an instance of something called UIViewController. Objective-C and RubyMotion both use the Model-View-Controller paradigm. A view controller is what we in Rails would consider a controller. There are models, there are views, and there are view controllers.

00:09:00.840 What we would consider a controller in Rails is a view controller. In RubyMotion, 'UIView' shows what it's inheriting from. It’s an instance of UIView. 'ViewDidLoad' is executed when the view is loaded. We're creating a label now. The way labels are done in RubyMotion is that '15, 100' are the x and y coordinates. Your origin (0,0) is in your upper left corner, x goes from left to right along the top, and y goes from top to bottom along the edge.

00:09:36.440 What about user experience? I have to tell you a quick story. Within Wisdom Group, I’m fortunate to work with people who are much stronger with Rails and design than I am. One of them is our chief designer. From time to time, I’ll give him mockups of what I think something should look like for a client we’re working on a website or an app for. I’ll give him these and he’ll come back and make them very functional because he’s a user experience professional.

00:10:13.320 I was looking over his shoulder while he was working on some wireframes for a client, and I noticed he has a directory on his machine called 'Ray playing designer,' which was a clear mockery of my design skills — kind of funny. I don’t play designer; I just create some mockups and pass them to a designer. But if you’re going to do user experience, there are two things you need.

00:10:36.480 First, you need a designer who really understands design, and that designer needs to work with Apple’s Human Interface Guidelines (HIG). You’ll hear people in the Apple world refer to the HIG — they’re guidelines that Apple has developed to help us create more effective designs and apps. Here’s UI Kit, which is a set of classes. I’m not going to ask you to read all of this. We’re only going to focus on six of the UI Kit classes: we have views, view controllers, windows, labels, and table views. We’ll use these as we go through our next demonstration.

00:11:21.440 How many of you are familiar with FizzBuzz? Maybe you’ve done this in a technical interview. FizzBuzz is when the interviewer asks you to write a code block that counts integers from one to 100 or up to a thousand, however high you want to go. When you hit an integer that's a multiple of three, print 'Fizz.' If it's a multiple of five, print 'Buzz.' A multiple of fifteen would print 'FizzBuzz.' For our next demonstration, we will look at a FizzBuzz app.

00:11:55.440 Let me close out the simulator and show you what it looks like. Back to the simulator, and it’s starting up. This is a FizzBuzz app, very simple. We have a label, we have an increment button, and a decrement button. When I increment, and when I go to nine, I should get 'Fizz.' Ten should be 'Buzz,' and what should I get at fifteen? I should get 'FizzBuzz.' There’s an increment button and a decrement button.

00:12:37.440 I also have a reset button. While debugging the reset button, I thought, 'Oh, wouldn’t it be neat if the reset button did something cool, like change the background?' That’s another reason why you definitely want to work with a designer — because that is pretty ridiculous and ugly! But anyway, that’s increment, decrement, and reset, which resets the counter all together.

00:13:18.360 If we take a look at this and close the simulator again, let's go back to our command line. Actually, I have that open in Vim here. Here’s the view controller. FizzBuzzViewController is what I called it. When we load the view, we’re telling it to pull in a file called FBI that we created using Interface Builder. Let me show you Interface Builder.

00:14:10.240 Interface Builder is a GUI for creating GUIs. It's part of Xcode, and if you've done anything with drag-and-drop GUI, you can use Interface Builder. Essentially, what I did was create the interface using Interface Builder. You assign each element a tag number. I assigned '1, 2, 3, 4' to the label and buttons, as you can see in the display. You take the Interface Builder file, a .xib file, and drop it into the resources directory.

00:14:57.120 By the way, in the resources, you’ll see that we also have the icon for this app. The FBI.xib is the Interface Builder file; it's actually XML, if you open it up you can take a look at it. The compiled Interface Builder file is .nib. There's other images you can store here as well. This is called FBI, and here’s the line of code in the loadView method where we want to use this Interface Builder file.

00:15:36.920 In the FizzBuzz demonstration, I also use that to demonstrate TDD. As I mentioned before, your specs for TDD go in the spec directory. Let me show you that live because it’s one thing to show you in the slides, but I’ll show you what it actually looks like. Let's look at that in Vim; in the lower pane, we actually have these specs. This is FizzBuzzViewControllerSpec.rb, and if you look at this, it looks just like RSpec.

00:16:06.720 If you want to run this, just use rake spec, and it will go through and run the specs. You can use Guard with this as well, so if you want to go back and forth – red, green, refactor – you can do that using Guard. Guard is cool because it watches your files, and anytime a file changes, it runs your test for you.

00:16:46.760 Now, I'm going to create a failing test just so you can see it. Guard is watching that. Let's go back to the console. It's running the test, and just like with RSpec, you perform your red-green cycle. Now that this test is red, we can fix it because I'm not 100% sure, but I think that eight is not equal to thirty-eight. So here we go; Guard is going through and running the test again.

00:17:19.920 One challenge I faced with RubyMotion is that when I'm running tests, it compiles everything before executing the test. I need to find a faster way to run tests since in the Ruby world we could run tests almost instantaneously. That's something I need to dig into further. You already saw the HomeController spec, where we failed.

00:18:05.360 There are some very cool gems you can use with RubyMotion. Just because you're compiling an app for iOS doesn't mean you can't use gems. The gems we utilize are specifically designed for iOS. One such gem is called 'Formotion,' which allows you to create forms that run in iOS. Let me show you a Formotion demo.

00:19:03.360 First, we’ll take a look at the form and see what it does. This is an iOS form, and from what iOS developers tell me, it's quite time-consuming to create a form like this. However, using the Formotion gem in RubyMotion makes it look almost like CSS. This is it — we’re specifying the title of the different fields, and as I scroll down, these are the titles of the fields along with the switch button.

00:19:48.640 Let’s go back to the simulator. Imagine you’re using this iOS app you’ve just put out. You've got a new subscriber named Ray Hightower, who is very security-conscious, so his password is 'password' — because no one would ever think of that! He logs in. Note: normally, you wouldn’t store passwords in clear text. This is just for demonstration purposes to show that it can collect data.

00:20:38.080 Alright, this is Formotion. To use it, you go into your Rakefile and specify that you're requiring the Formotion gem. This is straightforward and simple, almost like CSS. We just showed you that BubbleWrap gem; I mentioned it earlier.

00:21:20.960 The creator of BubbleWrap, Matt Imonti, is here at the conference, so if you want to talk to him, just go up and say hi. Thanks for creating BubbleWrap! It’s a gem that helps RubyMotion code look more Ruby-like. Here’s an example — this is a chunk of code in Objective-C, and here’s what it looks like in RubyMotion. If you want to delve into more details about what’s happening behind the scenes, check out U Clay Alsup's blog.

00:22:07.440 In fact, he's now contributing a lot to BubbleWrap and Formotion, so he’s putting a lot of effort into the RubyMotion community. Is there a good reason to use RubyMotion instead of Objective-C? I’m not sure that’s the case. Some people say they want to use RubyMotion because they’ll do less typing, but the fact is, we’re all using an IDE with code completion anyway — so is less typing really a good reason?

00:22:54.480 I don't think so! A good reason to consider RubyMotion is if you have a background in Ruby and want to build iOS apps. When using BubbleWrap, you have to go into the Rakefile of your app and require BubbleWrap, as shown here. Here’s an example that comes from NS Screencast. Ben Sherman created a screencast that highlights BubbleWrap, showing how it enhances RubyMotion code.

00:23:37.680 Let me show you an application written using BubbleWrap. It looks more like what you would expect if you’re following the Human Interface Guidelines. Ben has created an app that goes out to his website and pulls up what screencasts are coming up.

00:24:40.880 This is what it looks like in iOS. Here’s his API client. I’ll include this in the slides as well. In the Rakefile, you need to specify that you’re using BubbleWrap and BubbleWrap HTTP so that you can leverage its capabilities to make HTTP requests.

00:25:04.960 One of my favorite Ruby tools is RVM. Some people use RBV or other tools, but I started with RVM and am very comfortable with it. I understand you can also use RBV with RubyMotion. I like it because I often perform destructive testing when learning something new, and when you do such testing, it’s always good to know you can wipe everything out and start fresh.

00:25:50.000 Cupertino is a gem that helps you handle provisioning profiles from the command line. How many people have dealt with provisioning profiles in iOS? How many of you enjoy it? I don’t enjoy it at all! If you gem install Cupertino, then you can manage your provisioning profiles from the command line, and in this case, I'm taking a look at the iOS profiles I have on my local machine. The App IDs are not actual; I changed those for privacy, but that gives you an idea of what Cupertino can do.

00:26:36.360 Auto Layout is a new feature in Xcode that allows you to specify your layouts for your iOS devices in a relative manner. They behave similarly to frameworks like Twitter Bootstrap. Auto Layout works with RubyMotion, too. ARC, or Automatic Reference Counting, is another feature of Xcode, meaning we no longer need to manage memory when writing apps in Objective-C. RubyMotion uses something very similar to ARC, which eliminates the need for explicit memory management.

00:27:17.840 Finally, we reach the end of the talk. Does it make sense to use RubyMotion or Objective-C if you're writing iOS apps? I met a gentleman a few weeks ago who asked a thought-provoking question: if you were a VC and spending your own money on a developer to write an iOS app, would you hire a developer to use RubyMotion or Objective-C? I think if you already have Ruby skills or your team has Ruby skills, I would recommend RubyMotion. You can get the MVP up and running quickly.

00:28:03.000 If that MVP takes off, and you're generating revenue, then you will have the resources to pay for more developers—be they RubyMotion or Objective-C developers. If you have an Objective-C background, consider RubyMotion because, as discussed before, it could be a gateway drug—a bridge to Ruby, since you’ll likely want to use backend web technologies.

00:28:36.840 Here are a bunch of resources you might want to check out. I know the type is small for those of you in the room, but I’ve made these slides available on my website so you can refer to the additional resources. Thank you very much!

00:29:08.840 The question is: how do you perform segues between multiple view controllers in RubyMotion? In Objective-C, your view controllers are part of an array, so when you specify which one you’re using, you’re specifying its index in that array. I believe that’s how it's done in RubyMotion as well.

00:29:41.600 The question is: have I encountered anything in RubyMotion that I wish I could do, but couldn't? I haven't yet. Most of the apps we're working on aren't really groundbreaking in terms of pushing the boundaries of RubyMotion. I think the apps that will really stretch RubyMotion, or Objective-C, will be games — where performance matters. Business apps may not seem that exciting, but often they generate the most revenue.

00:30:20.360 No, the question is whether there are any key features of iOS that are not accessible through RubyMotion. You can access the accelerometer, the camera, and all of the device’s features. What happens with RubyMotion is you’re writing Ruby code that compiles for iOS. Unlike some other tools—without naming them—you’re producing the bytecode that runs on the iOS device.

00:30:45.400 Yes, the question was whether RubyMotion translates to Objective-C. RubyMotion compiles to LLVM bytecode; the LLVM stands for Low-Level Virtual Machine. It includes the virtual machines, compiler, and debugger. The value proposition of LLVM is portability; you write a compiler that targets multiple platforms. In the case of RubyMotion, the targets are x86 (for simulator) and ARM (the chip in iOS devices).

00:31:10.240 Would we want to continue using RubyMotion for a full-blown solution? I think it can work well for full solutions too, but I come from a Ruby background. If we were more Objective-C oriented, we might see things differently. That said, there's always the risk that RubyMotion could break if Apple decides to change something.

00:31:48.480 The short answer is I believe you can certainly do it, but some may choose to stick with Objective-C for final products. And yes, it has its benefits for MVPs and could be used for everything depending on the team.

00:32:29.200 The question is whether anyone is extending RubyMotion for writing macOS apps. The creator of RubyMotion, Lauren Cinnati, is also behind MacRuby, so it’s already there to some extent. I'm not sure if Lauren has learned anything from RubyMotion that he will incorporate back into MacRuby, or if it becomes a two-way street.

00:33:14.160 If you want to learn more about RubyMotion, a good place to start is with the MacRuby book written by Eddy, who is running around this conference.

00:33:44.360 Can you use storyboards? Yes, you can use Interface Builder. Interface Builder works with RubyMotion, but I haven’t tried storyboards personally. I understand that storyboards use Interface Builder, and if Interface Builder applies to RubyMotion, it can also use storyboards.

00:34:10.160 The question is whether you can use packages written for CocoaPods in RubyMotion. Yes, you can leverage that. You would use the resources directory. I haven’t dug deep into that yet, but I've seen some examples and blog articles where they’ve successfully done that. If you have an Objective-C library or even better a C library, you can integrate that with RubyMotion.

00:34:53.960 Any more questions? Let’s go play with RubyMotion! Thank you very much for having me.

Aloha RubyConf 2012