INTRODUCTION TO WEB DEVELOPMENT IN C++ WITH WT 4 - PowerPoint PPT Presentation

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 effjcient 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! # i n c l u d e < W t / W A p p l i c a t i o n . h > # i n c l u d e < W t / W S e r v e r . h > i n t m a i n ( i n t a r g c , c h a r * a r g v [ ] ) { r e t u r n W t : : W R u n ( a r g c , a r g v , [ ] ( c o n s t W t : : W E n v i r o n m e n t & e n v ) { a u t o a p p = s t d : : m a k e _ u n i q u e < W t : : W A p p l i c a t i o n > ( e n v ) ; / / . . . r e t u r n a p p ; } ) ; } ● WRun un: creates WServer instance, and accepts connections Introduction to web development in C++ with Wt 4 8

HELLO WORLD! # i n c l u d e < W t / W A p p l i c a t i o n . h > # i n c l u d e < W t / W S e r v e r . h > i n t m a i n ( i n t a r g c , c h a r * a r g v [ ] ) { r e t u r n W t : : W R u n ( a r g c , a r g v , [ ] ( c o n s t W t : : W E n v i r o n m e n t & e n v ) { a u t o a p p = s t d : : m a k e _ u n i q u e < W t : : W A p p l i c a t i o n > ( e n v ) ; / / . . . r e t u r n a p p ; } ) ; } ● WRun un: creates WServer instance, and accepts connections ● New connection → callback is called Introduction to web development in C++ with Wt 4 9

HELLO WORLD! # i n c l u d e < W t / W A p p l i c a t i o n . h > # i n c l u d e < W t / W S e r v e r . h > i n t m a i n ( i n t a r g c , c h a r * a r g v [ ] ) { r e t u r n W t : : W R u n ( a r g c , a r g v , [ ] ( c o n s t W t : : W E n v i r o n m e n t & e n v ) { a u t o a p p = s t d : : m a k e _ u n i q u e < W t : : W A p p l i c a t i o n > ( e n v ) ; / / . . . r e t u r n a p p ; } ) ; } ● WRun un: creates WServer instance, and accepts connections ● New connection callback is called → ● WEnv nviron onment nt describes “environment”, e.g. user agent information Introduction to web development in C++ with Wt 4 10

HELLO WORLD! # i n c l u d e < W t / W A p p l i c a t i o n . h > # i n c l u d e < W t / W S e r v e r . h > i n t m a i n ( i n t a r g c , c h a r * a r g v [ ] ) { r e t u r n W t : : W R u n ( a r g c , a r g v , [ ] ( c o n s t W t : : W E n v i r o n m e n t & e n v ) { a u t o a p p = s t d : : m a k e _ u n i q u e < W t : : W A p p l i c a t i o n > ( e n v ) ; / / . . . r e t u r n a p p ; } ) ; } ● WRun un: creates WServer instance, and accepts connections ● New connection callback is called → ● WEnv nviron onment nt describes “environment”, e.g. user agent information ● Callback returns u to WApp Applicat cation on. n i q u e _ p t r Introduction to web development in C++ with Wt 4 11

HELLO WORLD! # i n c l u d e < W t / W A p p l i c a t i o n . h > # i n c l u d e < W t / W S e r v e r . h > i n t m a i n ( i n t a r g c , c h a r * a r g v [ ] ) { r e t u r n W t : : W R u n ( a r g c , a r g v , [ ] ( c o n s t W t : : W E n v i r o n m e n t & e n v ) { a u t o a p p = s t d : : m a k e _ u n i q u e < W t : : W A p p l i c a t i o n > ( e n v ) ; / / . . . r e t u r n a p p ; } ) ; } ● WRun un: creates WServer instance, and accepts connections ● New connection callback is called → ● WEnv nviron onment nt describes “environment”, e.g. user agent information ● Callback returns u to WApp Applicat cation on. n i q u e _ p t r → One instance of WApplication per session Introduction to web development in C++ with Wt 4 12

HELLO WORLD! (CONTINUED) a u t o a p p = . . . a u t o r o o t = a p p - > r o o t ( ) ; / / W C o n t a i n e r W i d g e t * r o o t ( < d i v > ) Introduction to web development in C++ with Wt 4 13

HELLO WORLD! (CONTINUED) a u t o a p p = . . . a u t o r o o t = a p p - > r o o t ( ) ; / / a d d a n e w W T e x t ( < s p a n > ) r o o t - > a d d W i d g e t ( s t d : : m a k e _ u n i q u e < W t : : W T e x t > ( " Y o u r n a m e , p l e a s e ? " ) ) ; Introduction to web development in C++ with Wt 4 14

HELLO WORLD! (CONTINUED) a u t o a p p = . . . a u t o r o o t = a p p - > r o o t ( ) ; / / a d d a n e w W T e x t , u s i n g t h e a d d N e w s h o r t h a n d r o o t - > a d d N e w < W t : : W T e x t > ( " Y o u r n a m e , p l e a s e ? " ) ; Introduction to web development in C++ with Wt 4 15

HELLO WORLD! (CONTINUED) a u t o a p p = . . . a u t o r o o t = a p p - > r o o t ( ) ; r o o t - > a d d N e w < W t : : W T e x t > ( " Y o u r n a m e , p l e a s e ? " ) ; / / a d d a W L i n e E d i t ( < i n p u t t y p e = " t e x t " > ) W t : : W L i n e E d i t * e d i t = r o o t - > a d d N e w < W t : : W L i n e E d i t > ( ) ; Introduction to web development in C++ with Wt 4 16

HELLO WORLD! (CONTINUED) a u t o a p p = . . . a u t o r o o t = a p p - > r o o t ( ) ; r o o t - > a d d N e w < W t : : W T e x t > ( " Y o u r n a m e , p l e a s e ? " ) ; W t : : W L i n e E d i t * e d i t = r o o t - > a d d N e w < W t : : W L i n e E d i t > ( ) ; / / a d d a W P u s h B u t t o n ( < b u t t o n > ) a u t o b t n = r o o t - > a d d N e w < W t : : W P u s h B u t t o n > ( " G r e e t m e ! " ) ; Introduction to web development in C++ with Wt 4 17

HELLO WORLD! (CONTINUED) a u t o a p p = . . . a u t o r o o t = a p p - > r o o t ( ) ; r o o t - > a d d N e w < W t : : W T e x t > ( " Y o u r n a m e , p l e a s e ? " ) ; W t : : W L i n e E d i t * e d i t = r o o t - > a d d N e w < W t : : W L i n e E d i t > ( ) ; a u t o b t n = r o o t - > a d d N e w < W t : : W P u s h B u t t o n > ( " G r e e t m e ! " ) ; / / a d d a W B r e a k ( < b r > ) r o o t - > a d d N e w < W t : : W B r e a k > ( ) ; Introduction to web development in C++ with Wt 4 18