Patrick you are awesome 👏🏻 Great article and even better Q&A
On Tuesday, 11 October 2016, Patrick Riley <[email protected]> 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 > >
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
