Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)

We engineer startups.
sunscrapers.com
ReactJS & Angular2
Robert Piękoś

sunscrapers.com
Cechy wspólne
● Moduły, komponenty (System.js, Webpack)
● Bardzo dobrze sprawdzają się w Universal Javascript

sunscrapers.com
ReactJS
React - biblioteka JavaScript.
Główne cechy:
● Virtual DOM
● JSX, props, states
● Very friendly with Flux architecture
● Używany we frameworku React Native do tworzenia aplikacji mobilnych

sunscrapers.com
ReactJS - tworzenie komponentu - JSX
1.
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
2.
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);

sunscrapers.com
ReactJS - wyświetlenie komponentu
<body>
<div id="example"></div>
</body>

sunscrapers.com
Angular2
Angular2 - nowoczesny JavaScript MV* Framework.
Główne cechy:
● Dwukierunkowe wiązanie danych (two-way data binding)
● Wiele gotowych rozwiązań dostarczonych bezpośrednio przez framework
● Napisany w TypeScript
● Używany Ionic2 oraz NativeScript przy programowaniu aplikacji mobilnych

sunscrapers.com
Angular2 - TypeScript
1.
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
2.
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);

sunscrapers.com
Angular2 - tworzenie komponentu
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{ title }}</h1>
<h2>My favorite hero is: {{ myHero }}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}

sunscrapers.com
Angular2 - wyświetlenie komponentu
<body>
<my-app>Loading...</my-app>
</body>

sunscrapers.com
Obecne trendy
Angular.js, ReactJS, Angular2

sunscrapers.com
Obecne trendy

sunscrapers.com
Dziękuję za uwagę

Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)

Recommended

Recommended

More Related Content

Similar to Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)

Similar to Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl) (20)

More from Sunscrapers

More from Sunscrapers (7)

Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)