1 of 116

Redefining the Full Stack

https://swyx.io/paradigm-lost�swyx @ CascadiaJS 2022

SLIDESMANIA.COM

2 of 116

…raise the aspirations of other people, simply by suggesting they do something more ambitious…��…the benefit to them, and to the broader world,�may be enormous.

SLIDESMANIA.COM

3 of 116

“This talk changed my career!”

SLIDESMANIA.COM

4 of 116

This talk IS my career.

SLIDESMANIA.COM

5 of 116

Happy

Not valued

SLIDESMANIA.COM

6 of 116

SLIDESMANIA.COM

7 of 116

IV - Async

I - Standard

II - Reality

V - Data

III - Local

VI - AI

Analytical & Operational

Holotypes & Evolution

Reliable & Scheduled

Creative & Scary

Frontend & Backend, et al.

Speed & Architecture

SLIDESMANIA.COM

8 of 116

What does it mean to be

“Full Stack”?

SLIDESMANIA.COM

9 of 116

The Standard Fullstack Paradigm

Frontend vs Backend

Three Tier architecture

Cloud

SLIDESMANIA.COM

10 of 116

The Standard Model of Physics

Works well

Isn’t complete

SLIDESMANIA.COM

11 of 116

The Standard Paradigm of Fullstack Dev

Works well

Isn’t complete

SLIDESMANIA.COM

12 of 116

Developer Roadmaps

SLIDESMANIA.COM

13 of 116

Reductively simple

SLIDESMANIA.COM

14 of 116

Heavy�In the

Front

SLIDESMANIA.COM

15 of 116

Heavy�In the

Back

SLIDESMANIA.COM

16 of 116

Roadmaps

SLIDESMANIA.COM

17 of 116

Spectrum

SLIDESMANIA.COM

18 of 116

The Standard Paradigm: Named stacks

LAMP

MEAN

JAM

stack

client-server-db

stack

server-db

stack

client-CDN-serverless

SLIDESMANIA.COM

19 of 116

Standard Paradigm:

Three Tiers

SLIDESMANIA.COM

20 of 116

Standard Paradigm:

Layers

SLIDESMANIA.COM

21 of 116

Reality

Application Holotypes

Evolution of Requirements

Where are the JS Developers?

SLIDESMANIA.COM

22 of 116

Apps you love + Apps you use + Apps that make money

SLIDESMANIA.COM

23 of 116

Application Holotypes

  • Social Network Sites (FB)
  • Social Media Apps (Instagram)
  • Storefronts (Amazon)
  • Content sites (CNN)
  • Personal info (Gmail)
  • Productivity (GDocs)
  • Media players (Spotify)
  • Media editors (Photoshop)
  • Dev tools (Codesandbox)
  • Immersive game (Stadia)
  • Casual game (Wordle)

SLIDESMANIA.COM

24 of 116

Application Holotypes

SLIDESMANIA.COM

25 of 116

Evolution of a Blog

  • Let’s make a blog
  • Add Previous/Next
  • Add Search
  • Add Filters & Facets
  • Add Comments => Add File Upload
  • Add Reactions
  • Add View Count
  • Previous/Next => General Reco’s� => Personal Reco’s
  • Add Scheduled Newsletter
  • Add A/B testing

https://swyx.io/smart-indexes/

SLIDESMANIA.COM

26 of 116

Evolution of a Blog

Evolution of an App

???

  • Let’s make a blog
  • Add Previous/Next
  • Add Search
  • Add Filters & Facets
  • Add Comments => Add File Upload
  • Add Reactions
  • Add View Count
  • Previous/Next => General Reco’s� => Personal Reco’s
  • Add Scheduled Newsletter
  • Add A/B testing

https://swyx.io/smart-indexes/

SLIDESMANIA.COM

27 of 116

How do you build this?

arXiv

arXiv-sanity

SLIDESMANIA.COM

28 of 116

“arxiv-sanity is a lifesaver”

  • keep track of recent papers,
  • search for papers,
  • sort papers by similarity,
  • see recent popular papers,
  • add papers to a personal library,
  • get personalized recommendations

SLIDESMANIA.COM

29 of 116

Generalizing from arXiv

  • Display a sorted list of data
  • Search the data
  • Recommend similar data
    • e.g. “You may also like”
  • Display most popular data
  • Favorite/save pieces of data
  • Personalized Recommendations
  • Generate regular reports/newsletters
  • Visualize/explore data

  • Enrich new data with third party data (e.g. Rapportive/Clearbit)
  • Mine new data for text/structure
  • Validate data quality
  • Debug lineage of bad data
  • Human-In-The-Loop Moderation/Enrichment/Actions
  • Notify on new relevant data
  • Detect anomalies in data
  • Forecast trends in data
  • Publish data to third party APIs

SLIDESMANIA.COM

30 of 116

How do you build this?

SLIDESMANIA.COM

31 of 116

How do you build this?

SLIDESMANIA.COM

32 of 116

4 Paradigm Shifts

III - Local

IV - Async

V - Data

VI - AI

Speed & Architecture

Reliable & Scheduled

Analytical & Operational

Creative & Scary

SLIDESMANIA.COM

33 of 116

Local

PWA

Offline-first

Edge & Serverless

SLIDESMANIA.COM

34 of 116

The non-local paradigm

SLIDESMANIA.COM

35 of 116

PWA WASM

SLIDESMANIA.COM

36 of 116

Move the Backend To The User

Edge Functions

Embedded Database

SLIDESMANIA.COM

37 of 116

Edge Functions

Supabase, Netlify, �Vercel, Cloudflare

SLIDESMANIA.COM

38 of 116

DIY

vs

Off the shelf

Embedded Database

SLIDESMANIA.COM

39 of 116

Embedded Database (Mature)

Meteor Minimongo

AWS AppSync DataStore

SLIDESMANIA.COM

40 of 116

Embedded Database (prototype)

SQLite (OLTP)

DuckDB (OLAP)

SLIDESMANIA.COM

41 of 116

Local-First Paradigm

  • No Spinners: Fastest possible paradigm
  • Works Offline
  • Seamless Collaboration
  • Security & Privacy by default
  • Outlast centralized company
  • Ultimate ownership & control

SLIDESMANIA.COM

42 of 116

Async

Async should be easy

Reliability is hard

Job runner => Workflow engine

SLIDESMANIA.COM

43 of 116

Callback hell

Callbacks

Async/Await

SLIDESMANIA.COM

44 of 116

Callback hell

Callbacks

Async/Await

SLIDESMANIA.COM

45 of 116

Callback hell

Callbacks

Async/Await

SLIDESMANIA.COM

46 of 116

Why Async is valuable

Amazon’s one-click buy button

  • 70% cart abandonment
  • From: cart -> checkout
  • To: checkout -> undo
    • with 30s timeout
    • Persists serverside
    • Retry on API failure

The Engineering behind Amazon's One Click Buy Button — Joel Spolsky

SLIDESMANIA.COM

47 of 116

Why Async is Hard

SLIDESMANIA.COM

48 of 116

Async tooling

SLIDESMANIA.COM

49 of 116

Async Hell

SLIDESMANIA.COM

50 of 116

Async Hell

SLIDESMANIA.COM

51 of 116

SLIDESMANIA.COM

52 of 116

Workflow Engines

SLIDESMANIA.COM

53 of 116

SLIDESMANIA.COM

54 of 116

Surprisingly ubiquitous

SLIDESMANIA.COM

55 of 116

Becoming a career

SLIDESMANIA.COM

56 of 116

Data

Data is big… really big

The Analytics Stack

Operational Data

SLIDESMANIA.COM

57 of 116

The Data Blind Spot

Add “data engineer” to this…

SLIDESMANIA.COM

58 of 116

Exponential Data

SLIDESMANIA.COM

59 of 116

Data as Moat

Data as UX

SLIDESMANIA.COM

60 of 116

Application Holotypes

  • Social Network Sites (FB)
  • Social Media Apps (Instagram)
  • Storefronts (Amazon)
  • Content sites (CNN)
  • Personal info (Gmail)
  • Productivity (GDocs)
  • Media players (Spotify)
  • Media editors (Photoshop)
  • Dev tools (Codesandbox)
  • Immersive game (Stadia)
  • Casual game (Wordle)

SLIDESMANIA.COM

61 of 116

Data Intensive Holotypes

  • Social Network Sites (FB)
  • Social Media Apps (Insta)
  • Storefronts (Amazon)
  • Content sites (CNN)
  • Personal info (Gmail)
  • Productivity (GDocs)
  • Media players (Spotify)
  • Media editors (Photoshop)
  • Dev tools (Codesandbox)
  • Immersive game (Stadia)
  • Casual game (Wordle)

SLIDESMANIA.COM

62 of 116

Data Intensive Applications

SLIDESMANIA.COM

63 of 116

The Data Blind Spot

SLIDESMANIA.COM

64 of 116

Analytical Data Needs

2014

2022

SLIDESMANIA.COM

65 of 116

Data Science

vs Data Eng �Hierarchy

SLIDESMANIA.COM

66 of 116

Evolution of Analytical Data Needs

  • Make MVP
  • Add analytics
  • Add feature
    • -> Study analytics
  • Study analytics
    • -> Add feature

SLIDESMANIA.COM

67 of 116

Evolution of Startup Data Needs

SLIDESMANIA.COM

68 of 116

Analytical Data Needs: ETL

SLIDESMANIA.COM

69 of 116

ETL -> ELT

SLIDESMANIA.COM

70 of 116

From Analytical to Operational

SLIDESMANIA.COM

71 of 116

This is a massive industry… (use it)

SLIDESMANIA.COM

72 of 116

AI

Software 3.0

Prompt Engineering

Ethics

SLIDESMANIA.COM

73 of 116

Software 2.0

Usecases

  • Visual Recognition
  • Speech Recognition
  • Speech synthesis
  • Machine Translation
  • Games

Benefits

  • Computationally homogenous
  • Simple to make ASICs
  • Constant running time
  • Constant memory use
  • Highly portable
  • Very agile
  • More Modular

SLIDESMANIA.COM

74 of 116

Evolution of Software

  • Software 1.0: Deterministic Code
    • Inputs -> Code -> Output
  • Software 2.0: Machine Learning
    • Inputs -> Code -> Output (per domain)
  • Exciting”: Computer Vision, Self Driving, NLP, Deep Learning, Ethics
  • Boring”: A/B Testing, Recommendation (Embeddings), Classification/NLP, Search & Ranking, Anomaly Detection, Spam/Fraud Risk
    • Check out https://applyingml.com/papers/

SLIDESMANIA.COM

75 of 116

Software 3.0 - Large Models

GPT-3

Dall-E, Midjourney, Stable Diffusion

SLIDESMANIA.COM

76 of 116

How large is Large?

SLIDESMANIA.COM

77 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

I love you → Te quiero. �I have a lot of work → Tengo mucho trabajo.

SLIDESMANIA.COM

78 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

79 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

80 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

81 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

82 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

83 of 116

Capabilities of LLMs

+ Prompt =

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

84 of 116

Capabilities of LLMs

  • Translation
  • Coding
  • Poetry
  • Infilling
  • Outfilling
  • Text to Image
  • Image to Image
  • Ideas

SLIDESMANIA.COM

85 of 116

Prompt Engineering

SLIDESMANIA.COM

86 of 116

Not a joke

SLIDESMANIA.COM

87 of 116

But it’s still funny

SLIDESMANIA.COM

88 of 116

This will be an industry…

SLIDESMANIA.COM

89 of 116

… with lots of ethical issues

SLIDESMANIA.COM

90 of 116

GANs

LLMs

SLIDESMANIA.COM

91 of 116

Evolution of Software

  • Software 1.0: Deterministic Code
    • Inputs -> Code -> Output
  • Software 2.0: Machine Learning
    • Inputs -> Weights -> Output (per domain)
  • Software 3.0:
    • Prompts -> Model -> Output
    • Same model for *everything* - SD only 4.2GB

SLIDESMANIA.COM

92 of 116

This is where you section ends. Duplicate this set of slides as many times you need to go over all your sections.

SLIDESMANIA.COM

93 of 116

What does it mean to be

“Full Stack”?

SLIDESMANIA.COM

94 of 116

What does it mean to be full stack?

PWAMVCCRUDOrchestrationETLDS/MLPrompts

  • Local-first
  • Async-easy
  • Data-driven
  • AI-assisted

SLIDESMANIA.COM

95 of 116

SLIDESMANIA.COM

96 of 116

The end

You know how to reach me

SLIDESMANIA.COM

97 of 116

Selling Data isn’t always bad

SLIDESMANIA.COM

98 of 116

Dogs can smell your feelings.

Dogs can pick up on subtle changes in your scent, which can help him figure out how you are feeling, such as by smelling your perspiration when you become nervous or fearful.

SLIDESMANIA.COM

99 of 116

Dogs can smell your feelings.

Dogs can pick up on subtle changes in your scent, which can help him figure out how you are feeling, such as by smelling your perspiration when you become nervous or fearful.

SLIDESMANIA.COM

100 of 116

Pandas don’t hibernate.

When winter approaches, they head lower down their mountain homes to warmer temperatures, where they continue to chomp away on bamboo!

SLIDESMANIA.COM

101 of 116

Did you know?

Elephants and storms.

Did you know that elephants can sense storms?

Elephants may be able to detect a thunderstorm from hundreds of miles away, and will head towards it, looking for water.

SLIDESMANIA.COM

102 of 116

Did you know?

A man's best friend...

Mmm, can I fit in?...

Did you know that a cat uses its whiskers as feelers to determine if a space is too small to squeeze through?

Also, cats love to sleep. A fifteen-year-old cat has probably spent ten years of its life sleeping.

Did you know that dogs can smell your feelings?

Dogs can pick up on subtle changes in your scent, which can help him figure out how you are feeling, such as by smelling your perspiration when you become nervous or fearful.

SLIDESMANIA.COM

103 of 116

Koalas are even more lazy than cats.

Koalas don’t have much energy and, when not feasting on leaves, they spend their time dozing in the branches. Believe it or not, they can sleep for up to 18 hours a day!

SLIDESMANIA.COM

104 of 116

Cats use their whiskers as feelers...

...to determine if a space is too small to squeeze through.

Also, cats love to sleep. A fifteen-year-old cat has probably spent ten years of its life sleeping.

SLIDESMANIA.COM

105 of 116

Did you know?

Pandas don’t hibernate.

There are more kangaroos than humans in Australia.

Koalas are even more lazy than cats.

It is estimated that more than 50 million kangaroos live there. They are Australia’s national symbol and appear on postage stamps, coins, and airplanes.

Koalas don’t have much energy and, when not feasting on leaves, they spend their time dozing in the branches. Believe it or not, they can sleep for up to 18 hours a day!

When winter approaches, they head lower down their mountain homes to warmer temperatures, where they continue to chomp away on bamboo!

SLIDESMANIA.COM

106 of 116

Some facts about my cats.

100%

25%

75%

Traveled by plane. Twice!

Of my cats are adorable.

Are females.

SLIDESMANIA.COM

107 of 116

Let’s review some facts.

Elephants

Dogs

Cats

Pandas

Kangaroos

Koalas

Koalas are even more lazy than cats.

Elephants can sense storms.

Dogs can smell your feelings.

Pandas don’t hibernate.

There are more kangaroos than humans in Australia.

Cats use their whiskers as feelers.

SLIDESMANIA.COM

108 of 116

This is our team!

Erika V.

John S.

Marie M.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

SLIDESMANIA.COM

109 of 116

This is an editable world map.

Showcase places

100% Editable

You can use maps to show your offices or markets. Or as charts, highlighting the countries and adding your data.

You can double click on the desired country and change fill color.

SLIDESMANIA.COM

110 of 116

And this is a timeline or process

1995

2003

2006

2015

2022

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

SLIDESMANIA.COM

111 of 116

Presenting a website or an app?

If you are presenting a website, an internet product or an app, you can place a screenshot of it here.

SLIDESMANIA.COM

112 of 116

Presenting a website or an app?

If you are presenting a website, an internet product or an app, you can place a screenshot of it here.

SLIDESMANIA.COM

113 of 116

Credits.

Presentation Template: SlidesMania

Sample Images: Unsplash

Fonts used in this presentation: DM Sans

SLIDESMANIA.COM

114 of 116

Editable Icons

SLIDESMANIA.COM

115 of 116

Hello! I’m...

Here is where you introduce yourself.

You can add your name, title and a little background. Right click the image and replace it with your own.

SLIDESMANIA.COM

116 of 116

Free themes and templates for Google Slides or PowerPoint

NOT to be sold as is or modified!

Read FAQ on slidesmania.com

Do not remove the slidesmania.com text on the sides.

Sharing is caring!