Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Static Websites More Dynamic With Serverless

236 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Making Static Websites More Dynamic With Serverless

  1. 1. Making Static Sites More Dynamic With Serverless By Rouven Weßling
  2. 2. Rouven Weßling Web Developer, lover of APIs, cake and whisky @RouvenWessling
  3. 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. 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. 5. WebsitesStatic A brief history
  6. 6. THE FIRST WEBSITE
 WAS A STATIC SITE
  7. 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. 8. DeveloperWorkstationWebserverBrowser
  9. 9. FIRST WEBSEARCH
  10. 10. FIRST WEBCOMIC
  11. 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. 12. DeveloperWorkstationWebserverBrowser Database
  13. 13. E-COMMERCE IS TAKING OFF
  14. 14. YOUR OWN SPACE
  15. 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. 16. DeveloperLoad balancerBrowser DatabaseApplication server Editors SCM
  17. 17. APPS ON THE WEB
  18. 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. 19. Modern static site builders
  20. 20. GITHUB
  21. 21. Static Site HostBrowser Build server Developers SCM Editors
  22. 22. Middleman Hexo
  23. 23. 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
  24. 24. “This project is too complex. A static site won’t do.“
  25. 25. 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
  26. 26. • 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
  27. 27. Serverless Architectures
  28. 28. Source: https://martinfowler.com/bliki/Serverless.html
  29. 29. 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
  30. 30. How does that solve anything? With great services
  31. 31. 3 WAYS OF ACCESSING A SERVICE BrowserBuild Function
  32. 32. 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
  33. 33. Static Site HostBrowser Build server DevelopersSCM EditorsContent Infrastructure
  34. 34. 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
  35. 35. Static Site HostBrowser Build server DevelopersSCM Editors
  36. 36. 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
  37. 37. 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?
  38. 38. Static Site HostBrowser Build server Developers SCM Editors SendgridAWS Lambda
  39. 39. 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
  40. 40. Static Site HostBrowser Build server Developers SCM Editors Snipcart
  41. 41. Bringing it all together
  42. 42. Static Site HostBrowser Build server DevelopersSCM EditorsContent Infrastructure Sendgrid AWS Lambda Snipcart
  43. 43. AND MANY MORE
  44. 44. 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
  45. 45. Visit our booth and win Daily End-of-show
  46. 46. ROUVEN WEßLING Twitter: @RouvenWessling Email: rouven@contentful.com GitHub: @realityking

×