 Mae'n buddodd, â hynny yw'n eich setrwm, ac felly dwi'n gallu enygledd y jedi cutol â'r torte. Mae hynny'n gwneud hynny mwy o ni tai yn y rhan oedd. Mae rhan o'n ddim yn dweud â'r ui ac mae'r ui wedi allu afael a i chi'n bwyllio i'r oes, ac mae'r oeson oeson o'r opeth, ddwy'n ffersgofio'n bwyll ym mwy o'r roedd. ac mae'r adegau yn ychydig ar y llai yma yn y cyfnod yma yn y cwmwysig yn y gweithio. Felly, mae'n gweithio'n gweithio'n gweithio'n gweithio'n gweithio. Felly, ydych chi'n gweithio'r sefydliadau yma? Mae'r ddiwylliant, ac mae'r ddaf yn cael y ddau'r cyfnod. Mae'r ddau'r cyfnod? Felly mae'r ddau'r cyfnod yn y ddau? A oeddwn ni'n gwybod yng Nghymru? Mae'r ddau'r ddau'r ddau'r ddau'r gwaith. Mae'r ddau'r gwaith yn gweithio'r cyfnod? Mae'n gweithio'r ddau'r gweithio'r gwaith? a chwailio y glastamri mwneud gyda'r fflusig. So, ydw i'n fwy o'r fflusig yn fwy o'n gweithio'r fflusig. Mae yna maes i gael y glastamri mwneud gyda'r fflusig? Mae oherwydd, mae'n gweithio'r fflusig. Mae'n gweithio'r fflusig, mae'n gweithio'r fflusig, mae'n gweithio'r fflusig yn fwy o'r fflusig. I'll give you some numbers. Do you work in miles or kilometres? 12 square kilometres of farmland. There's 140,000 people and that goes on over a week. There's about 65 stages and roughly 1,800 to 2,000 acts, but it goes on between 10 in the morning and 6 o'clock in the morning, that's the same day. It's in the middle of a field, or several fields, so there's no power. There's very little network coverage. We've been thinking of it in terms of hostile terrain, so this is what mobile is meant for. The consequences of that are that, I meant to say, the client orange said that they wanted users to love them because of this act, so a user experience with absolute empowerment. So we thought we should have a native look and feel and platform specific look and feel because they now want it across Apple, Android, not yet. Platform specific is very important and we should assume that there's going to be a big offline use test. So we started looking, panicking a little bit, because they weren't able to give us an awful lot of money. So we looked at the technology options and almost immediately we had to rule out the three native apps approach because it was just going to be expensive, or we thought it was going to be expensive. We looked at HTML, maybe building an HTML5 app in front of Apple or something, and then something in between. We didn't know what something else was in between was. So I knew we'd go through some of those technology choices and then see where it takes us. So, approach one. HTML5 is coming, everybody. This year is the year of the Linux desktop. Next year, HTML5 is coming. So, the promise. Well, you know what the promise is. You build it once and everything else comes for free, right? This way to all platforms. And that's good. That's great. But the trouble is the clients, your bosses, my bosses, come up with that thinking, hey, it's cheaper. You buy one and you get everything else for you. Who thinks that's right? Everybody else is, well, I suppose everybody else is here listening to me talking about this. Yeah, there are fundamental problems. The first thing was that it's almost impossible to get to mimic a native app by building any other technology. And you've got a web browser and you're building weird JavaScript layer on top and you're pushing a dom around. Of course, that's not going to be as responsive. It might look as good as native. This is a fundamental problem. Different platforms have different navigation methods, different widget sets. So, you're going to have to build a different UI for a different platform, three different platforms you do. And they're never going to be great. So why is that? Oh, here's another problem. Webkit. Webkit everywhere, right? On Android, on iOS, everywhere. Trouble is, well, the trouble is Webkit has a funny release model. It doesn't have a release cycle. So an OEM comes and says, well, let's just take the tip of the trunk and then we fix the bugs and then we ship. And that sometimes works. Very rare. So you get all these different OEMs, all these different platforms have different versions of Webkit. It means different browser bugs. So every browser has a set of bugs and you've got the multiple browsers so you have just a multitude of browser bugs. And of course, in some platforms, there's an upgrade path, which is very, very fast in others. What we were hearing earlier on about everywhere is 2.1, 2.2, 1.6, 3.0, no. And this is an easy upgrade. Some more quickly than others. So this quote, note of implementation, is likely said from a guy who watches these things for a bit of a cough. He said a quote to me. So lots of work. The developers, yeah, I've been, I've been bled. I've bled and I've sweat and trying to fix these things and trying to get absolutely everything right. And the CPU has spent all its time rendering something fake. So Joe Hewitt, guy who wrote Fiverr, he wrote Scrawlability.js. I mean, just to get it, the scrolling exactly is the I-Virus intended. David Cameron from Jake and Touch in Gladlycension, he spent three weeks trying to reinvent scrolling in an HTML file, and that's where you get the texture. And FG.com, they recommended it anyway. So, any of these browser bugs, you're going to be building the same, different UIs anyway. And your developers, you spend more time fixing bugs in less time making the app. So you get it at the time. The client's not very happy. So this is how we look at it. Plans come to you with HTML5, and then what HTML5 is cheap. And they love writing the checks, but they hate equality. They get it, and they try and jab it, swipe, scroll it, whatever, and it's just not good enough. So they hate equality. So there must be something else right. I remember that square from earlier on. So HTML, let's just say the HTML UI just isn't there yet. Maybe in a couple years' time, maybe next year. Or it is next year, right? A native's too expensive. So this is the quadrant here. What's going on there? That's a native UI and web logic. So this is how normal apps are built. Well, architected. So you have a presentation there and an application there. And it says standard entity application there. And for a sane developer writing a web app that goes into running app, you might have these kind of technologies at different places. I quite like that part. But what we're looking at is something else, which is, say, the UI of any native thing. And let's say, let's write a new JavaScript. That sounds familiar, right? So who's going to contain me? Who's used it? Okay. Do you like it? No. No. Do you guess? No. No. Okay. The pitch. You write your UI in code and then you have a runtime which translates it into native. Incredibly interesting and clever. Really, really fantastic technology. But there's a button. So this is the way it does it. You say new, new button and then the runtime instantiates a button for you. And then you say set text and JavaScript and that gets translated into a native code to that button. Then you say set text color and set background color. And then maybe set kernel or set linem or whatever. And so there's lots and lots of messages going from JavaScript up to native. And then on the way back, you have onTouchDown and onTouchUp and then onTouchUp. Because this onTouchUp and onTouchDown both need to make onTouchUp. But there might also be onSwipe or onScroll or whatever. And most of the time you're only interested in what the JavaScript is only interested in one particular event which might be onTouchUp or onTouchUp. So this ends up with lots and lots and lots and lots and lots of traffic between JavaScript and the native. And what you found, find is that the responsiveness of the training map is just not quite there. Almost there, but really clever, but not quite. And where you have a real problem is this beautiful, I get the IAPS UI 10 of you controllers and they're very difficult to get by because you're constantly hitting this JavaScript native bridge. And it's getting really difficult to keep your responsiveness. And you're at a big risk in many cases. So this is fundamental. In addition, no UI tooling. So no UI tooling is over a well if you're used to doing something like this, right? So it seems very natural. But Android and iOS provide some very good tooling for this layout editors and all the amazing things that Tor Norby and his team does to Google to build the AT. And then on the iOS side, Facebook has some names of people unfortunately I can't credit them at Apple doing things like Interface Builder which has its fans and has its detractors. And also no runtime tools. So that's all the resource selection stuff. So having got an LDPI, ACPI, or a live stream or whatever. And this is a similar story on the iOS which is things like is it a retina display? Is it an ordinary display? So you have to duplicate all that. You have to build that all the stuff in sustain. Or it's quite difficult to use. No UI tooling. Problems don't stop there. The porting by the framework. This is a lesser problem. The porting... The framework makes its own choice about where it sticks everything. So you build to a league platform and you make your iOS and Apple a lovely and then you end up putting it up to an Android and it doesn't look sicker. So you end up having to build the second UI and the third UI all by itself. And also you end up... If you're doing anything which is not supported by the API then you end up building native plugins which is great. You can use plugins that's great. So that's not the only thing that's doing this sort of thing. We've got a couple of examples of game libraries that are usually openGL. And they're essentially putting HTML5 canvas egg guides to attract web developers to come and write openGL code. So this is incredible because web developers don't need to know anything about openGL because they get the benefits, the performance benefits. And they see it for the 5X speed improvement. And here's some examples. There's Game Closure which is... They're in closed Apple and they're... They're not advertising the fact that that's what they're doing, the reading between the lines, looking at their job postings, that's what they're doing. And Impact for Hours which is a... It's a single platform thing. So it's not good for the problem that we were trying to solve and it's very experimental and was therefore one release of Impact for Hours. And then Atmobi Direct Canvas which is very, very recent. So unfortunately it wasn't going to help us with the investment project but this is what is openGL backing Canvas API. So unfortunately because it's Canvas API we're not getting any of the UI so the buttons or the tabs or whatever that we were actually wanting to build, the native UI. So this is very much like how the web did things. It was wanting platform specific buttons and there was a trend in about 1996 of trying to make the buttons that was exactly the same as whatever platform it was running on. And by about 1997 everybody agreed it was... We'll just make up our own and make it flow. Everybody accepted it. So we're not going to do that for our purposes. And this next criticism is linked to what we were talking about for titanium and this is a fundamental problem with titanium and this other approach. The UI, because of that traffic between the JavaScript and the native is so much it's actually the performance is bound by that traffic and the speed of that traffic. So the standard way of approaching this is to bundle your own JavaScript in it. So that's all very well but unfortunately it adds about 5 to 8 megabytes to your app down. So that's hello world for 5 megabytes. OK. Now, who has got Android apps in the market? Who has got Android apps? About half a megabyte. About 300K. OK. I bet you have a proportion of comments and we reckon it's about 10% of commenters and we're asking for you to move this to the SD characters and you can have 5 stars then. So this wasn't acceptable. Kitchen sink for titanium is 12 megabytes. So today I want to introduce you to a new platform that we've developed. We've reinvented the wheel. Not a good thing but for the last 20 minutes or so I hope I've shown you why we've had to reinvent the wheel. Here it's Japanese for giraffe but that's incidentally we like the word. So our requirements was that we wanted to make it as cheap as web, right? No. OK. We were going to maximise the code we used but more importantly we wanted really good, fast, native and platform-appropriate device. We believe that happy workers are productive workers. So we wanted to have developers who are not fixing any of the problems and designers who are not having to compromise their design and everybody can use the tooling which is appropriate for the platform. We didn't set a particularly hard limit but we didn't want to be having 5 megabytes for a hello walk. So you remember this architecture? Here it is. It has a presentation written in native for your UI in native and the application logic is a JavaScript and that's the bit we've shared and then a platform service there which is written in native but that's provided by here. Now, consequences are bad. The platform, every platform has its own new UI which is built in native so nobody is going to be complaining about having back buttons at the top of your screen or tabs at the bottom or anything like that and Android gets its first-class user experience as well as iOS because everybody built the iOS on first-rate. It annoys the hell out of me too. Everybody gets better tooling and the designers don't have to worry that I don't know, the censures, scroll, tab doesn't work or we know we can make it work because the documentation is great. OK, so this diagram here we work at the activity level and we have this bridge called the forum function interface and it's much more layered so the data is passed up and rendered appropriately and then you get the application-specific events that the application is interested in so it means much more, much fewer calls between native and JavaScript which this is a deliberately trivial example for illustration purposes but if you imagine a set list, a data method and then in the list you just paste that data and it renders that and you don't have all the back and forth going on so no jerky lists, easy to learn and clear write and it's responsive and not so much memory holds. A consequence of this is we don't have to make it really fast because we ship JavaScript well, we just use the JavaScript that's in the webview we have an invisible webview we put up a JavaScript in there and we communicate with the native stuff which means that it's tiny, right? We almost don't have to worry any more about reducing the header world and I think it's about 80K but we end up with really good performance and we wanted to we knew that we would after about five minutes of thinking about this we realised that this was something that we couldn't we could use again and again we didn't have to use it just for the last three bucks we couldn't build everything all at once so we wanted to make it easy to grow and we did that two ways, we made it modular and we made the foreign function interface really easy and it's just a series of proxies that you don't need to worry about so don't worry guys there's only two pages of code this is one of them now you don't have to read any of this the only things that you're going to be interested in are the yellow text here so in the Java you call the screen proxy on button click and this ends up in JavaScript and in the IOS, the screen controller you call on button click and guess what, it ends up in JavaScript at the same place isn't that awesome? next slide next slide is just a reverse so JavaScript calls after native JavaScript doesn't know what it's calling but whatever platform you are on just responds in the right way so set text in size and who's done an IOS to the moment who does an IOS to the moment cool so IOS has this this named arguments thing and so you have to name the methods in a similar way and the named arguments are separate community codes and so this is why we get this funny underscore calling named convention and then we want to we're inspired a lot by Node.js so anybody come across Node.js? yeah ok, so that's super cool that's all the cool names right now but it has two things which we like first one was commonjs modules which is standard now for server state JavaScript and so that just makes writing modules and classes in separate files and allows great code organization and it comes built in and that's what we felt we should do for Kerri you can do modularity lots of ways but we'll just pick one and then a synchronous events that they call it evented which is for a semester how would you ever Kerri ok, do you want to see a demo? this is where I might put the microphone down let's start with the IOS first this is a simulator for the rest of the display and we have a very trivial here and I'm just going to click here and how big is whatever we have the word we're not going to say that but we can click and this is doing roundtrip and logic is already in JavaScript and the UI is made and we just blah blah blah blah blah blah and then we do round up to BS and then we show a list and this is all proof of concept which I needed to build this before we could actually proceed and validate that and this is just a very simple list and you can see the performance is good and you click and all the data is coming from JavaScript and all the logic of the dial of what is coming from JavaScript so because we are friends and this is an Android conference we thought we would do a bit more a bit more of an effort with the Android version so and this is a nature's button nature is completely different UI it's Android and we get a bit more we get bigger and bigger and bigger because the text is bigger and bigger and we get a list and we get a test here fantastic so James you've just shown us two days back how do I believe you can be doing all this stuff that you've been explaining so I need to show you that this is actually working as I've been explaining so we've got all the words going from smallest to biggest I want to work at the end of biggest what's that going to be just to prove to you that I'm not going to be making things up or this isn't a stupid demo gigantic gigantic good word put this down so I can type and I will obviously ask because that's the way we did it we didn't see anything of that you could have modified it to native but he's sharp okay he didn't leave me can you clarify for me this is dancing nothing wrong with this view this is completely ordinary job that was a very smooth demo very carefully scripted spoiled by the very clever man in front okay so this is going to be what do you think this is going to be the next one if this works I want a big cheer from everyone you feel the tension so that was a trivial demo I've got to check sorry come to it so that was a trivial hello world do you want to see what we've got with the glass debris do you want to see what we've got with the glass debris okay so this is glass debris this is essentially the dashboard that Andrew used and this is the one of the more impressive clips let's show the IOS at the same time okay now I have a confession to make the guys who built the IOS tried to use Kirin but hated JavaScript so this is what they built this is all Kirin this is the same code but we didn't ship that code but check it out both in IOS this is the end version I can show you on a device it looks gorgeous okay so we see this works here and this is the magic and we have this one uses two bars because that's the way Apple likes to do it and this is an old version of that and you see you know and if you click on these things you might be able to see I mean a lot there's a lot of time specifically in glass debris needs to have the clock separate okay so you like that okay so let's get back to the presentation so we shipped three times IOS which was the native only we built most of the most related Kirin but then we made it all native the developers wanted to build it in native but the Qt and Android were with Kirin IOS worked with Kirin so we have IOS Kirin and we have Android Kirin and we have Qt Kirin these photos in the background show you some of 140,000 people there and this is what happens on a nice year most years it just rains it's very muddy we had 100,000 downloads 110,000 downloads Orange changed to us and said we are targeting 40,000 downloads so we were very pleased with 100,000 we were featured in each of the app stores but I tuned app store Android marketplace this is choice stuff and we had some really nice reviews we saw people saying I don't want to uninstall my best react we found it really useful and the client was really really pleased and we won two awards for this so Steve died and I wanted to tribute so this is my one more thing and here it is we had it sourced we put it under HGV2 and it's it's still we've only built one app and had it out in the market we built two other cute versions and the Android is much more mature than everything else so we still consider it not finished it's stable but not finished so we're looking for people to come and give it a kick in the tyres and see what it looks like see whether they like it see what you need to do maybe construe and do some things that are coming up cute is already done but we just need to get it out so that's me my boss said I can only come here if everybody here followed this Twitter account so if I'm going to tell my boss that you're all following this some keys don't make me a lot okay that's playing the good hobbies so thank you very much