Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React vs Angular2

395 views

Published on

Different points of view about two great js frameworks (AngularConf 2016)

Published in: Software
  • Be the first to comment

  • Be the first to like this

React vs Angular2

  1. 1. React vs Angular 2 matter of points of view by Massimiliano Mantione & Gabriele Mittica
  2. 2. Common traits Manage the complexity of DOM manipulation Allow splitting a view into components Let you specify the view declaratively... ...but also let you put logic into the view The view can use the application state They do all these things in di䇁erent ways!
  3. 3. Angular 2 Component Views Defined with a template import {Component} from '@angular/core';  @Component({    selector: 'my­component',    template: `    <div>      <p>I'm {{name}}</p>      <button (click)="sayHi()">Say Hi</button   </div>`  })
  4. 4. Angular 2 Templates Can use directives Directives provide logic (they are like a sub-language) Angular transforms them into DOM elements
  5. 5. A React View function MyComponent (props) {    return <div>      <p>I'm {props.name}</p>      <button on­click={() => props.hi()}>Say    </div>  } ...is actually plain Javascript! React is only about views (for models you are on your own)
  6. 6. A Functional Approach Components are pure functions of their inputs No separated markup language Views are produced by Javascript code JSX is optional (it looks like markup but it's actually code)
  7. 7. Angular 2 Component State Angular 2 is object oriented Every component is a class State is stored inside instance properties Templates can data bind those properties (either one way or two ways) Instance methods can be bound to events
  8. 8. NG2 Component Example import { Component } from '@angular/core';  @Component({    selector: 'my­component',    template: '<div>I'm {{name}}. <button (cli })  export class MyComponent {    constructor() {      this.name = 'Max'    }    sayMyName() { 
  9. 9. Let's recap Components are directives that are associated with a template They support data binding <input type="text" [(ngModel)]="fruit" id="n <div>{{fruit}}</div> They are used as tags in the template markup
  10. 10. React Component inputs Props... <Contact name={name} surname={surname} /> ...and children <Preview>    <Picture url={link} />    <Caption text={content} />  </Preview> Both are immutable!
  11. 11. Immutable WAT? How do you update an immutable view? You re-render it! Your code re-creates the element tree every time this makes the view code extra simple render() actually produces a virtual DOM React modifies the real DOM only where strictly needed!
  12. 12. Components in action render() returns a tree of immutable elements The element tree is reduced to DOM virtual elements A di䇁 algorithm discovers how to patch the DOM React manages stateful component instances for you
  13. 13. A Stateful Component class Clock extends React.Component {    constructor(props) {      super(props)      this.state = this.date()      setInterval(() => this.tick(), 1000)    }    date() { return { date: new Date() } }    tick() { this.setState(this.date()) }    time() { return this.state.date.toLocaleTi (it actually can be plain Javascript)
  14. 14. Stateful components Props and children are immutable... ...but component instances can have a state You modify it with setState() outside setState() it is immutable state changes trigger a re-render() Useful for handling the "view model"
  15. 15. Angular 2 Benefits TypeScript-centric Object Oriented Very strong D.I. (more than ng1) Angular Zone and strong data-binding Great built-in modules (HTTP, Router, Animations)
  16. 16. is Typescript Centric React is Javascript-centric! (some would say babel-centric...) React brings declarative markup to Javascript Angular continues to put Javascript inside HTML (Quote by Gabriele Mittica TM )
  17. 17. Zone, Data Binding and D.I. React favors functional programming techniques Unidirectional data flow The use of immutable data structures change detection by reference comparison
  18. 18. Considered Antipatterns: managing business state inside view components mutable state in general two-way data binding! The need for D.I. and Zones comes from an Object Oriented approach! (a functional approach makes them irrelevant)
  19. 19. has Great built-in Modules (HTTP, Router, Animations...) React is focused on views Routing, animations, server interaction... (...and a lot more...) ...come from the ecosystem!
  20. 20. React frameworks Mostly related to the model and how to mutate it The Facebook architecture was called flux redux seems the emerging implementation
  21. 21. Beyond the DOM render() produces immutable elements These elements are DOM independent In React Native they draw native UIs They can also draw SVG or 3D objects... Server side rendering: universal Javascript
  22. 22. Takaway Both Angular and React are great frameworks They mostly solve the same problems (React is focused on pure views) They have drastically di䇁erent approaches Pick whatever you think is best Knowing both makes you a better developer!
  23. 23. Thanks for listening Massimiliano Mantione - @m_a_s_s_i Gabriele Mittica - @gabrielemittica

×