feimosi / frameworks-code-comparison Goto Github PK

At least a simple example of handling events (component output) :

• AngularJS:

bindings: {
  onClick: '&',
}
// ...
this.onClick({ color: selectedColor })
// ...
<primary-button onClick="$ctrl.changeColor(color)"></button>

• Angular:

@Output() onClick = new EventEmitter<string>();
// ...
<Button (onClick)="changeColor($event)">

Something about streams

• React:

<Button onClick={ this.changeColor } />

Something about Synthetic events.

Preferably also with links to docs.

At least a simple example of conditional rendering:

• AngularJS:
  ng-if
ng-switch

• Angular:
  *ngIf
[ngSwitch]

• React:

• Vue.js:
  v-if
v-else-if
v-else

Preferably also with links to docs.

At least a simple example of using child nodes:

• AngularJS:
  $element

• Angular:
  ViewChild and ContentChild

• React:
  refs and this.props.children

Preferably also with links to docs.

At least one example of each type of binding (with usage):

• AngularJS:

bindings {
  user: '<',
  department: '@',
  onEdit: '&',
}

• Angular: (#7)

  @Input() user: User;
  @Output() onEdit = new EventEmitter<User>();

• React:

propTypes = {
  user: PropTypes.instanceOf(User).isRequired,
  onEdit: PropTypes.func,
}

Preferably also with links to docs.

To this section:
https://github.com/feimosi/frameworks-code-comparison#lifecycle-methods

From here:
https://angular.io/guide/lifecycle-hooks

Description of each available method:

• AngularJS:

• Angular:

• React:

• Vue.js:

Preferably also with links to docs.

Would be great if some native speaker could check the text for proper grammar.

https://github.com/feimosi/frameworks-code-comparison/blob/master/README.md

At least a simple example of using interpolation:

• AngularJS:
  {{ }} ng-bind ng-cloak

• Angular:
  {{ }}
  https://angular.io/guide/template-syntax#interpolation

• React:
  { }

Preferably also with links to docs.

Hi, how do you feel about adding VueJs to this?

I would be willing to create PRs.

You should definitely add Svelte, I'm willing to help contribute!

At least a simple example of using filters:

• AngularJS: (#15)
  Filters
  https://docs.angularjs.org/guide/filter

• Angular:
  Pipes
  https://angular.io/guide/pipes

• React:
  Function invocation

Preferably also with links to docs.

At least a simple example of using forms (with two-way data binding when available):

• AngularJS:

<form name="$ctrl.loginForm">
...
</form>

• Angular:

<form #loginForm="ngForm">
</form>

• React:

<form onSubmit={this.handleSubmit}>
</form>

Preferably also with links to docs.

You should definitely add Polymer, I'm willing to help contribute!

Would be great if some native speaker could check the text for proper grammar.

https://github.com/feimosi/frameworks-code-comparison/blob/master/README.md

Angular part of lifecycle hooks missed.
If you don't mind I can work on it.

Add hacktoberfest label plz.

https://angular.io/guide/forms#template-driven-forms

I think that should add an example of Vuejs form handling

Addresses: https://github.com/feimosi/frameworks-code-comparison#vuejs-13

Right now the style is mixed, some snippets are indented with 2 spaces and some with 4.

If you know a tool that would do it automatically, let me know!

At least a simple example of using lists:

• AngularJS:
  ng-repeat, trackby

• Angular:
  *ngFor

• React:
  key

Preferably also with links to docs.

At least a simple example of data-binding:

• AngularJS:
  ng-model

• Angular:
  [(ngModel)]

• React:

• Vue.js:
  v-model

Preferably also with links to docs.

https://github.com/feimosi/frameworks-code-comparison#data-binding

I was wondering how it would be if we try to add codesandbox or codepen examples to each examples?

At least a simple example of using styles:

• AngularJS:
  ng-style

• Angular:
  [ngStyle]

• React:
  style={}
  A few words about css-in-js and other approaches.

• Vue.js:

Preferably also with links to docs.