A presentation at API World in in San Jose, CA, USA by Shy Ruparel
Dynamic Static Sites
Shy Ruparel Developer Evangelist | Contentful @ShyRuparel He/Him
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.
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
Static Websites A brief history
THE FIRST WEBSITE WAS A STATIC SITE
LET’S DEVELOP LIKE ITS 1991 • Every website was static • Layout wasn’t a thing everything was one vertical flow. • Link management was manual
Browser Webserver Workstation Developer
FIRST WEBSEARCH
FIRST WEBCOMIC
THINGS GOT DYNAMIC • CGI was introduced in 1994 • Rasmus Lerdorf releases his “Personal Home Page Tools” in 1995 • Brendan Eich writes the prototype for JavaScript in 1995 Photo by Pamela Saunders on Unsplash
Database Browser Webserver Workstation Developer
Fun Fact: SQL is 44 years old
E-COMMERCE IS TAKING OFF
YOUR OWN SPACE
IT’S A BUSINESS NOW • 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 Photo by rawpixel.com on Unsplash
Editors Browser Application server Database Load balancer SCM Developer
APPS ON THE WEB
I GOT THE POWER • XMLHttpRequest was part of IE5 in 1999 • SPA have been discussed since 2003 • jQuery was published in 2006, AngularJS in 2009 Photo by Brooke Lark on Unsplash
Modern static site builders
GITHUB
Editors Browser Static Site Host Build server SCM Developers
Middleman Hexo
IT JUST MAKES YOUR LIFE EASIER No Security issues Trivial caching Without a server-side application or CDNs are trivial to set up. Since every database the attack surface is minimal. file gets delivered to every user as-is, no complex logic is necessary. Great performance Easy maintenance Shuffling bytes from storage to the No random 500 errors, no dropped network is what servers are great at. database connections.
“This project is too complex. A static site won’t do.“
Common requirements 01 “Our editors don’t know git, 02 “We have a lot of content, 03 “Our contact forms needs 04 Photo by Štefan Štefančík on Unsplash they need a GUI.” we need full-text search.” to send an email.” “We’re running an online shop. You can’t do that with a static site.”
A CLOUD AND AN API WALK INTO A BAR • 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 Photo by Stanford Smith on Unsplash
Serverless Architectures
Source: https://martinfowler.com/bliki/Serverless.html
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
How does that solve anything? With great services
3 WAYS OF ACCESSING A SERVICE Build Browser Function
01 “Our editors don’t know git, they need a GUI.” A content infrastructure service - or a headless CMS - gives editors the graphical interface they need. You content becomes just an API. Build Browser Function
Browser Static Site Host Build server Content Infrastructure Editors SCM Developers
02 “We have a lot of content, we need full-text search.” 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. Build Browser
Editors Browser Static Site Host Build server SCM Developers
03 “Our contact forms needs to send an email.” AWS Lambda 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. Browser Function
HOW TINY? 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!'))); };
AWS Lambda Sendgrid Editors Browser Static Site Host Build server SCM Developers
04 “We’re running an online shop. You can’t do that with a static site.” Combing a payment processing service and a shopping cart platform allows you to run your entire business off a static site. Build Browser Function
Snipcart Editors Browser Static Site Host Build server SCM Developers
Bringing it all together
Browser Static Site Host AWS Lambda Snipcart Sendgrid Build server Content Infrastructure Editors SCM Developers
AND MANY MORE
COMBINING STATIC SITES AND SERVERLESS Isolated services improve security Easy caching Every dynamic function is a limited Dynamic resources are hidden behind service with only the necessary permissions. APIs and well defined routes everything else can be cached. Great performance Easy maintenance Static things are instant; dynamic Most services can be handled by 3rd things are fast. parties requiring no maintenance.
Shy Ruparel Developer Evangelist | Contentful @ShyRuparel He/Him Slide Credit - @RouvenWessling
Static websites first came about with the dawn of the internet. Being fast, secure, and easy to maintain, it’s no wonder they’re still incredibly relevant. Using 3rd party APIs, you can get the best of both worlds: all the upsides of static sites, plus the feel and function of a dynamic one. In this talk Shy Ruparel, developer evangelist at Contentful, examines the history of static sites, their benefits and how to make them dynamic.
Original slides by Rouven Wessling
Here’s what was said about this presentation on social media.
for free. You
can too.