INTRODUCTION TO WEB DEVELOPMENT IN C++ WITH WT 4 https://www.webtoolkit.eu/wt Roel Standaert FOSDEM 2018 CONTENTS ● What is Wt? ● A simple “Hello world” ● Creating a larger application, with: – Templates – Style sheets – i18n ● Being lazy efficient with Bootstrap ● Where to go from here? Introduction to web development in C++ with Wt 4 2 WHAT IS WT? ● A server side web framework written in C++ ● Made for single page applications – REST is possible, API currently verbose – Websites also possible: e.g. webtoolkit.eu ● Inspired by Qt → widget based ● Abstraction of web technologies, adapts to what’s available. No JavaScript required. Introduction to web development in C++ with Wt 4 3 WHY C++? “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.” – Matt Godbolt at CppCon 2017, youtu.be/bSkpMdDe4g4?t=2870 Introduction to web development in C++ with Wt 4 4 WHY C++? ● Low level vulnerabilities? – XSS, CSRF and SQL injection are larger threats – Use best practices and tools (compiler warnings, Valgrind, asan,...) ● Small footprint: no garbage, no runtime, create small statically linked binaries ● Familiar to Qt developers ● Ecosystem: Wt for web, any C or C++ library for everything else Introduction to web development in C++ with Wt 4 5 WT 4 ● Released in September 2017 ● C++11: it’s about time Introduction to web development in C++ with Wt 4 6 HELLO WORLD! Click "Greet me!" (or press Enter): Introduction to web development in C++ with Wt 4 7 HELLO WORLD! #include <Wt/WApplication.h> #include <Wt/WServer.h> int main(int argc, char *argv[]) return Wt::WRun(argc, argv, [](const Wt::WEnvironment &env){ auto app = std::make_unique<Wt::WApplication>(env); // ... return app; }); + ● WRun: creates WServer instance, and accepts connections Introduction to web development in C++ with Wt 4 8 HELLO WORLD! #include <Wt/WApplication.h> #include <Wt/WServer.h> int main(int argc, char *argv[]) return Wt::WRun(argc, argv, [](const Wt::WEnvironment &env){ auto app = std::make_unique<Wt::WApplication>(env); // ... return app; +); + ● WRun: creates WServer instance, and accepts connections ● New connection → callback is called Introduction to web development in C++ with Wt 4 9 HELLO WORLD! #include <Wt/WApplication.h> #include <Wt/WServer.h> int main(int argc, char *argv[]) return Wt::WRun(argc, argv, [](const Wt::WEnvironment &env){ auto app = std::make_unique<Wt::WApplication>(env); // ... return app; }); + ● WRun: creates WServer instance, and accepts connections ● New connection → callback is called ● WEnvironment describes “environment”, e.g. user agent information Introduction to web development in C++ with Wt 4 10 HELLO WORLD! #include <Wt/WApplication.h> #include <Wt/WServer.h> int main(int argc, char *argv[]) return Wt::WRun(argc, argv, [](const Wt::WEnvironment &env){ auto app = std::make_unique<Wt::WApplication>(env); // ... return app; }); + ● WRun: creates WServer instance, and accepts connections ● New connection → callback is called ● WEnvironment describes “environment”, e.g. user agent information ● Callback returns unique_ptr to WApplication. Introduction to web development in C++ with Wt 4 11 HELLO WORLD! #include <Wt/WApplication.h> #include <Wt/WServer.h> int main(int argc, char *argv[]) return Wt::WRun(argc, argv, [](const Wt::WEnvironment &env){ auto app = std::make_unique<Wt::WApplication>(env); // ... return app; }); + ● WRun: creates WServer instance, and accepts connections ● New connection → callback is called ● WEnvironment describes “environment”, e.g. user agent information ● Callback returns unique_ptr to WApplication. → One instance of WApplication per session Introduction to web development in C++ with Wt 4 12 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* // WContainerWidget *root (<div>) Introduction to web development in C++ with Wt 4 13 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* // add a new WTe0t (<span>) root,>addWidget(#td!:make(unique<Wt!!WTe0t>(12our name, please? 1))* Introduction to web development in C++ with Wt 4 14 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* // add a new WTe0t, using the addNew shorthand root,>addNe.<Wt:!WText>("2our name, plea#e? ")* Introduction to web development in C++ with Wt 4 15 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* root,>addNew<Wt:!WText>("2our name, plea#e? ")* // add a W5ineEdit (<input t6pe&"text1>) Wt!!WLineEdit* edit = root->add4ew<Wt!:W5ineEdit>(); Introduction to web development in C++ with Wt 4 16 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* root,>addNew<Wt:!WText>("2our name, plea#e? ")* Wt!!WLineEdit* edit = root->add4ew<Wt!:W5ineEdit>(); // add a W7ushButton (<button>) auto btn = root->addNe.<Wt!!WPu#hButton>(1:reet me;1)* Introduction to web development in C++ with Wt 4 17 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* root,>addNew<Wt:!WText>("2our name, plea#e? ")* Wt!!WLineEdit* edit = root->add4ew<Wt!:W5ineEdit>(); auto btn = root->addNe.<Wt!!WPu#hButton>(1:reet me;1)* // add a W8reak (<br>) root,>addNew<Wt:!WBrea'>()* Introduction to web development in C++ with Wt 4 18 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* root,>addNew<Wt:!WText>("2our name, plea#e? ")* Wt!!WLineEdit* edit = root->add4ew<Wt!:W5ineEdit>(); auto btn = root->addNe.<Wt!!WPu#hButton>(1:reet me;1)* root,>addNew<Wt:!WBrea'>()* // empt6 W/ext in Plain format (de<ault is <iltered =>/?L) auto re#ult = root->addNe.<Wt!!WTe0t>(); result->setTe0tFormat(Wt:!Te0tFormat:!Plain)* Introduction to web development in C++ with Wt 4 19 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* root,>addNew<Wt:!WText>("2our name, plea#e? ")* Wt!!WLineEdit* edit = root->add4ew<Wt!:W5ineEdit>(); auto btn = root->addNe.<Wt!!WPu#hButton>(1:reet me;1)* root,>addNew<Wt:!WBrea'>()* auto re#ult = root->addNe.<Wt!!WTe0t>(); result->setTe0tFormat(Wt:!Te0tFormat:!Plain)* // create a lambda <unction auto sho.:reeting = [edit,re#ult]{ re#ult->#et/ext(Wt!!WString(">ello, A+;1).arg(edit->text())); +* Introduction to web development in C++ with Wt 4 20 HELLO WORLD! (CONTINUED) auto app = ... auto root & app->root()* root,>addNew<Wt:!WText>("2our name, plea#e? ")* Wt!!WLineEdit* edit = root->add4ew<Wt!:W5ineEdit>(); auto btn = root->addNe.<Wt!!WPu#hButton>(1:reet me;1)* root,>addNew<Wt:!WBrea'>()* auto re#ult = root->addNe.<Wt!!WTe0t>(); result->setTe0tFormat(Wt:!Te0tFormat:!Plain)* auto sho.:reeting = [edit,re#ult]{ re#ult->#et/ext(Wt!!WString(">ello, A+;1).arg(edit->text())); +* // connect signal# edit,>enterPre##ed().connect(sho.:reeting); 9tn->clicked().connect(sho.:reeting); Introduction to web development in C++ with Wt 4 21 HELLO WORLD! (FINAL CODE) Introduction to web development in C++ with Wt 4 22 BUILD AND RUN Release: c++ -std=c++14 -O3 -DNDEBUG -o hello.wt hello.cpp \ -I/path/to/wt/include -L/path/to/wt/lib \ -lwt -lwthttp Debug: c++ -std=c++14 -O0 -g3 -o hello.wt hello.cpp \ -I/path/to/wt/include -L/path/to/wt/lib \ -lwtd -lwthttpd Run: ./hello.wt --docroot . --http-listen localhost:8080 --docroot: Where to serve static content from --http-listen: host and port to listen on (0.0.0.0 for any IPv4, [0::0] for any IPv6) Introduction to web development in C++ with Wt 4 23 DEMO Introduction to web development in C++ with Wt 4 24 CREATING LARGER WT APPLICATIONS ● Classic: using layouts: – WBoxLayout, WGridLayout, WBorderLayout ● Using templates: – HTML and CSS (if CSS isn’t your forte, there’s Bootstrap) Introduction to web development in C++ with Wt 4 25 TYPICAL PROJECT STRUCTURE m6,.t,app/ Configuration, templates, approot/ SQLite database, i18n,... template#.0ml Templates #tring#.0ml English strings #tring#(nl.0ml Dutch strings .t(con<ig.0ml Wt configuration docroot/ Static web content #t6le.c## CSS stylesheet Introduction to web development in C++ with Wt 4 26 TEMPLATE.XML <?xml version="1.0" encoding="UTF-8"?> <messages> <message id="tpl.template"> ${tr:str.prompt} ${edit} ${btn} <9r /> ${result} </message> </messages> ${variable} ${function:args} Introduction to web development in C++ with Wt 4 27 TEMPLATE.XML <?xml version="1.0" encoding="UTF-8"?> <messages> <message id="tpl.template"> ${tr:str.prompt} ${edit} ${btn} <br /> ${result} </message> </messages> ${variable} ${function:args} Introduction to web development in C++ with Wt 4 28 STRINGS.XML <30ml ver#ion&1A.J1 encoding&1G/@,K13> <me##age#> <me##age id&1#tr.prompt1>7lea#e enter 6our name!</me##age> <me##age id&1#tr.greet,me1>:reet me</me##age> <me##age id&1#tr.re#ult1>>ello, A+;</me##age> </me##age#> STRINGS_NL.XML <30ml ver#ion&1A.J1 encoding&1G/@,K13> <me##age#> <me##age id&1#tr.prompt1>Moer Nou. naam in!</me##age> <me##age id&1#tr.greet,me1>8egroet me</me##age> <me##age id&1#tr.re#ult1>>allo, A+;</me##age> </me##age#> Introduction to web development in C++ with Wt 4 29 STYLE.CSS body { font-family: sans-serif; + Introduction to web development in C++ with Wt 4 30 LOADING TEMPLATES, STRINGS & STYLESHEETS // load approot/template.xml app->messageResourceBundle().use( app->appRoot() + "template"); // load approot/strings.xml // (or approot/strings_nl.xml) app->messageResourceBundle().use( app->appRoot() + "strings"); // add stylesheet app->useStyleSheet("style.css"); Introduction to web development in C++ with Wt 4 31 HELLOTEMPLATE class HelloTemplate : public Wt::WTemplate { public: HelloTemplate(); +* Introduction to web development in C++ with Wt 4 32 HELLOTEMPLATE (CONTINUED) HelloTemplate::HelloTemplate()