Back to Basics with Static Websites

Transcript

1. Back to Basics with Static Websites Otar Chekurishvili / otar.me
2. Outline • What Are Static Websites? • A Bit of History (how we got here) • Benefits of Going Static • When to Use Static Websites • Case Studies
3. C A U T I O N ! You May Have A Paradigm Shift During This Presentation
4. • What Are Static Websites?
5. When I Mention Static Websites in a Geeky Talks... Casual Reaction by Other Developers: “WTF is that?” “Never heard about it.” “Yes, but who needs static...” “Come on... everyone knows HTML.” “We already have WordPress...” “It is toooooo simple.”
6. Me Politely: Y U NO WHAT IT REALLY IS???
7. Static Websites Are Non-Dynamic Websites With a Fixed Content
8. Dynamic vs Static Dynamic Websites: • Need Web Application Server (Apache/Nginx...) • Need Server-Side Scripting Language (PHP/Python/Ruby/.NET...) • Generate Content For Each Request • Usually Use Database • ...and other services Static Websites: • Need Simple Server (for serving static assets) • Serve Requests Directly From the File-System • Do NOT Need Server-Side Scripting Language • Lightweight (pure HTML & CSS)
9. Request/Response Flow of a Dynamic Website
10. Request/Response Flow of a Static Website
11. • A Bit of History How We Got Here
12. “Everything New is Well Forgotten Old” Said Somebody
13. Do You Know Which Website Is This?
14. The Very First Website Ever Made Created By This Man, Tim Berners-Lee He is an author of WWW, The World Wide Web.
15. Queen Elizabeth II Knighted Him for His Creation. Respectfully Call Him Sir Tim Berners-Lee
16. The First Website Was Static... The Web Is Fundamentally Static. We Made It Dynamic.
17. Evolution Of The Web • First Static Websites • Web Servers • Dynamic Server-Side Scripting Languages • Server-Side Frameworks • Content Management Systems • Client-Side Applications • Static Websites Again • Journey continues...
18. New Era of Static Websites Began in Late 2008 Source: Google Trends
19. • Benefits of Going Static
20. 1. Speed, Speed and Speed!
21. The Most Important Factor of Modern Static Websites. Performance is a Mandatory Feature! Why Care About Speed? UX, Search Engine Ranking, Conversions, Revenue… It Affects Everything!
22. Benefits: • Speed, Speed and Speed! • Scalability • Simplicity (No Dependencies) • Version Control • Security
23. • When to use Static Websites
24. Limitations • No Dynamic Logic • Hard To Manage Content • Mostly Needs Developer Involvement • TL;DR: Often Not Suitable for Interactive or Enterprise Websites (YET)
25. Common Use Cases: • Static Website Generators Simple Websites, Blogs, Landing Pages, Documentations… • Cache Layer Pre-Cache Dynamic Websites to Make Them FLY!
26. Using Static Website Generators
28. Using Static Websites as a Cache Layer
29. Example Flow:
30. • Case Studies
31. • Raised $250M Online • Jekyll Generator • Hosted on AWS S3 • Distributed on Akamai CDN Obama Campaign
32. • Jekyll Generator • Prose.io for Content • Content Access via REST API • Distributed on CDN • Reduced Cost of 30 Servers Healthcare.gov
33. Resources and Companies to Watch: • StaticGen.com • GitHub Pages • Netlify • CloudCannon • Firebase • Contentful / GatherContent / Prose.io • WP Super Cache • CDN - Content Delivery Networks • And Many More on Google :)
34. Questions?
35. Thank You! Aut Inveniam Viam Aut Faciam