Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Writing Performant Front-end Code
1. V I R T U A L C O N F E R E N C E / / N O V - D E C 2 0 2 0 / / P R E S E N T E D B Y E P A M
2. V I R T U A L C O N F E R E N C E / / N O V - D E C 2 0 2 0 / / P R E S E N T E D B Y E P A M
Writing Performant
Front-end Code
LY U B O M I R B O Z H I N O V
3. ADAPT BY ZED
Who Am I?
Lyu b omir
B ozh in ov
Lead Software Engineer
Lead Software Engineer @ EPAM. Author. Speaker.
But most importantly, a tinkerer at heart, who
believes one should always leave the code better
than they found it - and apply the same to
everything.
3
About Me
9. ADAPT BY ZED
9
Computational Complexity: Time v Space
Sometimes the best way to visualise something is with
a poor drawing of random ‘wibbly-wobbly’ lines.
10. ADAPT BY ZED
10
Computational Complexity: The Problem
In the classic find all anagrams in a dataset problem,
you could iterate every time. Or just pre-process and use KVPs.
v
13. 13
Premature Optimisation
What do I mean by that?
Basically any situation where one
tries to make the code run faster
before even having completed the
functionality.
15. 15
Measure!
Measure your code speed!
And do it with enough consistency
across the codebase to have an
early-warning system for
performance problems.
16. 16
Measure How?
USER TIMING API
MARKS & MEASURES
https://developer.mozilla.org/en-
US/docs/Web/API/User_Timing_API
24. ADAPT BY ZED
Changing an element’s width or class will trigger visual
changes. ‘It’s only logical.’
24
Optimise Your JS
25. ADAPT BY ZED
Anything small that will trigger a visual update should be done
in a RAF call to ensure it’s finished on time. No setTimeout!
25
Optimise Your JS
26. ADAPT BY ZED
Split the work into smaller tasks, push them onto a stack, and
then use RAF calls to deal with them one by one.
26
Optimise Your JS
27. ADAPT BY ZED
Just spin up a web worker to keep the main thread free of the
long-running computation.
27
Optimise Your JS
29. ADAPT BY ZED
Jason Miller (@developit)
29
Optimise Your JS
greenlet: https://www.npmjs.com/package/greenlet
workerize: https://www.npmjs.com/package/workerize-loader
30. 30
Improve Style Calculations
We all joke around that CSS is a necessary evil, but the reality
is that we simply MUST try to keep it in check.
32. 32
Minimise Layout Complexity
The fewer elements you have in your DOM tree, the
more quickly the browser will calculate the locations and
dimensions of all of them.
33. 33
Paint and Compositing
• All property changes except transform and
opacity will trigger a repaint.
• Identify excessive paints with the dev tools
and create a separate layer.
• But too many layers at the compositing
stage can have a performance impact.
34. ADAPT BY ZED
The four parts of the RAIL model are basically four
perspectives on a web app’s state. Picture source: web.dev
34
The RAIL Model
37. ADAPT BY ZEDLevel One: How & Why?
37
WHY
THE PERFORMANCE TAB
OPTIMISE JAVASCRIPT EXECUTION
IMPROVE STYLE CALCULATIONS
MINIMISE LAYOUT COMPLEXITY
SIMPLIFY PAINT AND MANAGE LAYERS
KEEP THE RAIL MODEL IN MIND
VISUAL JANK AND STUTTER IS JUST BAD
UX
SLOW RENDERING WILL MAKE THE
USER FRUSTRATED
HOW
39. ADAPT BY ZED
There are number of other auto-magical features in modern
frameworks – usually just a boolean flag in a JSON file.
39
The Pros and Cons of Frameworks
40. ADAPT BY ZED
I’ve had the misfortune to write jQuery in IE6. It was about as
fun as it sounds.
40
The Pros and Cons of Frameworks
41. ADAPT BY ZED
Bundle analyzer: https://www.npmjs.com/package/webpack-
bundle-analyzer
41
The Pros and Cons of Frameworks
48. ADAPT BY ZED
It requires an absurd amount of tinkering to get it right. And
the solution is different for every project.
48
The Network Waterfall
49. ADAPT BY ZED
Addy Osmani (@addyosmani)
49
Optimise Your JS
critical: https://github.com/addyosmani/critical
50. ADAPT BY ZEDLevel Three: How & Why?
50
WHY
SOMEWHAT CLEAR CRYSTAL CLEAR
HOW
51. ADAPT BY ZED
None of the things I’ve mentioned here today are FINAL.
51
Final Words
52. 52
Final Words
Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)
Total Blocking Time (TBT)
Keep an eye on https://web.dev
53. V I R T U A L C O N F E R E N C E / / N O V - D E C 2 0 2 0 / / P R E S E N T E D B Y E P A M
Thank you!
LinkedIn: https://www.linkedin.com/in/lyubomir-bozhinov/
Twitter: https://twitter.com/TheElegantDev