Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Static Site Generators and the Post-CMS Paradigm II (without notes)

Static Site Generators and the Post-CMS Paradigm II (without notes)

From a talk given at The New Dynamic Meetup on static site generators on June 10,2015

Bud Parr

June 12, 2015
Tweet

More Decks by Bud Parr

Other Decks in Technology

Transcript

  1. T H E P O S T- C M S

    PA R A D I G M I I S TA T I C I S T H E N E W D Y N A M I C B Y B U D PA R R
  2. • HTML, RadioUserland, Movable Type • 70+ ExpressionEngine sites •

    60+ Wordpress sites • 5 Flat-file, no-db sites (Statamic) • 25+ static sites (Jekyll, Metalsmith, Webhook)
  3. None
  4. None
  5. Meet the Obama campaign's $250 million fundraising platform huge win

    for the campaign because we were working on such a short timeline and already bringing in about $15 million a month. After this work was complete we had a very flexible donation API and now it was time to figure out what would consume it. We knew from the very beginning that our new donation platform needed to be as fast as we could reasonably make it. We were very familiar with all the stories from huge companies like Amazon and Google about how only 100 milliseconds of latency can affect conversions by as much as 1%. Needless to say, performance was was one of our very top priorities. After working closely with our Devops team to plan the architecture of the platform we decided to go static. We consumed the newly created donation API using JavaScript on static HTML pages which were served by our CDN (Akamai). We chose to do it this way in no small part because this is the fastest possible way to get the HTML document to the user since Akamai has over 50,000 edge servers and the
  6. H O W W E B U I L D

    C M S - F R E E W E B S I T E S D E V E L O P M E N T S E E D , J U LY 2 7 , 2 0 1 2 After Development Seed pivoted away from building Drupal-based web applications, we started over completely. We began developing the majority of our projects for clients as simple, single page websites by manually coding the HTML, CSS, and JavaScript files. We pushed the boundaries of what we could do with these standards and avoided building server applications at all costs. As a result, we were able to build some of our best work. We used the money we would have spent on wrestling with Drupal’s codebase to focus on good design and strategy work, making sure we were actually solving our clients’ problems. By developing websites as “client-side” applications that only consist of the files directly usable by a web browser with no extra work done by backend servers, we are able to pass on substantial cost savings to our clients while virtually eliminating risk of the website going “down”. For additional functionality not available to client-side applications, we vet and integrate external services. We can deploy our projects on practically any web server and not worry about whether it has the right software to run our application or the technical resources to handle high traffic.
  7. W E L C O M E T O T

    H E P O S T- C M S W O R L D B E N B A LT E R , O C T O B E R 1 , 2 0 1 2 Although powered by the open-source CMS WordPress, the old site (shared hosting provided by Bluehost) for performance sake, would actually just served flat HTML and Javascript files from disk (generated on a regular basis by an industry-standard plugin known as W3 Total Cache), but fired up WordPress on every request (on top of the already sluggish Apache). Don’t get me wrong. WordPress can be configured to fly given the right setup, and that’s exactly what I set out to do. I got the best of the best. I spun up a shiny new AWS box, got Nginx with microcache up and running, APC for opcode, page, and object cache, and even put everything behind Varnish. But as much as it pains the developer in me, just like fixies, PBR, and Javascript, static sites are back in style. Reduce the complexity, push it to the edge, and let the visitor’s browser call APIs directly to generate any dynamic content you may need. Same functionality, same experience, no headache. The pitch is straightforward. It leads to simple, flexible, and reliable websites that allow for a renewed focus on what actually matters: the content. Dave Cole over at Development Seed (also powered by Jekyll) put it best:
  8. W H AT D O S TAT I C S

    I T E G E N E R AT O R S D O ? Run through Templates Your Text Output HTML pages Not a very satisfying answer…
  9. W H AT D O S TAT I C S

    I T E G E N E R AT O R S D O ? Take your text-based content • Markdown or Textile • HTML • YAML • CSV • JSON
  10. Creates an object W H AT D O S TAT

    I C S I T E G E N E R AT O R S D O ? {"layout"=>"default", "title"=>"Atrocity Accountability in Syria: What Criminal Investigations Have Uncovered", "category"=>"News", "excerpt"=>"ABA holds experts closed-door Meeting on results of international atrocity crimes investigations in Syria and discus how these investigations may affect policy in Syria and the region.", "published"=>true, "url"=>"/news/2015/04/14/Syria-CIJA-Closed-Door-PR/", "dir"=>"/ news/2015/04/14", "date"=>2015-04-14 00:00:00 -0400, "id"=>"/news/2015/04/14/Syria- CIJA-Closed-Door-PR", "categories"=>["news"], "next"=>, "previous"=>, "tags"=>[], "path"=>"_posts/2015-04-14-Syria-CIJA-Closed-Door-PR.md", "content"=>"On April 14, 2015, the American Bar Association (ABA) Center for Human Rights and its International Criminal Court Project will host a closed door meeting of experts on Syria entitled “Atrocity Accountability in Syria: What Criminal Investigations Have Uncovered.” The event will discuss the legal implications of a non-governmental organization undertaking high-level criminal investigation of international atrocity crimes in Syria and whether Syria policymakers should utilize this information in addressing this 4 year old conflict. The experts in attendance will come from the US government, international diplomatic corps, policy think tanks, human rights and rule of law organizations, and other members of civil society.\n \nTo view the event recap, please visit the event recap [page](http://www.international-criminal-justice-today.org/ event/2015/04/16/Syria-CIJA-Closed-Door-Event-Recap/).\n\n---\n\nThe American Bar Association’s (ABA) International Criminal Court (ICC) Project is an independent initiative of the ABA Center for Human Rights that advances international criminal justice and US-ICC relations through advocacy, education and practical legal assistance. Please visit the ABA's ICC Project [website](http://www.aba-icc.org/) for more information. \n", "section"=>"post"} which template to use what’s the URL other things the template might need to know
  11. Uses the object to create pages from templates • Liquid

    • Twig/Swig • Jade • Handlebars • Many many more W H AT D O S TAT I C S I T E G E N E R AT O R S D O ?
  12. None
  13. Then What? • Outputs a “build” folder containing all the

    assets and HTML files • Build folder gets moved to a server W H AT D O S TAT I C S I T E G E N E R AT O R S D O ? How? • Could be all done on a server with a script - with a deployment solution • Could be RSYNC or SFTP
  14. THIS ONLY HAPPENS ONCE. NOT EVERY TIME THE PAGE LOADS

    When your audience accesses your web page there’s very little for the server to do, because it’s just the basics: HTML, JS, CSS, images. • There is no SQL database for the server to access • No complicated layers of caching needed*
 W H AT D O S TAT I C S I T E G E N E R AT O R S D O ?
  15. W H AT A B O U T T H

    E D Y N A M I C PA R T S ?
  16. W H AT A B O U T T H

    E D Y N A M I C PA R T S ?
  17. W H AT A B O U T T H

    E D Y N A M I C PA R T S ? JS based calendar using moment.js and _underscrore
  18. W H AT A B O U T T H

    E D Y N A M I C PA R T S ?
  19. • Users • Owners • Designers/Developers • Content Creators T

    H E F O U R S TA K E H O L D E R S
  20. users want • app-like page loads • but also pretty

    pictures and nice fonts, apparently… PERFORMANCE IS A FEATURE serving static pages and assets from a CDN eliminates database calls and helps edge performance
  21. source: webperformancetoday.com Performance talk is all the rage, yet websites

    are getting heavier
  22. owners want • to save money • they want it

    now • they never want their site to be down or unresponsive static sites are cheaper to build and quicker to iterate and there’s no database to hack
  23. • This site was (relatively) cheap to produce • It

    can be replicated in minutes • It’s free to host • It can be abandoned
  24. Here’s that site in code. Fork it!

  25. The data is made up but the point is real

    0 50 100 150 200 10k 100k 1m 100m Fictional chart demonstrating the increase in cost and complexity for a static site versus dynamic as traffic increases. traffic
  26. H E A LT H C A R E .

    G O V: C O D E D E V E L O P E D B Y T H E P E O P L E A N D F O R T H E P E O P L E , R E L E A S E D B A C K T O T H E P E O P L E T H E AT L A N T I C , J U N E 2 8 , 2 0 1 3 That adds up to cost savings. Sites that are heavily trafficked -- as Healthcare.gov can reasonably expected to be - normally have to use a caching layer to serve static content and add more server capacity as demand increases. “When we worked with the World Bank, they chose a plan from Rackspace for 16 servers,” said Gundersen. “That added tens of thousands of dollars, with a huge hosting bill every month.” HHS had similar strategic plans for the new site, at least at first. “They were planning 32 servers, between staging, production and disaster recovery, with application servers for different environments”, said Cole. “You’re just talking about content. There just needs to be one server. We're going to have two, with one for backup. That's a deduction of 30 servers.” Why was Development Seed able to succeed in selling this approach to coding and collaboration with a federal agency and other contractors, in contrast to traditional systems integrators? Or to put it another way, what could a mapping
  27. H E A LT H C A R E .

    G O V: C O D E D E V E L O P E D B Y T H E P E O P L E A N D F O R T H E P E O P L E , R E L E A S E D B A C K T O T H E P E O P L E T H E AT L A N T I C , J U N E 2 8 , 2 0 1 3 • The part that worked. • I ran this on my desktop (took 7 minutes to generate though) • Genesis of prose.io
  28. Designers/Developers want • less infrastructure to manage so I can

    focus on shipping • freedom to create what I want without the limitations of my CMS or database • To be a hero Use only the systems you need , build what you want
  29. – D E V E L O P M E

    N T S E E D “We used the money we would have spent on wrestling with Drupal’s codebase to focus on good design and strategy work, making sure we were actually solving our clients’ problems.”
  30. Complexity without Guilt Push the pain of building the page

    to before it’s ever deployed opens the door to building better user experiences
  31. The Simplest Solution to not Frustrating your users with Pagination

  32. The weakest link: Content Creators • Creating content for the

    web has always been difficult, but… • I thought everyone would *LOVE* markdown files. • The didn’t. • Increasingly seeing editor-based systems Uh, oh
  33. THE POST-CMS PARADIGM • Redefine system to be a collection

    of tools • Use tools that do one thing well. • Use the simplest tool for the job at hand
  34. T H E L A N D S C A

    P E METALSMITH Webhook CMS DocPad ROOTS staticsitegenerators.net staticgen.com
  35. METALSMITH Tarbell created by a news organization to solve the

    problem of publishing easy-to-edit spreadsheet data. Metasmith.io created by a startup to publish a variety of different content (books, marketing site, docs) with one tool Harp created to publish from Dropbox folders Webhook CMS Webhook created to solve the problem of editing content in a static environment
  36. T H E L A N D S C A

    P E S O M E E X A M P L E S Ruby: • Jekyll • Middleman PHP: • Sculpin Node: • Harp • Webhook • Metalsmith Go: • Hugo Templating Languages: Swig, Jade, Liquid, ERb, eco, and the list goes on
  37. T H E E X PA N D I N

    G L A N D S C A P E thenewdynamic.com
  38. MY PRIMARY TOOLS • Jekyll • Webhook • Metalsmith •

    have used: Docpad, Assemble, Hugo, Middleman, Harp, and a few more
  39. None
  40. J E K Y L L • Long history and

    has progressed significantly in the past two years • Likely largest user base (4,000 forks) • Avid maintainers and community • Optionally, Deployment and Hosting Baked-in with Github, and free • Liquid not the most flexible, but easy to use. • Sass built in, so no need to layer in another build tool (though I use Gulp for Sass and JS).
  41. J E K Y L L • Killer feature: Data

    files: CSV, YAML, JSON • Great for one-pagers, prototypes, blogs, low-volume updates, abandon-able sites • Incremental regeneration in 3.0, along with collections, make it okay for larger, more complex sites. • Can use the Github-based editor prose.io (but it’s not the greatest). Cloud Canyon editor? • Getting running the first time can be a pain (Ruby)
  42. None
  43. None
  44. J E K Y L L

  45. None
  46. W E B H O O K Solves two major

    issues • Has an incredibly flexible control panel for content creators • Deployment built in • Hosted ($9/mo) or Open Source
  47. W E B H O O K • Grunt-based generator,

    with an Ember SPA for the control panel • Firebase JSON data store • Swig template-language • Simple API capabilities baked in (lots of possibilities here) • Easy to pre-set your working environment
  48. W E B H O O K • Hosted ($9/mo)

    or Open Source • Hosted version has an app
  49. W E B H O O K OPEN SOURCE •

    Setting up on server isn’t too hard, *wink* • quite a few dependencies: • Firebase: data store • elastic search: control panel search • emed.ly: for some fields • Mailgun: send new user emails • Google APP Engine (generation) • Google Cloud Storage (hosting)
  50. W E B H O O K

  51. W E B H O O K "-JatT2VcwwZAYGwoug3D": { "_sort_create_date":

    1315455780, "_sort_last_updated": 1427502300, "_sort_publish_date": 1315455780, "article_related_person": [ "article -JatT2WACYTM7h7c12eK", "article -JatT2W5DyZz6CdEqU91", "article -JatT2W6gGokyXfq9xoP", "article -JatT2WrHqn-TdAasGEg", "article -JlDsZlftkoJyiFuSOhI" ], "banner_height": 600, "bio": "<p>\n\tL&aacute;szl&oacute; Krasznahorkai was born in Gyula, Hungary, in 1954. He worked for some years as an editor until 1984, when he became a freelance writer. He now lives in reclusiveness in the hills of Szentl&aacute;szl&oacute;. He has written five novels and won numerous prizes, including the 2013 Best Translated Book Award in Fiction for <a href=\"http://ndbooks.com/book/satantango \"><em>Satantango</em></a>. In 1993, he won the Best Book of the Year Award in Germany for <em><a href=\"http://ndbooks.com/book/the- melancholy-of-resistance\">The Melancholy of Resistance</a>.</em> For more about Krasznahorkai, visit his <a href=\"http:// www.krasznahorkai.hu/\">extensive website. </a></p>", "books_authors": [ "book -JatT2X9P5DzjdRkaq-W", "book -JatT2XJ1bls3Pg6AuUB", "book -JatT2Xaw4xCp37MqhzO", "book -JatT2Xkqs0zfJIEzd-E", "book -JatT2XGj4ytuQMlo5h0" ], "create_date": "2011-09-08T00:23:00-04:00", "featured": 1, "featured_image": { "resize_url": "http://lh5.ggpht.com/8QUjl-_dRIf20DMUetcPbBDe8DVHWF0rrz0dyqYs5-MVkQVKB8ajRe- TAYv_rbcRvggV21mT3vi0tiCN9giAjZVhD2uOfeIo", "size": 104159, "type": "image/jpeg", "url": "/webhook-uploads/1422671300161_c_Olivier_Roller01_cropped.jpg" }, "featured_image_position": "top", "full_name": { "first": "László", "last": "Krasznahorkai" },
  52. – B E N B A LT E R “simple,

    flexible, and reliable websites that allow for a renewed focus on what actually matters: the content” A F E W E X A M P L E S
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. Getting Lost • Editing and Deployment are the weakest links

    in the chain. • Often creates an implicit dependency on having a developer. • Only basic HTML/CSS/JS+ skills needed, but people still caught up on the tool.
  60. Links http://www.thenewdynamic.org/getting-started/getting-started/ • “Meet the Obama campaign’s $250 million fundraising

    platform”, by Kyle Rush • “The Static Web Returns”, by Rob Muhlestein • “How We Build CMS-Free Websites”, by Dave Cole at Development Seed • Why? “The Great Web Slowdown [INFOGRAPHIC]”, by Tammy Everts • “Welcome to the Post-CMS World”, by Ben Balter • Not the app! “Healthcare.gov: Code Developed by the People and for the People, Released Back to the People” by Alex Howard at The Atlantic
  61. www.thenewdynamic.org