Why we need UI libraries
FRAMEWORKS
OR
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
IS
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...
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
Twitter:
@kh_mugh
GitHub:
@Khachatour
Email:
kh.virabyan@gmail.com
THANK YOU
YOU
deck
By Khachatur Mughnetsyan
