Picplum Tech Stack

I am extremely proud of what we have built at Picplum. This presentation has a good overview of the Picplum.com and Picplum Prints API internals.

Picplum.com is a Single-page backbone app that is built on a set of restful APIs. There are plenty of tricks and trips around building APIs', backbone.js and single-page apps.

This presentation was created for O'Reilly 2012 Fluent Conference http://fluentconf.com/fluent2012/public/schedule/detail/25389

Oh and hey, send some free prints on us :)
https://www.picplum.com/signup/ycprints

Transcript

1. Tech Stack
2. Co-founder & CEO Engineer Designer Audio Enthusiast @dodeja on twitter I’m Akshay Dodeja
3. Uploading Photos. Adding Recipients. Send Photos. The Key Actions
4. What is Picplum? It’s the easiest way to send photo prints.
6. 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)
7. 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)
8. 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)
9. 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
10. Use RABL JSON Templates Backend Tricks
11. 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
12. 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
13. Structure MVC Structure Require.js Strobeo.init Compiled Templates Backbone Tips
14. Nested Views Render AccountView AccountView should Fetch Profile & Render Fetch Invoices & Render Fetch Payment Details & Render Backbone Tips
15. 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
16. In-depth blog post coming. blog.picplum.com Find this on speakerdeck.com/u/dodeja Find me on Twitter @dodeja email akshay@picplum.com Learn More.