# React Miami: Temporal - React for the Backend

Original: https://swyx.io/temporal-miami
Published: 2022-04-19

> These are the raw notes of my talk prep for my React Miami 2022 talk - Temporal - React for the Backend. Includes links and initial draft at the bottom.

This is the current state of my talk prep for my React Miami 2022 talk: Temporal - React for the Backend. Includes links and initial draft at the bottom.

## Video

{% youtube 0iv0xQrAS84 %}

(the [raw video](
https://www.youtube.com/watch?v=acANSTNpFIs) was posted prior but had some bad artefacts)

<details>
<summary>
Behind the Scenes Talk Prep
</summary>

For those interested in my working style, i actually recorded the process of me making the slides. some commentary at the start and the end, but otherwise just a lot of crappy music you can fastforward

{% youtube B5_cvVPlNk8 %}

</details>


## Slides

Slides are here: https://docs.google.com/presentation/d/1xRcSGKxBrknMBkAcT9qGj4KQrWPU_hiNhtKDh5sOhi4/edit?usp=sharing

## Photos & Social

<details>
<summary>
Expand
</summary>

<img src="https://user-images.githubusercontent.com/6764957/163968990-5754f1bf-b30e-4f12-a199-190c303f308c.png" width=“200” />
<img src="https://user-images.githubusercontent.com/6764957/163969151-ede420d1-3078-4eb4-b2b0-3e9f8a294d4d.png" width=“200” />

[![image](https://user-images.githubusercontent.com/6764957/164112979-f7c0a26e-b623-47dc-adb5-8ab620e56b47.png)](https://twitter.com/jackie_ore/status/1516539518542884868?s=20)

[![image](https://user-images.githubusercontent.com/6764957/164554925-e6a2791e-4c75-4d5f-8003-2932193d5b25.png)](https://twitter.com/HAJBlack/status/1516530935772155905?s=20)

[![image](https://user-images.githubusercontent.com/6764957/164554972-42ca6f9d-7e4b-4ab6-a2fe-f99dd143a036.png)](https://twitter.com/jeffbcross/status/1516529857865437186?s=20)


</details>


## Current talk plan

### Part 0

- You have more power than you know. Frontend > React. React > Frontend.
- what does being a React developer mean to you? What does "I know React" mean to you?
	- "I use React in my job"
	- "I know all the React APIs"
	- "I know React internals"
	- React is the most popular framework of all time https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
	- "I understand React's principles"
		- recognize good solutions
		- create them
- Intro me - Head of DX
	- Product (API Design, Integrations, Tooling)
	- Content (Docs, Writing, Speaking)
	- Community (Support, Connection, Events)
- What is Temporal?
	- Temporal is the open source runtime for managing distributed application state at scale.
	- mention about the history and users
	- The most valuable, mission-critical workloads in any software company are long-running and tie together multiple services.
	- rauchg mention: https://twitter.com/rauchg/status/1316808665370820609?s=20

### Part 1: The Problem

- How do you solve this problem?
	- "full stack uber clone"
	- youtube: distributed media transcoding
	- tweet undos https://twitter.com/swyx/status/1513301310434529288
	- requirements - reliable (never lose user data), scalable, responsive...
	- send people to temporal.io/react talk?

### Part 2: The “Solutions”

- state of solutions - bad problems
	- microservices hairball
	- patchwork - ryland chart and aws chart
	- programming model
- basic building blocks https://twitter.com/swyx/status/1470831554406408195
	- https://www.swyx.io/why-temporal/#30-second-pitch
	
### Part 3: Applying Lessons

- Lessons from React
	- React Components
		- jquery hairball. too low level
		- contained local state vs Renderer
		- apply: decompose 
	- React Hooks
		- Minimal
			- apply: set of APIs
		- Composable
			- apply: custom functionality
	- React Suspense
		- https://17.reactjs.org/docs/concurrent-mode-suspense.html#what-is-suspense-exactly
		- UX -> DX making async easy
			- timers
	- React devtools
	- React community
	
### Part 4: The API

- Designing the API
	- workflows
	- activities
		- retries
		- exponential backoff https://622a7dcda0cc740008dd0443--blissful-borg-8305c0.netlify.app/tutorials/temporal/retry-policy
	- timers
		- custom functionality
		- wf.condition -> mention acemarke
	- signals & queries


### Part 5: Results

- Social proof
	- Netflix, Snap, Datadog
	- Flightcontrol, Xstate
	- UI, testing/replay utility
	- Job opps
	- download chart
	- Fundraising


### Fin

- Fin
	- Go Forth and Solve problems
	- if you backend engineer, tell them
	- React is the most popular framework of all time https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
	- 7 lessons https://www.notion.so/7-Lessons-to-Outlive-React-3a8ed4db297c43a49464bbe3338cce36



## original talk plan

- You have more power than you know. Frontend > React. React > Frontend.
- what does being a React developer mean to you? What does "I know React" mean to you?
	- "I use React in my job"
	- "I know all the React APIs"
	- "I know React internals"
	- React is the most popular framework of all time https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
	- "I understand React's principles"
		- recognize good solutions
		- create them
- Intro me - Head of DX
	- Product (API Design, Integrations, Tooling)
	- Content (Docs, Writing, Speaking)
	- Community (Support, Connection, Events)
- What is Temporal?
	- Temporal is the open source runtime for managing distributed application state at scale.
	- mention about the history and users
	- The most valuable, mission-critical workloads in any software company are long-running and tie together multiple services.
	- rauchg mention
- Nerd Snipe
	- How do you solve this problem?
		- "full stack uber clone"
		- youtube: distributed media transcoding
		- tweet undos https://twitter.com/swyx/status/1513301310434529288
		- requirements - reliable (never lose user data), scalable, responsive...
		- send people to temporal.io/react talk?
	- state of solutions - bad problems
		- microservices hairball
		- patchwork - ryland chart and aws chart
		- programming model
	- basic building blocks https://twitter.com/swyx/status/1470831554406408195
		- https://www.swyx.io/why-temporal/#30-second-pitch
- Lessons from React
	- React Components
		- jquery hairball. too low level
		- contained local state vs Renderer
		- apply: decompose 
	- React Hooks
		- Minimal
			- apply: set of APIs
		- Composable
			- apply: custom functionality
	- React Suspense
		- https://17.reactjs.org/docs/concurrent-mode-suspense.html#what-is-suspense-exactly
		- UX -> DX making async easy
			- timers
	- React devtools
	- React community
- Designing the API
	- workflows
	- activities
		- retries
		- exponential backoff https://622a7dcda0cc740008dd0443--blissful-borg-8305c0.netlify.app/tutorials/temporal/retry-policy
	- timers
		- custom functionality
		- wf.condition -> mention acemarke
	- signals & queries
	- child workflows
- How does it work?
	- Worker vs Server separation
	- Replay - event sourced
	- just like react git analogy
	- Persisted
	- Distributed
	- show Temporal architecture talk
- Social proof
	- Netflix, Snap, Datadog
	- Flightcontrol, Xstate
	- UI, testing/replay utility
	- Job opps
	- download chart
	- Fundraising
- Fin
	- Go Forth and Solve problems
	- if you backend engineer, tell them
	- React is the most popular framework of all time https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue
	- 7 lessons https://www.notion.so/7-Lessons-to-Outlive-React-3a8ed4db297c43a49464bbe3338cce36


## pre-pre-planning

Must hit
- What is Temporal
- Core APIs
- Origin story

Things to demo
- code samples
- Nextjs example

Quotes
- Flightcontrol
- Xstate