Startup Engineering Guest Lecture Alex Blackstock & Spike Brehm - - PowerPoint PPT Presentation

▶
startup engineering
SMART_READER_LITE
LIVE PREVIEW

Startup Engineering Guest Lecture Alex Blackstock & Spike Brehm - - PowerPoint PPT Presentation

Nov 15, 2023 279 likes •1.56k views

coursera.org/course/startup Startup Engineering Guest Lecture Alex Blackstock & Spike Brehm Overview The Story The Stack The Future Its Hack Time! 1 THE STORY Joe Nate Text Brian 2007 Brian moves in with Joe Rent increases

slide-1
SLIDE 1

Startup Engineering

coursera.org/course/startup Guest Lecture

Alex Blackstock & Spike Brehm

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

Overview

The Story The Stack The Future It’s Hack Time!

slide-6
SLIDE 6

1

THE STORY

slide-7
SLIDE 7

Text

Joe Brian Nate

slide-8
SLIDE 8

2007 Brian moves in with Joe

!

Rent increases

They can’t afford it

slide-9
SLIDE 9

!

Rent increases

They can’t afford it

SF Design Conference

slide-10
SLIDE 10

NO VACANCY

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21

Big Growth, Big Problems

Fraud Search Payments Trust & Safety Internationalization

slide-22
SLIDE 22
slide-23
SLIDE 23

2

THE STACK

slide-24
SLIDE 24

Rails MySQL Hadoop Redis CoffeeScript Backbone Node SASS

Framework Database Analytics Key/Value Store Client Language Client Framework SSJS Stylesheets

slide-25
SLIDE 25

Amazon Web Services EC2 RDS S3 ELB EMR DynamoDB Elasticache

Web Servers Database Storage Load Balancing Cluster Computing Distributed K/V Memcache

slide-26
SLIDE 26

Ever heard of ... ? ZooKeeper Mesos Redshift Chef Sphinx Weka

Service Discovery Resource Sharing Warehousing Deployment Search Data Mining

slide-27
SLIDE 27

3

THE FUTURE

slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

Let’s talk about webapps

slide-31
SLIDE 31
slide-32
SLIDE 32

Airbedandbreakfast.com

slide-33
SLIDE 33

Airbedandbreakfast.com

Started in 2008

slide-34
SLIDE 34

Airbedandbreakfast.com

Started in 2008 Ruby on Rails app

slide-35
SLIDE 35

Airbedandbreakfast.com

Started in 2008 Ruby on Rails app Was Rails 2.3; painful upgrade to 3.x

slide-36
SLIDE 36

Airbedandbreakfast.com

Started in 2008 Ruby on Rails app Was Rails 2.3; painful upgrade to 3.x Traditional page-based paradigm

slide-37
SLIDE 37
slide-38
SLIDE 38

website

slide-39
SLIDE 39

website v.

slide-40
SLIDE 40

website v. webapp

slide-41
SLIDE 41

website

server client

slide-42
SLIDE 42

webapp

server client

slide-43
SLIDE 43
slide-44
SLIDE 44

past

slide-45
SLIDE 45

past v.

slide-46
SLIDE 46

past v. future

slide-47
SLIDE 47
slide-48
SLIDE 48

rich client app

slide-49
SLIDE 49

fat client app rich client app

slide-50
SLIDE 50

fat client app rich client app single page app

slide-51
SLIDE 51
slide-52
SLIDE 52

What is a single page app?

slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55
slide-56
SLIDE 56

navigate around the app without page refresh

slide-57
SLIDE 57

navigate around the app without page refresh application logic in the client

slide-58
SLIDE 58

navigate around the app without page refresh application logic in the client fetch data on demand

slide-59
SLIDE 59
slide-60
SLIDE 60

How do you build a single page app?

slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63
slide-64
SLIDE 64

Why now?

slide-65
SLIDE 65
slide-66
SLIDE 66

faster JavaScript runtimes

slide-67
SLIDE 67

faster JavaScript runtimes new browser features (pushState, localStorage, WebGL, etc.)

slide-68
SLIDE 68

faster JavaScript runtimes new browser features (pushState, localStorage, WebGL, etc.) heightened user expectations

slide-69
SLIDE 69
slide-70
SLIDE 70

How we do it.

slide-71
SLIDE 71
slide-72
SLIDE 72

+

slide-73
SLIDE 73
slide-74
SLIDE 74
slide-75
SLIDE 75
slide-76
SLIDE 76

provides structure to your JS

slide-77
SLIDE 77

provides structure to your JS MV* (MVC, MVP, MVVM, ...)

slide-78
SLIDE 78

provides structure to your JS MV* (MVC, MVP, MVVM, ...) Backbone.View, Backbone.Model, Backbone.Collection, Backbone.Router

slide-79
SLIDE 79
slide-80
SLIDE 80

think about building an application, rather than manipulating HTML

slide-81
SLIDE 81
slide-82
SLIDE 82
slide-83
SLIDE 83
slide-84
SLIDE 84
slide-85
SLIDE 85
slide-86
SLIDE 86
slide-87
SLIDE 87
slide-88
SLIDE 88

The Easy Way

slide-89
SLIDE 89

The Easy Way v.

slide-90
SLIDE 90

The Easy Way v. The Hard Way

slide-91
SLIDE 91

The Easy Way

slide-92
SLIDE 92
slide-93
SLIDE 93

JS app runs entirely in client

slide-94
SLIDE 94

JS app runs entirely in client Server technology agnostic

slide-95
SLIDE 95

JS app runs entirely in client Server technology agnostic Poor SEO; not crawlable

slide-96
SLIDE 96

JS app runs entirely in client Server technology agnostic Poor SEO; not crawlable Performance hit to download & evaluate JS before rendering

slide-97
SLIDE 97

The Hard Way

aka “The Holy Grail”

slide-98
SLIDE 98
slide-99
SLIDE 99

Routing, rendering, biz logic run on client & server

slide-100
SLIDE 100

Routing, rendering, biz logic run on client & server Re-render in client with pushState; hit refresh, serve full page of HTML

slide-101
SLIDE 101

Routing, rendering, biz logic run on client & server Re-render in client with pushState; hit refresh, serve full page of HTML Provides SEO

slide-102
SLIDE 102

Routing, rendering, biz logic run on client & server Re-render in client with pushState; hit refresh, serve full page of HTML Provides SEO Initial pageload is faster

slide-103
SLIDE 103
slide-104
SLIDE 104

Enter Rendr.

slide-105
SLIDE 105
slide-106
SLIDE 106

+

slide-107
SLIDE 107

+

slide-108
SLIDE 108
slide-109
SLIDE 109

Pulls Backbone to the server

slide-110
SLIDE 110

Pulls Backbone to the server Write your application once

slide-111
SLIDE 111

Pulls Backbone to the server Write your application once Run application in web browser and in Node.js

slide-112
SLIDE 112
slide-113
SLIDE 113
slide-114
SLIDE 114
slide-115
SLIDE 115
slide-116
SLIDE 116
slide-117
SLIDE 117

Check out the blog post.

slide-118
SLIDE 118

Check out the blog post.

http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product

slide-119
SLIDE 119
slide-120
SLIDE 120

Coming soon. nerds.airbnb.com

slide-121
SLIDE 121

4

slide-122
SLIDE 122

Never stop hacking

slide-123
SLIDE 123

Technological Vigilantism

slide-124
SLIDE 124

Cross-functional Collaboration

slide-125
SLIDE 125

Creating and Learning Together

slide-126
SLIDE 126

Hackairthon #1

slide-127
SLIDE 127

Thanks!

alex@airbnb.com spike@airbnb.com