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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. View Slide

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)
   

   View Slide

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)
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

10. Use RABL JSON Templates
    Backend Tricks
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide