Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React vs Vanilla JS: the Fight for DOMination

React vs Vanilla JS: the Fight for DOMination

React and Vanilla JS: the fight for DOMination

If you are a React developer, chances are you have run into this problem before: there are libraries out there that do what you need done, but they are written in Vanilla JS, not React. That means they manipulate the DOM imperatively, instead of declaratively describing it and letting React handle its actual manipulation. How do we integrate such libraries with React? How do we ensure the DOM isn't changed behind React's back - or when that's unavoidable, how do we bring React's virtual DOM back in sync with it? Most importantly, do the benefits of Reactification ultimately outweigh the costs?

The speaker

Samdish Suri is a full stack engineer currently occupying himself with creating delightful experiences with Node and Javascript. He is passionate about staying on the cutting edge of web technology and exploring the new possibilities it opens up.

Presented at:

(I) Great Indian Developer Summit | Bangalore | #GIDS18 | April 24, 2018 | 30 mins | GIDS.WEB/MOBILE

Conference link: http://www.developermarch.com/developersummit/session.html?insert=Samdish1

Presentation video: https://www.youtube.com/watch?v=eQLNM-WgBrQ&feature=youtu.be

(II) Tech in Asia Product Development Conference | Jakarta | #TIAPDC2018 | July 4, 2018 | 45 mins | Code and Build Stage

Conference link: https://pdc.techinasia.com/speaker/samdish-suri/

Avatar for Samdish Suri

Samdish Suri

April 24, 2018
Tweet

Other Decks in Technology

Transcript

  1. it’s the perfect DOM manipulation plugin but it’s pure Vanilla

    JS without a React wrapper ! that shouldn’t be a problem "
  2. Why React + Muuri • nested draggable items (requires Muuri)

    • real time sync (requires Redux) Initial implementation • Nesting in state • Nesting in UI Assigner
  3. Roadblock 1 Process • our own code • timeline of

    DOM events Theory React basics (unidirectional data flow) Code Try a fix and make things worse! Process Revisit the timeline Code Try another fix and celebrate! Reflect and learn Observe the roadblock
  4. Roadblock 2 Code Try a naive fix Theory The obscure

    stacking context Code Try a fix and BREAK the app completely Theory Revisit more React basics (virtual DOM) Code Try another fix and celebrate! Reflect and learn Observe the roadblock
  5. Redux Action Redux State React vDOM Muuri DOM Unmount the

    original Copy it Drag it Drop it Mount a new node dragging: # ➡ % dragging: % ➡ # DRAG_ITEM DROP_ITEM &
  6. State (Redux) UI (React) Changes in the State refresh the

    UI User uses the UI to update the State
  7. State (Redux) UI (React) Changes in the State refresh the

    UI User uses the UI to update the State Muuri UI (React) User uses Muuri to update the UI Sync Muuri’s UI changes to State Renders a duplicate item (undraggable)
  8. Redux Action Redux State React vDOM Muuri DOM Unmount the

    original Copy it Drag it Drop it Mount a new node dragging: # ➡ % dragging: % ➡ # DRAG_ITEM DROP_ITEM & Render DOM node Make it draggable Mount the fix Make the React node draggable
  9. Redux Action Redux State React vDOM Muuri DOM Unmount the

    original Copy it Drag it Drop it Mount a new node dragging: # ➡ % dragging: % ➡ # DRAG_ITEM DROP_ITEM & Render DOM node Make it draggable Mount the fix Make the React node draggable & Unmount the dragged node
  10. State (Redux) UI (React) Changes in the State refresh the

    UI User uses the UI to update the State Muuri UI (React) User uses Muuri to update the UI Sync Muuri’s UI changes to State Renders a duplicate item (undraggable) ✅ Fix this creatively
  11. Roadblock 1 - Item Duplication Process • our own code

    • timeline of DOM events Theory React basics (unidirectional data flow) Code Try a fix and make things worse! Process Revisit the timeline Code Try another fix and celebrate! Reflect and learn Observe the roadblock
  12. Roadblock 2 Code Try a naive fix Theory The obscure

    stacking context Code Try a fix and BREAK the app completely Theory Revisit more React basics (virtual DOM) Code Try another fix and celebrate! Reflect and learn Observe the roadblock
  13. Stacking Context image source: tympanus.net, quote source: MDN The z-index

    values of child stacking contexts only have meaning in the parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
  14. Diagnosis React vDOM Muuri React list list-id write without read

    ( time + MUURI-DRAGGABLE-ITEM + muuri-item-shown + stack-higher