Welcome!

@ThingsExpo Authors: Elizabeth White, Carmen Gonzalez, Yeshim Deniz, Pat Romanski, Karthick Viswanathan

Related Topics: @ThingsExpo, Java IoT, Mobile IoT, Microservices Expo, Linux Containers, Containers Expo Blog, Machine Learning , Agile Computing, Video, Wearables, @CloudExpo, FinTech 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

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.

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

@ThingsExpo Stories
SYS-CON Events announced today that Datera will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Datera offers a radically new approach to data management, where innovative software makes data infrastructure invisible, elastic and able to perform at the highest level. It eliminates hardware lock-in and gives IT organizations the choice to source x86 server nodes, with business model option...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, Cloud Expo and @ThingsExpo are two of the most important technology events of the year. Since its launch over eight years ago, Cloud Expo and @ThingsExpo have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, I provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading the...
SYS-CON Events announced today that CA Technologies has been named "Platinum Sponsor" of SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CA Technologies helps customers succeed in a future where every business - from apparel to energy - is being rewritten by software. From planning to development to management to security, CA creates software that fuels transformation for companies in the applic...
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
SYS-CON Events announced today that GrapeUp, the leading provider of rapid product development at the speed of business, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company, specialized in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market acr...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
From 2013, NTT Communications has been providing cPaaS service, SkyWay. Its customer’s expectations for leveraging WebRTC technology are not only typical real-time communication use cases such as Web conference, remote education, but also IoT use cases such as remote camera monitoring, smart-glass, and robotic. Because of this, NTT Communications has numerous IoT business use-cases that its customers are developing on top of PaaS. WebRTC will lead IoT businesses to be more innovative and address...
In his opening keynote at 20th Cloud Expo, Michael Maximilien, Research Scientist, Architect, and Engineer at IBM, discussed the full potential of the cloud and social data requires artificial intelligence. By mixing Cloud Foundry and the rich set of Watson services, IBM's Bluemix is the best cloud operating system for enterprises today, providing rapid development and deployment of applications that can take advantage of the rich catalog of Watson services to help drive insights from the vast t...
SYS-CON Events announced today that Elastifile will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Elastifile Cloud File System (ECFS) is software-defined data infrastructure designed for seamless and efficient management of dynamic workloads across heterogeneous environments. Elastifile provides the architecture needed to optimize your hybrid cloud environment, by facilitating efficient...
Recently, IoT seems emerging as a solution vehicle for data analytics on real-world scenarios from setting a room temperature setting to predicting a component failure of an aircraft. Compared with developing an application or deploying a cloud service, is an IoT solution unique? If so, how? How does a typical IoT solution architecture consist? And what are the essential components and how are they relevant to each other? How does the security play out? What are the best practices in formulating...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
SYS-CON Events announced today that Golden Gate University will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, will introduce two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
21st International Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Me...
SYS-CON Events announced today that Secure Channels, a cybersecurity firm, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Secure Channels, Inc. offers several products and solutions to its many clients, helping them protect critical data from being compromised and access to computer networks from the unauthorized. The company develops comprehensive data encryption security strategie...
In his session at @ThingsExpo, Sudarshan Krishnamurthi, a Senior Manager, Business Strategy, at Cisco Systems, discussed how IT and operational technology (OT) work together, as opposed to being in separate siloes as once was traditional. Attendees learned how to fully leverage the power of IoT in their organization by bringing the two sides together and bridging the communication gap. He also looked at what good leadership must entail in order to accomplish this, and how IT managers can be the ...
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
There is only one world-class Cloud event on earth, and that is Cloud Expo – which returns to Silicon Valley for the 21st Cloud Expo at the Santa Clara Convention Center, October 31 - November 2, 2017. Every Global 2000 enterprise in the world is now integrating cloud computing in some form into its IT development and operations. Midsize and small businesses are also migrating to the cloud in increasing numbers. Companies are each developing their unique mix of cloud technologies and service...