Qt DevDays 2010 – Hybrid Development: Bridging the Gap Between Web and Native – No'am Rosenthal

good morning and I see Simon is there you made a good job by selling this presentation and whoever was there and so I’m going to speak today about what you see in the slide I don’t like reading my slide so much but I’m going to talk about hybrid applications meaning applications that is cute and WebKit I’ll explain why we need it and what it’s used for what it’s not is used for and how to use it and now before a before I start the actual presentation I wanted to know a little bit about 20 with here how many of you guys developed mainly for desktop okay how many of you develop a mainly or also for mobile and same question it’s a cartographer embedded in Austria limited okay so we have a mainly desktop crowd the reason why I’m asking that this is a technology that can be used for all three types of development and I’ve been using it mainly for embedded at TVs and such but since the crowd here is focused more on desktop I’ll explain the technology more in desktop contacts so my name is Anne no I’m rosenthal and i work at in the San Francisco Redwood City office of cute I’m software architect which means half the time I do actual real or coding and half the time I pretend to know what I’m talking about to other people which is what i’m doing here and i’ve been working with the kitty and with cute and many of its customers for the last three years and in the last year I’ve been also contribute to the WebKit project mainly around there making it our accelerated and in the CSS round now let’s let’s start with a with a real question what’s the point of web applications native applications could do so much what’s the point of of web applications anyway right so some people talk about the standards and those kind of things for me what what’s important about the web application is the portability and the zero deployment of it so if you talk about mobile for example then WebKit is on all the mobile platforms today all the mobile smartphone platforms in Android iPhone and on us and rim plenty of others so the web the web platform is there no matter what the platform is same with desktop even if you’re on Linux even if you’re and Mac the web is there a different font of shapes but the main ideas are so the portability that the web creates give something that may be cute was the only thing that that was there to give that 15 years ago in a different way of course without the natives who can feel etc it also there are so many web developers around if you start a company and want to hire people people with web experience are much easier to find a dart I think 10 times more people who are familiar with JavaScript then people familiar with them c++ and growing javascript corrine c++ drinking which gives all of us a better job security i guess I have an extra spacer what’s the point of native applica applications and so web technologies are great but they can’t achieve and everything because in web technologies we have to agree on a lot of things with you know when people doing Firefox and people doing web kit and people doing explorer and opera and web developers anywhere everyone has to agree and what we do agreement takes time and sometimes we want to push the limits and do things and do things ahead

of time it’s one reason so um for example I want to have an application with a big offline database and like a hundred megabytes database I don’t want any it’s offline I don’t want to put all that into a web application even if it’s offline I would want to do something native with it also if I’m writing a if I’m talking about desktops and if I if I write an analysis program like an imaging analysis program I don’t want that algorithm to be done in JavaScript or the web and one mobile if I wanted to write the guitar tuner right then I need a fast fourier transform algorithm that goes over raw I audio data JavaScript handling with javascript is very nice I guess college experiment but I don’t mean it will work for a real app so native applications are needed to push the limits and to do things that web the web platform just can do so why combine them together I mean this web for the web and there is native for native so this is a bit of enjoying both worlds like they’re going to sleep at eight at four with it and they’re still waking up without a hangover no not that I did that and but so when you combine native and web together you’re still really in a context of a native application your application is deployed natively it can do anything a native application does but part of it is as portable as the web and can run on different platforms in yours king named if you write for platforms for example I don’t support cute like the iPad you want to write the tablet application that works on Windows netbooks and on the iPad and you can you can probably use the cute port for iphone that’s not supported bass but if you want to use things that are supported by us in work very well then WebKit you can use in both platforms and then the C++ layer underneath you might have to rewrite some of it or just a the connection part with the c++ library so it gives portability for most of your coat and let’s you ship the rest of the code also it’s about performance in a way how many of you had to work around a cute performance issues not that we have any nothing to me good and or other performance issues in platform right and so sometimes you need to do that to shape right sometimes it doesn’t matter how beautiful your code is how right it is architectural II I say that nasty hacks make the world go round and so combining them together lets you use the web application get the portability but still get the nasty hacks that to make your customers happy because the ship in time how does it work so now instead of showing something very very fancy or you know very complicated i’m going to start from scratch from an empty cute creator and build a small hybrid application from scratch with you and if anybody wants you use our computer to try to replicate it you’re welcome to do that in what I will show is because we’re more desktop oriented in this room I would show a desktop application that has a HTML you I but behind it it has a c++ application a c++ enabler is that it does a hardware intensive operation I’m not going to write a real hardware intensive operation but i’m going to mimic what that means in terms of the hybrid application and so what we’re going and what we’re going to write is a a text analyzer application that gets a list of strings rather its large or

small and can return and when it’s done processing it will the UI will notify the user how many characters there are in all the strings together now this won’t be process intensive if the list was small but you can imagine how this can be scaled so and I start with a regular application can you see this it can people see this well right as you see I was working on WebKit call it hub hybrid dev days pink and make this a regular widget application to make things easier on myself now the first thing i do when i create a hybrid application is take care of a hygiene so by hygiene I mean make sure i have the webview right make sure things can run on it and make sure mixing make sure all of that compile just get the older broiler plate stuff done sometimes when you write hybrid application the broiler plate is what it is stopped Getty stock so here I’ll just go through it so first of all that we need the WebKit in the profile I will need a key webview and possibly a cue web frame and now instead of showing widgets I will create the webview now this would probably not do much but it is an empty webview now I want Lexie I’m going step by step so the next step would be to just load a regular HTML file in it to make things easy on myself with deployment i will put that HTML file in resources and I would add a new file let’s call it index dot HTML and right now it will just show a regular hello world um and this is again the border plate hygiene stuff so I creative prefix test and I would add a file to it index dot HTML I can use the QR see a protocol to load file form sources and then I see that it works or if it doesn’t work I can check why so I have a regular hello Walt just with HTML now you can imagine a key put any HTML here i can even I can load files from the network with that web view so if you go later today to benjamin’s html5 be on the bus presentation you will learn more about html5 features i’m not going to go into that in detail today okay now i have the web without negative i’m set up in on the side now i want to create a library

for it analyzing text so this is a class i will call it they’re a really creative name text analyzer and it’s baq object q object is a very important part of why all this works and you will see in a minute okay so how many of you use cute objects okay good thus checking everybody’s awake okay so if we will create a simple text analyzer m-class it will have a slot called analyze text it will get a string list they make sense it gets a list of strings analyzes the amount of the total characters in of them now we wanted to give us a call back when it’s done so this will be a signal so the signal will return in an argument the total total characters in this hole is string list and we want to a monitor progress so we’ll add a queue property it will be a real until have a function gets progress yes I know you’re putting a get is not cute style but I think we can handle that and so now that I have the signal and slots let’s put some functionality into this now this is not important enough to show hybrid but it’s important for me to show you that this is all from scratch and make you feel like a it’s easy to do or that you can come out of here knowing how to do this so we save this Q stringless to list we save an indexed of where we are now mmm and will the way we’re going to do this is we’re going to have a timer that every second and analyzes the next string then they say emulate at the behavior of slow or process intensive background and operation so we’ll have a private slot analyze next so now I implement all this and let’s say vacu timer here probably need to include okay so we get a list of strings so we set the index 20 we set the list

of strings and we start a timer once every second and now in the constructor we connect the time out to analyze the next string now analyze next ring is going to check if we’re done mm oh I should probably save the total characters as well so if we’re done we’re just going to admit the done with in total and return now this is an earlier turn so here I can do and in get progress I can make sure I return the progress which would be and the index / the size of the list I can do division by zero of protection as you see i compile each each part separately i want because hybrid applications contain many moving parts let’s connect together I usually actually would create a native test for this before connecting into hybrid I will not show it show it here because I’m sure you know how to do this but that’s how usual i usually go about using Harbach so they need to stay library separately and the hybrid part separately am now to the hybrid part I want to expose this text analyzer to a web application so I include text analyzer dot H and i instantiate one and now is there is a the magic function it’s called make everything hybrid and war can be really nice and have no bugs yeah but really why it’s called is add to JavaScript window object add to JavaScript object and I give it the name text about hybrid text analyzer and it’s a cue object so um I call it to my analyzer I guess and now another thing with this magic function it has to do with web security the thing is this every time you switch between web pages we clear all the native objects that you add to it that’s because if you go to some untrusted source we want to application to be aware of that and decide for itself if they want to introduce a native objects to the untrusted source so that those sources wouldn’t jeopardize security this is all based on your application application has complete control over what to do there mmm but to really make sure that this object is always connected I will

have to create um and an object does that so I’m creating a slot called refresh page and this this object would have a would need to have a link to their web frame I point to the web frame and in just this case let’s move text analyzer here and four and simplicity will make this a child of their web frame and here we would connect this magic signal JavaScript window object cleared this is a signal fire security for your application security so every time you switch pages this signal will be called refresh page maybe not the best name in the world but it will do for now and here we will instantiate this hybrid connector now to get this running would you need to include main that mark because we put an object in the end implementation file and we will need to run queue make again now let’s see why that wouldn’t work well it does compile of course but let’s let’s make sure we actually get access to this object so we called it hybrid text analyzer and when I had two jobs between the object the place where this is available for me is of course JavaScript so on body onload I can right now check it says orbit is available for me every text analyzer I can do a window dot but that’s superfluous in web now let’s see so I started and I have an alert text analyzer name equals nothing if I didn’t have that object it would say undefined and undefined it’s also what it would say if you just run this in a browser ok so now i know i have my object and now it’s time to write a little HTML you I that will manipulate that object so remember this a object it gets a string list right as a parameter so here I will create a string list except this is JavaScript how do i create the strings

in java script I create a JavaScript array just regular JavaScript array and I and make sure it contains drinks okay so I ever I have string this now i can get this string list from online from an online source i can get it from user input you can get it you get the point of this thing you can do is JavaScript to get this kind of array and and I want a little button that allows me to start analyzing this so and I create an to analyze function remember we have the object right every text analyzer and has a function analyze text it gets a string list but here I can just pass it my JavaScript array that contains drinks and analyze text I didn’t understand oh typo hey I can’t hear very much for from there sorry so right now we can test that it doesn’t crash but of course it wouldn’t give us any result right so um the other thing we want to do is a make sure we get a response when this is done so we have the sync signal analysis done as you see I’m using a lot of copy paste here this is important because the names have to be exactly right so copying the name from here you can copy it here and I use the magic word what’s the magic word in cute right connect em and the nice thing about javascript is that it’s a functional language in a way it has functional attributes at ease so here I can just declare my own function and it will get the total as an argument and let’s create a div here that will show us the total this is a nice cute WebKit function in JavaScript called query selector it’s actually in WebKit not just in cute WebKit but I can easily select an element by its ID or bytes classes or buy a whole bunch of a attributes so i can get and contact the argument coming from c++ and put that into JavaScript now so just to make us find errors a little faster than five seconds for now just 22 and later I’ll addressed and now let’s see if it works and if it doesn’t I will introduce web inspector and we

can see why ya didn’t work I need to press analyse web inspector will not show me that 10 so 10 characters total it’s works better than the last time I did it this demo um okay so you showed it will show that we can run slot and get a signal back and if there is a type a kind of an automatical type conversion here between a WebKit and a week between javascript and cute it’s not automatically it’s actually whole bunch of lines of code that actually check what you have and check what cutie cute expects and makes the best conversion it can fry um so now we also want to a chicken at what the progress is so we’ll create another div and say that every half a second we will query we will pull for the progress and first of all we’ll have a light variable and call this progress but copy paste is a good day of practice here think you can do this in JavaScript now let’s see if this works this actually did not fork very good now this could be a problem in my text analyzer or here right I’m glad we finally got to some trouble because we can see how to solve them in real time with unfortch like that so we will make sure we have enough and we can why don’t we instead of around again to adjust do you just show the progress to see if we get the right if the rounding code is going to be wrong here yes so looks like I’m getting I’m getting a wrong value from C++ in C++ function yes here is get progress I don’t need to connect it to get progress I need to connect it to progress which is the property name which then connects to the gate focus

function so here I can just use QD bugs like in any other a cute project this seems right this is right too I’m using set timeout in self set interval it’s a problem if the timer is like a kid Harmon single-shot been doing c++ too much lately okay so this shows the main concept of the main concept of a hybrid you can use signal slots and properties now let’s say you want to a pass through it WebKit something a little more complicated than just integers or a list of string so let’s say instead of total here let’s say that instead of total we wanted to return a JavaScript object like like Jason that they included real data that we can use in some structural form so it would look in JSON something like this ok it will be an object with with a few JavaScript properties so in this case we use a class called qvariant map it’s really a queue map of face string to qvariant which is very much similar to Jason and concept so here in analysis done it instead of returning an end I have to return some data let’s call it count hmm I should probably include that class let’s see this compound now the argument to the signal would be data and the total will be it’s a stat adult total the same string of you is here I can use here as a child of that Jason

object itself less I can just do dated of total here the same thing just with a compound hey Jason element so yeah I will return a little bit to the presentation and then we’ll have lots of time for questions this is about how it works now how does this relate to get quick you learn you heard a lot about Keith quick insurance this M event is because of JavaScript it might seem like using cute quake in using hybrid or HTML is similar it is similar in the way you go about it but it is very different into in what you’re trying to achieve with it and with kid quick it’s about productivity and they’re writing code you eyes on platform the support cute very well this approach is not about necessarily that kind of productivity it’s about the portability with other platforms as well and these affair technologies that are common when should you use this when you have a need for portability that comes together with a need for some native a hacking or to connect to the native UI for example if you guys all know the iTunes application right or Napster or any other houses music stores yeah that application has a tree on the left and it has a music store in center and it has a player on the top now the tree you don’t want to write custom in qml or in HTML even each time you write an application like that you want to look like the platform and you want something robust it works qwidget is very good for that and for the player on top and it’s very custom needs to be very dynamic very fluid qml is good for in middle of the music store it’s fresh content coming from a server all the time so when you have a server standards really helps you because you know that even if the code there is older than there in runtime you have on your machine you know it will still work with the right fallbacks and so also for dynamic content HTML is a very good tool so when you have an itunes style application the store would be best written in HTML and that’s actually how it’s done today by itunes when they started it was and it was just a the custom format they were using and later they moved to always in WebKit for that when she do I avoid it avoid this technique basically you should avoid this technique when you don’t need its benefits it’s kind of sounds trivial but there if all your writing is really for example a mobile application for a particular platform is already supports cute and you want it to be the best it can get this will not help you at all this will just create overhead because you have to deal with the standards and you’d have to deal with the hybrid mechanism that as you saw it’s not very hard but it’s it’s unnecessary then if I’m just doing that I this would not gave me anything another place I wouldn’t use it is if my UI is very very tight with the native data if I need a lot of signaling slots and a lot of fair connections and a lot of a initialization of objects out of the UI and doing all this in hybrid becomes quite hairy becomes quite difficult and you get into object ownership problems and other issues if you have an application that’s like that I would hire Araminta to do it just native the other side of it is that if it’s just a website or its just say Facebook crater or something RSS reader is something that just accesses the web and doesn’t mean ated then you can just use the browser or one of the runtimes but you

don’t need to where do you start and this stick this was the including cute in for that for and we have now added documentation for it and now there is full documentation in the kid 47s it can be fine with acute WebKit bridge if you go to the cute WebKit pages I don’t see the point with posting links on a presentation by Lexus and also soon to be integrated is a tutorial that that’s exactly what I did here it also includes the multi threading and because it shows how to utilize that for a real more real life application written by IC s and M we use it and will be incorporated in our tutorials we have a lot of time for questions and then if there are no question I can show more tricks in a vivid actually I’m using it for more than a year now and I had a problem with a race condition in JavaScript now we have a lot of web developers in the company and I asked them about hey how do I get a mutex or something like that they were just shaking their hat and said hey dude there is just a single thread it’s impossible to get such a thing but I was able to reproduce it like most calling q web page execute JavaScript dispatched JavaScript event from there and then all of a sudden a javascript function got called twice and it got cold simultaneously now is this a back or is this intentional behavior where we need to work around it’s both know if it’s really and the way the way to use this with multi threading and I’m glad you asked this is to not use the low level functions like a mutex but rather to move the object that you’re calling into a different thread when when the whole object moves to a different thread and there was a blog post on laps from Brad about two months ago I believe um I think the title was a somewhat easing but then and when the object lives in a different thread and its entire event slope is indifferent thread q takes care of all that and when you call a c++ functions from javascript when you call slot it will do the multi-threaded stuff and a it create an event and caused in the indirect threat and when you use a signal it will make the signal in the UI thread for work it and properties you have to be careful with to make sure that the data is a thread safe I don’t know more about the particular problem but in a more bigger picture answer I would use this technique with care I would not use it for everything and I would try to do make sure that what I expose in C++ are actually systems that work very nicely and packaged to JavaScript and in a very minimized way you don’t want like a whole bunch of tentacles from your native application going to the JavaScript application it gets hard to move match and sometimes like there are a few i would say yellow flags you can that usually when i write Harvard application and I don’t know if your particular project sometimes you have to do things like that but they’re warning signs when you develop Harvard application one you don’t know who created the object the warning sign is for example a classes like my text analyzer that returns a cue object pointer who releases it later so that’s a that’s one morning sign another one is if you have to do a value a javascript is it probably make me think about what

i’m using hybrid for something there are other tricks a to achieve what you want like wrapping whatever you get from c++ in them a different JavaScript function but this really works well if you kind of go with the architecture of few objects and just let it do its thing with the Q object threading and with the cute with the cute connections inside Jackie objects I hope that answers the question in the general way I can I can do right now I have written a service application which is running as a demon on veelox and a cutie servers on Windows and I’m asking myself it is good to have this technique as using a creating a client application for having a user interface for this and it’s it’s vary depending on them it’s vary depending on a requirement of the particular application if you’re asking if this is a good technique yes the good technique of the well I could also use Q to keep quick for this right if you know you already have a cute on your platforms yeah if you’re if everything is cute based anyway um and does the are you I need to live on the server or well it would be good advantage if it could be on another pc would be good yes so if you control your whole stack then sometimes QT quick might be a better solution but if you if you don’t or if you don’t know if you have some dual deployment issue or the server might be deployed separately from the client then I would use this technique because because of the standard um we know what support is very good fallback service that helps when you have a server with cute in a QT quick the backwards compatibility and that kind of robustness in the format does not it does not exist yet but if you do control everything is no reason why not use get quick there are also features that are more related to how your UI looks like that make a web a better choice or get quick a very choice like if you’re a UI is more content driven and wyoming by content like you have a text that you don’t know the lengths of the text you don’t know where it’s coming from you don’t know how it’s going to be formatted and you might have images and you might have other effects and the way they’re formatted together is by set of rules not by set of fixed positions like a UI in you I you design and then you have fixed fixed elements and with some you are rules but in content the rules are a lot more complicated like you have to say something like the image floats for it for the left of floats to the right you have to say they margins and the backgrounds and the lines between the text the line sizes if you are you I is more like that I call it dynamic content versus dynamic you I so it depends on your on the problem is it’s mainly a big tree view with with many many thousand items in it so it’s a big amount of data right and for that right now I would probably use widget thank you what you have shown to in your example could also be done completely from the C++ side because I could hook the link and I could access the Dom from from C++ so what are the differences and that were anxious advantages of each approach and the advantage of the AC that for example yeah just the background we’ve written this for a customer and that they wanted to have there you are in a server and they wanted at least the least possible in C++ because they had update problems they don’t didn’t want to they wanted to update very frequently actually the customer is speaking right now upstairs it’s a

netflix so they want to do more frequent updates without having to deal with tool chains and so they wanted as much as possible in HTML so this give them that power without having to tune c++ also i see this connection as part of the UI it the way I usually prefer to divide it I see the HTML is a good language for you eyes and C++ is a good language for libraries so I would write my c++ code as a library and HTML szu I of course this is for particular you guys if you want a tree widgets with a million items C++ is way better than HTML mm but that’s how I always go about it nokia have also are working on this cutie web frameworks right how does that compare to the techniques you show here can you combine those techniques with these cutie web frameworks as well or are the things to be aware of and is talking about their web platform and they keep LeBron time as part of it for mobile yes it’s so the web runtime is a hybrid application in itself and it provides em like a common set of hybrid a AP is that you can use apart from the irregular web platform and you deploy your application as a widget which means that you don’t have to write any C++ code the thing about when prime time is that when it comes out right now it’s not it’s not available for developers it will use the same techniques as it so um I can’t really say much about stuff that’s not released yet but if you are considering where primetime this is where you start this is aborted now supported on the n8 right now because this works in for the six you can start with it in later when the widgets come and not keywords but the a web apps come with with rob runtime migration should be easy because their DUI is in HTML anyway and you just have to connect it to the default JavaScript enabler is instead of to the one that you provide here so you think it will be possible to write hybrid applications with that and I think for now Harvard application is more along the lines of cute it’s like a cute application that’s written with web technologies it is a both use the same WebKit so all the html5 features there in both of them you know I don’t think there’s a plan right now to provide something like an embedded where brand timing to embed a web runtime view into a regular kid application but it might be something to consider for us what you showed here is very powerful the script you’ve got a good connection between the JavaScript and the c++ and obviously the javascript in the HTML part is portable Porsche when you actually have to port that somewhere or cutie isn’t supported what I J in mind there because it has to work somehow like the way the QT didn’t worked and have these good connections is there are other alternatives and other platforms yes if you take for example the ipad is a sort of desktop sort of mobile application and so the iOS provides a hybrid application support and you can embed the webview in a cocoa touch objective-c application it might be a little bit different it’s not compatible with what we’re doing cute butt the way I would go about it and I have been trying this at home and myself and so here i have the hybrid text analyzer right so here i can make a check I can check I can check where I am and I can

obfuscate those platform differences now does this create fragmentation yes it does but there is some platform fragmentation because we don’t run on all platforms and this allows you to use that platform fragmentation to get the extra Neutron platform but this is how I would go about it embedded web view eighty percent of your code is portable and the rest you do a little bit of a physician in the JavaScript code and you have different bridges to your library um that’s how I would go about it thank you no more questions all right thank you done early thank