Embrace Modern Technology: Using HTML 5 for GUI in C++ - Borislav Stanimirov - CppCon 2019

we're ready okay hi I'm Bruce Slav and if you want you can follow the slides over here on your phones or tablets it's--that's is dot GD / html5 GUI all lowercase I'm mostly a C++ programmer though I do a lot of other languages too I'm mostly a game programmer the vast majority of my career has been in games but recently I made a career change of sorts and I'm now working on medical software I do a lot of open-source you can find my repos over here if you want and this talk is about using html5 is a GUI framework for C++ applications I'll cover a lot of ground and three different approaches many variants of those approaches and keep in mind though that the talk is much more inspirational than educational I mean to motivate you to perhaps consider using some of these approaches experiment with them and that's why I've provided some demos so you can start experimenting right away so you want to make a GUI a typical user interface will works like this you have an application you have your user interface and they communicate the application sends data to the using their face to present and use interface its sends commands commands back to the application which change the data you could want a simple GUI so a couple of widgets nothing too fancy and in this case your program might well look something like this you have your executable and which runs the application and the same with people also runs the GUI the user interface and they communicate with some functions say get this said that stuff like this and in such case my advice is to just use whatever you're comfortable with whatever you know whatever you like it doesn't matter that much actually my personal recommendations in this category for simple we are live UI and deer in Bouie they're great check them out if you want so let's say you want a complex GUI let's say you want some kind of deer diagrams something fancy widgets animations all all the Jazz you want MVC where the application is your model the user interface is your view and there's some kind of a controller which facilitates facilitated communication in a typical C++ program that Model View controller may be realized like this you have the executable for the application then the same experience the user interface but they're in two separate subsystems or two separate threads and they communicate with messages or signals or whatever you want and for many people the answer to the problem of having a complex user interface is cute and it's decent answer cute is really powerful and definitely can get the job done but is there something else and I'm here to talk about that something else and this thing are browsers this of course Netscape the mother of all modern browsers and the it's children sure have come a long way haven't they modern browsers seramins the most sophisticated pieces of software ever produced they're highly optimized in terms of performance and power consumption and they are powerful for example this is a browser see I can press f11 here you can see this is a browser perhaps some of you have opened the link you're seeing at the same slides in your browser so your phones and tablets you could have simple widgets in the browser they're all clickable here in my presentation I can add some text I can click on the check boxes I can click the button it does nothing of course but it's still there this is nice big image this is a animated gif which illustrates typical C possible development this is a YouTube video into course you know the browser can open these these are this is real-time 3d graphics from shared toy running in the browser and you know what these last five slides with the fancy stuff they took about 10 minutes to make I just looked for what I want to embed and I embedded it that's how easy it is the thing is that the browser is an immensely powerful presentation platform it's using interface platform it's our user interface in the Internet and if that has everything so that means that the browser can should be able to present everything so browsers are sophisticated optimized powerful but most of all they're ubiquitous browsers everywhere for example this is fridge and on this fridge you can open Facebook or Twitter and there's something else this is these are screenshots from the Stack Overflow survey of this year between I think 90,000 developers and not here those are how developers self categorized themselves in terms of what their type is I guess those near the top those two most of them write code for the browser these here the languages they use these languages are mainly used for browser number two on the on the right side which is entirely up the browser and that's what like here at the for like 200 percent of developers actually write code for the browser right anyway seriously though if you're it you probably familiar with how hard it is to find decent C++ developers and also if you if you have distance people suppose developers you probably wouldn't want them to - I don't in way waste their time doing GUI you would want them to actually write application right that's why they're for and given that browsers so ubiquitous in the number of browser developers so huge is much easier to find decent browser developers so browsers are really powerful browser browser developers are everywhere can we make use of that as sequel sprockets application writers and before I continue I should just say what html5 is not be very brief because most of you are probably familiar with the concept so html5 in month 1 minute in a single slide first of all HTML file is not a single thing it's a stack of four languages you have the declarative languages which are HTML which defines the elements of the page and CSS which describes the style of the elements or the appearance of the elements on the page and both of those they define the Dom document object model the DOM is basically the structure of our page and you have imperative languages which change the Dom then they modify it and those languages are javascript and web assembly and that's it that's what every single web page and click this one see I can press control you and you can see the source of the page I want zoom in your view you basically see what I mean this is a simple web page is all HTML CSS JavaScript in this case no webassembly so what is the html5 development then is it writing HTML CSS and JavaScript well in a way yeah but it's a bit more than that remember this thing the most popular languages out there see the third one typescript I didn't mention type it before the thing is that this huge community of young hipsters that write JavaScript well they've developed some neat stuff except for example they developed a lot of languages CSS I did mention CSS it's terrible language nobody wants to write CSS and hence hardly anyone does lots people use less or sass or many other languages which are then compiled to CSS JavaScript it's a decent language but many people don't want to write JavaScript they've created many languages which compile to JavaScript typescript is much more more popular ones CoffeeScript to and there are many others in fact C++ can be compiled to a subset of JavaScript code called as in J's and there are many languages and templating and use we generate HTML and compiling twelve assemblies all the rage these days every language does it C++ does it you know there was a key note about using web using simple supposed to generate web assembly and those young hipsters have developed sometimes he workflows too for example there is no js' now many of you know GS may be a server solution anyway but in fact no J's is the de facto JavaScript interpreter for desktop and it's used for many things and in fact practically every front-end developer the one that's write code for the browser they use no GS in some way no J's runs a lot of package managers I can't game yarn and web pack and it supports some marvelous workflow of that all of those have their own kind of build servers but for example npm start is pretty were typically a front-end developer we'll just run NPM starting this will launch process which is the build server which watches the file system compiles us to CSS compiled typescript to JavaScript launches the web browser refresh see if it needs to and it's great the experience is awesome it's great it's great isn't it they have lots of debugging helpers debugging tools if you know I can press f12 here this will open me dev tools for Chrome other browsers have their own variants this allows me to debug to break within the webpage to change the code is it's running thread to change the Dom for example if I click here and go to inspect this page here this is pretty neat they have developed some powerful frameworks and I'm sure you've all sort of react viewer angular and there are many others so html5 development is modern it's very effective and allows us allows the developers to be very productive so it's something pretty neat ok enough of me selling you the concept of html5 the html5 corporation paid me enough so approach one a loco h-2b server basically this means to start an HP server on your computer and an open a browser on the same computer to localhost and some support but this is not just any HTTP server this is our application and much like we had the application communicate with the GUI with munson messages this works the same way but instead of instead of messages or signals the communication is done via HTTP now this has been done since the early 90s and those early attempts were multi-page applications basically multi-page application is where you click a hyperlink it requests page from the server the server generates it and it back you open that page that's it this is simple there is no principles process in Python but I'm sure you'll get the picture so I can just start by some webserver I can open I started 8080 right and you see the the browser request web page the server generated the content contents of the directory so this is simple file system browser running in Python I can click on the directories and open I can click back it's pretty simple every click generates a new page that's basically it in this case the server is serving dynamic content and this is not great because that means that our support our application will need to generate HTML there is some GUI logic the HTML generation logic is situated in our application and that'sthat's not we one that's not MVC that's not cool in a language of our diagram this looks something like this it to even looks broken you have your execute once aim is put what generates on some HTML which communicates to the browser it's not great not great not terrible and the key part here is that multi-page applications are typically not interactive I mean they do interact with the server but there is no way for the server to to say something to the application in some time and that makes them generally a bad idea now they can qualify in a simple GUI there's a simple GUI and if you if it's easy for you if that's what you want if that's what you know how to do then sure and in fact to this day I think that this is the PHP programmers we have choice multi-page applications anyway we're going to something to do something more modern single page applications in a single page application JavaScript actually is used to modify the Dom and implement the GUI logic and there's no not new URL on every click you stay on the same page the hence the single page name and this started in 2004 with when Ajax came to be a jack stands for asynchronous JavaScript xhr and xhr stands for HTML XML HTTP request and if this name sounds with Microsoft II to you than you right it was created by Microsoft noticed XML there luckily you don't have to use XML with an XML HTTP request and if this sounds a bit Microsoft it to you then again you basically any text or binary works in with this request the things that this doesn't sound very interactive now does it you will always need to make requests and then wait for responses so in order for the server to tell us something we need first we need to ask it first now luckily web developers device to hack round is the interactivity hack so this basically how it works we request up some resource from the server and this is not a real resource this is client ready some kind of a message when we receive the response we dispatch it to the application to the to the GUI for example so it needs to be rendered in whatever else and then we call the same function again opening the same xhr to the server so that basically maintains a continuous connection between the browser and the server hockey in a way isn't it where is this X now if you request to say well it's hidden behind those fancy functions those those basically expand to this this is exact same thing you create the xhr you get the resource you dispatch your response call the same function again and if any one of you happens to write Ajax these days use fetch don't use this this is really old school but I don't have an eidetic demo because we are not going to Ajax today we are moving to a snow 5 an HTML 5 is more modern and has another feature WebSockets WebSockets are cool and takes the they take the xhr interactivity hug to the next level basically it's it's a much simpler and cleaner way to communicate with the server and it's more powerful too as we will see in a while so this is our WebSocket works you open a WebSocket connection from URL you feel some callbacks then you can send my server and receive the responses in the on message function and this again is a continuous connection between serving the client and every party from both sides of the connection can communicate in their own time whatever they want so our application architecture with a local HTTP server might look something like this we have a server which is our application we have a browser which is the user interface and they communicate by web socket or xhr but this this is probably not that cool because remember that the marvelous workflow that modern web developers used npm start the build server there is no way for us to start here is there because if the server is our sequence plus application the first thing that the browser is going to request when it opens the URL is the html5 content how are we going to provide it we could reimplemented p.m. and the marvelous workflow but no this is not something that we want to do we could have our html5 developers give up their app marvelous workflow but then is this is something that we want to do even less because they'll know they're young they'll they they have their ways anyway what we could do though is create a node module no no GS allows us to create because it's it's a JavaScript engine for the desktop it allows us to have a desktop functionality for example opening share libraries we could create a node module which is a shared library we could have it communicate with node and then note will take care of the all communication and NPM fancy stuff and it will serve as a proxy between our application and the user interface the browser this is what we did in a companies to work for before and it made sense for us because we had a lot of application logic not only simplest was but also in JavaScript so actually we note was useful for us for more than just a proxy but again this could work if you're willing to to communicate to JavaScript for every single thing this is fine it works but I mention the 12 sockets are more powerful and what makes them more powerful is this this URL here this doesn't need to be the same URL that we've open with the browser instead we could do this and this is in my opinion a much cleaner interface we have the server which is node or I know nginx or Apache whatever you want which provides the html5 content and create all kinds of other HTTP requests and we have your article post application which only run web sorons WebSocket and communicates with the browser by a WebSocket it's different application and it's much cleaner much simpler doesn't have to to deal with all the crafts of the of the HTTP server beside it so how do we add WebSockets to our suppose pacification well there are many options but look at least 2019 and every there are many open-source options and we can do whatever we want and this is it become so I'm going to use boost beast boost beasties by Vinnie Falco he's from suppose possible as one of the sponsors here he had he has had talks and this year he's not here sadly but hi Vinnie and I'm time to have a small demo here so I have this Python edge to be server open but I could open the HTML directory I can open this web page here and this does nothing right now because I don't have a server let's start the silver then okay I'm starting a simple server here note is the console behind I just need to refresh for sweetie which reconnected I can send messages to the server and the server just I call them right back and you see the sort of received messages and set them right back to the browser this server particular I'm going to make a short run through the cold here oops so it is not the correct file this is the one okay so now can everyone see the code okay we have our main function here it's pretty simple math function we start a server which is a closet I've written and because that written does this it creates some synchronous Excel function so it starts listening for connection start listening whether someone wants to connect to the server and when it's someone does connect it calls the callback on accept and on accept we create a new session again closet I've written and we start running the session and when the session starts running basically it again it accepts it attaches itself to the connection to the browser here in a sink without seeing except and when the accept is done we starts reading basically listening for communication from the class when we receive a read in this particular case we receive it here there's a text packet again class that I've written and we call on receive and on receive here basically logs the packet that we received and send it right back sent puts it in a queue and calls the do write method and do write basically is used to synchronously empty the queue from from the messages that are queued to the client most of this is my code like that the actual booth be specific part of it is really pretty small those are mainly the this one the mwm WebSocket members who seem to accept its increasing creed and stuff like this it's pretty simple oops anyway I'm not going to go into too much details as I said inspirational not educational we has done a lot of talk some booth beasts there's lots of documentation around it it's great but if for some reason you want to use something else or you want to just explore the field of WebSocket libraries for C++ here is a small list I mentioned booth beast is fully capable the WebSocket an HTTP server so if you do want to implement NPM you could do it with booth beast it's a client - so you could be used as a client not necessarily server there's micro WebSockets which is a pretty neat library I liked a lot I recommend it wholeheartedly - against WebSocket an HTTP server and client there's WebSocket plus plus which is great but one the good part about WebSocket was compared to the others is that the transport is interchangeable so for example whose beast uses a zero sockets Micra WebSocket have their own soft implementation where a socket post post doesn't have any you could use AC or if use your own library plasma specific stuff so if you want to have sockets with with something that's not really available in terms of transport you can definitely check socket plus plus there's the simple web socket server library it's it's a web socket only solution but the author has also symbolized to be server library so you can employ both and if you want to create like a WebSocket server with a few lines of code this is this should be our choice it's like three lines of code when you're done and of course many many more libraries exist and practically every major simplest framework out there has a WebSocket solution because it's 2019 WebSockets are all the rage right now aren't they and so the short list of pros a vegetable server so these windows and I have I have windows subsystem for Linux so I don't have an X Windows Server on that Linux here but what I could do so about that I forgot the name of the application I could start the server here then I can open my browser and see I'm browsing the Linux file system right now because on my virtual machine what windows subsystem like is not a virtual machine but it couldn't as well be so my version of Linux machine I have a WebSocket server and then it opens simple interactive file browser a complete directories I can go up I can recover this is basically the repository that with the demos if it works it's marvelous I don't need the right window server anymore making my virtual machines or my wsl installation much more a lot smaller and lighter you could have multiple sessions like demo demos that I have they support multiple sessions so I could go here and open the same the the same application and see the same so different types of my browser open same application and they do different things now in my case this is really simple because my server is stateless the application application server is absolutely status and only to do anything to support this but if your application does support multiple sessions that something could we could do also you don't have to use localhost now I did use localhost but you could create a server on your local network or you could create an actual internet web server create web applications C++ it's easy now and there are some cons of using a local HP server and the main the main pro is also the main con the client is browser and by that I mean this email remember MVC where the application is the model the view is the user interface and the controller is the communication where at this time when you have server in a browser where's the communication it's in the ether in way it doesn't exist so the controller code actually needs to be situated in the in the other ends of the diagram so we have some controller code with me C++ in our application and some controller code written in javascript in the browser which is not that pleasant to be honest now you could compile as I said you could compile C++ to doesn't yes or webassembly and kind of make it work it's possible definitely but as you see later there are some kind of problems with that too but it's a viable solution definitely also we don't have a single application if we talk about desktop applications what the instructions for launching your application be would be something like I start this HTTP server for example start nginx or node or Python simple HTTP server then I start this WebSocket server then open the browser to this URL not very pleasant now is it for advanced users of course they don't care but if you're making like regular desktop application it might be like not really cool also how do I stop the application we have token the you have to kill the processor and I'll press control C where the where the server is running something like this yeah not nice and also there's lots of low the network interface every single piece of communication that goes between the application and the user interfaces through HTTP so through the network transport now I may be exaggerating with this problem this is not such a big problem low cost local host is pretty fast HTTP is not that fast but but local host takes care of it pretty pretty good so if we're talking about gigabytes data maybe you don't want to copy them but anything smaller than that who probably wouldn't be even noticeable it depends of course it depends but there's something to be to be considered certainly and this kind of segues into approach number two which is embedding a browser this basically means to use the browser as a library why not have a function like open browser window to this URL and for many platforms this existing is called webview I'm familiar and have some experience with the webview on Android and iOS and they're pretty neat they're they're great web views but what can we do for C++ and before I continue with what we can do for C++ I'm gonna do the browser architecture in a single slide browsers have tabs modern browsers have tabs and in those tabs you can have Europe like the pages in those pages can have I friends well I frame is basically a way to open a web page within another web page and these things post post some security issues for example if I'm opened I have facebook opening one of my tabs and I open hack the hack hack from the other my other tab and the hacker has written some code that kind of threw some fancy magic buffer overflows and everything gets the chance to read my facebook memory get my facebook password pictures communication everything this is not nice another thing that hack the hack hack could potentially contain some code that opens some files from my file system rooms creeps them then ask me for Bitcoin you know it's it's again something unpleasant that's why modern browsers have separate processes for everything so those are the render process you have a browser process which which runs the GUI the the user input and for every tab and for every iframe you have a separate render process which deals with it it's separate like a separate executable day so they don't even share the same address space so there is no way through buffer overflows for anything to access the memory of another page and also these processes are sandboxed this means that certain operating system API SAR forbidden for them you cannot just open like F open something from the render process it's not allowed so that's how browser self-security basically and there is no way to communicate between those processes there is literally no way there are some I know roundabouts like cookies or something but you have to support the same source and so it doesn't basically work and we can put the browser architecture in the language of our diagram and have the browser process and the multiple render processes for every time an iframe and they communicate within the process messages and I some of you may be familiar with with my quark but I do like acronyms so I've devised a new acronym for this talk and this is the bridge the bridge is basically the things that you need to know before embedding a browser you need to know how to do with the browser before I'm betting it and this is basically writing code for the browser process writing code for the render process inter process communication and the binding between JavaScript in C++ because the browser runs JavaScript in our application is presumably supposed to us if you know how to do this with your browser then you can safely embed it and in this case things become exactly the same as the HTTP server and real browser scenario you have your browser process or HTTP server you have your render process or a browser and they communicate through inter process messages or xhr and WebSockets literally the same thing so what can we do to embed browser C++ now there's cute cue a view it wraps the native browser of the operating system and it's pretty pretty pretty bare-bones yeah it's it's it doesn't support the brick so we're not going to consider it it can only open web page and that's basically it there is this thing out from cute to cute web engine and kills web engine revs chromium it's pretty good they're safe the chromium embedded frame which wraps chromium to its C++ library which which wraps chromium there is of course there's the electron you've probably heard and heard of electron here yeah of course yeah electron is all the way there's AB kit and from all of these actually like not all of these but if we consider like browser engines which are chromium web kids gecko whatever WebKit is probably the the user friendliest to to embed on your own so we don't need fancy wrappers or anything it has pretty good interface like a pretty good API for embedding the thing is that WebKit is GPL so if you're willing to to live with GPL you can we'll try WebKit it's it's awesome there's also cute wrapper of WebKit cute WebKit but to my knowledge it's very outdated so probably don't use it and there's gecko yeah quit the engine WebKit is behind Safari most of you probably know and the echo is behind Firefox that's good the browser engine of Firefox and I don't know much about vehicle to my knowledge all applications which actually embed vehicle are Musil applications for example thunderbird i don't know of any and i might be wrong but i don't know of any applications which actually use gecko so i'm like i don't know and one thing should be mentioned also here and as the proposal will ever know 8 for the c++ standard as to the webview it's pretty bare-bones so far as it is it's like q webview you can basically open web page and that's it but perhaps we can gather our forces and try to make it better who knows and it's yeah it's to early stages of development anyway it probably won't be there for secret was 23 could be for support was 26 who knows and you've seen that chromium is pretty popular and i'm gonna focus more on chromium and if i'm focusing on chromium Amica i cannot like omit electron electron is everybody's they select one powers visual studio codes most of us probably have at least for a while use visual studio code Korematsu power slack and many other applications I'm sorry like electron also powers like in many ratifications and electron it's not a C++ library it's basically this web you think but for JavaScript what nodejs is for the terminal electron is for the desktop it's exactly the same not just said the same oh it's a pee ice it has the same native modules if you if you create a native module for no GS you can just recompile the exact same code with linking it against electron and it will work everything so did that for the brim of course it's fully fledged browser wrapper but it's in JavaScript it's a browser app or JavaScript and it's basically a JavaScript programmers dream come true and not a C++ programmer as one it could though it could still work for you like no GS and having a node module work could could've worked before electron could work for you now perhaps this what you want and in this case your application might look something like this you have the electron back-end the electron front-end like browser press render process and you can create c++ electron modules for the browser cross and render process in heavier code there and have all the communication paths through javascript new select run as a proxy basically there is no way for your different c++ like worlds to communicate with each other other than through javascript well there's hacky ways of course you could write a file and read from the same pouch it's possible but anyway that'sthat's what I'm gonna say for electron check it out if you want it's pretty meat it's it's very popular so there's lots of documentation and tutorials and everything around cube lab engine and Seth they're pretty good common rappers they are allowed to do basically everything chromium can do and thus they don't have almost exact same features and the main difference I'd say between those is the license I don't understand queues license like you could do something free if it's open source and free but then you have to pay certain I don't understand it and I I'm not strictly against cute but I don't like using it at least for my stuff my most of you do you Skilton cuties a pretty decent choice but typed I have some good words for Seth to now safe is somewhat strange in that it wraps the C++ code of chromium in ass interface and then provides a simple puss wrapper of that interface but thanks to that thanks to that's interface there are actually lots and lots of self-powered wrappers of chromium there's wrappers of chromium for Java for dotnet for gopis and many other languages based on that exact capi of offset so this is pretty neat so that's cool you might not use them but at least is cool right in fact electron used to be safe electron used to be the JavaScript wrapper of chromium powered by Seth now it eventually outgrew safe so currently it wraps pure chromium it does not you say but it started as a self wrapper and you smell them my demos yourself because as I said I I don't understand acute license so I forgot my executables ok here is the same I called em oh I can call send I can get the response but this time I don't have a server because everything is single application this basically premium HTML wrapped within the same application this is almost entirely the exact same code as I used for the previous cycle down but instead of WebSocket I communicate itself so let's go really quickly through the code oops let's start from the end okay this is our main function and separate like this it starts the executable and then starts the exact same executable for every other process so when you click on the executable inaudible starts and that's the browser process and then internally it will start itself multiple times for every renderer process so this is what we do here if the application type is rendered on Linux this Caldecott so we create a render application and then call self it's good process and say physical process will like stop here and return some positive value if or zero if this is a browser processing should be you should stop the execution here because this is our but if it's a render process I'm sorry and because we writing called for the browser process we go along to the end we create a browser and run the message OOP that's in I know very short run through the code ok so what's important here this we also clear created this client thing the client is basically the code we write for the browser process it can have it can support multiple interfaces and prove that one supporting for example the request Handler so when the browser process requests web page I'm not going to allow it to go to the Internet but instead I'm going to load some file from the file system and send them to the browser so this is how I manage the the resources that my browser is using the dis powered by the request and regular resource request handler the most important thing here though is unprocessed message received so I could receive a process message from the renderer process which is on echo in my case in which case I log it and I create response with the exact same text and I send it back this is the response I said the text that I just got it's an argument and I sent right back so this the render process I received so message I send right back what about the browser I'm sorry this is the browser process while what the render process I probably messed up like a million times already the the browser is an application right the application listens for messages and send them right back the renderer which is the front end doesn't know anything about this this crazy logic of reads returning the exact same thing again so the render what does it do the renderer of well first of all it can receive a response from the browser process and send it to JavaScript and here I'm using using a small little library called J's bind now safe does have a C++ to JavaScript binding interface but I find this library pretty easy to use mainly because I wrote it anyway JS been basically what what do I do with Jazz Band when I create my render process I initialize it then I use it to communicate between C++ and JavaScript with it I've created several small functions so like that I'm lost in my own code ok just bind bindings I'm here I exposed the function echo which the browser the HTML calls and I also expose this function which is used by the html5 code to set the callback that I'm going to use to response with my to respond with messages this is basically the gist rate I also can run this the exact same file system browser or you notice here those are the logs of the messages that I sent so oops I'm not writing anything in this case is the absolutely exact same code this is the exact same HTML that I used before but this time I'm browsing my windows file system in a single application you not here it was AB type previous time it was HTML web socket in this time that type is set anyway it works it can be done very easily and a few words about Jazz Band you can find here it's open source MIT license and it's basically a library which allows you to bind JavaScript to C++ support in many different backends so in this case it supports the safe particular way of binding 6+2 but it also support pure v8 it supports web like web kids javascriptcore it supports nodejs so if you have your sequence post application written with J's bind and you decide to switch from Seth to WebKit or to node module it you could presumably keep 100% of your existing C++ code because the binding the JavaScript she was binding is exactly the same but the same simple post code anyway so basically this is how the architecture looks in this case we have the browser process we have the render process we have inter process messages and we have some Jazz Band or other I know binding between C++ and JavaScript and this is where the controller part of our busy lives and there are more variants of when embedding a browser of course a cool thing about it this you could embed the browser in existing GUI that you have existing platform see if it's specific GUI that you've created and in this in this regard gilfs web engine is the clear winner because it's cute so it works with everything that you create with cute whereas safe doesn't provide anything for for you to use like platform specific GUI it provides like a handle to the actual browser window but that's it you do responsible to create in your own are you suggesting also what what if you want custom rendering say once a game or something that basically you want to the rendering not to be in the browser but in C++ now it could be in the browser browsers modern browser supports WebGL and what Joe is pretty powerful but if for example you web geo is not enough for you or you want DirectX or you want some other specific primary thing you have so you could do this you could render off-screen you could collect the pixels from the off-screen target that you've created and it can send them to the browser and this works this is something that we actually did company I used to work for before we had a game editor with a html5 GUI and it rammed the engine inside but the engine had its own OpenGL rendering so we render to the to an off-screen target geo read pixels send pixels to the browser and it then presents them with its own layout HTML layout in engine in the appropriate place in the appropriate ways you could get the browser screen to now say for example and kills web engine they both support way to do the opposite thing not read your own rendering data and send to the browser but read the browser is there any data and use it yourself and I have a small demo that does that too what I have here is an OpenGL application written in C++ it can rotate the cube oops and I have browser GUI over it I can click stuff here and I have like counters here live condom and revolutionize period up ok so more revolutions and this is C++ rendering with HTML GUI and I can also go here go back and open this same web page which is this one and of course this has no rendering because suppose post is not running behind this is just the HTML page that I've created ok out of time here anyway I have the demo for this but again as I said before for the browser server scenario there was lots of loads on the networking like new localhost networking but still it was copying data around in this case when we have the browser process and the render process they don't share other space for anything they're still copying of memory and you as I said before there's something that you might not want it could be okay though small Mons memory really fine so you could do you could write your code entirely in the render process you have to turn off sandboxing for you to be able to open file start threads and to other stuff that the operating system allows you to do but you could actually move your entire application in the renderer process this damn I'll skip it's pretty basic you basically shows this and when when you're working the render process you could also share memory JavaScript supports array buffers and you could basically have a buffer of C++ memory and just give it to JavaScript to work with opposite is also true now okay it's in memory and you can use it within C++ it's easy when you work in the renderer process in this case in the language of our diagram this would something like this you have the browser process which is grayed out because it's irrelevant you have the render process where the user interface and application run at the same application but it's still separate they're still separate languages using interfaces JavaScript your application C++ and they communicate synchronously by sharing memory in the same process if this could work so what's good about this you write your controller called the C++ we got that you could combine the browser UI with with the existing GUI that you've written for your platform and you could can work entirely in the render process what's bad about this well it seems the defense workflow is lost isn't it the NPM starting well now we have the browser process entirely in C++ but the things that that's not true we are embedding a browser and as I started I'm forbidding the browser from from opening the network the brother could not do that the browser could still open localhost something something and get the html5 content from there from presumably a node.js server and it could still run with net WebSocket it could run the inter process communication with our C++ back-end so it is not lost it can totally work and also that's not something that you need to release you might using a development on and when you're ready to release you disable this feature and you static HTML content to the browser from your suppose plus end and there are no multiple applications running and I have time okay let's say I do I'm running the 3d demo again and in my browser here my actual browser I'm gonna open another local server so this basically remote dev tools and remote dev tools works with both both safe and cute web we I don't have the simple tools rendering here because of course it's in my c++ part the the remote GUI has no way of knowing about it but still everything works I can oh my god it's black on black oops well this didn't happen everything works imagine the demos perfect my my set application crashed for some reason not sure yet why but if it works like I did it like million times before this talking now it's of course now it will crash anyway I won't do it again because I don't have that much time also if you don't want to do that of course mocking and front-end developers will tell you all about mocking my for example my file system browser things port smoking so if I open it in my browser here you see application type oh I still have the server running that's why it works oops not you mmm I don't have super running oh that's the Linux server okay okay so I disconnect in application type is mode and in this case I just have some a list of files and directories directly hard-coded in JavaScript for me to test application without any servers or any any application whatsoever so mocking basically works and your front-end developers you know all about it now the bugging multiple process is much harder than the bugging a single process and anyone have experienced multiple processes well luckily Visual Studio helps a lot and there are the tools I'm sure though I'm not familiar with all of these but Visual Studio currently is pretty powerful image processing and also if everything is in the render process you don't need to debug the browser process you only to the render process right also the only thing called single process mode now WebKit and chromium and Firefox supported I'm not sure about how it works when you're embedding WebKit but if you're embedding chromium you can basically run in single process mode and have your bra renderer processes actually be threads and not actual process now this is pretty dangerous don't do it for browsers but if you're serving your content contents you can do it the thing is though killed web engine dance for able see the process mode is impossible which kills web engine and it is possible with Seth but they officially don't support it so if you absolutely positively need single process mode you cannot use to release a single process mode you cannot use Seth and what cute web engine though if you only need for the billing purposes like mood process buggies hard I want to debug a single process with threads in debug mode is pretty viable solution with Seth to just don't release with it anyway but what if we want to go faster and I have to go faster because I'm out of time we won't support custom rendering we want support synchronous communication between the application and the web the web page and we also share one to share video memory and this approach 3 and I'm gonna be really brief with it because it's typically game dev territory and its really niche those are custom HTML renders and basically we're taking the render process out of the browser and using this alone as a library research libraries would have similar characteristics they will be similar to many existing good libraries they'll be graphics only so with the browser we don't have the input we don't have the networking we probably don't have sound to because it's rendering only and they will allow you in some way to bring your own renderer so they'll produce some kind of primitives that you will need to present on the screen your own and there at least some dominate a changes for example since there is no networking obviously there is no WebSocket in those custom applications custom libraries custom HTML renders and they have like their own custom ways of dealing with other application this is not valid HTML but this it's valid for for certain libraries this idea over there to be like a texture from your game that could be displayed in the browser UI and almost complete solutions exist like almost entirely the full html5 support is in there with certain exclusions and but none of them are free and open source there is ultra lite which is free for free software so you can play with it and basically still don't work it the author took WebKit removed everything that was in renderer from from it in packaged it up as a library so it basically works there's this theme coherent game face which is a totally custom html5 renderer made from scratch it's not free you have to write to the company if you want like a evaluation copy or something it's the complete custom implementation but we do know some things about their implementation because last year one of the authors talked did she pick on of other implementation of the custom html5 renderer those are some partial solutions note qml is also here qml is basically a partial html5 thing it doesn't support the html5 Dom is its own custom Dom and so your typical html5 developer wouldn't be just able to sit and write some cute but for example it could run react because react doesn't depend on the Dom and approach for oh my god approach else approach three and a half it's something that I need to say because we had to talk about it so it's probably this would be the first question we could actually compile suppose post we have assembly or as NGS we could rent in the browser have you application in the browser it's possible it might be something you want but this is not part of my talk because you will have to conform to the browser platform so I won't go into detail browser platform has no threads at least not in the way we suppose post programmers he used to having it has no file system access at least not in the way we are used to having many other platform specific stuff is associated with the browser platform but it is possible it's a viable solution and if you want to talk about this some more I have like a impromptu open compensation tonight late 8:30 p.m. and press 3 if you want to run the demos for example talk about it some more I'll help you run the demos on your own machines you can join me there and with that I thank you just a couple of things and first off I was surprised didn't mention anything that cross platform does this make generating cross platforms easier apps easier but you only need to write multiple URLs and then the other question is and tell me here electron you know it could be slack teams whatever everyone says I would just use tons of memory is that the case here is it the electron partners at the chromium well its combinations too because electron actually starts a JavaScript engine for for the browser process too and loads a lot of stuff with node.js specific stuff like to hit stuff in the browser process which your regular browser doesn't do it doesn't start javascript in the browser process but also chromium plain ol uses a lot of memory it's blazingly fast it uses power small very small amount power but it just use a lot of memory so the majority of that memory is I'd say chromium I thought the webview proposal for that oh right so I'm a I'm kind of curious what you what you think about what else we would want to add to it well solvent you know how I stop by at 8:30 sure yeah that would be the best place for us to talk about it some more I'm not sure that there's a lot of stuff and I'm not sure whether question here is the appropriate way but yeah sure like multi press support JavaScript support those are the most important things the brief if you cover the Brig then you should be also a little shorter Thanks so the the inter-process communication in the examples you are giving we're still over HTTP right so these are separate processes - yes it used platform-specific like we choose what chromium uses in chromium uses what's best for your platform yeah it could be pipes it could be like Windows has inter process communication with Windows even has shared memory though this is not what chromium doesn't Windows but it's it it's part of acidic solution but in your experience do you have any issues with firewalls for example trying to teach unity does the user have to enable itself with an embedded browser yeah no first time I hear that the firewall could have something to do with it chromium works like this if a firewall could mess up my staff application it'll mess a premium - right okay let's go to herb stop that [Applause]

Channel: CppCon

Views: 33,768

Keywords: Borislav Stanimirov, CppCon 2019, Computer Science (Field), C++

Id: bbbcZd4cuxg

Length: 57min 31sec (3451 seconds)

Published: Tue Oct 15 2019

Reddit Comments

[u/axiomer]

bringing the plague of js, html and electron embedded 1232131223214123612 MB web browser to the desktop software, feeling very nice to be alive . nice talk though but I just can't stand the topic

[u/k-mouse]

I'm happy to see he mentioned our library: RmlUi. We're still really small, so it was a nice positive surprise. Thanks for the nice talk.

We're about to release the 3.0 version of the library, so it might be a good time to check it out.

[u/GerwazyMiod]

Can't wait for some free time to watch this!

[u/istarian]

Ew. More like embrace bloated technology not appropriate for context.

[u/enetheru]

Every year when I watch these conference videos I find someone presenting a topic that in some way reflects my current project. Makes me feel like I should find a job as a developer.

At 15:50 the model describes how I interact with my arduino atmega2560, I built it a http/websocket server using c++ specifically for this purpose. The front-end is all http/css/javascript, and it just sends json strings over the websocket connection to update the interface, can be controller either with websocket or http requests.

In my case its necessary to have some network based communication either through the serial port or the ethernet, but for a local application I really don't see why you would tolerate the overhead.

[u/TarmoPikaro]

I think one of major question I would like to ask from presenter - is how it's possible to support code hotreloading within the context of C++ application embedded into any one alternatives. At the moment for example Vue/JS framework can support not only html, but also javascript code self-reload. I would want to eventually have similar kind of support on C++ side as well. Node JS does supports C++.so / .dll's, but it's load only once. Of course could be reprogrammed to have loadlibrary/dlopen/free loop, but that is already platform specific code. (Will require win/linux/mac kind of testing)