react and vanilla js - developermarch€¦ · react and vanilla js the fight for domination samdish...
TRANSCRIPT
React and Vanilla JSThe Fight for DOMination
Samdish Suri @awreccan
WHAT IF
YOU COULD DRAG ITEMS TO OTHER LISTS?
WHAT IF I TOLD YOU
THERE’S A LIBRARY FOR THAT
it’s the perfect DOM manipulation pluginbut it’s pure Vanilla JS
without a React wrapper
!
that shouldn’t be a problem "
Sunshine and daisies and unicorns
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
&
State (Redux) UI (React)
Changes in the State refresh the UI
User uses the UI to update the State
State (Redux) UI (React)
Changes in the State refresh the UI
User uses the UI to update the State
MuuriUI (React)
User uses Muuri to update the UI
State (Redux) UI (React)
Changes in the State refresh the UI
User uses the UI to update the State
MuuriUI (React)
User uses Muuri to update the UI
Sync Muuri’s UI changes to State
Renders a duplicate item (undraggable)
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 draggableMount
the fixMake the React node draggable
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 draggableMount
the fixMake the React node draggable
& Unmount the dragged node
OR ensure that you bring React (vDOM) and the DOM back in sync
State (Redux) UI (React)
Changes in the State refresh the UI
User uses the UI to update the State
MuuriUI (React)
User uses Muuri to update the UI
Sync Muuri’s UI changes to State
Renders a duplicate item (undraggable)
✅
Fix this creatively
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.
has open menu
DiagnosisReact vDOM Muuri React
list list-id
time
+ MUURI-DRAGGABLE-ITEM + muuri-item-shown
+ stack-higher
DiagnosisReact vDOM Muuri React
list list-id write without read (
time
+ MUURI-DRAGGABLE-ITEM + muuri-item-shown
+ stack-higher
Class WarfareSolutions?
Class WarfareSolutions?
inline style
has open menu
React and Vanilla JSThe Fight for DOMination
github.com/awreccan/assigner
Samdish Suri @awreccan