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 • Web page oriented development – HTML pages loaded from server and rendered in browser.

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages.

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages. • Web experience oriented application development

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages. • Web experience oriented application development – Single page application – a desktop application with web experience.

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages. • Web experience oriented application development – Single page application – a desktop application with web experience. – Partial update of necessary regions, windows, panes.

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages. • Web experience oriented application development – Single page application – a desktop application with web experience. – Partial update of necessary regions, windows, panes. – Application loads once, only data is refreshed.

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages. • Web experience oriented application development – Single page application – a desktop application with web experience. – Partial update of necessary regions, windows, panes. – Application loads once, only data is refreshed. – URLs, back & forward navigation.

Project • Web page oriented development – HTML pages loaded from server and rendered in browser. – Navigation through pages. • Web experience oriented application development – Single page application – a desktop application with web experience. – Partial update of necessary regions, windows, panes. – Application loads once, only data is refreshed. – 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 { constructor(private http:Http, private router: Router) { ... } }

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

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

React • Component – Template • HTML block that should be rendered with this component. – State • Private data that component should render or use for calculations. Angular

React • Component – Template • HTML block that should be rendered with this component. – 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'; constructor(private http:Http, private router: Router) { ... } }

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

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

React – State • Custom approach to state handling. class MyComponent extends React.Component { 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({ selector: 'my-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"/> class MyComponent extends React.Component { render() { return <div>{this.props.text}</div>; } }

What else? • Beyond Components

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

What else? • Beyond Components – Events • Event oriented programming with custom application events. – HTTP • We need somehow receive data from and send data to server.

What else? • Beyond Components – Events • Event oriented programming with custom application 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. class MyComponent extends React.Component { 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 • Angular – single framework with many features. – Dependency Injection; – Components; – Services; – Directives; – Pipes; – HTTP; – Router; – etc.

React • React – many libraries for single application. – Components; – State handling; – Props handling; – JSX;

React • Angular – single framework with many features. – Dependency Injection, Components, Services, Directives, Pipes, HTTP, Router and etc. • React – many libraries for single application. – Components, state and props handling + JSX. Angular

Angular or React

More Related Content

What's hot

Similar to Angular or React

More from Orkhan Gasimov

Recently uploaded

Angular or React