 So my name's Todd Worth. I'm co-founder of Infinite Red with Ken Miller over there. I'm the creator of RMQ, and I'm the writer of the dispatch. How many out there of you guys know about RMQ and GALS? How many use it in the reroution projects? That's cool. That's a decent number. So I'll go over the basics of RMQ first, and then I'll get into what this talks about. First, we have a super secret announcement for RMQ. I'm a pro. OK, so RMQ was written for Ruby Motion, and it's done very well. But today, I'm really excited to announce that we're no longer going to be supporting Ruby Motion. RMQ will now be for MS-DOS phone. It's a much simpler interface. Animations are as simple as this, and that's literally the only animation. OK, real talk. So I'm going to do a quick overview of RMQ. I'm going to go through it really fast. This is an entire presentation in itself, but just for the people who aren't familiar with it. What is RMQ? It's nothing. Core values, performance matters. If there is a choice between nice code and performance, we choose performance. Lightsaber, not Deskstar. Simple tools that do simple things, not an all-encompassing thing. Don't pollute my work with yours. Self-explanatory, RMQ pollutes nothing. The concepts are based on jQuery, in case you aren't familiar with that. And so it has almost no pollution at all, which makes some things difficult for him. And then make it easy to the right thing. RMQ is a front-end library. It's like jQuery. It chains. It's non-polluting. It's not magical as much as possible, and it's fast. It's designed to be fast. It's going to be faster later. So if you're familiar with jQuery, just right here is what you wrap your elements in. In RMQ, we wrap our elements in this. I wish I could have done this, but I can't do that in Ruby, of course, because that's global variable. Oops, that. Okay, so RMQ is a front-end library. These are all the things that it does. It does a lot of things, but it's only has to do with a front-end. There's no data. There's no HTTP. There's nothing like that. It's just all UI views, UI view controllers. This is some of the stuff. Okay, so selectors is the first thing. You select views or view. And the most typical one is the top one, which is you select one view, or you can select an array of views. And once you select them, then you can do things on them. And there's a variety of other different ways that are very similar to jQuery. You don't use those as often. Typically, you select an actual view. And then you can do things on them. I'd show, remove, that kind of stuff. You can move views around with layout and frame in your styles. What the hell? Sorry. New little clicker here. Events and gestures. If you're familiar with iOS dev, you have gestures and you have events and they're two separate things. Even though they kind of work exactly the same. RMQ normalizes that into one thing. So the top one's a gesture, on tap, and then you pass it a block and you do something and then off removes the gesture. The same as jQuery does. Right here, start and touch in, those are events. But it's done in exactly the same way. Traversing. Traversing is just like jQuery. It allows you to go up and down the subview stack. You don't use this too often, but when you actually need it, it's awesome. UIView lifestyle, lifestyle, life cycle, appending views, creating views, that kind of thing. And RMQ style sheets, which was a replacement for us for T-Cup. MotionKit's actually much more similar to this. Both MotionKit and this one are pretty good. Animations makes animations easy. And generators. Creating your app, creating models, creating controllers, views, that sort of thing. Okay, RMQ version 0.6. One note on the version number here, I believe version 1.0 is super solid. So every 0.6 is the fourth major upgrade. So it'd be like almost like 4.0. But I'm in the school of thought, to get to one is a big deal. So we're gonna talk about what's new in version 0.6. New docs. Gantz and Steve Ross are helping me work on docs, starting now, actually. And our goal is to make the best docs in the Ruby Motion community of any gem. It's the new RubyMotionquery.com. It's up there right now. I pushed this morning. Here's some of the documentation. That's the new rec system we're gonna talk about. Style, style sheets, lots of diagrams. Cool search. This is actually in the search results. When I said grid, found that diagram, okay? And by the way, RMQ comes up number one in Google. A pen, now this is a very simple thing. Actually a client of ours created this. I didn't like it at first. Ken Miller then convinced me that it was a good method of ads, so I added it and now I love it. This is it right here. This is a very common pattern. You set an instance variable after you create a view and then you normally have to do a get on the end of if you guys are familiar with RMQ and this just removes that with a bang and makes sure you don't have to do parentheses. So Ken was right and the client was right and now it's wrong. Sparkles there is kind of a jerk. But anyways, data. This one's similar. It should look familiar. This is a really small feature. We'll go through it real quick. Basically you can do data to get the data of whatever view it is or you can set the data. And what that does is it sets and gets the most common data for that particular view. For example, a UI label, the most common data is text. For a UI button, it's title of whatever state. Some ridiculously long thing. For image view, it's an image and for text view, area view, it's text text. You can just use data. But the reason we want this is we can do chaining this way. So I can set this image and then continue the chain because it's in line here. RMQ chain. So every time you do something in RMQ, it returns an RMQ object. So you can do another method on RMQ and you can do another method in RMQ, just like jQuery. Rectangle, this is new. So originally in RMQ in the styles we had frame equals. This is the old way. So basically all we had for layout is this frame equals and that was just a styler method. It was literally just one method. And it was very basic. You could pass it a hash with top width, height, whatever. Then we added new methods like from bottom, centered. But it was all just separate methods and it was only a styler. So what we wanted to do is create a rectangle system that encompasses all that stuff and made it and added some new features and actually made an object called a Ruby motion query, colon, colon, wreck. This is the new one. Okay, you see from bottom and center now is inside a hash. Because of that, it doesn't matter what order you do it. It's smart. It always knows the order that you want to do it. The documentation shows Zach's order. New, below previous 10 points. That'll put it below the last thing you did layout on. 10 points, very cool. From bottom, that kind of stuff. This is the wreck. Top, left, width, height, right. Right and bottom, from bottom, from right. Now those two are different and you can see why they're different in this diagram. So that's your wreck right there. If you want to access the wreck, you do frame or bounce and then it gives you the rectangle and gives you all the left, bottom, from bottom, whatever. In this case, I'm assigning left. And then in the console, because RMQ, wow. Because RMQ loves the console. I guess now that we have the new features in Ruby Motion where you don't have to be in the console that much, we'll have to change that. But anyway, everything in RMQ has really good console output and frames included. That's when you do that. Okay, let's see an example using it. Now I'm not gonna go through all the stuff here you guys can look at it, but basically some of the interesting parts is the number five there is right of previous five. So if you change that from right 80 to say 100, it would make it, that one's smaller and that one would get bigger. The second, the second, hold on, so I don't have the wrong button. The second yellow one right here is actually below previous five, from right five. Now let me, this is a cool thing. Let's say you had a super view and you had a sub view and you wanted that to be the full of the super view but with a five point border. What you would do is left five, top five, from right five, from bottom five. And it does it, really simple syntax that way. So you can see a lot of this is done and then go on. Low previous five, that kind of stuff. Okay, this is actually very interesting. These blue ones right here, I did them backwards. I probably wouldn't do it this way, this is kind of fun. I did eight, nine, 10 because what I did is I set this one and then I set above previous five, above previous five. And you notice all the options have abbreviations which is typically what you use in a real application. So that's actually kind of fun. And to do that before was kind of a hassle or you just have to hard code the points which is lame. Okay, we're just gonna go up and down for some reason. The inspector, I created this when I was creating the rack and the grid which is coming up and it was so cool I decided to rip out the horrible, horrible code that I wrote it in and make it where I was embarrassed to push it to the repo and made it a tool for RMQ. So let's check it out. Okay, so this is a little video. We're gonna play this right now. Right here we're gonna go RMQ all, it's gonna select all views and then we're gonna start the inspector. That's the inspector. Okay, close that down. Now I'm gonna do RMQ only buttons open the inspector. That's the inspector with just buttons. Okay, now let's show some of the options that we can look at. You can turn on the grid, which we'll talk about later. You can turn on the different sides of the grid. You can dim out the actual view and you can turn on and off those outlines. Despite the way it was written on RMQ, it's two files, style sheet and not so big Ruby file. Okay, now this is the cool part. So if I click on anything, every view that's below what I click gets selected and shows up over here. If it's more than one, it shows you the tree. If it's one, it shows you the rack. Which is, what sucks about a lot of visual tools is it's hard to get the code. So this pumps out the code always on the right. Now on here, there's another way to get to your views. That right there. This is a tree view and also this shows invisible views. Like those ones that have no graphics right there are invisible. So yeah, most of this was done in RMQ. It's not that big. RMQ does a lot of fancy stuff like all the animations and stuff. The grid, when I do layouts of screens, I always use a grid, not always, I mostly use a grid. Usually a designer created that with a grid and so there's a grid that exists and so I lay it out that way, why switch? What I typically do is I do a hash. Do the rows, do the columns and I just manually do it because there's no system for it. So I thought it would be cool in Ruby Motion Query to have a grid system that was a lot easier than the manual one I was creating. So this is how we set our frame. That is Excel syntax. From A1 to B4, does top left, bottom right. Just with that one little string. Yes, yes. Okay, here's an example. The green one, D1 to H4, boom. Now this grid here, I created, you create the number of rows, number of rows, number of columns. The gutters between the columns rows and the margins around all four sides. So as you can see, that does that. This right here, we're only using partial one, as you see what I'm doing. See how I don't have to do the whole thing? I just do B6 to H. There's no bottom because I want to set the height of 35. So you can mix and match or just do that. You can actually use any form of this. You could do colon six. Colon six would set the bottom to the sixth row. Frame AB, this example, fifth row right here, sets the frame. Now you can do this with the layout command too. You don't have, this isn't a style, ST, but you can do it in a layout and stuff too. Sparkles there, first constraint, that's cool. By the way, this does not use constraints. When I started doing the new rack and the grid I looked into using constraints and I looked at, I forget the gem name, whatever it is, auto layout, gem. Frankly, it's very complex and really, I only need a few features is what I really needed. And constraints, it's like everything in the SDK, it's just ridiculously complex. It's like designed for the worst case scenario and you have to do that every single time. Oops, what happened? Where are we? I don't know. Okay, yes, yes. So this is kind of a fun one. I grab a rate of views, which in this case is five views. I set it, I laid it out to C2 to C2, which is just basically that little block. And then this is another command that existed in RMQ before, which is distribute, that should be vertically, not horizontally, but whatever. Distribute vertical and it does that. Anyone figure out what that means? Thank you. Too short, didn't read. Subviews follow grid. I was working on this at six a.m. this morning and I had to hack it because I was having troubles, but this is the way it's gonna work. So normally subviews have their, they exist inside their superviews space. And in the grid, that doesn't make much sense because you always wanna follow the grid. So in this case, you'll see that that pink one is the subview of the green one and you can see that it actually B5 to I6 is not in its superview space. It's in the controller space. Make sense? App has a grid, it comes with a default one. The default one is the one you saw on the screen. You can replace that. There's no feature for orientation but it's trivial to do it. If the user changed orientation landscape, just simply swap out the grid with your landscape grid. A lot of times you have one grid per app and very simple app, but a bigger app, you don't. You have a main grid and then you have grids per screens. So you can do this. My style sheet grid equals my grid and if that exists, it'll use it. If that doesn't exist, it will use the apps. How do you create a grid? This is how you create a grid. Grid new and you give it all of these params, pretty straightforward. What's cool about this is you can change one of these, reapply all the styles, everything will adjust. I do this. I take the app grid, I dupe it and I change the settings because most settings are the same, okay? Oh yes, logging. Want to log a grid? That's what it looks like. Okay, this is an example. Pretty cool. That one is straightforward, right? Boom to boom. The second one is a little different. The second one, let's say, is a UI label with multiple lines. So depending on the data, it's gonna change its height. So we set the grid that A2 to E, no bottom. As you see, there's no number on the second one. Then we do a size to fit, which is a typical SDK, size to fit, and it's gonna size to fit that, to fit the text. The green is just another simple one. Let's say it's an image. But here, this is cool. So this right here, we do a grid A to J12. No top, right? Because we don't know the top because we wanna make it come underneath the pink. But it does fill in the rest and then we say below previous 10 points. So you can do all that with constraints. I didn't think we had a big enough projector to show what constraints looked like on the screen, so we just went with this. That's a joke, people. Come on, killing me. Okay, so if you didn't wanna use grids, below is how you could do with the rec system. Left 10, below previous 10, from right 10, from bottom 10. It's just almost as easy. Now with the cool thing that Eloa showed where code was just automatic, where you could be sitting in your style sheet, you could just set your grid A4, save, see it, change the grid, save. That's gonna be awesome. I didn't know that existed until today, so. Definitely be putting that in. Yes, constraints. Version 0.6 is in Edge now, so it's up in GitHub. So you wanna install revision query and then you're gonna have to use the actual Git gem for now until it's fully tested. I mean, it's fully tested as in far as unit testers, 440 tests or something like that. But I mean tested in production apps. What's coming in version 0.7? This, I've had a roadmap for RMQ for a while. I don't know if this is consistent with it, but if it's not, then I'm rearranging it. Then seven will be all about benchmarking RMQ super docs or what we saw there. And then once we benchmark it all, we're gonna do performance enhancement. Now, our RMQ is designed to be performant, meaning anything that we know that's not performant, method missing, that kind of stuff is not an RMQ. It will never be an RMQ. However, we don't know how formative it is really until we benchmark it and then tweak it. So we hope to get some good performance enhancement. I mean, RMQ is in a ton of production apps, so I mean it's performing. Last, I would like to thank my contributors. I don't think people do that enough. Jayman did, that's awesome. So here's all my contributors. Mark Rickard, who also works on Jayman's promotion. I don't know if he knows this, but he also works on RMQ. Anyways, that is it and open for questions.