[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]

[Patternfly] Web Component Rendering Performance



Hello Patternfliers,

I wanted to share my recent post on web component rendering analysis. A huge thanks to Brian Leathem, Andres Galante, and Dana Gutride for helping review this with me and raising different challenges along the way.


The key examples in this post are here:


I want to ask the community now for feedback and see what our other developers at Red Hat think about this. I've received a few early questions about this and I'd like to address them here first. Please feel free to add on to this discussion if you disagree!

Question:
"i'd like to see a discussion of loading/TTI on phones"

Response: TTI and the "critical rendering path" are still of utmost important for making your app fast and giving a fast first impression. I think web components still fit the bill if the same care is taken to ensure they are lightweight and rendered properly. When used as leaf nodes/jquery plugin replacements alongside fast rendering frameworks like virtual-dom/incremental-dom, they make your app very responsive throughout the experience too. If TTI is your only goal, I'd recommend looking at the "isomorpic" _javascript_/server rendering approach (this is becoming common now in the React ecosystem). "Server" components should help here too..

Relevant links: 
 
Question:
Can I pass arrays/objects to web components the same way I do angular directives or React components?

Response:
Ironically, web component "DOM" behaves the same way as other DOM. There is currently nothing in the browser spec which allows anything but strings in your DOM attributes. Rob Dodson mentions this as a current "platform" limitation. However, React and Angular provide "sugar" which enables you to pass arrays/objects to nested components. We can do the same thing with web components by selecting the DOM element with JS and setting properties or "instantiating" them as classes and setting them on initialization. Example of this with Skate JS here:

There is also a great discussion about this in a recent podcast on _javascript_ Air here:

There's also been some discussion on how to make your web components behave more like React here:


Hope you enjoy the reading and dive in to this discussion :)

-Patrick


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]