react and vanilla js - developermarch€¦ · react and vanilla js the fight for domination samdish...

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