Angular 2 for React Developers

Angular 2 for React Developers

Angular is here, the time has come for us to drop everything and learn something new, again. The good news is, like React and Angular 1.x, Angular 2 is here to stay for a while so it’s a good investment to become productive with this new framework. React has been on top of the world as of recently, for good reasons, it’s a fantastic approach to building modern web apps. This post is catered to those who are neck-deep in React and what to make an easy transition to Angular 2. This is angular 2 for react developers.

Bootstrapping

Both React and Angular 2 can be used with normal ES5, but most folks use JSX + ES2015 with React and with Angular 2 it’s also recommended to use TypeScript.

TypeScript is ES2015 + Optional Types

None of those technologies can run natively in any browser, so we must have a build step to compile down to browser ready code. Webpack and/or Gulp are the popular choices for the bundling and building our application code. Once you have your build process, we can bootstrap our app. As far as bootstrapping our first component, things will obviously be different between the two frameworks. If you’re in a hurry and just wanna get started, check out our Angular 2 Webpack Starter on Ggithub.

React

npm install react react-dom core-js
import 'core-js' // polyfills
import React, {Component} from 'react'
import {render} from 'react-dom';

class App extends Component {
  render() {
    return (
      <h1>hello world</h1>
    );
  }
}

render(<App />, document.findElementById('app'));
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>

Angular 2

npm install --save @angular/core @angular/platform/browser-dynamic @angular/compiler @angular/common core-js zone.js rxjs
// polyfills 
import 'core-js';
import 'zone.js/lib/browser/zone-microtask';
import 'zone.js/lib/browser/long-stack-trace-zone';
// @angular libs
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform/browser-dynamic';

@Component({
  selector: '#app',
  template: '<h1>hello world</h1>'
})
class App {}

bootstrap(App);
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>

Conceptually nothing has changed as far as the minimal code needed to bootstrap a simple hello world component. Angular 2 requires a list of polyfills to run in the desired configuration. Some of which are already in evergreen browsers. Let’s walk through some of the difference between the two files. With React, we use a bit of OOP, object-oriented programming, with extends to mix our App class with Component class. With Angular 2 we use composition over inheritance with the Component decorator to statically read our metadata (selector and template) as well as map its life-cycle API to our App class. The API for Angular 2 is more decoupled from our application code and the framework itself. Although the use decorators in Angular 2 vs extending in react is different, they carry out the same goal of allowing us to use methods provided in the framework. The selector can be any valid CSS selector, including a tag name, so we can think of it as document.querySelector(selector) where document is the parent component and selector is our component. The template takes advantage of ES2015 multiline strings and not JSX.

Storing state

Modern web development is all about managing the state of our applications. In this example, we’re going to simplify state management by going over the local state and not things like [insert some Flux library] that have many different opinions on how to store state. We’re talking more about state local to a component and not application state.

React

class App extends Component {
  state = {message: 'hello'}; // be sure to have proper plugin for babel
  render() {
    return (
      <div>{this.state.message}</div>
    );
  }
}

Angular 2

@Component({
  selector: '#app',
  template: '<div>{{ state.message }}</div>',
})
class App {
  state = {message: 'hello'};
}

There isn’t much of a difference here. Both examples are because both React and Angular 2 rely on standards for initializing state. The one thing that did change is the template interpolation. React uses { } where Angular sticks to its origin, using {{ }}. Note that there are many ways to initialize state with Angular 2, this method closely relates to React.

Event handlers and state change

With React using JSX and Angular 2 using HTML, there are some differences between the two when it comes to handling DOM events triggered from components.

React

class App extends Component {
  state = {count: 0}; // be sure to have proper plugin for babel

  handleClick(e) {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>count</button>
        {this.state.count}
      </div>
    );
  }
}

Angular 2

@Component({
  selector: 'app',
  template:  `
    <div>
      <button (click)="handleClick($event)">+1</button>
      {{ state.count }}
    </div>
  `,
})
class App {
  state = {count: 0};

  handleClick(e) {
    this.state.count++;
  }
}

While React has mapped props on our JSX components to DOM events, Angular 2 uses the DOM event itself. Let’s walk through the syntax of how Angular 2 accomplishes that. The (click) is telling angular that we want to bind to the click event on the target element and run the following expression. Although it may look funny,this is valid HTML. It’s not 2003 anymore, so we don’t check for “valid” HTML anyway. If you simply cannot bear to use this syntax, you can swap out (click) with on-click. This goes for all events, not just click. We now just make a call to our handler handleClick(). Notice we must invoke the callback, unlike React, which replies on a reference to the callback. This is because React is registering our handler as the callback for the event while Angular 2 invokes an expression with our component as the context. Making a call to setState(), in React, triggers an update for our component and if the state has changed, the component renders again. The same happens with Angular 2 except you can change the state directly since the framework is watching the component tree for any changes to its properties.

Data binding with unidirectional data flow

Unidirectional-way data flow makes it simpler for one to reason about application state, but sometimes you need two-way flow. This can’t be more true than when dealing with forms and user input or any other stateful component out there.

React

class App extends Component {
  constructor() {
    super();
    this.state = {text: ''};
  }
  onChange(e) {
    this.setState({text: e.target.value});
  }
  render() {
    return (
      <div>
        <input onChange={this.onChange.bind(this)} value={this.state.value} />
       {this.state.text} 
      </div>
    );
  }
}

Angular 2

@Component({
  selector: 'app',
  template: `
    <div>
      <input (change)="onChange($event)" [value]="state.text" >
      {{state.text}}
    </div>
  `,
})
class App {
  state = {text: ''};

  onChange(e) {
    this.state.text = e.target.value;
  }
}

This basic approach of handling input changes isn’t too much different between the two frameworks. Both bind to events and then change state based off the input’s value. The main big difference is what event they are binding to. Angular 2 allows you to bind to any event emitted from the component such as Browser Native or Custom Events from the framework. With Angular 2, we must pass in the $event variable. Like Angular 1.x, the $event variable is created internally. React binds to the onChange event that internally binds to keyup. Angular 2 brings back ngModel which makes two-bindings even easier. We can also refactor our Angular 2 example to take more advantage of local variables in our templates. We can think of local variables as variables that live locally in our render function of a React component.

@Component({
  selector: 'app',
  template: `
    <div>
      <input (change)="state.text = $event.target.value" [value]="state.text" >
      {{state.text}}
    </div>
  `,
})
class App {
  state = {text: ''};
}

Refs

With the release of React 0.14, we can assign refs using a new approach. Let’s compare how to use refs with both frameworks.

React

class App extends Component {
  changeColor() {
    this.box.classList.add('yellow');
  }

  render() {
    return (
      <div>
        <button 
          onClick={this.changeColor.bind(this)}
          ref={node => this.box = node}
        >
          change
        </button>
        <div className="box"></div>
      </div>
  }
}

Angular 2

@Component({
  selector: 'app',
  template: `
    <div>
      <button (click)="changeColor(box)">change</button>
      <div class="box" #box></div>
    </div>
  `,
})
class App {
  changeColor(box) {
    box.classList.add('yellow')
  }
}

With React, we get access to the raw DOM node and assign it to a property on the component itself. With angular 2, we use the # followed by a variable name on the element we want to reference. This reference is local to the template so we must pass it in as an argument to get access to it. We can reason about why the Angular Team chooses #. Including an id to an element gives us access to that DOM element globally in our browser. We can get a reference to our div with window.myElement (if you didn’t know about this then you should try it out). Like React, the ref is also a raw DOM node.

Component composition

Both frameworks take the component approach to building web apps so being able to compose components to create more components is essential. Let’s take a look.

class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar">
        <h1>Side bar</h1>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Sidebar />
      </div>
    );
  }
}

Angular 2

@Component({
  selector: 'sidebar',
  template: `
    <div class="sidebar">
      <h1>Side bar</h1>
    </div>
  `
})
class Sidebar {}

@Component({
  selector: 'app',
  directives: [
    Sidebar // we must declare which components/directives are in our template
  ],
  template: `
    <div>
      <sidebar></sidebar>
    </div>
  `,
})
class App {}

With Angular 2, we make another component using the @Component decorator just like with App. Defining a template in @Component the same way as well. We then must add the new component to a list of directives to the container component that will use the new component in its template. The reason we do this is because unlike JSX, which just compiles down to function calls, Angular 2 templates need to be told what which components are used in their templates because we’re just using strings to write the templates. This comes in handy when testing as well since we can mock other components (In React we do this with the expect module). Also, we can self close tags in react like <Sidebar />. We can’t do this yet in Angular 2 but soon.

Props

The concept of stateless components keeps things flexible and predictable. By passing down state from top-level components to child components we only need to worry about inputs of a stateless component through props on the components.

React

class Sidebar extends React.Component {
  render() {
    return (
      <div className="sidebar">
        <h1>{this.props.title}</h1>
      </div>
    );
  } 
}

class App extends React.Component {
  constructor(){
    super();
    this.state = {title: 'Sidebar'};
  }
  render() {
    return (
      <div>
        <Sidebar title={this.state.title} />
      </div>
    );
  }
 }

Angular 2

import { Component, Input } from '@angular/core';

@Component({
  selector: 'sidebar',
  template: `
    <div class="sidebar">
      <h1>{{ title }}</h1>
    </div>
  `
})
class Sidebar {
  @Input() title:string;
}

@Component({
  selector: 'app',
  directives: [
    Sidebar
  ],
  template: `
    <div>
      <sidebar [title]="state.title"></sidebar>
    </div>
  `,
})
class App {
  state = {
    title: 'Side bar'
  }
}

First thing to note here is that we must import the @Input() decorator. Unlike @Component() that is decorating our class, @Input() is will be decorating a property of our class so its positioning inside the class next to or above the property is important. We’re also using typescript typing here to declare a property named title of the string type. We can now refer to this property in the template as {{ title }}. In the container component, we can pass in state using the bracket syntax on the component we want to provide state to, [title]="state.title".

Dynamic elements

With JSX, we can use JS in your templates to iterate over collections and output valid JSX for rendering. Angular 2 takes an approach closer to angular 1.x to handle this.

It’s worth noting that Angular 2 does support JSX but is looking for someone in the community to work with them on it.

React

class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar">
        <h1>{this.props.title}</h1>
        <ul>
          {this.props.items.map(item => <li>{item}</li>})}
        </ul>
      </div>
    );
  }
}

class App extends Component {
  constructor(){
    super();
    this.state = {
      title: 'Sidebar',
      navItems: ['home', 'profile', 'settings']
    };
  }
  render() {
    return (
      <div>
        <Sidebar 
          title={this.state.title}
          items={this.state.navItems}
        />
      </div>
    );
  }
}

Angular 2

@Component({
  selector: 'sidebar',
  template: `
    <div class="sidebar">
      <h1>{{ title }}</h1>
      <ul>
        <li *ngFor="#item of items">{{ item }}</li>
      </ul>
    </div>
  `
})
class Sidebar {
  @Input() title:string;
  @Input() items:string[];
}

@Component({
  selector: 'app',
  directives: [
    Sidebar
  ],
  template: `
    <div>
      <sidebar
        [title]="state.title"
        [items]="state.items"
      ></sidebar>
    </div>
  `,
})
class App {
  state = {
    title: 'Side bar',
    items: ['home', 'profile', 'settings']
  }
}

Like angular 1.x, angular 2 has a directive we can use to repeat over data and create elements. The ngFor directive is similar to its older sister, ng-repeat. Because angular 2 uses <template> to clone element for performance reasons they, they created a shorthand to expand micro-syntax with *. That’s why we use *ngFor. Just like when using refs, we use the # followed by a variable name to create a local variable in the template. Like ES2015 iterators, we are using a for of loop to iterate over the collection, assigning the current element to the local variable we created.

Angular 2

<div class="sidebar">
  <h1>{{title}}</h1>
    <ul>
      <template ngFor #item [ngForOf]="items">
        <li>{{ item }}</li>
      </template>
    </ul>
 </div>

Styles

There are so many ways to add styles to our components. With build tools like webpack, that lists grows longer and longer. Having css encapsulation is an important part of creating flexible components. React doesn’t offer a built in solution, so the community stepped up with CSS Modules. These styles are scoped to the component using unique classnames to avoid collision. You also need to setup your build tool to handle this.

React

import CSSModules from 'react-css-modules';
import styles from './styles.css'; // string
import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <div styleName='app'> {/* creates app__2gft5 */}
        <div styleName='actions'> {/* creates app__actions__74tr */}
          <button styleName='button'>click</button>
        </div>
      </div>
    );
  }
}

const Root = CSSModules(App, style);
render(<Root/>, document.findElementById('app));

Angular 2

@Component({
  selector: 'app',
  styles: [`
    .app {
      color: red;
    }
    .app.actions {
      border: 1px solid yellow;
    }
    .app.actions.button {
      padding: 10px;
    }
  `],
  template: `
    <div class="app">
      <div class="actions">
        <button class="button">click</button>
      </div>
    </div>
  `,
})
class App {}

bootstrap(App);

Using the styles array on the Component decorator, we can attach styles to the target component. Like with CSSModules, the class names are namespaced to avoid a collision. Because the styles are just a string, we can do things like interpolation to make the styles dynamic.

const APP_CLASS = 'app';

@Component({
  selector: 'app',
  styles: [`
    .${APP_CLASS} {

    }
    .${APP_CLASS}.actions {

    }
    .${APP_CLASS}.actions.button {

    }
  `],
  template: `
    <div class="${APP_CLASS}">
      <div class="actions">
        <button class="button">click</button>
      </div>
    </div>
  `,
})
class App {}

bootstrap(App);

Who uses regular css these days, with the the help of build tools like webpack, we can use preprocessors as well.

import styles from './style.less';

@Component({
  selector: 'app',
  styles: [styles],
  template: `
    <div class="app">
      <div class="actions">
        <button class="button">click</button>
      </div>
    </div>
  `,
})
class App {}

If you don’t like the computed dynamic class names that angular creates for your component’s elements, then you have the option to change that.

import { Component, Input, ViewEncapsulation} from '@angular/core';
import styles from './style.less';

@Component({
  encapsulation: ViewEncapsulation.Native,
  selector: 'app',
  styles: [styles],
  template: `
    <div class="app">
      <div class="actions">
        <button class="button">click</button>
      </div>
    </div>
  `,
})
class App {}

The encapsulation property on the Component decorator allows us to change how our styles scoping behaves. First we need to import ViewEncapsulation. There are three values that we could use. The default is ViewEncapsulation.Emulated which outputs the funky namespaces class names. ViewEncapsulations.Native uses the shadow DOM. ViewEncapsulation.None scoping of the targets components styles.

Angular 2’s public API is pretty solid and won’t undergo any major changes soon. With the current syntax, the approach to building web apps is not much different than what React does right now. They both accomplish the same thing. Angular 2 provides so much more as well. We didn’t get to talk about life cycle events, actions, and advanced state management and how it relates to React. Stay tuned for that. In the meantime, check out our Angular 2 Webpack Starter on Github for the fastest and best way to get started with Angular 2 now.

Related Posts

Angular 2 for AngularJs Developers

Now that Angular 2 is in Release Candidate someone moved our cheese! Let’s put on our running shoes. First off, let me start off by saying I have been writing Angular 2 for a year and a half now (actually, since this tweet) and writing AngularJS…

Create a simple reactive store for Angular 2

Angular 2 uses observables for many features and has a peer dependency on RxJs for its robust API around observables. The community has adopted a single store approach for dealing with state in modern applications. Let’s build a store for our Angular…

Automated Angular 2 Conventions with Webpack

Angular 2 is still new, yet the community has banded together to create common conventions for folder structure and file naming. Let’s dive right in to check them out.
twitter tweet