 All right, my name is Paul Colton. I'm the founder CEO of Pix8. I just wanted to touch briefly, I wasn't here yesterday, that I'm actually not a Ruby guy's shocker, but you'll see why that's not as relevant for my talk. But I know a good thing when I see it. So that's why it's, in terms of sponsorship, it was important to me. And also just supporting the product as early on as we could. And again, you'll see more specifically why if you don't already know what we do. But I just wanted to point that out, as a developer, we kind of know good tools when we see them. So Ruby Motion was pretty awesome since the moment I saw it. All right, so quick agenda, what I want to cover. I have a video at the end because we have no connectivity. And I want to make sure to show it because it's kind of a sneak peek at what we're doing. And we have not shown it publicly at all to anyone yet. So I thought, why not? Let's do this group. So that's five minute video. So I'm gonna make sure to save my last five minutes for this, for that video. So real quick, I want to just give you a super brief history. I want to talk mainly about our core product called Freestyle. And then demo that product, both in Xcode and not in Xcode. And then that video I talked about. All right, quick history of the company. We were found in 2012, a white combinator company. If you guys know, it's a local, now more than local kind of incubator thing. Really did that for fun to see what it was all about. And it was pretty cool. It was okay. We got venture funded a year after that, which is almost a year ago. So to spend as much money as we can and survive during that spending. All right, so I want to jump right in. So the product used to be called Pixate Framework. And we gave it a better name since we want to reuse the Pixate name for the new thing. Freestyle is just a neat name because we made it not only free, we've also open sourced it. But most importantly, it's about styling in a very general sense of the word. And before everyone gets too scared, I want to, I have to reiterate so many times, and I'll probably will a few times with you guys, there are no web views in this demo. The thing that's really, really important is, we use CSS as our DSL, as our declarative markup for doing what we do. Yes, it's the same CSS as the web. That's what makes it cool. What it's not is the web. And that's the thing that's just, again, really important. I don't know how many demos we've given. And at the end, that's great. So where are the web views? Like, no, there's no web views. It's all 100% native. But what is freestyle, basically? It's kind of two core pieces. We've written entire W3C-compliant CSS parsing engine and all of that. Selectors, all those get really nasty if you've done any CSS, but I'll show you that. And we support all of that on iOS and Android, which is really cool to see the review motion announcement about Android. So if they get busy on that. The other thing is a graphics engine. So we implemented our own kind of, let's call it a lightweight SVG vector graphics engine for doing rendering of vector-based assets instead of bitmaps. Live interfaces, the ability to change the UI after the program has been compiled. And then of course, as I mentioned, it's open source. So real quick, because I just wanna show you more than show you slides, but to quickly kind of touch on the three main parts. So again, I mentioned W3C-compliant. That just means we've run all the tests we could, the W3C tests of CSS, the spec, and we pass all of them that are relevant to us. That's the other thing. We're not web, so not all things are 100% relevant to what we do, but everything that is relevant, we support. It's all native APIs, so in a sense, think of it as it's CSS that maps essentially directly to the native APIs underneath for doing all the things we do, styling views, buttons, labels, all that stuff. We leverage core graphics and core animation on iOS and the equivalent on Android. You can tell I'm more on the iOS side. And that just means that everything you're doing in the markup gets translated directly to how you would do it natively. So in a way, we really are saving you that step. And real quick, I didn't mention, this all started from as I deep dove into trying to build mobile apps. What I found is I was spending 80% of my time in the design and the UI of the app. I'm not a designer, and that's a lot of time spent and iterating on the UI when I realized at the end, I was like, I'm not spending the time where I wanted to spend it. It was what my app did, not necessarily what it looked like. We all know what it looks like, what it looks like is very important. That was how the whole product got started. How can we kind of track that out a bit, make it faster, iterate, way easier to use, script against it. We can use SAS, for example, because we're CSS. You cannot use CSS tooling in front of it, all that good stuff. The graphics engine, it was very important that if you look at most apps, probably most of the apps you guys are doing building and using, it's predominantly bitmap based, PNGs and all that, and that's really wasteful. If you really scrutinize most of those, they're generally gradients and voters and this and this and that. Almost everything could be programmatically defined, except for a photograph, which obviously needs to be a bitmap. So we wanted to make sure that was built in, and I'll show you how that comes into play. I mentioned SVG support, and we do do some compositing built in. We didn't do everything yet. Our goal is to mirror most of what Photoshop can do, but for now the idea is more of if you have a gradient and a border and they're rounded, all those things get composited in real time and then cached, so it's only rendered once and then used throughout the lifecycle of your app. And then I mentioned vector drawing. There's whole API there besides the ability to load and render SVGs at any resolution. By the way, that also was cool because one asset for retina, non-retina, iPad, iPhone, all that, frankly, you can have the same resource for your website for Android and iOS. That's very interesting. I'll even show you one of our apps. We're literally using the same assets on Android, iOS, and our website, the same SVG files. And finally, live interface, I'm going fast, so I covered all. Live interfaces, I kind of mentioned that, but the idea is, and I'll show you there's a way, generally your CSS would be bundled in with your project deployed and done, but there is a way to say, hey, I want to turn on live mode and then let me edit that CSS and basically the app is just watching that file and as you change the CSS, the UI updates dynamically. What's nice is you could do that over the network. The product, if you were built in, doesn't do that because it's so easy for you to do that. We provide the mechanism and doing it over the network is easy. That, this whole live thing, of course, opens up some obvious things, but personalization, A-B testing, all really neat stuff. The ability to change what your app looks like. You could hide views. We do basic positioning and layout, but not a whole layout engine. I know there's actual other interesting products. We've looked at it auto layout, as you know, as a real pain, so we just stayed away from it because we were focused on styling layout as next, but before that is the new thing we're working on. So for us, layout is third, but other people are working on it already. All right, so for you guys, if you will, getting started is really easy. I had help in building the, basically the gem for integrating, which is very easy, and it's very small, which is nice because the native code can integrate so seamlessly to Ruby Motion. There's very little effort, but there's a Motion PixA freestyle gem. You just put it in your rake file, and I'll show you an actual file, but put it like that, and basically we're down to one line for telling the gem where is the framework, and the framework you literally just download the native one and then you just do a symbolic link or copy it to your vendor directory. Again, I'm saying it's easy because I've also done it for other products like Xamarin and stuff, and that's a lot more work if they provide all these bindings. This is so straightforward in that there's no specific build required. You can literally download our latest version of freestyle, drop it in and use it immediately in Ruby Motion, and that's like super, super awesome. All right, so let me just jump straight into just showing you guys some of this stuff that it looks like. Okay, so yeah, so you can see here's just a very, very simple, again, I'm not a Ruby guy, so you will not be seeing me type a lot of this stuff, but more importantly, you can see, obviously I just required the gem right there. This is also on GitHub in terms of the gem is, the samples are, freestyle is, the Android version, the iOS version, that's all up there. And then down here I just do the framework and that's it. The first show is a very simple app that starts by not doing much at all. Now it's blank for some reason. Oh, error connecting to server. Is that required for me to run this? Restarting? Yeah, I just ran it before I give the time. Yeah, I did, I quit the simulator. And then restarting, sorry guys. Okay, and then run it again. Oh, it got small. My bad, yeah I got it, sorry about that. Small screen. All right, I told you it was a very simple app. Okay, so I'll go, so I have some hidden code down here, basically just to show you guys. So very simple, the idea is you initialize, fixate, and what that does is kind of bootstrap the system. We hook into all the views. So that's one thing by the way, we cover, I don't know what the percent is, it's high 90s. We pretty much cover all the iOS views, nearly all of them. And we expose pretty much, you can access nearly every aspect of every view. So it's two years of work, many tens of thousands of lines of code that we've opened. So it's been a tremendous effort getting this product to the stage it's at. So our works is basically, well super quick, for anyone that doesn't know about CSS, and maybe some quick background if you will, or concepts, the simplest way in the way we'll treat it today is think about this, is in CSS like on the web, you can give something, you can access something by its element name. An easy way to think about that is like a div, or in this world maybe a button. So you say I want to style button, that means any button anywhere I ever see, I'll style it. Note, I recommend you do not style view, because everything is a view, so people get themselves in trouble. View, background color blue, everything turns blue. Well, because everything's a view. Anyway, so you can style by element. The other way you can do is you can style by class. Think of classes like a grouping of things. So you can say I want to call all my, I want to give all my buttons a class of my buttons. Now you can style all of those buttons via a single block of CSS. And then finally there's IDs. Think of IDs as a single instance of a thing. So you could have my button one, my button two, my button three, you would have all buttons or a class, and then button represents any button anywhere. That's the idea. So how freestyle works fundamentally is you literally assign IDs and classes directly to your views. And you don't have to, you can go by element name. I always recommend the ID and class. You just have a lot more control over what's being styled and what isn't. So many of our bugs are people style things like text label, or label, and then say hey, my button breaks and this breaks, because they don't realize that a lot of these more complex controls are built, of course, with these other controls. So when you're going under there, because we inject ourselves really deep in how it works, and Android. So you're better off styling what you know you're looking at, not telling the system anything of this type. So with that said, what I'll do here is I will, actually I'll start with the button. So notice what I'll do is I'll put, so we created a button here, just like you guys normally would, and then I'm gonna give that button a style ID, and simply with dot style ID. Instead of, why didn't we use ID and class? Kind of obvious, those are overloaded already, so we stuck the word style in front. So that's it, so now, if you guys know shortcuts, you can let me know. So now notice the font's bigger, well why is that? Is because if you look at our CSS, I left right here my button, notice I'm accessing a by ID, I said size 40, so I'll just go a little quicker here now. So for example, I could say, background, color red, right? So now I'll just run again, so there it is there. Now, in a second I'll switch to how we do this live, you can see why I'm going back and forth, but the idea is say like, actually it's a supporter radius, which I get my CSS. Yeah, so now you see, now you can see I'm not the designer, but you get the idea. So now the idea is, so what's interesting is by the way, when you specify color for example, we just set the color. When you specify rounded corners, well obviously color alone can address that, so what happens automatically is, it's now no longer using color, it's now generating a bitmap on the fly, rounding those corners, doing that compositing and now setting that as the button's background, but all of that is again transparent to you and it's only done once. The other thing you can do is stuff like background image, let's say we can do linear gradient, and what all things you can do, well primarily it's all in the CSS spec, but this gives you a quick idea. So now we have, well not pretty, but we've got linear gradient, okay and I'll do one more. So now let's make it a little bit prettier, how about we go from gray, say we want the text to be white, say we want the border color to be yellow. We have a designer, he would literally kill me. Yeah, in border style. And there's shortcuts for these, I just, I like to be explicit, right. All right, so there you go. You get the gist, but what's really neat is again is you've got a resolution independent graphic being rendered. The only amount of bytes you know required in your app is this text. This text can be dynamic. You can actually specify the CSS in code. You can actually, there's a style CSS property that you can hand inline code. Some people actually generate that on the fly and pass it through and that sort of stuff. And then just to finish this app out, you can see I did here, you can put an ID on the background itself for example, and then I've got a little bit of markup for that. Same idea. I think I covered everything here. I see now the background's got that, the button, all that good stuff. And then the final thing I'll just show you is, is the live stuff. So there's just this little mode here. So there's a convenience function we put, not function, but just if you want to see, so it automatically loads. What I didn't mention is, you set your rake file, you do the stuff in your app delegate, and then you add just a default.css file in your resources folder. You can have any file name you want, as many of you want. You can import each other, but if there's one called default, it loads that by default. You don't have to do anything. But if you want to see where is that file located? Obviously in the simulator, it's some crazy place. So you can do this basically. You can just say, I'm just gonna print out the path of that CSS file. And then I'm gonna tell Pix8 freestyle to please monitor changes in that file. So now when I run, okay, so now it's running. So hopefully, so here now you see I printed that out. So I just started using BB edit. We'll see how it is. Okay, so there's not a lot of screen real estate but you could adjust. So there's that, and hopefully if all this works, we'll just do, of course that didn't work. Okay, let me do this. Get old school. All right, well, for some reason, I must have missed something. I'm not sure why that's not doing it. Okay, well, anyway, I must have forgot something. But the idea is, you can turn that on and actually the app will update dynamically as you. Yeah, I might not have. You know, I'm gonna move on. I think you get the idea. What I want to show you, I'm in Xcode, but I'm not gonna write any Objective C. What I'm gonna show you is that how interesting it is in terms of a lot of the demos that I've done here just to show off the product is all I did use Xcode for is the UI. Just dragged all these things out here, for example, built a calculator. I didn't even implement the logic. That wasn't the point. So I dragged all these guys out and then, of course, just some CSS, right? So if I were to run this app as is, you get what you'd expect, right? A kind of ugly calculator. But what's really neat is now you can see I've set IDs on the app itself. I send a font family. Screen is the background. Here you can see the element thing where I'm saying all buttons I want to be this way. And then I added some classes to some buttons. So I said, if it's a button but has the class of orange on it, do this. If it has dark gray, so on and so forth. So now I'll just by uncommenting that. So now you see it looks like the iOS calculator. And what's really cool is iOS 7's now been out for a year. But what was neat is when you didn't have the CSS, it looked like an iOS 6 old school calculator with all ugly buttons. You applied the CSS on iOS 6 and it looked like an iOS 7 app. And that's the other thing is it's also a way to kind of normalize your app across OS versions and that kind of thing. But obviously, if you wanted to change a look of these buttons, any of that, it's clear now how straightforward that might be. The other thing, here's another cool one. Let me show you this one. Sorry, I'm not used to this small real estate here. So here's an example of, I'll just run it. So what this is, is basically doing a few cool things. Number one, it's loading an SVG file as the image in the background. The other thing we've added is, let's call it basic support for key frames. So CSS3 has a constant key frame animation. So really what we're doing is we're exposing core animation to you completely declaratively here through using standard CSS3 key frame tag. So you can see what you do is you just name, you say on the vector view, which is just the view that holds that thing, I wanna use an animation called rotate, which I've defined down here for two seconds. Fill mode and timing is how it eases and does the things it does. You can see I said I wanna go from zero, zero, two, one, scale and a six point two time rotation and then I also stuck one in the middle. And what's needed is I can increase that rotation, for example, let's make it bigger. And then you should spin a lot faster. And that cool and you got again, very little effort, obviously. And then the other thing I've got a nicer another, you know, I'm just gonna swap SVGs, put a little toucan in there and there you go. But again, what's really cool is this, again, if this were on an iPad or any whatever non-written devices, that vector renders to the absolute best resolution of the device it's running on. And you don't have to make that determination ahead of time. The other demo I would like to show is this one. Always, as you can see, I'd like to comment out the styling. So the spoilers, we've got some animation and all kind of cool stuff in here. But if you look at this, same idea is I literally just drug out a table view and I'm done. Like I always think of like I'm the developer, this is the best I can do. I'll go write the code and fill that with data, but I'm done. Hey, designer. And by the way, this is exactly how I went down for me. I started designer Justin. I said, please just design me something real quick so I can demo it. So then he gave me the CSS. So if I run this table view, guys use Ruby motion, not Xcode. All right, so that's what it looks like when I'm done with it, right? But now this is what can happen when he's done with it. You can see what's really cool is, and this is an extreme example of zero. There's zero design effort put in at the coding level. The designer, which could be you, comes in and now says, okay, table view, I'm gonna quickly build it up. So table view and the header footer view. Let me do that. So now you can see I've got a section. There it is, I think it's scrolling. And now the things are bigger, blah, blah, blah. Now I say, okay, for the header footer view, the text labels in there and the cells themselves, I'd like to put a font. I see I put, you can actually specify text. Notice there's people to follow and all that kind of stuff. Here's some of the more fancy selector stuff I mentioned. Check it out, you can say selected state. That's in there. These are really cool, nth child. So you can do things like odd and even, every third, all that stuff's built in. So that was not funded to do. But so now notice, now you've got this kind of alternating row stuff, you know, all that. And then I put class names on some of this info, on those cells, the cell button, all that stuff. So now when I run it, so now I've got my head all over the place. And by the way, that little button here is a vector button. But again, you notice I'm not, obviously, I'm not writing any code. I'm not changing any code. I'm just building up the CSS for you guys. And then you're seeing, you know, you're seeing this stuff change. And I think that's probably the most compelling aspect of this. And then to finalize here, I just put a completely irrational little kind of bobblehead thing, you know. But again, I don't have to even know how that's done. You know, like, how would you do that in code? Like, who cares? You know, I know how to do it in CSS now. And then finally, to close this demo is, I always like to show, that's what I say, try the second. So I completely change the look of this table just by changing the CSS. This one uses actually some images here and there. I think it still does the bobblehead though. So there you go. So I'll zoom in to that show. You can see like the frayed paper and the little line or in the textured thing, those are images. And the point is right, we're not saying only vector, that is it's completely up to you, but all definable in markup. All right, let me see what you must have. The last one I'll do real quick because I wanna show you this super slick video of ours, is there's an app which is all, I mean everything's open, I keep saying that. But this app, we built originally for our testing of the system, it's called Playground. It's actually on the app store as well. But what's really neat about it is everything in this app, including the app itself, is 100% style with freestyle. And what this is, it's a showcase of nearly all controls and how you can style them and how you can rotate them and you can change this text dynamically. And let's say to make that 45. See when you stop typing, it changes the thing there, right? And that's the idea, is it just lets you experiment and play and you can see the scope in which we, like even the marker and then you can switch the entire apps look and feel now. So like even that has changed and all that good stuff. So again, all this is open and available. All right, so where, let me just continue here. All right, so our one more thing is, our next step was where do we go from here? We really thought it was layout and it still is layout. But what we found, everyone we talked to, this is from big companies like Twitter all the way on down is mobile interaction or interaction prototyping and all that stuff is really hard. As you guys know, first of all, implementing it is hard. But you wanna get a sense of what it is before you spend two weeks implementing a very complex interaction. So that's what we focused on next. So we actually have, I don't have time to explain it all, I can explain some later, but it's basically declarative also underneath the guts. It's a whole XML markup. We've written our own scripting language. It's like JavaScript, but smaller. And it drives this kind of dynamics. You'll see real time kind of interaction engine. What's neat is that's driven by XML underneath, but then we have all of that's gonna be driven through APIs and a web UI that we've built or building. So without going further, what I wanna do is show you this video. It's not me talking, it's my product guy. I'm doing some of the work, you'll see. But what's cool is, so I haven't shown this to anybody yet, but I'll just start by saying it's a web UI that talks to our backend, which essentially generates the XML required by the native app, which you'll see in a minute. I'm excited for what does that mean for CodeGen? How do we embed this stuff in applications? You can see now with styling, layout, and user interaction, there's not much left to code other than the pure logic of your app. And that's really our goal. So let me start this video. Hey, this is Andrew with Pix8, and I'm here with our CEO, Paul. And we're gonna show you a quick tour of Pix8, which is an interaction design tool for prototyping complex mobile interactions and animations. What makes Pix8 unique is that it lets you create 100% native prototypes that run on device, but that any code or extra effort. So today we're gonna recreate an interactive animation using our web-based editor, and Paul's gonna be using our app, which is running on his phone. So we're gonna reiterate that that's a native app, there's no web views at all. I'm going to recreate a cool interaction from an app called Jelly. So if you're not familiar with Jelly, this is what it actually looks like. And there's sort of a card dragging interaction where you drag questions that you don't wanna answer down, and that's what we're gonna recreate. So to get started, I'm first gonna create a screen in our web-based editor, while Paul plays with our player app. So let's just call this Jelly, and I'll jump in, and the first thing I'm gonna do is just create a background layer. I've already chopped out some assets from Screenshots at Zic of Jelly, so we'll be using those. So let me jump over to the Assets tab, and I'll just drag over this background PNG. I'll publish that just so you can see that that will update on the phone. So there we go. So the first thing we'll wanna do is create the actual question layer that will sit on top. And I don't remember how big that is, so let me check the asset. So it's 304 by 357, so I'm just gonna resize that layer quickly, and then center it up. And then we'll grab this asset I've taken of just one of the questions I had, and we'll wanna make this layer, we wanna take the fill out of this layer so the rounded corners actually work, and I'll publish that, and you'll see the player updates. So now the whole point is to prototype an interaction. So the first thing I'm gonna do is add an interaction and a gesture to this layer. So we support drag and tap right now, so I'm just gonna drag the drag interaction over to this layer, and you'll see we created an animation to move the layer. Now there's two types of animations in PixA, there's interactive animations which continuously animate as you use an interactive gesture, and there's timed animations which are timed and fire with the duration. So we've automatically created a free drag animation here which I'm going to publish, and now we'll see in the player app Paul's gonna be able to drag this layer all over the screen. And that's not quite what we want, this in Jelly only moves vertically, so I'm gonna switch this to a vertical drag and publish again. And now as Paul drags his finger all over the place, the layer's constrained to a vertical axis. Now the Jelly app has the question card rotate downwards as you drag it, so I'm gonna add an animation for that. So I'll add the rotate animation, and again we want this to be interactive because it's happening as we drag, so I will base this off of the Y position of the layer as it moves. And we want it to rotate between its starting position, which is 89, and somewhere off screen, which is let's just say 800, and let's have it rotate to 30 degrees. So we'll publish that, so now as Paul moves the layer downward, you'll see it rotate downward. Now if you let's go, it's not going to snap back to its starting position, which we want. So let's first do that with move. So I will add another move animation to this layer, but this time I want it to be timed. And I want it to be based on a discrete event like drag end. So when Paul lets go, it should move back to where it started. So let's do that first. So I want it to move back to a Y value of 89, and let's just give it a fairly short duration and publish that. And so now regardless of where the layer is, when he lets go, we'll jump back to its starting position. Now it's not rotating back, we'll have to do that. But before we do, it's not a condition to this move animation, so it only moves back to start if it's near the top. So we'll reference this layer, we'll say question.Y, if that position is less than say 300, let's move back to start. Otherwise, let's have it move off screen. So we'll have it move again to that sort of 800 pixel mark. And I'll publish that. So now if Paul lets go sort of near the top, it's gonna snap back to its starting position. If he drags downward quite far, it'll jump off the screen. So we want to do something very similar with rotate. So it continues to rotate if we move off screen, it rotates back to the starting position if it's close to the top. So again, we'll base this off drag end, and we'll use the same condition we just used. So question.Y is less than 300. We want it to rotate back to zero degrees, which is where it started. Otherwise, let's have it rotate to that 30 degree final rotation angle. And I will publish that. And so now you'll see sort of a natural behavior is the layer let go near the top, it rotates back. If it's like, drag it far down, it rotates off. So that's a pretty simple peak. All right, so I'll stop there. That's the quick preview. But what's cool is again, that's all native on the right again. Note, I mean, that's all UI views. And this works 100% now on both Android and iOS. Again, all driven declaratively through this web interface. And like I said, all it's doing is it's a front end to that. But again, you can see about that entire app I mentioned, all the icons, you saw everything is all being styled by freestyle. Those are all vector. You saw the little phones at the beginning of the, in the web UI, these guys. And then what you see right there, those are literally the same assets as I mentioned in the beginning. And anyway, so that's the video. And then just to end, basically, we're on our homepage right now, you can sign up to get on that beta. And if you guys really want on it, don't kill my email, but feel free to email me directly. It's a cue, but I'd be happy to get you guys on it first since you saw it first. But in terms of getting freestyle, I mentioned it's on GitHub. We do have packaged installers that just make it easy to one click install and put it on your system without having to clone the repo. That's for freestyle, freestyle.org to get to the beta of this new stuff we're doing, just go to pixie.com. And if you have any other questions or anything, just email me directly. All right, thank you.