Benefits

• Exploit available parallelism
• Do 10 things are once, finish 10 times faster
• Continue to be responsive while waiting for something slow

Costs

• Have to present pending status to the user
• Have to remember what we were waiting for
• Asynchrony is confusing b/c it's not sequential
  • can't trace code sequentially,
    many possible sequences!
  • code is complex, hard to read
  • source of many bugs
  • hard to debug

			
			  let img=document.createElement('img');

			  //setting src triggers load
			  img.src='https://pictures.com/mine.jpg'
			  while (!img.complete) {
			  // twiddle my thumbs
			  }

			  init();
			
		  

• this blocks forever 😢

			
			  let img = document.createElement('img');

			  img.src = 'https://pictures.com/mine.jpg';

			  let pollId = setInterval(() => {
			    if (img.complete) {
			      init();
			    }
			  }, 250);

			  doOtherStuff();
			
		  

• Poll periodically instead of blocking in a while loop
• Browser can keep doing other work between polls
• But this still keeps checking over and over
• And once image loads, it will keep calling init()

			
			  let img = document.createElement('img');

			  img.src = 'https://pictures.com/mine.jpg';

			  let pollId = setInterval(() => {
			    if (img.complete) {
			      clearInterval(pollId);
			      init();
			    }
			  }, 250);

			  doOtherStuff();
			
		  

• clearInterval() stops future polling once condition is met
• Now init() only runs once
• Still more cumbersome and wasteful than being notified directly
• This motivates event listeners and other async abstractions

Sometimes Necessary

• “uncooperative” monitoring
• e.g., keep track of whether a page on another web site has changed
• it won't tell you, so you have to keep asking

Drawbacks

• polling is coarse-grained. We don't know something's updated until we check
• wasting time and energy when nothing changes

			
			  let img=document.createElement('img');

			  img.addEventListener('load',init);
			  img.src='https://pictures.com/mine.jpg'

			  doOtherStuff(); //runs during img load
			
		  

• load event is triggered when item finishes loading
• event listener is a callback
• system invokes callback when event occurs

• Drawback: code does not execute in order you see
• many opportunities to get confused

			
			  let img=document.createElement('img');

			  img.src='https://pictures.com/mine.jpg'
			  img.addEventListener('load',init);

			  doOtherStuff(); //runs during img load
			
		  

• the callback pattern uses functions to hand execution control to the async task.
• We've actually seen this callback pattern twice already!
• what happens when we need to chain multiple async tasks?

Goal

• Define code syntax that looks how we think
• look up me then look up my best friend then look up their best friend
• Represent order of actions and intents to wait

• Common use of Promise constructor is to wrap callback-based APIs
• Make them simpler to use

			
			  function getUserPromise (userId) {
			      return new Promise(fulfiller => {
			          getUser(userId, fulfiller);
			      });
			  }

			  getUserPromise("jopo")
			  .then(user => console.log(user.name));
			
		  

• Promise is “thenable”
• then(f) says f is a callback to invoke when promise is fulfilled
  • f receives value of fulfilled promise
  • add any number of callbacks any time
• No race condition:
  • Callback provided before fulfillment is invoked upon fulfillment
  • Callback provided after fulfillment is invoked immediately

			
			  p = delayed("hi",1000);
			  // promise resolves to "hi"
			  // after 1000ms

			  p.then(res => console.log(res));
			  // console outputs 1000ms later
			  ...lots of code
			  p.then(res => console.log("bye"));
			  // if p already fulfilled,
			  // callback executes immediately
			
		  

• then() callback can return a value (or a promise of one)
• passed to the next then() callback in chain when available
• more precisely, then() returns a new promise p providing that value
• so next then() is invoked on p
• p.then() passes on the value of p

			
			  //traditional evaluation style
			  y = f(g(h(x)));

			  //promise-based
			  Promise.resolve(x)
			  // promise with fulfilled value x
			  .then(h) //h receives x
			  .then(g) //g receives h(x)
			  .then(f) //f receives g(h(x))
			  .then(res => y=res);
			
		  

• Promise.all() tracks multiple promises running in parallel
• Returns one promise
  • resolved when all its subpromises are
  • value is array of individual promises' values
  • rejects if any of its individuals do
• Much clearer about intent than nested event callbacks
  • so much easier to debug

			
			  let p1=fetch(url1);
			  let p2=fetch(url2);
			  let p3=fetch(url3);
			  Promise.all([p1,p2,p3])
			  .then([c1,c2,c3] =>
			  {//process all 3 pieces},
			  err => {handle the error})
			
		  

• Sometimes, an asynchronous computation wants to report failure or errors
  • Could just pass the error to then() callback
  • But the pattern is so common we design for it
• Promise can be rejected instead of fulfilled
• then() can take a second callback
  • invoked when promise rejected
  • receives value of rejected promise---usually error message
  • like first callback, can return a value or promise
• whichever callback is invoked, returns promise to invokes next then()

			
			  fetch(url)
			  //returns a promise to provide
			  //   content found at that url
			  .then(content => {
			    //executes if fetch is fulfilled
			    console.log("received" + content);
			    return 0},
			  error => {
			    //executes if fetch is rejected
			    console.log("error: " + error)
			    return -1}
			  })
			  .then(res => console.log(res))
			  //logs 0 if fetch succeeded,
			  //     1 if it failed
			
		  

Promise

			
getUser("jopo") //returns a promise
.then(user => getUser(user.bestFriendId))
.then(friend => getUser(friend.bestFriendId))
.then(friendOfFriend => {
  console.log(friendOfFriend.name);
});
			
		  

• Promises use callbacks that say what to do when the promise is fulfilled
• But can only use the resolved value in the next callback.
• E.g., how could we console user at the end?
• Lots of syntactic noise with then chains and arrow functions.
• What if we could change the syntax to make async programming even easier?

Async/Await

			
async function showFriendOfFriend() {
  const user = await getUser("jopo");
  const friend = await getUser(user.bestFriendId);
  const friendOfFriend =
    await getUser(friend.bestFriendId);
  console.log(user, friendOfFriend.name);
}
			
		  

• async/await uses async functions that return Promises
• But await gives us a value (e.g. user is a raw value, not a promise)
• user can be used downstream anywhere!
• await pauses the async function without blocking the main thread
• We can even use await in loops!

  for (let i=1; i<=5; i++) {
    let result =
      await delayed('answer',5000);
    console.log(i + result);
  }

async/await

• Very expressive. Can write arbitrary async code
• Can interleave asynchronous work with other work
• Useful when async tasks must be run in sequence
• But hard to reason about! Execution order matters

Reactivity

• Less expressive than general-purpose async
• Focused on sync-async handoff
• Reason about values and changes, not execution order

Options API

import { createApp } from "vue";

createApp({
  template: "#template",
  data() {
    return {
      price: 5,
      quantity: 2
    }
  },
  computed: {
    total() {
      return this.price * this.quantity
    }
  }
}).mount("#app")
		  

Composition API

import { createApp, ref, computed } from "vue"

function setup() {
  const price = ref(5)
  const quantity = ref(2)

  const total = computed(() => {
    return price.value * quantity.value
  })

  return { price, quantity, total }
}

createApp({
  template: "#template",
  setup
}).mount("#app")
		  

const price = ref(5)
const quantity = ref(2)

const total = computed(() =>
  price.value * quantity.value)

watchEffect(() => {
  document.title =
    `Total: ${total.value}`
})
		  

• Signal: ref() in Vue
  • a value that can be mutated by the world
• Computation: computed() in Vue
  • a pure derived value, computed by the program
• Effect: watchEffect() in Vue
  • performs side effects (updating the DOM, making network requests, console logging, etc.)
  • returns nothing
  • runs whenever its signal or computation dependencies change

const count = ref(0)

<template>
  <p>Count: {{ count }}</p>
</template>

// framework implementation
watchEffect(() => {
  paragraph.textContent =
    `Count: ${count.value}`
})
		  

• Effects usually terminate a reactive computation
• But in our code so far, we haven't written many!

• Rendering the DOM is itself an effect
• When you interpolate a reactive value into the template, Vue arranges to update that part of the DOM when the value changes
• Conceptually, this is something like a watchEffect() attached to the rendered output

• watch() is a more targeted cousin of watchEffect()
• watchEffect() tracks whatever reactive values you read inside it
• watch() lets you specify exactly what source to watch
• Use it when you want an effect only for particular changes, often with access to old and new values

const query = ref('')

watch(query, (newQuery, oldQuery) => {
  console.log('changed from',
    oldQuery, 'to', newQuery)
  fetchResults(newQuery)
})
		  

• Do not usually write to a signal inside an effect
• An effect can accidentally trigger itself and loop forever
• A signal write should come from the world
  • user input
  • network response
  • timer
• If you find yourself deriving one signal from another in an effect, that is often a computed() instead

const state = ref({
  todos: [ "Create slides", "Release HW" ],
  total: 0
})

// plausible, but dangerous:
// "keep total in sync with todos"
watchEffect(() => {
  state.value.total =
    state.value.todos.length
})

// better: derived state is a computation
const total = computed(() => {
  return state.value.todos.length
})

// use total.value when needed
		  

• You can store objects and arrays inside a ref()
• That works well for reactive dictionaries, lookup tables, lists, and collections
• When you render an array with v-for, give each item a stable :key
• Keys help Vue diff efficiently and preserve the identity of each rendered item

// setup
const scores = ref({
  ada: 10,
  grace: 12
})

const todos = ref([
  { id: 1, text: 'Sketch', done: false },
  { id: 2, text: 'Prototype', done: true }
])

scores.value.ada++
todos.value.push({
  id: 3, text: 'Ship', done: false
})

// template
<li v-for="todo in todos" :key="todo.id">
  {{ todo.text }}
</li>
		  

• Vue auto-unwraps refs and computeds when you use them in templates
• That means you usually write {{ count }}, not {{ count.value }}
• In JavaScript, though, you still access ref values with .value

const count = ref(0)
const doubled = computed(() =>
  count.value * 2)

// template
{{ count + 1 }}
{{ doubled }}

// JavaScript
count.value++
		  

const count = ref(0)

count.subscribe(() =>
  console.log(count.value))

count.value++

// logs: 1
		  

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },

    get value() {
      return value
    },

    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

const first = ref("jo")
const last = ref("po")

watch([first, last], () => {
  console.log(
    first.value + last.value)
})

first.value = "th" // "thpo"
last.value = "eia" // "theia"
		  

function watch(deps, fn) {
  for (let dep of deps) {
    dep.subscribe(fn)
  }
}
		  

const first = ref("jo")
const last = ref("po")

watchEffect(() => {
  console.log(
    first.value + last.value)
})

first.value = "th" // "thpo"
last.value = "eia" // "theia"
		  

Intuition: When a running effect reads a signal, we should automatically track it as a dependency!

let currEffect

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },
    get value() {
      return value
    },
    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

function watchEffect(fn) {
}
		  

let currEffect

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },
    get value() {
      return value
    },
    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

function watchEffect(fn) {
  const execute = () => {
    const prevEffect = currEffect
    currEffect = fn
    try {
      fn()
    } finally {
      currEffect = prevEffect
    }
  }
}
		  

let currEffect

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },
    get value() {
      if (currEffect) {
        subs.add(currEffect)
      }
      return value
    },
    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

function watchEffect(fn) {
  const execute = () => {
    const prevEffect = currEffect
    currEffect = fn
    try {
      fn()
    } finally {
      currEffect = prevEffect
    }
  }
}
		  

let currEffect

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },
    get value() {
      if (currEffect) {
        subs.add(currEffect)
      }
      return value
    },
    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

function watchEffect(fn) {
  const execute = () => {
    const prevEffect = currEffect
    currEffect = fn
    try {
      fn()
    } finally {
      currEffect = prevEffect
    }
  }

  execute()
}
		  

let currEffect

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },
    get value() {
      if (currEffect) {
        subs.add(currEffect)
      }
      return value
    },
    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

function watchEffect(fn) {
  const execute = () => {
    const prevEffect = currEffect
    currEffect = fn
    try {
      fn()
    } finally {
      currEffect = prevEffect
    }
  }

  execute()
}
		  

const first = ref("jo")
const last = ref("po")

const full = computed(() =>
  first.value + last.value)

watchEffect(() => {
  console.log(full.value)
})

first.value = "th" // "thpo"
last.value = "eia" // "theia"
		  

function computed(fn) {
  const cachedValue = ref()
  watchEffect(() => cachedValue.value = fn())
  return cachedValue
}
		  

function ref(initial) {
  let value = initial
  let subs = new Set()

  return {
    subscribe(reaction) {
      subs.add(reaction)
    },
    get value() {
      if (currEffect) {
        subs.add(currEffect)
      }
      return value
    },
    set value(newValue) {
      if (newValue === value) return
      value = newValue
      for (let sub of subs) {
        sub()
      }
    }
  }
}
		  

function watch(deps, fn) {
  for (let dep of deps) {
    dep.subscribe(fn)
  }
}
		  

let currEffect

function watchEffect(fn) {
  const execute = () => {
    const prevEffect = currEffect
    currEffect = fn
    try {
      fn()
    } finally {
      currEffect = prevEffect
    }
  }

  execute()
}
		  

function computed(fn) {
  const cachedValue = ref()
  watchEffect(() => cachedValue.value = fn())
  return cachedValue
}