Why we need UI libraries

FRAMEWORKS

Hi, I'm Khachatur

Twitter:

@kh_mugh

GitHub:

@Khachatour

Email:

kh.virabyan@gmail.com

CREATING GOOD USER INTERFACES IS HARD

GOOD

HARD

Dynamic content

Rich interactions

Animations

etc.

DOM

SLOW

elementA.className = "a-style";
var heightA = elementA.offsetHeight;  // layout is needed
elementB.className = "b-style";       // invalidates the layout
var heightB = elementB.offsetHeight;  // layout is needed again




elementA.className = "a-style";
elementB.className = "b-style";
var heightA = elementA.offsetHeight;   // layout is needed and calculated
var heightB = elementB.offsetHeight;   // layout is up-to-date (no work)

BATCH DOM OPERATIONS THAT REQUIRE REFLOW OR LAYOUT TRASHING

What forces reflow?

Everything related to scroll

Box metrics

elem.getBoundingClientRect()

elem.getClientRect()

elem.scrollTo()

elem.scrollIntoView()

elem.offsetWidth/Height

elem.scrollWidth

etc...

WHY SOME FRAMEWORKS REQUIRE SOME KIND OF RUNTIME OR COMPILATION STEP

VirtualDOM

IncrementalDOM

This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames.

Pete Hunt, Rethinking Best Practices

DATA FETCHING

DATA