Angular JS

What is Angular?

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end-to-end tooling and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

Overview

AngularJS is by far the most popular JavaScript framework available today for creating web applications. And now Angular and Typescript are bringing true object-oriented web development to the mainstream, in a syntax that is strikingly close to Java. According to Google engineering director Brad Green, 1.3 million developers use AngularJS and 300 thousand are already using the soon to be released Angular. After working with Angular for the last 10 months I believe its impact on the JavaScript community will rival that of the spring framework on Java.

In this article, I’ll provide a high-level overview of the Angular framework.

At the end of 2014 Google announced that Angular would be a complete rewrite of AngularJS, and they even created a new language “At Script” that was meant to be used for writing Angular applications. But then Microsoft agreed to add support for decorators (a.k.a. annotations) to their Typescript language (a strict superset of JavaScript), and so that emerged as the language for the development of the Angular framework itself, and the recommended language for developing applications using the AngularJS framework.

You can also develop Angular apps in JavaScript (both ECMAScript 5 and 6) and in Dart. In addition, the Angular team integrated yet another Microsoft product – the RxJS library of reactive JavaScript extensions, into the Angular framework. Angular is not an MVC framework, but rather a component-based framework. In Angular an application is a tree of loosely coupled components.

Why TypeScript?

Typescript is a superset of JavaScript but like Java it allows you to define new types. Declaring variables with types rather than the generic var opens the door to new tooling support, which you will find to be a great productivity enhancer. Typescript comes with a static code analyzer, and as you enter the code in your Typescript-aware IDE (Web Storm/IntelliJ Idea, Visual Studio Code, Sublime Text, etc.) you’re guided by context-sensitive help suggesting the available methods in the object or types of the function argument. If you accidentally use an incorrect type, the IDE will highlight the erroneous code

Even if your Typescript application uses a third-party library written in JavaScript, you can install a type definition file (having the extension .d.ts), containing type declarations for this library. Type declarations for hundreds of popular JavaScript libraries are freely available, and you can easily install them with Typing. Imagine that you want to use jQuery (written in JavaScript) from your Typescript code. The type-definition files for jQuery will contain declarations (with types) of all jQuery APIs so your IDE can prompt you with which types to use, or highlight any erroneous code.

Web components

Web components are a set of standard APIs that make it possible to natively create custom HTML tags that have their own functionality and component lifecycle. The APIs include a custom elements specification, the shadow DOM, which allows the internals of a component to be isolated, and HTML imports, which describe how components can be loaded and used in any web application. The main goal of web components is to encapsulate the code for the components into a nice, reusable package for maximum interoperability.

Performance and Rendering

Rendering performance is substantially improved in Angular. Most importantly, the fact that the rendering module is located in a separate module allows you to run the computation-heavy code in a worker thread. You can feel for yourself the high speed of rendering a large data grid with continuously updating data. Run the test titled “DBMON Angular.0 Beta – Web Workers”; a large data grid with constant data refreshes (in a separate thread) is repainted by the browser blazingly fast. If you ask what Angular features set it apart from other frameworks, first on my list would be this separate module for template rendering and zones:

  • Having the component’s UI declared in separate templates processed by an independent renderer opens up new opportunities in areas from optimization and precompilation of templates, to the ability to create templates for rendering on different devices.

  • The module zone.js monitors the changes in the application and makes decisions on when to update the UI of each component. Any async event triggers the revalidation of the UI in each component and it works amazingly fast.

Keeping the rendering engine in a separate module allows third-party vendors to replace the default DOM renderer with one that targets non-browser-based platforms. For example, this allows reusing the application code across devices, with the UI renderers for mobile devices that use native components. The code of the Typescript class remains the same, but the content of the @Component annotation will contain XML or another language for rendering native components. A custom Angular renderer is already implemented in the Native Script framework, which serves as a bridge between JavaScript and native iOS and Android UI components. With Native Script you can reuse the component’s code by just replacing the HTML in the template with XML. Another custom UI renderer allows using Angular with React Native, which is an alternative way of creating native (not hybrid) UI’s for iOS and Android.

Tooling

While the syntax and architecture of Angular applications are a lot easier to understand than AngularJS 1.X, tooling is a bit more complex. This is not surprising; after all, you are writing code in one language and deploying it in another, because everything is compiled to JavaScript.

Angular CLI is a project currently in the works that promises to provide a command line interface that will substantially simplify various processes, from initial project generation to production deployment. Application debugging can be done either in the IDE or in the browser. We use Chrome Developer Tools for debugging. The generated source maps allow you to debug the Typescript code while the browser runs JavaScript. If you prefer to debug JavaScript, it’s also possible because the Typescript transpolar generates JavaScript that can be read by humans.

Libraries of UI Components

At the time of this writing there are several libraries of the UI components that you can use with Angular applications:

  • PrimeNG- a library of Angular UI components by the creators of Prime Faces (a popular library used with Java Server Faces framework).

  • Wijmo 5- a commercial library of Angular UI components. You have to purchase a developer’s licenses to use it.

  • Polymer- a library of nice looking extendable components by Google. At our company, we’ve managed to create a pilot Angular app that uses Polymer components, but the integration of the two leaves room for improvement.

  • Material Design 2- a library of UI components being developed at Google specifically for Angular. Currently, this library is in early Alpha, but development is pretty active, and I expect to see a couple of dozen well-designed UI components in the upcoming three to four months.

  • NG-Lightning- a library of Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS framework

Testing and Deployment

Angular comes with a testing library that allows you to write unit tests in the BDD format. Currently it only supports the Jasmine framework, but additional framework support is on the way. We use Karma test runner, which allows tests to be run against various browsers.The Protractor framework allows you to write end-to-end tests for your applications. If you monitor the network while loading a simple application in development mode you will see that the browser downloads more than 5Mb (half of that being the TypeScript compiler used by the module loader, SystemJS). But after running deployment and optimization scripts (we use the Webpack bundler), the size of a small app can be as little as 160K (including the Angular framework). We’re looking forward to seeing how Angular CLI will implement production bundling. The Angular team works on offline template compilation, which will lower the framework’s overhead to 50Kb.

At SPGON our developers strive to build highly interactive web applications as well as hybrid mobile applications along with dynamic features. We have professionals with prior experience of working on AngularJS projects. We are offering highly efficient and completely customized AngularJS development services to best match your client needs. For developing successful hybrid mobile and web applications Please Contact Us or drop us a line at info@spgon.com

Author :Chandra Haasan Bhattiprolu – Web Developer
Source : https://www.infoq.com

Share This Information