 So, good morning. I'm Ruhl. I work at Mweb, mostly on Witty, and so I'm going to talk about what Witty is exactly, how you can make a little simple Hello World style application with it, and how to create a larger application with stuff like templates and style sheets and internationalization features, and how you can maybe make it look a bit nicer without necessarily knowing a lot about CSS with Bootstrap. And where you can go from there and find more information about Witty. So, Witty is a server-side web framework written in C++. It is made for single-page applications, so you can make restful web services, but the API for it is currently a bit verbose. We're working on that. And making websites is also possible, like our own website is made with Witty, but our strong point is really single-page web applications that act like desktop applications. And it's very inspired by Qt, so it's widget-based, so it doesn't... We work on a widget level, not on a page level or request level. And it's a complete abstraction of many web technologies, and it adapts to whatever technologies are available, so you don't actually need JavaScript in your browser, but if you have JavaScript, we will use it, and you don't have to write any JavaScript. So, I get this question a lot, like, why would you use C++ for web development? Well, I mean, my immediate rebuttal would be to why would you use JavaScript for web development, because people love to use that these days. But this is a quote by Matt Cobb-Bolt of Cobb-Bolt.org fame. At CPPCon, he said, I know we sometimes give C++ a bit of a bad rap for having funny defaults and weird odd edge cases, but just take a look at JavaScript, really. And I think, like, you can avoid a lot of the weird stuff in C++ quite easily, and JavaScript is much more in your face. There are people who might say, oh, yeah, but C++, what about these low-level vulnerabilities, but really the biggest threats are still cross-site scripting and C-Serve and SQL injection, and WITI defends against all of those. Like, we don't spend too much time when using WITI thinking about those kinds of threats because it's handled by the framework. And if you just use best practices and the right tools, like turn on all of your compiler warnings, use Valgrant, address sanitizer, use static analysis tools, it's really not that big of a deal, and you can find a lot of problems that way. It's also a very small footprint, which is especially interesting for embedded development. So there's no garbage, so no garbage collection. You don't need a runtime, you just need, like, it's just a Unix-like kernel environment, that's enough. And creating small, statically linked binaries is possible. Like, with the right compilation flags, you can turn the Widget Gallery, which is our largest example that uses a lot of the widgets in WITI. You can get it down to, like, six megabytes or something. And it's quite familiar to Q developers. Q developers know C++, they know C++ for desktop developments, and it's easy for them to port those applications to the web because there are benefits to having stuff on the web instead of as a desktop application. And in terms of ecosystem, like, you can just use WITI for your web related stuff and use NEC or C++ library for everything else. You don't need, like, awkward native wrappers or something like that. You can just use all those native libraries that are out there. So WITI 4 was released in September of 2017, and it updates WITI to C++ 11. And it's about time. And, like, nowadays, like most of these cross compilation tool chains, they will usually have at least GCC5. I know, like, OpenWRT, the current stable release is still on GCC4.something. But LEDE, WITI already built with that. And then the next release, WITI also built with that. So I'm going to show you how to make this simple Hello World style application. So just something that shows Hello World is maybe a bit boring. So this one asks for your name. It says your name, please. And then you can enter your name in this box. And then there's a button you can click or you can press enter inside of the box and you get a greeting. So, of course, every C++ application starts with a main function. And in our main function, we're going to create WServer instance using this special WRUN function. And so this WRUN function takes your command line arguments and configures the server with them, like which port to listen to, stuff like that. And then it starts accepting connections. It gets a new connection. It calls this callback. And this callback then gets the W environment, which is like user-range agent information, stuff about the current session. And then in this callback, you have to create a new instance of W application and return that. So that means that there's one instance of W application per session. So you kind of create the illusion that every user is using their own application even though it could be running all in the same process. So if you ran that code, that would work, but you'd get an empty page. So let's start populating it. So this empty page already has a div element inside of it. That's roots. So we're going to add a WContainer widget. It's just a widget that you can put stuff into. And so we're going to add a WText. So you make a new WText, give it some string, and then use AddWidget to add it, which is a bit for both. So we shorten that to just add new, which is exactly the same. Then we'll create a line at it, which is our input. And then add new also returns a raw pointer so that we can refer to this editor later. And we add a button. Similarly, add a break. I know this is really verbose way of adding a break, but really when you're using templates or you're using layouts, you don't end up doing this. And then we just put a little placeholder in. That's like an empty WText. We set the text format of it to plain because the default format is just filtered XHML. And then we'll create a lambda function, which will be our slots. And this slot, it calls setText onResults to set our greeting. And then the WString is passed in, which is our special kind of string, which is UTF-8 encoded, unlike STDString, which does not say anything about the encoding. And it has localization features, which I'll get to later. And it has this argument substitution feature, so you can say .org. And you get the text from the edits and put it in there in the string. And then you can just connect up the signal, so you connect the enterprise signal of the edits to the show greeting function and connect a clicked function of the button to show greet function 2. So that's the final code. And so to run, to build and run it, you do it like any other C++ application. You just need to make sure that you've got your includes and your lips rights. And you link with LLibWitty and LibWitty HTTP when you're building a release build, and with LibWittyD and LibWitty HTTPD if you're doing a debug build. And so you run it, then, but while there are two arguments that you always have to give it, and that's the doc routes, which is where all of your static contents resides, and HTTP listen to indicate which host is important to listen on. So I'm going to show you this application. If we go to localhost8080, we enter a name, press return, or click the button, then you get the screening. And now to kind of demonstrate that this still works when you turn off JavaScript, because, well, I'll actually first show the network tab. You see, when I do something here, you see that that was actually a little post that just returns a tiny response, and then we turn off JavaScript. It still works, but now it did a full new request, which returned a full HTML page. And when you turn the WebSockets on, so you give it the extra arguments, with the config. So we've got this with the config file, which just turns on WebSockets. And then when I run it again, then you see this, you see this 101 status. So now it's sending everything in WebSocket frames. And the window is a bit small for it. Okay, so we made a simple application now, but it doesn't look pretty yet. If you're making larger applications, you might want to use a better way than just always adding widgets and just doing everything from C++. So the classic way to design your full application would be to use layouts, which is just like using layouts in GUI frameworks like huge. But we're going to use templates. So for templates, you will have to use HTML and CSS, but if you're not really strong in CSS, you can also use Bootstrap. So the typical project structure is a bit like this. So you get your main directory, where all of your stuff resides, like you could put your binaries there or whatever. And then there will be app routes in there. And the app route contains stuff like configuration of your application, your template files or SQLite databases or internationalization files. So for example, we'll have a template.xml, which is a template. Strings.xml and strings underscore nl.xml, which are our English and Dutch translations. And then widget underscore config.xml, which is our widget configuration. And then in the doc route, we'll put all of our static web contents, like images or style sheets. And we'll just have a simple style.css. So this template.xml will contain something like this. So you have messages on the outside, tag, and then you define different messages. And we'll call this one tpl.templates. This is just a convention that I'm using for convenience here, so you can call it anything you want. But I'm using a tpl prefix to make it clear that it's a template. And then you see edit, ptn, and resolve. Those are variables, and those we're going to put some stuff in later. There's a special one that's a function call, so it calls the tr function with sdr.prompt argument. And the strings.xml file is actually the same kind of file. So it also has messages on the outside, and then you define all of your different translations that way. And our style.css is just a simple, let's say it's deformed to sans serif. And then when you want to load your style sheets, you have to use the message resource bundle of the app and call the use function, and then you give it the path to the app route, which is inside of this app route, where you can retrieve it with the app route function. And then you add templates or strings to load the strings. And you don't need to add the dot.xml that will be added automatically. So if you notice that there is no loading of strings.xml, it will also automatically load that when the text that the locale is in Dutch. And then you can also add a style sheet with new style sheets. So let's define our template now. So this is a way that you can extend widgets to build larger widgets. So we'll just inherit from W Templates. And first, we'll initialize that with our strings. So we'll use a tr function to retrieve tpl.templates. And then you can register this tr function that we're using. And then you create a new w-line edit again, but then you bind it to this edited variable with bind-widgets. And we also have a shorter form of that bind-new. So we bind a new push button to the btm variable. And then every subsequent argument is just passed into the constructor of a w-push button. So we also use the tr function to get this greet me message. And now we'll leave the results empty for now. Then we're going to find this showGreeting function like this. So we could have captured the edits, but to show another feature, you can also use the result function, which will try to find this variable inside of your templates. And if it finds it and if it can cast it to the type you give it, then it will return a pointer to that. Otherwise, it will just return null pointer. And then you can, and then with bind string, you can bind a string to a variable. So we'll use this results string and then set the text formats to plain again because the default is XHML. And then we connect our signals like before. And our new main function just becomes the using of the template and strings installed at CSS. And then we create our new hello templates. So building a running is the same, except that now you have to pass in the app root so it knows where to find that one. So when you run that, it looks like this. But I'm not going to show any more code in this editor. So we have a new... Well, now it looks a bit nicer because you have a sensor font and it still works. And now when I change my language to Dutch, then it automatically changed the language. So I just changed it in my browser and Witte will automatically use the right message resource bundle. So, okay. So if you want to be a bit more lazy and you want to make something that looks nice quite quickly, you could use Bootstrap. So Witte has support for teaming. So we support Bootstrap 2 and 3 currently, not 4 yet. So you create a new Bootstrap team, you set the version to 3 and then you set the theme and that will automatically include all the necessary CSS for Bootstrap and it will add the appropriate classes to the appropriate widgets and Witte's own custom widgets will also be in Bootstrap kind of style. So the template.xml, we can change it by adding another... There's another feature of variables like you can add a class to it. So we set the class of the button to BGM primary. So Witte already adds a BGM, but then we also add BGM primary to make it a bit more fancier button. And we'll also use the ID function to make the label a proper label. So it's like an ID for the edits and the edit variable is defined in the same templates. And then you just add some Bootstrap sauce. And the results. We want to put that in a nice box so we'll just add a box around it, but we don't want to always show the box so then we can use a condition. So the condition is kind of a cross between a variable and a tag. So when this condition is true then this block of the template is used. So then we can add this ID function again and then the default value of a condition is false so in our callback we'll set the condition with that condition to true. And then you run that the same but you have to make sure that you also specify the resources there, which is the place where all the Witte resources are located. So this will make sure that it finds all of the Bootstrap style sheets and stuff like that. So if I run that one then it looks a bit nicer and then you can enter your name and it shows like a nice little box. And so where do you go from here? So we know how to make a simple Hello World application. We can make it look a bit nicer with templates and stuff. So there are some tutorials so the hands-on introduction to Witte you probably don't need anymore now but there's also an introduction to Witte DBO or ORM or authentication stuff in Witte Hof and there's just a general Witte library overview that you can read. You can of course also find the reference manual on our website and our widget gallery is another good resource if you want to find out more about all of the widgets that are in Witte so they always have so we have stuff like 3D charts for example we have 2D charts, all sorts of stuff and there's always like a little code sample underneath the example that it shows you how to use it. And the last thing is you can of course go to the source code at GitHub and sorry and in this source code repository you can find examples and especially interesting are these feature examples which zoom in on just a single feature and give you the minimum application that kind of demonstrates it and that was it, thank you.