JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Tickets

Understanding Vue's Reactivity System by Building One

Submitted by Praveen Puglia on Thursday, 2 May 2019

Section: Full talk (40 mins) Technical level: Intermediate

View proposal in schedule

Abstract

Understanding how Vue implements its reactivity system from ground up, its gotchas and what’s coming in future.

Outline

  • What is reactivity?
  • Why do we care
  • Events in the DOM world.
  • Building a solution
  • Scaling the solution
  • Solving problems with automatic dependency collection and event management.
  • Caveats
  • Future and things Proxy based reactivity system solves.

Requirements

  • Intermediate JS knowledge
  • Basics of Vue

Speaker bio

Love CSS & Vue. Working on Machine Learning & Visualizations at Voicezen.

Links

Slides

https://slides.com/praveenpuglia/vue-reactivity

Comments

  • Abhishek Balaji (@booleanbalaji) Reviewer 3 months ago (edited 3 months ago)

    Hi Praveen,

    We need your slides and preview video before 28 May to evaluate your proposal. Please make sure your slides cover the following:

    • Clear problem statement, about a challenge that is generally applicable and not a company specific problem.
    • Approach to solving the problem.
    • Deep dive.
    • One clear takeaway.
  • Swapnil Agarwal (@swapagarwal) 22 days ago (edited 22 days ago)

    Hello Praveen! 👋
    Did you get time to work on the slides by any chance? 😇
    You can post a work-in-progress draft here as well, and we can work on refining the content. Let me know either way! 😅

  • Praveen Puglia Proposer 22 days ago

    Hey Swapnil,
    I haven’t really created slides for it just yet. Gonna work on them this weekend and have a draft put up here.

  • Praveen Puglia Proposer 18 days ago

    I just added the link to the slides that I have just started working on.

  • Abhishek Balaji (@booleanbalaji) Reviewer 5 days ago

    Hi Praveen, thanks for taking the time to do the rehearsal, here’s the feedback:

    Time taken: ~13 mins
    - Text on the slides needs to be made bigger, for clarity and readability.
    - Use better font colors when showing code; use syntax highlighting
    - Show a summary of the topics you’d be covering
    - Add more examples or show different approaches in explaining reactivity.
    - Elaborate on reactivity for those new to Vue
    - Add explanation on the varuous ways you can use the computed properties. Explain the under the hood properties and get into a couple of recipes for using the propertoes you’ve used in the code base.
    - Show code written in Vue to elaborate on your points
    - Instead of a,b, console.log show a visual example of reactivity like the vuejs getting started guide
    - Put in a small disclaimer, onmousemove is an example, and in real world production will demolish performance if we actually do that
    - Outside in approach instead of inside out, as people might get distracted when internals of handlers are discussed, and they don’t know yet how it connects to Vue data watchers
    - Talk was very fast paced and difficult to follow for someone new. Slides are distracting because of code shown and too much text
    - Answer the fundamental question of using Reactivity in Vue
    - When mentioning proxies for the future, expected a takeaway there. Even if it is repetition, it should be in the presentation.

    Please send in your revised slides by 23 August with the updated content.

    • Praveen Puglia Proposer a day ago

      Hi! I have updated the slides on the same URL. Feedback please!

Login with Twitter or Google to leave a comment