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. 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 [email protected]
    Learn More.

    View Slide