JSFeeds: angularclass.com - Angular 2 for React developers

Monday, 21 December, 2015 UTC

Angular 2 for React developers

Summary

Now that Angular 2 is in beta, 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 preferred process we can bootstrap our app. Now, as far as bootstrapping our first component, things will obviously be differences between the two frameworks.

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'));

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

Angular 2

npm install --save angular2 zone.js es6-shim es6-promise es7-reflect-metadata

// polyfills 
import 'es6-shim';
import 'es6-promise';
import 'es7-reflect-metadata/dist/browser';
import 'zone.js/lib/browser/zone-microtask';
import 'zone.js/lib/browser/long-stack-trace-zone';
// angular2 libs
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

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

bootstrap(App);

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>

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 include our App class with Component class to give us our API. With Angular 2 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 using a template string and not JavaScript (We can cover more about the difference of this topic in the future).

Storing state

Modern web development is all about managing state of our applications. In this example we’re going to simplify state management by going over local state and not things like [insert some flux library] that has 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 really isn’t much of a difference here. This is 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 (
      {/* must bind context */}
      <button onClick={this.handleClick.bind(this)}>count</button>
      {this.state.count}
    );
  }
}

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. Lets 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 really 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 is 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 (
     <input onChange={this.onChange.bind(this) value={this.state.value}}
     {this.state.text} 
    );
  }
}

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 of the input’s value. The main big difference is what event they are binding to. Angular 2 binds allows you to bind to any event emitted from the component such as native or custom events. 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 which 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.

@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 (
      <button onClick={this.changeColor.bind(this)} ref={node => this.box = node}>
        change
      </button>
      <div className="box"></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 choose #. Including an id to an element gives us access to that 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 since we don't have jsx do it for us
  ],
  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 the same way also. 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. 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. 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 'angular2/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 pass state into, [title]="state.title".

Think of this as accessing properties on a JavaScript object using bracket notation. Where the object in this case is the actual component in the template instead.

var sidebar = new Sidebar();
sidebar[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 => {
            return (<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 }}
      </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 doest offer a built in solution so the community stepped up with CSS Modules. These styles are scoped the component using unique classnames to avoid collision. Angular has the same feature baked in.

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 {
      
    }
    .app.actions {
      
    }
    .app.actions.button {
      
    }
  `],
  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 name spaced to avoid 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 react, 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 'angular2/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 are 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!

The post Angular 2 for React developers appeared first on AngularClass.

... more @ angularclass.com

angularclass.com