jeffcarp / frontend-hyperpolyglot Goto Github PK

Ember is (probably?) more widely used than Polymer and Vue. The order should be:

There is demand for more frameworks, but currently the table is too crowded to admit them. The table needs a way of dynamically adding/removing columns to fix this problem.

• Blocking #27

There's an error (or maybe just a typo) at line Prop validate Object for Polymer. It's written :

properties: {
  myObj: {type: Number}  
}

But it should be :

properties: {
  myObj: {type: Object}
}

Also I don't know if the author knows but it could be shortened to just :

properties: {
  myObj: Object
}

The four previous lines can be shortened to.

Very nice work btw. Very helpful.

The correct syntax is <Child foo='::scope.bar' />

https://docs.angularjs.org/guide/expression

Shape

React will allow you to specify the shape of an object prop, this is an example:

var Comp = React.createClass({
  propTypes: {
    name: React.PropTypes.shape({
      first: React.PropTypes.string.isRequired,
      last: React.PropTypes.string
    }).isRequired
  },
  render() {
    return <div>Hello</div>;
  }
});

ReactDOM.render(<Comp name={{ first: "James" }}/>, document.querySelector('#root'));

I'm not sure if this is something allowed by other frameworks, but it's a pretty good feature.

Custom PropType Validation

React offers functionality to add a custom prop validator, which again is a good feature, for example you might want to do hex code validation. Again, not sure if this is something unique to React, but it's a nice feature.

https://github.com/eigenmethod/mol

Vue 2.0 will be coming out soon.
See here a list of changes: vuejs/vue#2873

Will this table likely be updated in the future to reflect this?

I only have experience with React and Vue here (and Vue 2 may set the cat amongst the pigeons in feature comparisons when it also adds render() methods), so some examples of the sort of thing I mean.

React

http://facebook.github.io/react/docs/multiple-components.html#children
http://facebook.github.io/react/docs/top-level-api.html#react.children
https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626 - "render callbacks"

Placing all child contents

MyComponent#render():

<div>Before {this.props.children} After</div>

<MyComponent><p>Child 1</p><p>Child 2</p></MyComponent>

Passing rendered elements as props

MyComponent#render():

<div>
  {this.props.foo}
  {this.props.children}
  {this.props.bar}
</div>

<MyComponent bar={<p>Bar</p>} foo={<p>Foo</p>}>
  <p>Child 1</p><p>Child 2</p>
</MyComponent>

Dynamic component as a prop

MyComponent#getDefaultProps():

return {someProp: 'div'}

MyComponent#render():

<this.props.someProp>...</this.props.someProp>

<MyComponent/>
<MyComponent someProp={SomeOtherComponent}/>

Vue

https://vuejs.org/guide/components.html#Content-Distribution-with-Slots

Placing all child contents

MyComponent template:

<div>Before <slot></slot> After</div>

<my-component><p>Child 1</p><p>Child 2</p></my-component>

Named slots

MyComponent template:

<div>
  <slot name="foo"></slot>
  <slot></slot>
  <slot name="bar"></slot>
</div>

<my-component>
  <p slot="bar">Bar</p>
  <p slot="foo">Foo</p>
  <p>Child 1</p><p>Child 2</p>
</my-component>

Hi,

great job for putting all of this together !

Though, there is a little oversight about Angular 1.5.5

• Two-way binding (components)

<child foo="bar" />

cheers

The front-end universe is changing from day to day and it's hard to judge how up to date the information is.

Please display the date of data collection somewhere on top of http://jeffcarp.github.io/frontend-hyperpolyglot/

vue.pdf

I think Polymer does support two way data binding by using curly braces instead of square ones:

<child-component prop1="{{ parentProp }}"></child-component>

Hope @ebidel or anyone from the Polymer team can confirm this.

We'd love to see Aurelia added to this list. It's quite popular and our team would be happy to help fill out the chart.

Please add a LICENSE and CONTRIBUTING.md file to this repository.