Tech Stack 

Co-founder & CEO Engineer Designer Audio Enthusiast @dodeja on twitter I’m Akshay Dodeja 

Uploading Photos. Adding Recipients. Send Photos. The Key Actions 

What is Picplum? It’s the easiest way to send photo prints. 

No content

Picplum.com The Stack Coffeescript Backbone.js Rails 3.2.3 Unicorn + Resque Heroku Postgres Heroku (Nginx) AWS Cloudfront & S3 Prints API Padrino w/ Async Sinatra Thin Server Heroku Postgres MongoHQ MongoDB Nginx (heroku) 

Single Page Application Restful API Uploading Images Recipients Account Sending Photos Prints API Service /api/1/user /api/1/photos /api/1/recipients /api/1/batches/send Webhook for browser and email uploads, notifications etc Consumer (Picplum.com) <=> Provider (Print Warehouse) POST api.picplum.com/1/orders Webhooks for sending notifications (printing, shipped etc) 

Authentication Devise 2.0 for Accounts & cookie Session Doorkeeper for OAuth2 Provider Omniauth for Facebook Connect and Twitter Backend Components API JSON RABL Templates Namespaced Routes & Controller Ruby API that should work nicely with restful endpoints Squeel (Activerecord querying) 

How to: Responsive Large Image Uploads 1. User Drag-n-drops photos into browser 2. Post to ASYNC Image Server (Transloadit) 3. Show processing spinner to user. 4. Generate Thumbnails on server (Resque workers) 5. Post webhook to Picplum.com with S3 path info. 6. Create Photo object and push JSON to user (Pusher) 7. Replace Image preview with stored thumbnail. Backend Components 

Use RABL JSON Templates Backend Tricks 

Pre-mailer Automatically generate formatted text only versions of emails Faraday Simple API Wrappers Foreman Run multiple app processes in a single command More Backend Tricks 

Handlebar.js Precompile all Templates compress and GZIP Lazy Load Images Fade in images as user scrolls down the page AWS S3 + Cloudfront CDN Serve all JS and CSS (compressed and Gziped) via CDN. Sprite background images and icons ImageOptim to compress PNGs [Asset-Sync] Single page APP Tricks 

Structure MVC Structure Require.js Strobeo.init Compiled Templates Backbone Tips 

Nested Views Render AccountView AccountView should Fetch Profile & Render Fetch Invoices & Render Fetch Payment Details & Render Backbone Tips 

Make Views Reusable RecipientView HomepageRecipients extends RecipientsView ApplicationRecipients extends RecipientsView Mediator Pattern Publish and Subscribe A views should not be aware of resources outside its scope. Backbone Tips 

In-depth blog post coming. blog.picplum.com Find this on speakerdeck.com/u/dodeja Find me on Twitter @dodeja email [email protected] Learn More.