The Wayback Machine - https://web.archive.org/web/20160320051117/http://ajax.sys-con.com/node/3686948
Overlay

IoT User Interface Authors: Bob Gourley, Elizabeth White, Alan Turner, Yakov Fain, Liz McMillan

Related Topics: @ThingsExpo, Java IoT, Mobile IoT, Microservices Expo, Linux Containers, Containers Expo Blog, IoT User Interface, Agile Computing, Video, Wearables, @CloudExpo, OpenStack Journal, @DevOpsSummit

@ThingsExpo: Blog Feed Post

Angular 2 Overview By @YFain | @ThingsExpo #DevOps #IoT #Microservices

The Angular 2 framework is a re-write of popular framework AngularJS
By Yakov Fain
Article Rating:
March 9, 2016 09:15 AM EST
Reads:
 573

This article was excerpted from the book “Angular Development With TypeScript” (see http://bit.ly/1QYeqL0).

The Angular 2 framework is a re-write of popular framework AngularJS. In short, the newer version has the following advantages over AngularJS.

  • The code is simpler to write and read
  • It performs better  than AngularJS
  • It’s easier to learn
  • The application architecture is simplified as it’s component-based

This article contains a high-level overview of Angular highlighting improvements comparing to AngularJS. For a more detailed architecture overview of Angular visit product documentation at http://bit.ly/1TQJmwG.

Code Simplification
First of all, an Angular application consists of standard ES6 modules. Typically one module is one file. There is no need to use a framework-specific syntax for loading and using modules. Just use the universal module loader SystemJS (covered in Chapter 2) and add import statements to use functionality implemented in the loaded modules. You don’t need to worry about the proper order of the <script> tags in your HTML files. If a module A needs the functionality from a module B, just import the module B inside module A.

The HTML file of the landing page of your application just includes the framework modules, and your application code is bootstrapped by simple loading of the root component of your application. All child modules will be loaded automatically based on the import statements. Below is a typical content of the index.html of an Angular application. In the top portion you include the required framework modules, and at the bottom you configure the system loader and load the root component located in the file app/my_application.ts. The <app> tag is a selector defined in that root component.

<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>

</head>
<body>
<app>Loading...</app>

<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {app: {defaultExtension: 'ts'}}
});
System.import('app/my_application');
</script>
</body>
</html>

The HTML fragment of each application component is either inlined inside of the component (the template property) or in the file referenced from the component using the property templateURL. The latter option allows designers to work on the UI of your application without the need to learn Angular.

An Angular component is a centerpiece of the new architecture. The next Figure shows a high-level diagram of a sample Angular application.

ch1_angular2_workflow

The simplest way of declaring a component is writing a class in TypeScript (you can use ES5, ES6, or Dart as well). Let’s do an experiment. We’ll give you a super brief intro on how to write Angular components in TypeScript followed by the sample code. See if you can understand the code with minimum explanations.

An annotated TypeScript class represents a component. The annotation @Component contains the property template that declares an HTML fragment to be rendered by the browser. The HTML piece may include the data binding expressions, which can be represented by double curly braces. If a view depends on other components, the @Component annotation has to list them in the property directives. The references to the event handlers are placed in the markup from the @Component section and are implemented as methods of the class.

The annotation @Component also contains a selector declaring the name of the custom tag to be used in HTML document. When Angular sees an HTML element with the name matching a selector, it knows which component implements it. The HTML fragment below illustrates a parent component with one child component :

<body>
<auction-application>
<search-product [productID]= "123"></search-product>
</auction-application>
</body>

A parent component sends the data to its child components using property binding (note the square brackets above), and children communicate with their parents by sending events. Figure 1.7 shows the main page (the parent component) with its child components surrounded with thick borders.

Below is a code sample of a SearchComponent, and we can include it in an HTML document as because its declaration includes the selector property with the same name.

@Component({
selector: 'search-product',
template:

` <form>
<div>
<input id="prodToFind" #prod>
<button (click)="findProduct(prod.value)">Find Product</button>
Product name: {{product.name}}</div>
</form>


` })
class SearchComponent {
@Input() productID: number;

product: Product; // code of the Product class is omitted

findProduct(prodName: string){
// Implementation of the click handler goes here
}
// Other code can go here
}

If you are familiar with any object-oriented language that has classes you should understand most of the above code. The annotated class SearchComponent declares a variable product, which may represent an object with multiple properties, one of which (name) is bound to the view ({{product.name}}). The #prod will have a reference to the hosting <input type=”text” /> element so you don’t need to query DOM to get the entered value.

The (click) notation represents a click event, and the event handler function gets the argument value from the input parameter productID that will be populated by the parent component via binding.

This was just a quick look at the sample component, but we’ll be providing a detailed description of what components are made up of starting from the next chapter.

If you never worked with classes before, no worries. We’ll cover them in Appendices A and B. The next Figure illustrates the inner working of a component.

ch1_angular_component

A component uses the data from a model (the M in the MVC pattern), which can be also represented by a class. In TypeScript the model class for a SearchComponent could look like this:

class Product{
id: number,
name: string;
description: string;
bid: number;
price: number;

// constructor and other methods go here
}

Note that TypeScript allows you to declare class variables with types. To let the UI component SearchComponent know about its model you can refer to it by declaring a class variable, e.g., product:

@Component { // code omitted for brevity}
class SearchComponent {
product: Product; // the model

findProduct(productID){
// The implementation of the click handler
// for the Find Components button goes here
}
}

If the search component may return multiple products we can declare an array to store them:

products: Array<Product>;

The generics notation (explained in Appendix B) tells the TypeScript compiler that only the objects of the type Product are allowed to be stored in this array.

In Angular there are no separate controllers (the C in the MVC pattern). The component includes all required code. In our example, the SearchProduct class would contain the code performing the controller’s responsibilities in addition to being a UI component on the HTML view. For a cleaner separation of TypeScript and HTML, the content of the template section of the @Component annotation can be stored in a separate file by using templateURL instead of template, but it’s a matter of your preference.

Developers who know AngularJS can think of a component as a directive with a view, but writing directives without views is still allowed.

Now let’s see how the design of Angular is simpler than of AngularJS. In AngularJS all directives were loaded to the global memory, whereas in Angular you specify the required directives on the component level providing better encapsulation.

You don’t have to deal with the hierarchy of scope objects as in AngularJS. Angular is component based, and the properties are created on the this object, which becomes the component’s scope.

Dependency Injection is a design pattern that inverts the way of creating objects your code depends on. Instead of explicitly creating object instances (e.g. with new) the framework will create and inject them into your code. Angular comes with a dependency injection module. We’ll cover dependency injection in Chapter 4.

In AngularJS there were several ways of injecting dependencies, which could be confusing at times. In Angular you can inject dependencies into the component only via its constructor. The following TypeScript code fragment shows how to inject the ProductService component into the SearchComponent. You just need to specify a provider and declare the constructor argument with the type that matches provider’s type.

@Component({
selector: 'search-product',
viewProvider: [ProductService],
template:[
<div>
...
<div>]
})
class SearchComponent {
products: Array<Product> = [];

constructor(productService: ProductService) {
this.products = this.productService.getProducts();
}
}

To summarize, Angular is simpler than AngularJS because of the following:

  • Each building block of your app is a component with well encapsulated functionality of a view, controller, and auto-generated change detector.
  • Components can be programmed as annotated classes.
  • A developer doesn’t have to deal with scope hierarchies.
  • Dependent components are injected via the component’s constructor.
  • Two-way binding is turned off by default.
  • Change detection mechanism was re-written and works faster.

The concepts of Angular are easy to understand for Java, C#, and C++ programmers, which represent the majority of enterprise software developers. Like it or not, but a framework becomes popular when it gets adopted by enterprises. Today AngularJS is widely adopted by the enterprises, and AngularJS skills are in big demand. Since developing applications with Angular is easier than with AngularJS this trend should continue.

Performance Improvements
To compare performance of AngularJS and Angular 2 the creators of these frameworks developed a benchmarking tool called Benchpress (see http://bit.ly/1IvgnKZ), which showed some serious performance improvements in the area of rendering and memory use.

The rendering improvements are mainly the result of the internal redesign of the Angular framework. The UI rendering and the application API were separated into two layers, which allows to run the non-UI related code in a separate Web Worker thread. Beside the ability to run the code of these layers concurrently, Web browsers allocate different CPU cores to these threads when available. You can find a detailed description of the new rendering architecture in the document titled Angular 2 Rendering Architecture available at http://bit.ly/1CEXjIl.

Creating a separate layer for rendering has an additional important benefit: an ability to use different renderers for different devices. Every component includes the @Component annotation that contains an HTML template defining the look of the component. If you want to create a component to display stock prices in the Web browser its UI portion may look as follows:

@Component({
selector: 'stock-price',
renderer: 'DOMRenderer',
template: '
<div>The price of an IBM share is $165.50</div>
'
})
class StockPriceComponent {
...
}

Currently, DOMRenderer is the only renderer, so you don’t even need to include it in the @Component annotation. But the Angular team already works on creating native renderers for mobile devices running iOS and Android. Such renderers should be released in the near future, and Angular applications won’t need to run inside the Web View (embedded Web browser) on mobile devices – they’ll use native UI components.

A new and improved change detection mechanism is yet another contributor to better performance. Angular doesn’t use two-way binding unless you manually program it. One-way binding simplifies the detection of the changes in an application that may have lots of interdependent bindings. Now if a component has only internal immutable objects, you can mark it as such so it won’t be checked when a change is detected in another component.

Although Angular 2 is a complete re-design of Angular 1, those of you who use AngularJS can start writing code in Angular 2 style by using ng-forward (see http://bit.ly/1PNXFmH). The other approach is to start gradually switching to a newer version of this framework by running Angular 2 and Angular 1 in the same application (see http://bit.ly/1YixNzE), but this would increase the size of the application.

“To learn more about Angular see the book “Angular Development with TypeScript” at http://bit.ly/1QYeqL0 and save 39% with discount code faindz.  For the up to date information about our Angular 2 training visit this page.

Published March 9, 2016 – Reads 573
Copyright © 2016 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By Yakov Fain

Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs (http://yakovfain.com) and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain

@CloudExpo Stories
By Elizabeth White
Electric Imp has expanded its focus to align with evolving commercial and industrial Internet of Things (IoT) opportunities. ”As our platform evolves, it is able to satisfy markets more demanding than the initial consumer segment,” said Hugo Fiennes, CEO and co-founder of Electric Imp. "Delivering over 500,000 units through our consumer device partners helped prove the scalability, reliability and usability of our platform, and now we are targeting our unique architecture at the problems facing...
Mar. 19, 2016 03:45 PM EDT  Reads: 553
By Pat Romanski
SYS-CON Events announced today CyberTrend has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY, and the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.
Mar. 19, 2016 02:45 PM EDT  Reads: 546
By Liz McMillan
Coalfire has joined the Cloud Security Alliance (CSA), the world’s leading organization dedicated to defining and raising awareness of best practices to help ensure a secure cloud computing environment. Coalfire has extensive experience advising and assessing cloud services providers, solution developers and end-users who have moved their businesses to the cloud, helping them to better understand and manage their risks by providing comprehensive assessment, testing and compliance-related servic...
Mar. 19, 2016 02:45 PM EDT  Reads: 750
By Pat Romanski
Using new techniques of information modeling, indexing, and processing, new cloud-based systems can support cloud-based workloads previously not possible for high-throughput insurance, banking, and case-based applications. In his session at 18th Cloud Expo, John Newton, CTO, Founder and Chairman of Alfresco, will describe how to scale cloud-based content management repositories to store, manage, and retrieve billions of documents and related information with fast and linear scalability. He wi...
Mar. 19, 2016 02:00 PM EDT  Reads: 1,628
By Elizabeth White
The Wall Street Journal recently reported that an estimated 10 million zombie servers worldwide burn energy equal to the output of 8 large power plants. You might be wondering what’s burning in your data center? How can you confidently identify a zombie server from infrastructure that supports critical services? In her session at 18th Cloud Expo, Michelle Kerby, the Sr. Director for BMC Software Solutions Marketing, will discuss how automated asset discovery and dependency mapping can give IT a...
Mar. 19, 2016 02:00 PM EDT  Reads: 733
By Liz McMillan
Avi Networks has launched an integrated solution with Mesosphere to help enterprises build and deploy microservices applications at scale using Docker Containers. Unlike monolithic applications for which static, appliance-based load balancers were sufficient, dynamic microservices architectures require complete application services that match their agility. The Avi Vantage Platform works with the Mesosphere Datacenter Operating System (DCOS) and Docker containers to provide a dynamic service f...
Mar. 19, 2016 01:45 PM EDT  Reads: 482
By Liz McMillan
Intacct and LBMC Technology Solutions have announced that University Clinical Health (UCH) chose Intacct to shorten its monthly close process and improve the organization’s cash flow. UCH selected Intacct for its new ERP system in favor of NetSuite due to Intacct’s flexibility, ease-of-use, and significant cost savings. University Clinical Health is a nonprofit organization that offers quality primary and specialty healthcare from over 100 renowned physicians who also serve on the faculty at th...
Mar. 19, 2016 01:15 PM EDT  Reads: 457
By Elizabeth White
Two-thirds of organizations implementing hybrid cloud report they’re already gaining competitive advantage from their hybrid environments and are nearly three times as likely to use it to assemble data assets or monetize data, according to findings released by IBM (NYSE: IBM). With a hybrid cloud approach, organizations can be selective about when to use cloud and when to use traditional IT infrastructure – delivering the best functionality while meeting speed and flexibility needs, as well a...
Mar. 19, 2016 01:00 PM EDT  Reads: 851
By Liz McMillan
Broadcom Limited has announced its new family of Emulex® Gen 6 Fibre Channel host bus adapters to address the demanding enterprise data storage requirements of flash storage arrays, virtualized and cloud datacenters. Data centers are rapidly deploying flash arrays to accelerate storage performance, but have ended up moving the performance bottleneck from the hard drive to the storage network. Gen 6 Fibre Channel alleviates the network bottleneck and enables data centers to get maximum ROI from ...
Mar. 19, 2016 01:00 PM EDT  Reads: 429
By Elizabeth White
Internet of Things (IoT) platforms have evolved. Advances in technology make it possible for facilities to become more data-driven by connecting to energy assets, thereby improving building resiliency and reducing energy costs. By creating an Energy Network of Things, facilities can manage energy assets in real-time, institute system-wide operational oversight and compliance, execute energy efficiency programs, utilize real-time data, and support budgeting and asset planning across local and geo...
Mar. 19, 2016 01:00 PM EDT  Reads: 914
By Liz McMillan
“Today’s generation of customers are always connected and well informed, but businesses are lagging behind in terms of both understanding and engaging their customers across all their channels in ways that are both relevant and consistent,” said Brian Walker, chief strategy officer, SAP Hybris. Only one in four companies are enabling omnichannel customer engagement, whereby they have a unified, “single view” of the customer and are delivering a consistent, contextual, and relevant experience a...
Mar. 19, 2016 12:15 PM EDT  Reads: 1,305
By Liz McMillan
Akamai Technologies has opened a new, state-of-the-art data center in Sydney, Australia, as part of its global expansion strategy. Fueled by the increasing sophistication of distributed denial of service (DDoS) attacks, the company’s latest ‘scrubbing center’ leverages a cloud-based approach to mitigate threats without causing significant business disruption.
Mar. 19, 2016 12:00 PM EDT  Reads: 510
By Elizabeth White
SYS-CON Events announced today BZ Media LLC has been named “Media Sponsor” of SYS-CON's 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. BZ Media LLC is a high-tech media company that produces technical conferences and expositions, and publishes a magazine, newsletters and websites in the software development, SharePoint, mobile development and Commercial Drone markets.
Mar. 19, 2016 11:45 AM EDT  Reads: 1,063
By Elizabeth White
Zones, Inc., illustrated how technology solutions can improve patient care at the HIMSS16 Conference and Exhibition. Zones’ healthcare experts showcased technology to enhance patient care, ensure access to electronic medical and health records (EMR/EHR), design and implement mobility initiatives, and safeguard network and data security. Supporting every aspect of IT in the healthcare environment, Zones’ healthcare team can recommend the most productive and scalable IT solutions to ensure a high...
Mar. 19, 2016 11:15 AM EDT  Reads: 836
By Elizabeth White
SYS-CON Events announced today CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. CrowdReviews.com is the first buyer’s guide that ranks products and services based on client reviews.
Mar. 19, 2016 11:00 AM EDT  Reads: 1,106
By Liz McMillan
SYS-CON Events announced today that LeaseWeb USA Inc., one of the world's largest hosting brands, will exhibit at SYS-CON's 18th International Cloud Expo®, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. LeaseWeb USA has announced that its platform complies with all the applicable requirements in the U.S. Health Insurance Portability and Accountability Act (HIPAA).
Mar. 19, 2016 11:00 AM EDT  Reads: 619
By Pat Romanski
New Relic, Inc. has announced a set of new features across the New Relic Software Analytics Cloud that offer IT operations teams increased visibility, and the ability to diagnose and resolve performance problems quickly. The new features further IT operations teams’ ability to leverage data and analytics, as well as drive collaboration and a common, shared understanding between teams. Software teams are under pressure to resolve performance issues quickly and improve availability, as the comple...
Mar. 19, 2016 11:00 AM EDT  Reads: 672
By Elizabeth White
SYS-CON Events announced today that Chetu Inc., a worldwide leader in custom software solutions for niche businesses, software-defined storage and data services platform, will exhibit at SYS-CON's @ThingsExpo, which will take place on June 7-9, 2016, at the Javits Center in New York City, NY. Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled ni...
Mar. 19, 2016 10:30 AM EDT  Reads: 613
By Pat Romanski
Radware has announced that TeraGo Networks has chosen Radware’s DDoS Attack Mitigation solution to power their new suite of security services. Headquartered in Ontario, Canada, TeraGo Networks owns and manages a national IP network, providing service to 46 major markets across Canada. The company operates seven data centers, including two Tier 3 data centers in Mississauga, Ontario and Kelowna B.C. With last year’s acquisition of RackForce Networks Inc., TeraGo now also offers a full line of cl...
Mar. 19, 2016 10:15 AM EDT  Reads: 520
By Liz McMillan
Symantec Corp. has announced the worldwide availability of Encryption Everywhere, a website security package available through web hosting providers. Encryption Everywhere lets web hosting providers integrate encryption into every website from the moment it is created. With the new web security service, hosting providers can offer a variety of flexible options, including basic website encryption included as part of any hosted service, and a number of premium security packages with increasingly s...
Mar. 19, 2016 10:00 AM EDT  Reads: 607
MORE »