[Patternfly] Web Component Rendering Performance

[Andres Galante]

Patrick you are awesome 👏🏻

Great article and even better Q&A

On Tuesday, 11 October 2016, Patrick Riley <priley at redhat.com> wrote:

> 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/20161020/3f35c180/attachment.htm>