Static websites have recently gained a lot of popularity and static site builders have become mature tools to build websites. Static websites are secure, reliable, easy to scale and require little maintenance. But static doesn’t always cut it. Sometimes we need to have a full-text search, an interface for editors who can’t work with git, or an even an online shop. At this point, the obvious solution is to turn to a CMS or to write an application that renders pages dynamically for each visitor. In the process, we have to work with all the problems of a traditional web application. In this talk, Rouven will give an overview how serverless technologies can be used to cover these dynamic use-cases without sacrificing the advantages of a static site.

1. Making Static Sites More Dynamic
With Serverless
By Rouven Weßling

2. Rouven Weßling
Web Developer, lover of APIs, cake and whisky
@RouvenWessling

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.

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

5. WebsitesStatic
A brief history

6. THE FIRST WEBSITE
WAS A STATIC SITE

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

8. DeveloperWorkstationWebserverBrowser

9. FIRST WEBSEARCH

10. FIRST WEBCOMIC

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

12. DeveloperWorkstationWebserverBrowser
Database

13. E-COMMERCE IS TAKING OFF

14. YOUR OWN SPACE

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

16. DeveloperLoad balancerBrowser
DatabaseApplication server
Editors
SCM

17. APPS ON THE WEB

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

19. Modern static site builders

20. GITHUB

22. Static Site HostBrowser Build server
Developers
SCM
Editors

23. Middleman Hexo

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

25. “This project is too complex.
A static site won’t do.“

26. Common requirements
01
“Our editors don’t know git,
they need a GUI.”
02
“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

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

28. Serverless Architectures

29. Source: https://martinfowler.com/bliki/Serverless.html

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

31. How does that solve anything?
With great services

32. 3 WAYS OF ACCESSING A SERVICE
BrowserBuild Function

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.”
BrowserBuild Function

34. Static Site HostBrowser Build server DevelopersSCM
EditorsContent Infrastructure

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.
02
“We have a lot of content,
we need full-text search.”
BrowserBuild

36. Static Site HostBrowser Build server DevelopersSCM
Editors

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

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?

39. Static Site HostBrowser Build server
Developers
SCM
Editors
SendgridAWS Lambda

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.”
BrowserBuild Function

41. Static Site HostBrowser Build server
Developers
SCM
Editors
Snipcart

42. Bringing it all together

43. Static Site HostBrowser Build server DevelopersSCM
EditorsContent Infrastructure
Sendgrid
AWS Lambda Snipcart

44. AND MANY MORE

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

46. Visit our booth and win
Daily End-of-show

47. ROUVEN WEßLING
Twitter: @RouvenWessling
Email: rouven@contentful.com
GitHub: @realityking