Angular or React

Angular or React ?
Which fits your needs?

Speaker
• Orkhan Gasimov, Software Engineer
– 14 years of software engineering;
– variety of technologies (languages & frameworks);
– solution design and implementation;
• Technology consulting and training:
– Architecture.
– Java.
– JavaScript / TypeScript.
• Author of training courses.
– Spring Cloud.
– Akka for Java.

Agenda
• Describe the difference of two.
• Analyze an example project.
• Overview core concepts.
• Final decision making.
• Questions & Answers

Google – Angular
• Google – many apps with single user id.
• Angular – single framework with many features.

Facebook – React
• Facebook – single portal with many features.
• React – many libraries for single application.

Project
• Imagine an example project with following functionality:
– User logon;
– Home page;
– Settings page;
– Data page;
– Etc.

Project
• High-level project architecture consists of:
– Web GUI;
– REST API Server;
– Database;

Project
• Web page oriented development

Project
– HTML pages loaded from server and rendered in browser.

Project
– Navigation through pages.

Project
• Web experience oriented application development

Project
– Single page application – a desktop application with web experience.

Project
– Partial update of necessary regions, windows, panes.

Project
– Application loads once, only data is refreshed.

Project
– URLs, back & forward navigation.

Project
– URLs, back & forward navigation.
– Caching, offline mode.

Project
• What is required?
– JS toolkit that enables single page application development.
– Reusable UI components support.

Project
• Building blocks
– Components

Project
• Web page decomposed to components

Project
• Component approach

Project
• Programming languages available?

Angular – Language
• TypeScript
@Component({...})
class MyComponent {
constructor(private http:Http, private router: Router) {
...
}
}

React – Language
• JavaScript (ES5 / ES6)
• TypeScript also supports React
var MyComponent = React.createClass({
render: function() {
...
}
});
class MyComponent extends React.Component {
render() {
...
}
}

Angular – Approach
• Angular is a framework with dependency injection.
• The UI is component based.
• Application is composed from components, services and other elements.
@Component({...})
class MyComponent {
...
}
}

React – Approach
• React is a library.
• It is about components, and components.
render() {
return <div>Component</div>;
}
}

React
• Component
– Template
• HTML block that should be rendered with this component.
Angular

React
• Component
– Template
– State
• Private data that component should render or use for calculations.
Angular

React
• Component
– Template
– State
• Private data that component should render or use for calculations.
– Properties
• Properties that may be passed from outside world to a component.
Angular

Angular – Templates
• HTML templates with JS code
@Component({
selector: 'my-component',
template: '<div>{{name}}</div>'
})
class MyComponent {
private name = 'Component';
...
}
}

React – Templates
• JSX – JS code with HTML markup
const name = 'Component';
render() {
return <div>{name}</div>;
}
}

Angular – State
• Component is an instance of a class.
• State of object is the state of component.
@Component({
template: '<div>{{name}}</div>'
})
class MyComponent {
private name = 'Component';
updateName() {
this.name = "Updated component";
}
...
}
}

React – State
• Custom approach to state handling.
constructor() {
this.state = {name: 'Component'};
}
updateName() {
this.setState({name: "Updated component"});
}
render() {
return <div>{this.state.name}</div>;
}
}

Angular – Properties
• Property syntax with @Input decorator should be used.
<MyComponent [text]="Sample text"/>
@Component({
template: '<div>{{text}}</div>'
})
class MyComponent {
@Input()
private text = 'Component';
}

React – Properties
• Special props object is available inside the component.
<MyComponent text="Sample text"/>
render() {
return <div>{this.props.text}</div>;
}
}

What else?
• Beyond Components

What else?
– Events
• Event oriented programming with custom application events.

What else?
– Events
– HTTP
• We need somehow receive data from and send data to server.

What else?
– Events
– HTTP
• We need somehow receive data from and send data to server.
– Routing
• Navigation over URLs requires different components to be rendered.

Angular – Events
• Framework supports event-oriented development with special constructs.
<MyComponent (myEvent)="eventHandler(event)"/>
@Component({...})
class MyComponent {
@Output()
myEvent: EventEmitter<string> = new EventEmitter<string>();
triggerEvent(event: string) {
this.myEvent.emit(event);
}
}

React – Events
• Library does not support event-driven development out of the box.
• There many third party libraries to use, as well as react adapted ones.

Angular – HTTP
• Framework provides HTTP module based on RxJS.
@Component({...})
class MyComponent {
constructor(private http:Http) {
}
getData(): Observable<DataItem[]> {
return this.http.get("http://localhost/data")
.map(response => response.json() as DataItem[]);
};
}

React – HTTP
• Library does not provide HTTP support out of the box.
• Native JS or third party libraries should be used.
getData() {
fetch("http://localhost/data")
.then(function (response) {
return response.json()
})
}
}

Angular – Routing
• Framework supports routing out of the box.
const appRoutes: Routes = [
{path: 'crisis-center', component: CrisisListComponent},
{path: 'hero/:id', component: HeroDetailComponent},
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
...
})
export class AppModule {
}

React – Routing
• Facebook developed react-router as separate library:
• Third party libraries are also available.
render(
<Router history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home} />
<Route path='admin' component={Admin} />
<Route path='genre' component={Genre} />
</Route>
</Router>,
document.getElementById('root')
)

Summary
• In scope
– Components

Summary
• In scope
– Components
• Templates

Summary
• In scope
– Components
• Templates
• State

Summary
• In scope
– Components
• Templates
• State
• Properties

Summary
• In scope
– Components
• Templates
• State
• Properties
– Events

Summary
• In scope
– Components
• Templates
• State
• Properties
– Events
– HTTP

Summary
• In scope
– Components
• Templates
• State
• Properties
– Events
– HTTP
– Routing

Summary
• In scope
– Components
• Templates
• State
• Properties
– Events
– HTTP
– Routing
• Out of scope
– Flux

Angular
– Dependency Injection;
– Components;
– Services;
– Directives;
– Pipes;
– HTTP;
– Router;
– etc.

React
– Components;
– State handling;
– Props handling;
– JSX;

React
– Dependency Injection, Components, Services,
Directives, Pipes, HTTP, Router and etc.
– Components, state and props handling + JSX.
Angular

Angular or React

More Related Content

What's hot (20)

Similar to Angular or React (20)

More from Orkhan Gasimov (11)

Recently uploaded (20)

Angular or React