JSFoo: VueDay 2019

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


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 Status: Confirmed & Scheduled

View proposal in schedule


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


  • 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.


  • Intermediate JS knowledge
  • Basics of Vue

Speaker bio

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





  •   Abhishek Balaji (@booleanbalaji) Reviewer 10 months ago (edited 10 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) 8 months ago (edited 8 months 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 8 months 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 8 months ago

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

  •   Abhishek Balaji (@booleanbalaji) Reviewer 7 months 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 7 months ago

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

Login with Twitter or Google to leave a comment