Middleman: The missing front end of the Rails API stack

There’s a lot of talk around using Rails as a JSON API back-end, but less on how to use the same great tools we’ve been using in Rails to build front end single page JavaScript apps.

Learn how Middleman, a Ruby static website generator, is used by Poll Everywhere to build massively scalable and responsive front end JavaScript apps that talk to a Rails API server. I discuss topics including dependency management between several front ends and an API, env targeting with Foreman, deployments using rsync and nginx, and more.

Transcript

1. The missing view in the Rails API stack
2. @bradgessler CTO & Cofounder of Poll Everywhere
3. Its like Jekyll
4. Middleman is extraordinarily well documented
5. Middleman is modular with a rich ecosystem of extensions
6. Getting Started with Middleman $ gem install middleman ! $ middleman init my-app create my-app/.gitignore create my-app/config.rb create my-app/source/index.html.erb create my-app/source/layouts/layout.erb create my-app/source/stylesheets create my-app/source/javascripts ! $ cd my-app ; middleman server == The Middleman is standing watch at http://0.0.0.0:4567
7. Has all of the same front-end goodies from Rails, so you’ll feel right at home gem 'haml' gem 'sass' gem 'sprockets' gem 'coffeescript' gem 'compass' gem 'activesupport' gem 'susy'
8. Middleman is multi-environment aware # ./config.rb # Local dev server settings configure :development do activate :livereload end ! # Production settings configure :build do activate :minify_css activate :minify_javascript activate :asset_hash end
9. A simple two step deploy process task :build do sh 'bundle exec middleman build' end ! task :upload do sh 'rsync -avz ./build/ deployer@site.com:/www/' end ! task deploy: %w[build upload]
10. Yeah, so what? Why should I care about Middleman?
11. Web apps fall somewhere within a spectrum of dynacism
12. Static Dynamic Rails! More caching Middleman! HTML content Middleman! JS MVC Library Rails! Less caching Realtime visualizations! Poll Ev graphs GUI-oriented applications! Google Spreadsheets Document-oriented web apps! Invoicing application Blogging platform! Svbtle, Posthaven Personal blog! bradgessler.com Informational website! Steve’s Plumbin’ Services
13. Say hello to the polleverywhere.com Rails app circa 2008 Rails App polleverywhere.com
14. A Flex app was created within the rails project for PowerPoint visualizations Rails App polleverywhere.com Flex App
15. Rails App polleverywhere.com XML API Flex App We broke the Flex app into its own project so that our Flex contractor could deploy independently from the Rails app team
16. Rails App polleverywhere.com XML API Flex App Smart phones started taking off, so we built .mobi extension views in Rails with jQuery mobile jQm/.mobi
17. Rails App polleverywhere.com XML API Flex App jQuery mobile and .mobi was a big disaster. Framework got us 80% there, the other 20% was painful and error prone jQm/.mobi
18. Our team made the decision to hand pick libraries to have exactly what we need, when we need it. ! Framework agnostic Middleman would be there to manage all of the assets
19. Rails App! polleverywhere.com XML API Flex App Our first single page HTML application was built in Middleman at PollEv.com JSON API Mobile App
20. CORS! Cross-origin resource sharing
21. We can truly push our web apps to CDN locations around the world
22. … or to floppy disks and Cordova apps
23. Rails App! polleverywhere.com Visualization App Flash was on its deathbed, so we set out to replace the Flex app with another single page Middleman app JSON API Mobile Web App
24. To reduce latency, a Stream API was deployed to production Rails App! polleverywhere.com Visualization App Mobile Web App Stream API JSON API
25. Stream API was isolated to its own host and server fleet for isolation and stability purposes. Client-side SOA allowed us to start using the Stream API, stabilize in production, gain confidence, and ensure a smooth rollout.
26. Rails App JSON API Mobile Web App Stream API More apps emerge on the scene, how do we keep it all DRY? Visualization App PowerPoint App Mobile Web App Keynote App
27. Rails App JSON API Visualization App PowerPoint App Mobile Web App Stream API Extract common Coffeescript, Sass, assets into a sprockets asset gem Keynote App Sprockets Asset Gem
28. Create a sprockets asset gem to share assets between apps # The ./lib/pollev_assets.rb file require 'pollev_assets/version' ! if defined? Sprockets Sprockets.env.append_path 'lib/assets/javascripts' Sprockets.env.append_path 'lib/assets/stylesheets' Sprockets.env.append_path 'vendor/assets/javascripts' end
29. Manage asset gem dependencies and branches with Bundler # App ./Gemfile if path = ENV['ASSETS_GEM_PATH'] gem "pollev_assets", path: path else gem "pollev_assets", branch: 'new-feature' end
30. Rails App JSON API Visualization App … Mobile Web App Stream API We reused mobile app assets to build PowerPoint 2013 app in 2 weeks PowerPoint 2013 App Sprockets Asset Gem …
31. No out-of-box solution exist for organizing JS MVC apps in Middleman
32. What about static websites?
33. Rails App JSON API … PowerPoint App Mobile Web App Stream API Extract content from Rails app so marketing team can move faster Keynote App Sprockets Asset Gem Form API Content Site! Middleman App
34. Some dynamic components are still required Render login state via JavaScript snippet Integration between Middleman content site and Rails app should have well defined and tested integration points Stripe.js, GA, Optimizely are all dynamic tools that can be integrated into a static website
35. Why bother with a static content website? Don’t let “TechCrunched” or HN’ed or whatever the cool kids call it these days bring down your site Introduce completely different workflows into content production without a heavy CMS Easier deployments, can you upload a file?
36. …a few things I didn’t cover How to not use hash bang URLs with pushState 12-factor middleman apps Validate test, staging, and any other environment with acceptance tests The state of exception monitoring in production environments Building an API side-by-side with client code deployments
37. getfannypack.com Join our team! polleverywhere.com/jobs
38. @bradgessler for slides, links, and code