reactjs - Polymer with Top-down Pattern -
i trying replace react polymer reduce js/jsx , use more html.
in react, element receives props, , sends out sub-props children this:
// pseudocode export class parent extends react.component { render() { return ( <child a={this.props.a} b={this.prop.b} /> <child a={this.props.c} b={this.prop.d} /> ); } }
in polymer, in same way, want root polymer element have large state tree, , give subtrees children. started replacing leaf react components polymer components.
// pseudocode export class parent extends react.component { render() { return ( <child a={json.stringify(this.props.a)} b=a={json.stringify(this.props.b)}/> <child a={json.stringify(this.props.c)} b=a={json.stringify(this.props.d)}/> ); } } <dom-module id="child"> <template> [[a.name]] said [[b.txt]] </template> <script> polymer({ is: 'child', properties: { a: object, b: object } }); </script> </dom-module>
this works, there potential inefficiencies worried about:
when passing json objects web-component children, needs serialized json because dom attributes accept strings or boolean. wasteful marshalling. large object, react uses reference web componenets copy , keep object serialized json string. correct?
html code shows huge json string embedded in tag,
<child a='{... long json ...}' />
. html code looks ugly, , attributes of leaf component stored in ancestors, same json string appears in html code many times. if dom tree has depth d, attribute repeated d times. correct?can avoid serialization , use references when parent web-component passes objects children?
what right way apply global state tree web component tree? polymer efficiently work top-down pattern? can avoid bloatd-html?
Comments
Post a Comment