When to Choose ExtAngular

A GUIDE FOR DEVELOPERS AND MANAGEMENT

Alan R. Weiss

INTRODUCTION

With a wealth of frameworks and libraries available in the JavaScript world, it has become increasingly complicated to choose the best technologies for developing data-intensive applications. What hasn’t changed are schedule pressures. In order to keep up, you need tools that don’t leave you rewriting everything from scratch.

Software is also now strategic and enterprise in scale. In order to take advantage of agile development and testing methodologies, software must be designed to be modular and must be well-structured to reduce maintenance and change costs. JavaScript libraries and tools provide these attributes.

The likelihood of schedule achievement is dramatically improved by adopting frameworks and components that are prebuilt so that the developer can focus on the value-add of their own application. Without having to create specialized, difficult-to-code user interface components, time to delivery and deployment is reduced. And without having to create specialized mobile applications in difficult-to-learn languages, those become a natural part of the enterprise development workflow.

Why Angular?

One of the more popular JavaScript technologies in use by professional developers is Angular, an open source front end web framework created and maintained by Google. The first version of Angular is now called AngularJS (also known as Angular.JS). Angular was designed specifically to tackle so-called “single-page-applications (SPA)”, a type of web page that keeps the same basic page on the screen and just updates (modifies, changes) certain information based on user input and data flow, rather than re-loading all of a particular web page on changes. Angular (and AngularJS) is older than React and is the second most popular JavaScript framework. However, Angular can have a relatively long learning curve as it is a complete development framework.

Angular supports TypeScript, which for many developers turns JavaScript from a relatively unstructured weakly-typed language into a language where the data type is checked to make sure things like “1” and “1.000001” are not the same number. Using TypeScript creates a situation where the computer finds casting errors much easier, instead of users finding these during execution or run-time.

Using TypeScript with Angular also gives the programmer the option of coding in a class-based Object-Oriented Programming paradigm, and is a superset of ECMAScript 6 (ES6), while being backwards compatible with ECMAScript 5 (i.e. JavaScript). Angular also includes ES6’s Arrow functions, iterators, For/Of loops, python-style generators, reflection, dynamic (page) loading, asynchronous template compilation, and allows code to be executed on either the client browser or the server using the Universal State Transfer API and DOM. With this new design, code can be shared between the server and the client, which can improve performance.

Like React, Angular offers two-way data binding and both MVM (Model-View-Controller) and MVVM (Model-View-View-Model) code organization capabilities. Bidirectional binding minimizes the risk of errors and enables a singular behavior of the app. For MVVM design patterns, it has the capability of allowing developers to work separately on the same app section with the same set of data.

Angular has become extremely widespread and, along with Node.js, React, and other frameworks, has cemented itself as a key technology for enterprise developers such as Google and many others.

Performance

Angular is often the choice of large enterprise developers specifically because it is a real framework, uses TypeScript and hence enforces strong typing to try to prevent run-time code blow-ups, and is especially designed for popular single-page applications (SPA). It is inherently more performance savvy than other frameworks in part due to limited updating capabilities (only change what needs to be changed rather than a complete page reload).

From a performance standpoint, another key feature is the Build Optimizer. Like a good optimizing compiler, this removes all unnecessary runtime code, reducing application size and improving performance.

Angular uses improved hierarchical dependency injection. This technique abstracts actual components from their dependencies by running them in parallel to each other. Angular builds a separate tree of dependency injectors that can be altered without reconfiguring the components. Therefore, classes don’t have dependencies in and of themselves, but rather consume them from the external source.

One of the most important aspects of Angular is its Progressive Web Applications (PWA) capabilities. If you want to build apps that look like native applications across mobile or tablet, or desktop, Angular includes this capability. In other words, Angular applications can look a lot like desktop PC, Macintosh, or Linux applications. Not only is the look and feel good, the resulting application performs more or less like a native desktop application. No one wants to build applications for the desktop only to have them run poorly (slowly, or with broken UI elements), and Angular solves this problem.

A programmer/developer chooses Angular because they need to create sophisticated, data-intensive, responsive user interfaces quickly, they care about mobile platforms, and usually they work in either an enterprise environment where strong typing is required, or they are delivering customer-facing sophisticated single-page applications. But what about the components? If you want to save development time using pre-built components, that’s where ExtAngular comes in.

Why ExtAngular?

You’ve chosen JavaScript as at least one of your technologies to implement enterprise-grade applications. Smart. You’ve chosen Angular for performance for data-intensive and responsive applications that look like native desktop applications. You can use Angular on mobile platforms, giving you a great deal of flexibility and largely eliminating the need to code native Android Java or Apple iOS Objective-C or Swift programs (a good thing, since those can be difficult to learn). Now it’s time to figure out how to design your application, and you certainly don’t want to reinvent the wheel.

Introducing ExtAngular from Sencha

ExtAngular builds on one of the more popular JavaScript technologies, Angular, to provide over 115 pre-built UI components that you can easily integrate with Angular applications.

ExtAngular also includes plugins for Webpack to optimize builds, and theming tools such as Sencha Themer gives designers and developers complete control over their application look and feel without having to write code to do so. Theming helps establish and reinforce a developer’s company branding, too, an important consideration when creating applications that consumers will access.

ExtAngular provides the most complete set of professionally tested and commercially supported Angular components for developers to use in creating visually stunning, data-intensive applications on desktop and mobile devices.

Grid enables organizations to handle millions of records and provides built-in functionality such as sorting, grouping, and summary rows.
Pivot Grid enables developers to add powerful analytics functionality to Angular applications — allowing users to summarize and analyze data to make more informed decisions.
Exporter enables users to export data from the standard grid or Pivot Grid to a wide variety of common formats, including XLSX, XML, CSV, TSV, and HTML, for additional analysis and information sharing.
Layouts ensure the proper sizing and positioning of all components with the powerful and flexible layout system.
Charts let developers visually represent data with a broad range of dynamic and static charts, including line, bar, and pie charts. Browser variations are handled automatically, so the charts always display beautifully.
D3 enables developers to add sophisticated D3 visualizations including heatmaps, treemaps, and sunbursts to their applications. The D3 adapter enables developers to work with any example in the D3 library.
Forms and Form Validation make it easy for teams to add login, checkout, register, contact, rating forms and more to their web application. Form validation helps ensure the integrity of the data.
Calendar lets developers add a sophisticated calendar to their web applications so users can easily view and manage schedules and events within the application.
Buttons, Tabs, Menus and Panels enable organizations to add simple or sophisticated components to their applications quickly and easily.

But ExtAngular’s biggest value is clearly the pre-integrated 115+ user interface components. ExtAngular components are consistent, extremely well tested, work across all modern web browsers, and are hassle-free. ExtAngular gives you the most complete set of components for your Angular apps in a single, commercially supported, and professionally maintained package, including grids, tree grids, pivot grids, charts, calendars, data-driven design (D3) visualization components, animations, forms, exporting to Microsoft Excel, responsive props, dialogs, lists, list swipers, carousels, sophisticated advanced layouts (including nesting), progress bars, sliders (vertical or horizontal), toggles, radio buttons, sparklines, tabs, combo boxes, ripples, date picker, menus, collapsible panels, iOS themes, and taglines. ExtAngular is a single-source for all these and more UI components.

You don’t have to get all your user interface components from ExtAngular, though. You can use open source widgets and components, and you can mix and match Angular UI components with ExtAngular to customize your application, especially useful for data-intensive applications.

However, with Sencha all our components are professionally maintained, new components are released regularly, and the quality (based on a huge amount of testing) is consistently high. ExtAngular libraries are compatible with Angular itself, and as Angular keeps improving and growing, Sencha ensures that ExtAngular remains compatible. For example, the latest ExtAngular 6.7 supports the new Angular 7 features.

Having a single source of battle tested UI components means less time spent searching for some cute new widget from an open source developer whose next fancy might be something other than maintaining their own code. Professional enterprises and businesses of all sizes rely on ExtAngular.

Different applications and developers prefer different data stores. A robust data package decouples the UI components from the data layer. The data package is protocol agnostic and can access data from any back-end source. Buffered rendering effciently handles massive data sets with ease.

Sencha Tools that Support ExtAngular

Sencha Test is the most comprehensive unit and end-to-end testing solution for Ext JS apps, and includes support for end-to-end testing of ExtAngular, Angular, ExtReact, and React apps. Sencha Test helps you improve application quality, accelerate time to market, and reduce testing time and costs.

Sencha Themer enables developers to uniquely theme components and give their Angular applications a distinct look.

ExtAngular Generator helps kick start new ExtAngular projects, offering best practices and tools to make developers more productive.

ExtAngular Webpack Plugin works with Sencha CMD.

Sencha Fiddle provides an easy way to try ExtAngular code in a browser without downloading or installing anything.

ExtAngular TypeScript definitions provide code completion functionality in several code editors including Visual Studio Code.

Sencha Private npm Registry offers immediate access to ExtAngular packages and early pre-releases. Best of all, your JavaScript dependencies are always available, instead of relying on a public npm repository that might go down.

Why Sencha?

A wise person once said, “Trust, but verify.” If you’re going to pick a development tool partner, you might as well pick the best, and we at Sencha welcome you to come find out why we have for over 10 years consistently delivered outstanding JavaScript development tools, frameworks, and libraries.

Comprehensive: ExtAngular has a rich set of components, visualization and analytics. You don’t have to reinvent the wheel; you can deliver sophisticated, modern, state-of-the-art visualizations that customers and management will appreciate.

Ready-to-Use: Components and tools are ready to use and built to work together seamlessly.

Easy to Maintain: All of our products have a common use model and coding style across pre-integrated components. You won’t have to adapt to individual open source programmer coding style preferences.

Cross-Platform: The right and rich user experience is delivered across the web, tablet, and phone platforms and is tested against all of the major web browsers, dramatically reducing your system testing time. The ability to embrace the mobile web is amazing!

Object-Oriented or Imperative: Code in the style that suits you.

Commercial Backing for Support, Services and Training: When your application development is stuck, it is crucial to have someone to call. If you used open source, you can post a request to the community forum and potentially wait a variable amount of time for a response. With Sencha, you can just contact us and get the problem solved.

SUMMARY

ExtAngular, an incredibly sophisticated professional UI component JavaScript library, has so many advantages that it just makes good business and technical sense to investigate what ExtAngular can do for your data intensive, visually rich applications.

For the CIO, CTO, and Director of Development, you get the knowledge that you’re using the very best to deliver business value to your company and your customers, improving the likelihood of schedule achievement and design virtuosity with industry-leading quality.

For developers and programmers, you get all of the advantages of JavaScript’s “write once, deploy everywhere” abilities. You also get source code, pretested and prequalified components to reduce development time and ease your software testing and quality assurance burden, extensive documentation, extensive examples with code, getting started videos, professional support, access to the open source world if you so desire, white papers, industry briefings, and more.

Learn more about ExtAngular and download a free trial version:
https://www.sencha.com/products/extangular