Sunday, May 14, 2017

Angular v4 (or) call it just "Angular"

This blog is a high level gist of Angular 4 features. For detailed explanation refer to my article in DNC magazine. Article is titled "Angular 4 application development with Bootstrap 4 and TypeScript". Follow this link to download the magazine for free.


In December 2016, in an NG-BE (Angular Belgium) keynote, Igor Minar talked about Angular’s release schedule and upcoming features. In the process, he announced plan for a major release in March 2016 - “Angular 4”. Angular team decided to skip a major version number 3.

Why not Angular 3? - MonoRepo: Angular 2 has been a single repository, with individual packages downloadable through npm with @angular/package-name convention. For example @angular/core, @angular/http, @angular/router so on. Considering this approach, it’s important to have consistent version numbers among various packages. Angular router has already been on version 4. Hence, Angular team skipped a major version 3. It will help avoid confusion with certain parts of the framework on version 4 and the others on version 3.

If there were any apprehensions about Angular 4, could be due to baggage of scale of transition between Angular 1.x and 2.x. Considering Angular was moving from MV* (Model View Whatever) pattern to components focused approach, the framework features were very different and caused many applications to rewrite major parts of their code base.


However, between v2.x and v4 it is a very different story. It is a progressive enhancement. Majority of changes are non-breaking. 

Angular 4 is out on 23rd March ’17. Consider the following enhancements,
  • The release has considerable improvements in bundle size. Some have reported up to 60% reduction in Angular bundles’ file size.
  • The ngc, AOT compiler for Angular and TypeScript is much faster.
  • Angular 4 is compatible with TypeScript’s newer versions 2.1 and 2.2. TypeScript release helps with better type checking and enhanced IDE features for Visual Studio Code. The changes helped the IDE detect missing imports, removing unused declarations, unintentionally missing “this” operator etc.

Get Started with an Angular 4 project using Angular CLI

The latest version of Angular CLI (v1.0) is already scaffolding with Angular 4. If you are using an older version, upgrade Angular CLI. A new project created using Angular CLI references Angular 4. Refer to figure 1. 

To upgrade Angular CLI, run following commands,

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

To create a new project with Angular CLI run the following command
ng new my-project-name

Figure 1 Version details for various libraries with ng -v command

What are the new features in Angular 4?

Note: Refer to this link for code samples.  These samples were built for article in DNC magazine. You may refer to the detailed article in the magazine

Template changes to ng-template

If you are upgrading from Angular 2.x to Angular 4, all template elements have to change to ng-template. Following code will result in a warning.
  <template [ngIf]="isVisible"> Conditional statement </template>

Template parse warnings: The <template> element is deprecated. Use <ng-template> instead

Refactor it to
<ng-template [ngIf]="isVisible"> Conditional statement </ng-template>

Angular *ngIf/then/else

With Angular 2 we could use *ngIf directive to conditionally show a section of the template. With Angular 4, support for else has been added. Consider the following template code
<div *ngIf="isTrue; else whenFalseTmpl">
      <span>I show-up when isTrue is true.</span>
</div>

<ng-template #tmplWhenFalse > I show-up when isTrue is false </ng-template>

When isTrue value is true, instead of showing the span inline, we could offload to another template.
<button class="btn btn-primary" (click)="toggle()"> Toggle </button>
<div *ngIf="isTrue; then tmplWhenTrue else tmplWhenFalse"></div>
<ng-template #tmplWhenTrue >I show-up when isTrue is true. </ng-template>
<ng-template #tmplWhenFalse > I show-up when isTrue is false </ng-template>

Working with Observables and *ngIf/else

While rendering an observable on a template, we can show loading message or a spinner gif with the *ngIf directive. Specify else template to show while async observable is not ready with data. The directive also supports creating a local variable. Notice a local variable dino (let dino) to refer the async object. Consider following code.
<!—show else template “working” while loading observable with data. Notice async filter for dino observable -->

  <div *ngIf="dino | async; else working; let dino">
    <div class="card col-8">
      <div class="col-4">
              <img class="card-img-top" src="assets/images/{{dino.name}}.png" [alt]="dino.name">
      </div>
      <div class="card-block">
        <h4 class="card-title">{{dino.name}}</h4>
<!--removing dinosaur card details for readable snippet. Refer to code sample for complete code. -->
    </div>
    <!-- card end -->
  </div>
  <ng-template #working>
    <div>Loading...</div>
  </ng-template>

In the sample, to mimic delayed loading, the component calls next() on an observable subject after four seconds. Refer to following code snippet,
    this.dino = new Subject<any>();
    // to mimic delayed loading the component calls next on observable subject after four seconds. 
    setTimeout( () =>
     this.dino.next(dataset.dinosaurs[Math.round((Math.random() * 5))])
    , 4000);

Angular Animations

In Angular 2.x, animations were part of @angular/core. It was part of the bundle even if application doesn’t use animations. With Angular 4, animations related artifacts have been moved out of @angular/core. It helps reduce production bundle size. To use animations import BrowserAnimationsModule from @angular/platform-browser/animations. Reference the module in imports array of @NgModule

Angular future release schedule

Refer to the major release schedule below. The details are quoted from this link. Please keep a tab on the page for any changes to the schedule.

Tentative Schedule after March 2017

Date
Stable Release
Compatibility*
September/October 2017
5.0.0
^4.0.0
March 2018
6.0.0
^5.0.0
September/October 2018
7.0.0
^6.0.0
Release schedule taken from AngularJS blog https://github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md

Conclusion

Angular went through good amount of transition from Angular 1.x, MV* model to the framework we know today. The purpose of the transition is to effectively support new features in JavaScript. When used with TypeScript, it is that much more powerful with support for types, integration with IDE like Visual Studio Code and many other features.

In the process, Angular 2 upgrade included many breaking changes. However, upgrading to future versions of Angular are expected to be smooth with minimal or no breaking changes. Framework will continue to evolve to support more features and make developers job easy. It is a good thing. Obviously we do not want a stagnated framework.

References and useful links

Refer to this link for code samples used for the article in the DNC Magazine.
DotNet curry website - http://www.dotnetcurry.com/
For more about Angular CLI NPM repo with documentation, follow the link https://www.npmjs.com/package/angular-cli
Following the link for Angular 4 release notes - http://angularjs.blogspot.in/2017/03/angular-400-now-available.html


Monday, February 20, 2017

Angular CLI gotchas on Windows machine.

Blogger: V. Keerti Kotaru . Author of Angular Material book 

I've attempted to install Angular CLI on a Windows 7 machine. Unlike on a Mac machine, it wasn't seamless. Here are the problems I've encountered and the solutions I found after a little bit of Googling! 

If you are new to AngularCLI, it helps setup a new Angular 2 project and scaffold components, providers etc (as we continue to develop on the project). It is a big time saver.

Angular CLI installation

Angular CLI Github page (link) documents installation with the following step. If your machine has the latest versions of Node, NPM and other prerequisites, this is all you need. You can start using AngularCLI.

npm install -g @angular/cli

However, if you are like me, following are some of the issues and solutions. This is a quick troubleshooting guide. The resolutions were applied on a Windows 7 machine.

Node Version:

Review your node version. Angular CLI and Angular 2 project need node version 6.9.0 or above. Run the following to review if you need to upgrade Node.

npm --version

To upgrade, open a command prompt as an administrator and run the following command

npm install -g n

Missing Python & node-gyp

To install Angular CLI, we need Python and node-gyp. If you encounter a problem running build step during the install, try the following.

Open command prompt as an administrator

npm install -g --production windows-build-tools

Once Windows Build Tools are installed, npm install Angular CLI again,

npm install -g @angular/cli

Verify installation

ng --version

If all is well, you should see version number. See figure 1.

Figure 1: Angular-CLI installed successfully


What are Windows Build Tools?

Windows Build Tools provides a tool-set for compiling native node modules. It includes node-gyp which is a cross-platform compiler for node modules. The Windows Build Tools also include Python. It installs Python and makes it available globally on the Windows machine.

References

Stackoverflow thread - http://stackoverflow.com/questions/3701646/how-to-add-to-the-pythonpath-in-windows-7

Windows Build Tools, NPM package - https://www.npmjs.com/package/windows-build-tools

Angular CLI GitHub page- https://github.com/angular/angular-cli#installation

Friday, January 20, 2017

CSS and styling options in ReactJS

Blog describes approaches for styling ReactJS components
Blogger: V. Keerti Kotaru . Author of Angular Material book 

ReactJS provides multiple options for styling components. We might use traditional approach to have a style-sheet in the project; Then apply CSS classes for elements in the component. Or we might pick a contentious approach to code styles within the component.

I played with following approaches so far,

 a) Specify CSS class in VDOM with className attribute.
 b) Use style object.
 c) Styled-Components

Refer to the complete code samples at this link.

Using className attribute

Use className attribute in the component to use a pre-existing CSS class. Consider following code, it applies two CSS classes alert and alert-info on the div. These are bootstraps alert styles. Refer to figure-1 to see the resultant information alert.

<div className="alert alert-info"> 
  <strong>Hello! Namaste. नमस्ते.  నమస్కారం. </strong>
</div>
Figure 1 - rendered output for the code sample 
As we package the code as a React component, we could take advantage of showing the alert as an information or as an error. The component could dynamically apply CSS class based on props set by container component. Consider following code that sets alert-danger style when error prop is set (refer to figure 2). If not the default information styling is applied.

---------- alert.js ---------------------
import React from 'react';

export default (props) => {
  

    // if props.error is true set "alert-danger" else "alert-info".
    return (

        <div className={`alert ${props.error?'alert-danger':'alert-info'}`}>  
           <strong> {props.children} </strong>
        </div>
    )
};

Note: In the expression className={`alert ${props.error?'alert-danger':'alert-info'}`} first set of  braces - {} are React expression and the second set ${} are ES6 string extrapolation syntax. It represents alert-danger or alert-info depending on props.error value (true/false).

Usage:
import Alert from './Alert.js';

          <Alert error>Oops! There is a problem</Alert>
          <Alert>This is an information message</Alert>

Figure 2 - Error alert as error prop is added

Using Style attribute

Similar to className, style attribute could also be used in VDOM. This approach encapsulates style within the component. We are not using a global, pre-existing style.

Provide a JSON object with style values that translate to CSS styles. Consider following code sample and the styleInline variable.

import React from 'react';

export default (props) => {
    let styleInline = {
        fontFamily: 'comic sans ms',
        fontSize:'14px'
    };

    return(
        <div style={styleInline}>
            {props.children}
        </div>
    );
}

Note that styles like font-size need to be written as fontSize in VDOM.

Similar to earlier sample, we can use ES6 string extrapolation to dynamically set a style. Following code changes font-size, font-weight and color based on prop - important.

    let styleInline = {
        fontFamily: 'comic sans ms',
        fontSize:`${props.important?'18px':'14px'}`,
        fontWeight: `${props.important?'bold':'normal'}`,
        color: `${props.important?'red':'gray'}`
    };



Figure 3- result with important prop

Styled Components

Styled components library allows creating and wrapping components with given styles. It makes it easy to implement themes and variation in styles. It eliminates boilerplate code and we can instantly create styled components with quick CSS style text.

Getting started
  • Install styled components using npm
npm install --save styled-components
  • import styled from 'styled-components'
Consider following example. Here a styled component is created with HTML element and styles put-together. 

export let TitleText = styled.h1 `
    margin: 1em;
    font-size: 20pt;
    border: 2px solid cyan;
    background-color: gray;
    color: white;
    padding: 0.5em 1em;  
` ;

// Use the component. See figure 4 for result.
<TitleText>Sample styled component out of H1</TitleText>

Figure 4 - Styled component created out of H1

Like earlier examples, based on props, we can dynamically change certain styles. Following sample changes background and border if a primary prop is set on the component.

export let TitleText = styled.h1 `
    margin: 1em;
    font-size: 20pt;
    border: 2px solid ${props => props.primary?'darkblue':'black'};
    background-color: ${props => props.primary?'darkblue':'gray'};
    color: white;
    padding: 0.5em 1em;  
` ;


// Use the component as below. See figure 5 for result (Without primary attribute, result will be same as figure 4)
<TitleText primary>Sample styled component out of H1</TitleText>
Figure 5 - styled component with prop value primary







The API could also be applied on React components (similar to HTML elements). Consider following simple component.

-----------  Button.js ----------------
import React from 'react';

export default (props) => {
    return (
       <button className={`${props.className} btn`}>{props.text || props.children}</button>        
    )
}

Wrap the component using Styled Component.

import ButtonStatelessComponent from './Button.js';
import styled from 'styled-components';

export let SelfStyledButton = styled(ButtonStatelessComponent) `
                        background: ${props => props.primary?'darkblue':'lightgray'};
                        color: ${props => props.primary?'cyan':'black'};
                        font-size: 18pt;
                        margin: 1em;
                        padding: 0.25em 1em;
                        border: 2px solid lightblue;
                        border-radius: 3px`;

Usage: 
          <SelfStyledButton primary text="Primary Button" />

          <SelfStyledButton> Default button </SelfStyledButton>
Notes: 
  • Primary attribute adds dark blue background and cyan text color.
  • For styling to apply, the component should have className attribute defined as following. This is because, the API creates a CSS class and applies on the component at the given HTML element.
className={`${props.className}

Refer to figure 6 for results.

Figure 6 - Apply primary prop for a primary button. Default button uses component as is.

References and further reading