Save 37% off PRO during our Black Friday Sale! »

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

921a4dfe8d32b03b3d1fee157ed937c5?s=128

dodeja

May 30, 2012
Tweet

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.
  5. None
  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.