Making Static Sites More Dynamic
With Serverless B y Rouven Weßling
Slide 1
Slide 2
Rouven Weßling Web Developer, lover of APIs, cake and whisky @RouvenWessling
Slide 3
Don’t let a CMS get in the way of
shipping software. Contentful provides a content infrastructure that enables
teams to power content in any digital product.
Slide 4
What we’ll do today • A brief history of static website • Why static sites are awesome • Why and how to combine static sites and serverless
Slide 5
Websites
Static A brief history
Slide 6
THE FIRST WEBSITE WAS A STATIC SITE
Slide 7
• Every website was static • Layout wasn’t a thing - everything was one vertical flow. • Link management was manual LET’S DEVELOP LIKE ITS 1991
Slide 8
Developer Workstation Webserver Browser
Slide 9
FIRST WEBSEARCH
Slide 10
FIRST WEBCOMIC
Slide 11
Photo by Pamela Saunders on Unsplash • CGI was introduced in 1994 • Rasmus Lerdorf releases his “Personal Home Page Tools ” in 1995 • Brendan Eich writes the prototype for JavaScript in 1995 THINGS GOT DYNAMIC
Slide 12
Developer Workstation Webserver Browser Database
Slide 13
E-COMMERCE IS TAKING OFF
Slide 14
YOUR OWN SPACE
Slide 15
Photo by rawpixel.com on Unsplash • Microsoft ASP was releases in 1996, Sun JSP in 1999 • Hosting a dynamic, CMS, based website became easy
• Microsoft FrontPage and Marcomedia Dreamweaver released in 1996 and 1997 IT’S A BUSINESS NOW
Slide 16
Developer Load balancer Browser Database Application server Editors SCM
Slide 17
APPS ON THE WEB
Slide 18
Photo by Brooke Lark on Unsplash • XMLHttpRequest was part of IE5 in 1999 • SPA have been discussed since 2003 • jQuery was published in 2006, AngularJS in 2009 I GOT THE POWER
Slide 19
Modern static site builders
Slide 20
GITHUB
Slide 21
Slide 22
Static Site Host Browser Build server Developers SCM Editors
Slide 23
Middleman Hexo
Slide 24
IT JUST MAKES YOUR LIFE EASIER CDNs are trivial to set up. Since every file gets delivered to every user as-is, no complex logic is necessary. Trivial caching Shuffling bytes from storage to the network is what servers are great at. Great performance Without a server-side application or database the attack surface is minimal. No Security issues No random 500 errors, no dropped database connections. Easy maintenance
Slide 25
“This project is too complex. A static site won’t do.“
Slide 26
Common requirements 01 “Our editors don’t know git, they need a GUI.” 0 2 “We have a lot of content, we need full-text search.” 04 “We’re running an online shop. You can’t do that with a static site.” 03 “Our contact forms needs to send an email.” Photo by Š tefan Š tefan č ík on Unsplash
Slide 27
• AWS got started in 2002, Lambda added in 2014 • Roy Fielding defines REST in his 2000 PhD dissertation • Twilio was founded in 2007; Stripe in 2011 A CLOUD AND AN API WALK INTO A BAR Photo by Stanford Smith on Unsplash
Slide 28
Serverless Architectures
Slide 29
Source: h ttps://martinfowler.com/bliki/Serverless.html
Slide 30
A NEW BREED OF STATIC SITE GENERATORS Seamlessly combining static sites and single page applications Blazing-fast static site generator for React Universal Vue.js Applications
Slide 31
How does that solve anything?
With great services
Slide 32
3 WAYS OF ACCESSING A SERVICE Browser Build Function
Slide 33
A content infrastructure service - or a headless CMS - gives editors the graphical interface they need. You content becomes just an API. 01 “Our editors don’t know git, they need a GUI.” Browser Build Function
Slide 34
Static Site Host Browser Build server Developers SCM Editors Content Infrastructure
Slide 35
Using a Search-as-a-Service provider not only saves you from running your own search infrastructure but also allows integrating multiple content providers into one search. 0 2 “We have a lot of content, we need full-text search.” Browser Build
Slide 36
Static Site Host Browser Build server Developers SCM Editors
Slide 37
Cloud email services are a de facto standard in modern architectures but they’re not accessible from the client. A tiny bit of glue code hosted on a FaaS platform bridges the gap. 03 “Our contact forms needs to send an email.” Browser Function AWS Lambda
Slide 38
const sendGridConfig = {api_user: 'SENDGRID_USERNAME' , api_key: 'SENDGRID_PASSWORD' }; const transporter = nodemailer. createTransport ( sgTransport ({auth: sendGridConfig})); const sendMail = pify (transporter.sendMail); exports. handler
function (event, context) {
const templateDir = path. join (__dirname, 'templates' , event.template);
const template = new
EmailTemplate (templateDir);
const render = pify (template.render); template. render (event.context) . then (result => { event.text = result.text; event.html = result.html;
return
sendMailAsync (event); }) . then (() => context. done ( null , {message: 'Yaay success' }))) . catch (() => context. done ( new
Error ( 'Something went wrong!' ))); }; HOW TINY?
Slide 39
Static Site Host Browser Build server Developers SCM Editors Sendgrid AWS Lambda
Slide 40
Combing a payment processing service and a shopping cart platform allows you to run your entire business off a static site. 04 “We’re running an online shop. You can’t do that with a static site.” Browser Build Function
Slide 41
Static Site Host Browser Build server Developers SCM Editors Snipcart
Slide 42
Bringing it all together
Slide 43
Static Site Host Browser Build server Developers SCM Editors Content Infrastructure Sendgrid AWS Lambda Snipcart
Slide 44
AND MANY MORE
Slide 45
COMBINING STATIC SITES AND SERVERLESS Dynamic resources are hidden behind APIs and well defined routes - everything else can be cached. Easy caching Static things are instant; dynamic things are fast. Great performance Every dynamic function is a limited service with only the necessary permissions. Isolated services improve security Most services can be handled by 3rd parties requiring no maintenance. Easy maintenance
Slide 46
Visit our booth and win Daily End-of-show
Slide 47
ROUVEN WEßLING Twitter: @ RouvenWessling Email: rouven @contentful.com
GitHub: @realityking
