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.
In this article, I’ll provide a high-level overview of the Angular framework.
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.
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.
Author :Chandra Haasan Bhattiprolu – Web Developer
Source : https://www.infoq.com