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

Picplum Tech Stack

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

dodeja

May 30, 2012
Tweet

Other Decks in Programming

Transcript

  1. 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)
  2. 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)
  3. 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)
  4. 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
  5. 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
  6. 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
  7. Nested Views Render AccountView AccountView should Fetch Profile & Render

    Fetch Invoices & Render Fetch Payment Details & Render Backbone Tips
  8. 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