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
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.
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:
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
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
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
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
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
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
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
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
T H E L A N D S C A P E Ruby: • Jekyll • Middleman PHP: • Sculpin Node: • Harp • Webhook • Metalsmith Go: • Hugo Templating Languages: Swig, Jade, Liquid, ERb, eco, and the list goes on
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.
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)
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
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
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)
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": "\n\tLászló 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ászló. He has written five novels and won numerous prizes, including the 2013 Best Translated Book Award in Fiction for \">Satantango. In 1993, he won the Best Book of the Year Award in Germany for melancholy-of-resistance\">The Melancholy of Resistance. For more about Krasznahorkai, visit his www.krasznahorkai.hu/\">extensive website. ", "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" },
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.
Links http://www.thenewdynamic.com/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
budparr
ohnoeight
chalasr
manfredsteyer
sji
iwasiman
masayaaoyama
akatsuki174
usualoma
j5ik2o
a4lg
yusukebe
smiyawaki0820
kneath
chrislema
philhawksworth
cassininazir
mongodb
nonsquared
eileencodes
addyosmani
chriscoyier
deanohume
rasmusluckow
searls