Airbnb Slides

download Airbnb Slides

of 127

  • date post

    14-Apr-2018
  • Category

    Documents

  • view

    216
  • download

    0

Embed Size (px)

Transcript of Airbnb Slides

  • 7/30/2019 Airbnb Slides

    1/127

    Startup Engineeringcoursera.org/course/startup

    Guest Lecture

    Alex Blackstock & Spike Brehm

  • 7/30/2019 Airbnb Slides

    2/127

  • 7/30/2019 Airbnb Slides

    3/127

  • 7/30/2019 Airbnb Slides

    4/127

  • 7/30/2019 Airbnb Slides

    5/127

    OverviewThe StoryThe Stack

    The Future

    Its Hack Time!

  • 7/30/2019 Airbnb Slides

    6/127

    1THE STORY

  • 7/30/2019 Airbnb Slides

    7/127

    Text

    Joe

    Brian

    Nate

  • 7/30/2019 Airbnb Slides

    8/127

    2007

    Brian movesin with Joe

    Rent increasesThey cant afford it

  • 7/30/2019 Airbnb Slides

    9/127

    en ncreasesThey cant afford it

    SF DesignConference

  • 7/30/2019 Airbnb Slides

    10/127

    NO VACANCY

  • 7/30/2019 Airbnb Slides

    11/127

  • 7/30/2019 Airbnb Slides

    12/127

  • 7/30/2019 Airbnb Slides

    13/127

  • 7/30/2019 Airbnb Slides

    14/127

  • 7/30/2019 Airbnb Slides

    15/127

  • 7/30/2019 Airbnb Slides

    16/127

  • 7/30/2019 Airbnb Slides

    17/127

  • 7/30/2019 Airbnb Slides

    18/127

  • 7/30/2019 Airbnb Slides

    19/127

  • 7/30/2019 Airbnb Slides

    20/127

  • 7/30/2019 Airbnb Slides

    21/127

    Big Growth, Big Problems

    Fraud

    SearchPayments

    Trust & Safety

    Internationalization

  • 7/30/2019 Airbnb Slides

    22/127

  • 7/30/2019 Airbnb Slides

    23/127

    2THE STACK

  • 7/30/2019 Airbnb Slides

    24/127

    Rails

    MySQLHadoop

    Redis

    CoffeeScript

    Backbone

    NodeSASS

    Framework

    Database

    Analytics

    Key/Value Store

    Client Language

    Client Framework

    SSJSStylesheets

  • 7/30/2019 Airbnb Slides

    25/127

    Amazon Web Services

    EC2

    RDS

    S3

    ELB

    EMR

    DynamoDB

    Elasticache

    Web Servers

    Database

    Storage

    Load Balancing

    Cluster Computing

    Distributed K/V

    Memcache

  • 7/30/2019 Airbnb Slides

    26/127

    Ever heard of ... ?

    ZooKeeperMesos

    RedshiftChef

    SphinxWeka

    Service DiscoveryResource Sharing

    WarehousingDeployment

    SearchData Mining

  • 7/30/2019 Airbnb Slides

    27/127

    3THE FUTURE

  • 7/30/2019 Airbnb Slides

    28/127

  • 7/30/2019 Airbnb Slides

    29/127

  • 7/30/2019 Airbnb Slides

    30/127

    Lets talk

    about

    webapps

  • 7/30/2019 Airbnb Slides

    31/127

  • 7/30/2019 Airbnb Slides

    32/127

    Airbedandbreakfast.com

  • 7/30/2019 Airbnb Slides

    33/127

    Airbedandbreakfast.com

    Started in 2008

  • 7/30/2019 Airbnb Slides

    34/127

    Airbedandbreakfast.com

    Started in 2008

    Ruby on Rails app

  • 7/30/2019 Airbnb Slides

    35/127

    Airbedandbreakfast.com

    Started in 2008

    Ruby on Rails appWas Rails 2.3; painful upgrade to 3.x

  • 7/30/2019 Airbnb Slides

    36/127

    Airbedandbreakfast.com

    Started in 2008

    Ruby on Rails appWas Rails 2.3; painful upgrade to 3.x

    Traditional page-based paradigm

  • 7/30/2019 Airbnb Slides

    37/127

  • 7/30/2019 Airbnb Slides

    38/127

    website

  • 7/30/2019 Airbnb Slides

    39/127

    website

    v.

  • 7/30/2019 Airbnb Slides

    40/127

    website

    v.

    webapp

  • 7/30/2019 Airbnb Slides

    41/127

    website

    server

    client

  • 7/30/2019 Airbnb Slides

    42/127

    webapp

    server

    client

  • 7/30/2019 Airbnb Slides

    43/127

  • 7/30/2019 Airbnb Slides

    44/127

    past

  • 7/30/2019 Airbnb Slides

    45/127

    past

    v.

  • 7/30/2019 Airbnb Slides

    46/127

    past

    v.

    future

  • 7/30/2019 Airbnb Slides

    47/127

  • 7/30/2019 Airbnb Slides

    48/127

    rich client app

  • 7/30/2019 Airbnb Slides

    49/127

    fat client app

  • 7/30/2019 Airbnb Slides

    50/127

    single page app

  • 7/30/2019 Airbnb Slides

    51/127

  • 7/30/2019 Airbnb Slides

    52/127

    What is a

    single pageapp?

  • 7/30/2019 Airbnb Slides

    53/127

  • 7/30/2019 Airbnb Slides

    54/127

  • 7/30/2019 Airbnb Slides

    55/127

  • 7/30/2019 Airbnb Slides

    56/127

    navigate around the appwithout page refresh

  • 7/30/2019 Airbnb Slides

    57/127

    navigate around the appwithout page refresh

    application logic in the client

  • 7/30/2019 Airbnb Slides

    58/127

    navigate around the appwithout page refresh

    application logic in the client

    fetch data on demand

  • 7/30/2019 Airbnb Slides

    59/127

  • 7/30/2019 Airbnb Slides

    60/127

    How do you

    build a singlepage app?

  • 7/30/2019 Airbnb Slides

    61/127

  • 7/30/2019 Airbnb Slides

    62/127

  • 7/30/2019 Airbnb Slides

    63/127

  • 7/30/2019 Airbnb Slides

    64/127

    Why now?

  • 7/30/2019 Airbnb Slides

    65/127

  • 7/30/2019 Airbnb Slides

    66/127

    faster JavaScript runtimes

  • 7/30/2019 Airbnb Slides

    67/127

    faster JavaScript runtimesnew browser features

    (pushState, localStorage,WebGL, etc.)

  • 7/30/2019 Airbnb Slides

    68/127

    faster JavaScript runtimesnew browser features

    (pushState, localStorage,WebGL, etc.)

    heightened user expectations

  • 7/30/2019 Airbnb Slides

    69/127

  • 7/30/2019 Airbnb Slides

    70/127

    How we do it.

  • 7/30/2019 Airbnb Slides

    71/127

  • 7/30/2019 Airbnb Slides

    72/127

    +

  • 7/30/2019 Airbnb Slides

    73/127

  • 7/30/2019 Airbnb Slides

    74/127

  • 7/30/2019 Airbnb Slides

    75/127

  • 7/30/2019 Airbnb Slides

    76/127

    provides structure to your JS

  • 7/30/2019 Airbnb Slides

    77/127

    provides structure to your JS

    MV* (MVC, MVP, MVVM, ...)

  • 7/30/2019 Airbnb Slides

    78/127

    provides structure to your JS

    MV* (MVC, MVP, MVVM, ...)

    Backbone.View,Backbone.Model,

    Backbone.Collection,Backbone.Router

  • 7/30/2019 Airbnb Slides

    79/127

  • 7/30/2019 Airbnb Slides

    80/127

    think about building an

    application, rather thanmanipulating HTML

  • 7/30/2019 Airbnb Slides

    81/127

  • 7/30/2019 Airbnb Slides

    82/127

  • 7/30/2019 Airbnb Slides

    83/127

  • 7/30/2019 Airbnb Slides

    84/127

  • 7/30/2019 Airbnb Slides

    85/127

  • 7/30/2019 Airbnb Slides

    86/127

  • 7/30/2019 Airbnb Slides

    87/127

  • 7/30/2019 Airbnb Slides

    88/127

    The Easy Way

  • 7/30/2019 Airbnb Slides

    89/127

    The Easy Way

    v.

  • 7/30/2019 Airbnb Slides

    90/127

    The Easy Way

    v.The Hard Way

    The Easy Way

  • 7/30/2019 Airbnb Slides

    91/127

  • 7/30/2019 Airbnb Slides

    92/127

    JS ti l i li t

  • 7/30/2019 Airbnb Slides

    93/127

    JS app runs entirely in client

    JS ti l i li t

  • 7/30/2019 Airbnb Slides

    94/127

    JS app runs entirely in client

    Server technology agnostic

    JS ti l i li t

  • 7/30/2019 Airbnb Slides

    95/127

    JS app runs entirely in client

    Server technology agnostic

    Poor SEO; not crawlable

    JS ti l i li t

  • 7/30/2019 Airbnb Slides

    96/127

    JS app runs entirely in client

    Server technology agnostic

    Poor SEO; not crawlable

    Performance hit to download& evaluate JS beforerendering

    The Hard Wayk Th H l G il

  • 7/30/2019 Airbnb Slides

    97/127

    aka The Holy Grail

  • 7/30/2019 Airbnb Slides

    98/127

    Routing, rendering, biz logic

  • 7/30/2019 Airbnb Slides

    99/127

    g, g, grun on client & server

    Routing, rendering, biz logic

  • 7/30/2019 Airbnb Slides

    100/127

    g, g, grun on client & server

    Re-render in client withpushState; hit refresh, servefull page of HTML

    Routing, rendering, biz logic

  • 7/30/2019 Airbnb Slides

    101/127

    g, g, grun on client & server

    Re-render in client withpushState; hit refresh, servefull page of HTML

    Provides SEO

    Routing, rendering, biz logic

  • 7/30/2019 Airbnb Slides

    102/127

    g, g, grun on client & server

    Re-render in client withpushState; hit refresh, servefull page of HTML

    Provides SEO

    Initial pageload is faster

  • 7/30/2019 Airbnb Slides

    103/127

  • 7/30/2019 Airbnb Slides

    104/127

    Enter Rendr.

  • 7/30/2019 Airbnb Slides

    105/127

  • 7/30/2019 Airbnb Slides

    106/127

    +

  • 7/30/2019 Airbnb Slides

    107/127

    +

  • 7/30/2019 Airbnb Slides

    108/127

  • 7/30/2019 Airbnb Slides

    109/127

    Pulls Backbone to the server

  • 7/3