[Patternfly] Web Component Rendering Performance

[Patrick Riley]

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.

https://medium.com/@priley86/building-cross-framework-components-with-performance-in-mind-a-web-component-thesis-5e17353aee18#.hpg56in0w

The key examples in this post are here:
https://plnkr.co/edit/dDf25hgHIkqqPzvdlJl9?p=preview
https://plnkr.co/edit/Ds77ZqlxJIV87TSXOZuV?p=preview
http://www.webpackbin.com/N1fwEMX0Z
http://www.webpackbin.com/Ey_W-1I0Z


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"*
https://twitter.com/slightlylate/status/785192470082560001

*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:
https://pimterry.github.io/server-components/
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
https://github.com/kriasoft/universal-router
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

*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:
https://jsfiddle.net/patrickriley/hsoup9pj/12/

There is also a great discussion about this in a recent podcast on
Javascript Air here:
https://javascriptair.com/episodes/2016-09-28/

There's also been some discussion on how to make your web components behave
more like React here:
https://component.kitchen/blog/posts/using-react-app-techniques-at-the-web-component-level-with-redux-virtual-dom-and-jsx


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

-Patrick
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161011/0b920f66/attachment.htm>