The Excitement Surrounding the Angular 6 Updates
In this post, we take a look at what's new with Angular 6, why you should be excited about these updates, and one dev team is taking advantage of them.
Join the DZone community and get the full member experience.Join For Free
With all of the recent exciting changes in Angular v6's release and the large shift in both the enterprise and SMB market towards adopting Angular as the go-to framework for building business applications, Infragistics is making sure to stay on the cutting edge of web development. Speaking to the ripple effect Angular has had in modern web development, our Angular team has been vocal about their plans to give web developers accessibility and ease when working with Angular on their upcoming projects. By providing tools for the upcoming wave of developers moving to building line of business applications in Angular, we're making sure that we deliver best of breed UI components and the fastest Angular data grid with our products, Ignite UI for Angular and Ignite UI CLI.
Recently, we've added another product to our Angular productivity line, Indigo.Design. Announced at Google I/O, Indigo.Design is a digital product design platform that brings developers and designers together to build amazing user experiences. For example, once the iterative design process is complete, developers can use the Visual Studio Code plug-in and UI components to create a pixel-perfect Angular or Flutter application for Android and iOS. The product is highlighting Infragistics' goal in working closely with Google's Angular team to develop forward-thinking tools for web, desktop, and mobile applications, so be sure to read the latest press release and check out the product.
As it follows, the team has been eager to share their goals and progress with the community, notably sitting down with JAXenter, the international technology website and news platform. In the interview and subsequent article, Infragistics' Radoslav Karaivanov, Sr. Software Developer, and Konstantin Dinev, Manager of Product Development, highlighted that they'll continue to work with each Angular release, as Konstantin notes, "Our goal is to be lock-step with the Angular releases from Google - our customers move quickly to take advantage of new Angular features, and they expect Infragistics products to 'just work' when their teams start new app dev in the latest version of Angular."So, what's new about Angular 6 and why is our dev team so excited?
Angular v6 has a laundry list of exciting new features that make building Angular apps easier and continues to drive the message that Angular is 'enterprise-ready.' When discussing the updates, Radoslav offered that, "The new features are compelling; Angular Elements could really increase the usage of the framework, even just to transform parts of legacy web apps into web components."
On top of that, Radoslav also couldn't ignore the sheer appeal and support that's offered with a framework developed by Google. He had chuckled as he said, "At least you know you won't be out in the wild," given that Angular is providing a full package of the framework from one of the leading tech companies in the world.
- Synchronization of all major versions for the framework packages, the CLI, and the Material/ CDK to help with cross compatibility.
- Two new CLI commands,
ng add. With ng update, your package.json will be analyzed and recommendations for dependency updates will be given. It'll help you keep your dependencies in sync and up-to-date, plus allowing for third parties to develop update scripts called "schematics" that will auto-update your code when that third party needs to make some breaking changes. For
ng add, you'll see that it uses your package manager of choice to download and install new dependencies that can update a project with polyfills, configuration changes, or scaffold package-specific initialization code.
- The introduction of Angular Elements to convert custom elements into web components that can be reused.
- The new tree component for displaying hierarchal data.
- CLI workspaces that can contain multiple projects, like libraries and applications.
- The addition of the
ng generatelibrary to support the creation and building of libraries in the CLI.
- Dependency Injection to bundle services into modules, so that applications are smaller.
- The promise of long term support for all major releases starting with v4.
So, with these new features, our Angular team is looking forward to further optimizing Ignite UI for Angular, boosting the 50+ Material-based components and the fastest Angular Data Grid for peak performance.
Let's look at the team's most talked about features and expand on some of the details.
When talking with the team about Elements, it was met with much excitement as to where Elements could take developers as Angular grows. Radoslav aptly noted that, "...reusability is there but, more importantly, interchangeability is king."
As this feature grows, we're essentially hitting upon reusability with the true crux being interchangeability. Developers would be able to take their source code and controls, put them through a compiler, and have independent web components ready for use across a variety of ecosystems. With Angular currently receiving support from major browsers like Chrome, Firefox, Opera, and Safari, with Edge still on the cusp, web components and their interchangeability will boost Angular into an even larger spotlight as support builds.
The team is looking towards the upcoming framework independency, as a reduced code size in combination with interchangeable web components will greatly enhance the speed of products built with Ignite UI for Angular.
The Practicality of Building a Native Angular Application
When Konstantin and Radoslav took time to look over the hierarchal changes, overall streamlining, and the use of tree-shaking, both had a few ideas about the popularity of Angular in the future. Konstantin put forth that:
"There's a big push by Angular for application optimizations that are done by the framework and other supporting frameworks, rather than leaving this to the developer. This gives Angular a big advantage when choosing a framework for adoption, because, as a developer, you may or may not be aware of how to optimize your application, and the framework doing that for you saves a lot of time and effort. Bottom line - just like Ignite UI for Angular - it makes you more productive."
Furthermore, this practicality is emphasized best by Radoslav, as he illustrated a bit of the reasoning for the team's transition to building productivity tools in for Angular. He stated, "Angular has a good set of stable features since v4, good tooling for developing and building projects, and enough of a community to continue improving it. In the end, developers and users should decide what actually helps them solve their problems and not which npm package is more popular."
Virtualization and the Upcoming Renderer:
When I asked Radoslav about Angular and the team's work with code minification, virtualization, and the implementation of the new "Ivy" renderer with the v7 release, he laughed, saying, "The 'Ivy' renderer is the next best thing since sliced bread."
Our Angular team uses each Angular release to push for high optimization with the virtualization directive to ensure that large-scale data sets will smoothly render with Ignite UI for Angular's fast data grid. Infragistics recognized that as Angular develops, it's only going to become faster in server-side rendering due to code splitting with features like the new Component Router and the size of the rendering engine itself. Currently, Angular's rendering engine has become smaller and smaller, allowing developers to ship in microcode. With the early testing of the newest rendering engine for Angular 7, code-named "Ivy," developers would be able to ship a basic "Hello World" application in just under 3 kilobytes with the minified version currently standing at just over 7 kilobytes. Paired with Ignite UI for Angular's updated virtualization directive, we're continually able to provide the fastest Angular data grid on the market today.
As for the Infragistics team, they went and implemented
igxForOf in Ignite UI for Angular, which is functioning as an alternative to Angular's
ngForOf for templating sizeable amounts of data. As pulled from our documentation, "The
igxForOf uses virtualization behind the scenes to optimize DOM rendering and memory consumption. It's working similarly to Paging by slicing the data into smaller chucks which are swapped from a container viewport while a user scrolls the data horizontally and vertically."
They designed this as a way to help developers who are using the Angular data grid for enterprise or commercial applications, as there are two major problems that tend to go hand-in-hand with products that lack strong virtualization for their data grids:
- A noticeable lag in column headers that results in the column names being unable to stay attached to the appropriate column while horizontally scrolling.
- A whited-out screen between scrolls as the data is taking time to render.
While seemingly insignificant on paper, a product that is able to handle and to render large-scale data sets has become a significant want amongst the enterprise and commercial communities, particularly for those who need this data to be readily available at a moment's notice.
With eyes on Angular to continually release a smaller, faster renderer, the team is continually using these updates to ensure that our Angular Data Grid is able to handle robust data sets without a hitch or lag.
Grid and Component Highlights
Given the strong foundation and implementation of Ignite UI for Angular, let's move through a few of the most talked about features of our data grid and components.
Our Data Grid allows for you to display and manipulate tabular data with Ignite UI for Angular, and you can quickly bind your data with very little coding or configuration. Some must-have features include filtering, sorting, paging, templates, movable columns, and the ability to edit and update data. Also, user actions are easy to understand and can be controlled programmatically.
The grid is exported as an NgModule, thus all you need to do in your application is to import the IgxGridModule inside your AppModule, as shown below:
Once you've imported the
igxGridModule, you can begin to data bind your information and import various components, directives, and higher classes. You can read about the full process in our documentation, check out the demo on StackBlitz, and here are some notable components from the 18.1 release with which you'll find yourself working:
- Column Pinning
- Column Resizing
- Export to Excel/CSV/TSV
- Row Selection
- Mask Directive
- Input Group
- Time Picker
Importantly, with the
igxFinancialChart component, developers are able to construct high-performance, lightweight, and easily configurable charts to display financial data. You can take a look at the component on StackBlitz, and you'll see that, after you bind the data source, you're able to fully customize the financial chart to a preferred visualization. This can provide a user context and clarity to the information through a variety of
chartType properties like bar, candle, column, line, and auto.
Below you can see an example of a simple data source and the following code to bind a financial chart to that data source:
After customization binding, the financial chart is exported as an NgModule. You'll notice that you'll need to import the
igxFinancialChartModule inside of your AppModule:
As a significant feature, you're able to bind high-volume data to your financial chart. Due to Angular specific features, you'll want to make sure to set
ChangeDetectionStrategy.OnPush in your
@Component decorator. By setting this, you're telling Angular to avoid digging deeply into the changes within your data array, as you wouldn't want that occurring during every
While the above example demonstrated a simple data source, here's a look at binding to high volumes of data:
igxCategoryChart component is one that simplifies the complexities of the data visualization domain into a simple API. You're able to bind a collection of data or a collection of collection, and the category chart will automatically select the best series for the data's representation. This component example is also available on StackBlitz, and you'll see that it affords
chartType properties like line, area, column, point, and spline.
igxFinanicalChart, in order to create the
igx-category-chart component, you must bind the data. Below you can see an example of simple data source and the following code to bind a category chart to that data source:
And remember, with the auto option for the chart type, the chart will analyze the assigned data based on suggestions from the Data Adapter.
Looking Forward to Angular 7
The Angular 7 release is slated to arrive sometime in mid to late Fall. We can expect to see more support for Elements and the transition into independent web components, and we'll get the opportunity to work with the new renderer and take advantage of the code minification. Since there's such a large push by Angular to optimize applications, the use of the framework only seems to be growing. It's proving to be particularly useful for developers who aren't sure of how to necessarily optimize an application, and Angular is showing how it can save you time and effort when building. Similarly, the approach harkens to our work with Ignite UI for Angular, in that we're working to boost the use of efficient tooling and productivity.
The Infragistics team has developed a roadmap based off of Angular's progress, and they'll be looking to add a series of new components and directives that will enhance Ignite UI for Angular's library. They'll also be including a new webpack for Ignite UI CLI and adding more features related to general scaffolding with templates and views for major components. Moving forward, they're taking advantage of the new schematic feature for Angular and creating one so that
ng-update works for Infragistics' new features.
As I've discussed a few of the reasons why we've stepped into the Angular world and some of the latest Angular developments, I'll note again that our team is working closely with Google's in order to ensure that we develop the best and fastest Angular products for developers working with web and mobile application development. We're excited to continually bring you features that boast best-in-class grids, charts, and components, so you're encouraged to take time to look over our entire Infragistics Ultimate 18.1 suite. Plus, you can follow us on Twitter for the latest updates on work that we're doing.
Published at DZone with permission of Sarah Roman, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.