Angular CLI: dev and prod builds with JiT and AoT

I’m happy to announce that my colleague Anton and I started working on the second edition of our Angular book published by Manning. The new TOC is here. The major changes in the second edition are:

– Get rid of any mention of SystemJS – use Angular CLI only
– Replace the chapter on Webpack with the chapter on ngrx
– Add more code samples illustrating various features and techniques

I just finished re-writing the first chapter and would like to offer you a fragment that illustrates the use of Angular CLI for creating dev and prod builds. Your feedback is appreciated.

To make this article more practical, generate a new project Hello CLI using Angular CLi:

ng new hello-cli

Then build the bundles, start the dev server and open the browser on port 4200 by running a single command:

ng serve -o

Now goes the chapter fragment.

Production Builds

The ng serve command bundled the app files but didn’t optimize our Hello CLI application. Open the Network tab in the dev tools of your browser and you’ll see that the browser had to load 2.4MB to render this simple app. In dev mode, the size of the app is not a concern because you run the server locally and it takes the browser only 802 milliseconds to load this 2.4MB of code as shown below.

Now visualize a user with a mobile device browsing the Internet over a regular 3G connection. It’ll take 10 seconds to load the same Hello CLI app. Many people can’t tolerate waiting for 10 seconds for any app except Facebook (30% of the Earth population just lives on Facebook). We need to reduce the size of the bundles before going live.

Applying the -prod option while building the bundles will produce much smaller bundles by optimizing your code, i.e. it’ll rename your variables into single-letter ones, will remove comments and empty lines, and will remove the majority of the unused code. There is another piece of code that can be removed from the app bundles – the Angular compiler. Yes, the ng serve command included such compiler into the vendor.bundle.js. In the next section will talk about production builds and how to remove the Angular compiler from your deployed app.

JiT and AoT Compilations

Take a look at the code of the generated app.component.html.

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAw...">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="http://angularjs.blogspot.com/">Angular blog</a></h2>
  </li>
</ul>

For the most part, it consists of standard HTML tags, but there is one line that browsers won’t understand:

Welcome to {{title}}!

These double curly braces represent binding a value into a string in Angular, but this line has to be compiled by the Angular compiler (it’s called ngc) to replace the binding with something that browser would understand. A component template can include another Angular-specific syntax (e.g. structural directive *ngIf and *ngFor) that need to be compiled before asking the browser to render the template.

When you run the ng serve command, the template compilation is performed inside the browser. After the browser loads your app bundles, the Angular compiler (packaged inside vendor.bundle.js)performs the compilation of the templates from main.bundle.js. This is called Just-in-Time (JiT) compilation. This term means that the compilation happens in time of the arrival of the bundles to the browser.

The drawbacks of the JIT compilation are:

1. There is a time gap between the loading bundles and rendering the UI. This time is spent on JiT compilation. On a small app like Hello CLI this time is minimal, but in real world apps, the JiT compilation can take a couple of seconds, so the user needs to wait longer for just seeing your app.

2. The Angular compiler has to be included in the vendor.bundle.js, which adds to the size of your app.

Using the JiT compilation in the prod is discouraged, and we want the templates to be pre-compiled into JavaScript before the bundles are created. This is what Ahead-of-Time (AoT) compilation is about.

The advantages of the AoT compilation are:

1. The browser can render the UI as soon as you app is loaded. There is no need to wait for code compilation.

2. The ngc compiler is not included in the vendor.bundle.js and the resulting size of your app might be smaller.

Why use the word “might” and not “will”? The removing of ngc compiler from the bundles should always result in smaller app size? Not always. The reason being that the compiled templates are larger than those that use a concise Angular syntax. The size of the Hello CLI will definitely be smaller as there is only one line to compile. But in larger apps with lots of views, the compiled templates may increase the size your app so it’s even larger than the JIT-compiled app with ngc included in the bundle. But you should use the AoT mode anyway because the user will see initial landing page of your app sooner.

Creating bundles with the -prod option

When you build the bundles with the -prod option, Angular CLI performs code optimization and AoT compilation. Let’s see it in action by running the following command in our Hello CLI project:

ng serve -prod

Open the app in your browser and check the Network tab as shown in the next image. Now the size of the same app is only 120KB (compare to 2.4MB) and the load time is 573 milliseconds (compare to 802 milliseconds).

What a great result! Google home page weighs more than 200KB. As a matter of fact, the size of the app could be reduced even more after applying the gzip compression to the bundles. Note that the file names of the bundles now include a hash code of each bundle. Angular CLI calculates a new hash code on each prod build to prevent browsers from using the cached version if a new app version is deployed in prod.

Recently released Angular CLI 1.3.0 offers a new option –build-optimizer, which does a better job in eliminating unused code. Even in our simple app it reduced the size of this app to 111Kb. On larger apps the effect of this option can be even bigger. In one of our apps that uses Angular Material it reduced the app size from 290KB to 200KB (lots of dead code there?). The option –build-optimizer works with both ng serve and ng build commands.

ng serve -prod --build-optimizer

Shouldn’t we always use AoT? Ideally, you should unless you use some third-party JavaScript libraries which produce errors during the AoT compilation. If you run into this problem, turn the AoT compilation off by building the bundles with the following command:

ng serve -prod -aot=false

The next screen shot shows that both the size and the load time increased compared to the AoT compiled app.

We were using the ng serve -prod command, which was building the bundles in memory. If you’re ready to generate prod files, use the ng build -prod command instead. We’ll go over the process of building production bundles and deploying the app on the server in chapter 8.

The goal of this section was to get you started with Angular CLI, and we’ll continue its coverage in chapter 2.

Advertisements

Migrating your apps from AngularJS to Angular

So you have an Angular JS in prod and you want to migrate it to the latest version of Angular. The first question to answer is why? While talking to our clients, I’ve heard the following answers:

– We have a large app and it has issues with performance.
– Our company is moving to Angular/TypeScript and we want all apps to use these technologies.
– We need to improve performance of our AngularJS app
– Since all new apps will be written in Angular, it’s going to become hard to support apps written in two different languages and frameworks. The pool of developers who can/want write in AngularJS will be shrinking.

Any of the above answers sounds reasonable. But think about it for a moment. You have a working app with a certain functionality. After spending X amount of dollars your end users will get an app with the same functionality. Does it worth the trouble? Let’s say it does and the budget for the migration is approved.

Two approaches for migration

There are a couple of approaches to the AngularJS-Angular migration process.

1. Rewrite the app from scratch.

IMO, this is the best approach if your circumstances permit. A complete re-write can be the most cost-effective strategy. If you’re a manager, put your team through Angular training (live, online, videos, books). Allocate time and budget for getting your developers up to speed with Angular as the learning curve is steep and prior experience with AngularJS is not overly helpful. Then your developers will write the new version of the app as per best practices recommended for Angular/TypeScript projects. Ideally, your team should include a developer who has at least one year of practical development in Angular. If you don’t already have such a developer, hire one. He should be both a developer and a mentor.

But a complete rewrite may not be an option. Your existing (small-to-midsize) AngularJS app is in prod, works well, and the end users keep asking for new features that have to be released in prod on a regular basis. This means that you can’t just stop developing in AngularJS, and spending several months doing greenfield development is not an option.

You can’t do a complete rewrite if an existing app is large (think hundreds of views). In this case, a rewrite could take a couple of years.

2. Gradual migration

If you decide to go this route, start with reading the document titled “Upgrading from AngularJS“. It’s a well-written document, but you need to understand that it’s about migration from AngularJS to a completely different framework. Don’t be tricked by the statements like “Angular is a reimagined version of the best parts of AngularJS”. Angular is a different framework with different architecture and principles of building apps.

TypeScript, being a superset of JavaScript, requires some investment in learning too. But TypeScript is your friend. The learning curve for any JavaScript/Java/Python/C# developer is not steep, the tooling is great, optional static types make the transition from JavaScript easy plus you’ll get a great help from IDEs (autocomplete and compilation errors). In no time, you’ll see how your productivity is increased compared to writing in JavaScript.

Some die-hard JavaScript experts may continue bad-mouthing TypeScript, but be pragmatic. TypeScript allows making developers of any skill level (not just the superstars) more productive. Don’t trust me? A recent StackOverFlow survey nominated TypeScript as a third most loved language.

Plan your migration

You need to come up with a plan for your migration project. The plan will depend on how your current AngularJS app was written. While the Angular’s migration guide mentioned above recommends preparing your AngularJS app to have one component per file (see Rule 1 in the migration guide) and use module loaders, the chances are slim that your existing AngularJS app followed this rule. Refactoring your AngularJS app just to follow this rule is a project on its own; it may be costly and your refactored app would require additional testing and bug fixing.

The Angular migration guide explains how the AngularJS app should use component directives to simplify migration to Angular. Once again, changing your existing app to follow these guidelines is yet another project.

Depending on the production release schedule of the existing AngularJS app, you can pick one of two approaches for the migration:

– Feature by feature
– Route by route

When you migrate feature by feature, identify a group of component and services implementing this feature in the new Angular code.

Migrating route by route would also require a similar activity, but you’d need to pick a route and identify which components and services would need to be there. The route by route strategy works well if the views of your app are relatively simple and don’t use complex custom components.

If your AngularJS app has complex UI components, you may need to convert them first.

Running Angular and AngularJS side by side

The next step is to learn how the ngUpgrade and UpgradeModule work. The UpgradeModule serves as a bridge between the Angular and AngularJS parts of your app.

No matter how you’ll approach the migration, for some period of time your app will include two frameworks: AngularJS and Angular. When our company is involved with migration projects, we start with creating an Angular app that just bootstraps the existing AngularJS app as is with the help of the UpgradeModule.

With the UpgradeModule, you’ll run a hybrid app that’ll have two parts – one part will include Angular framework, and another – AngularJS. The components and services from the Angular part will communicate with their counterparts from the part written in AngularJS. Read the Angular migration guide about the differences in Dependency Injection (DI), change detection, and working with DOM.

While Angular DI is more flexible and allows either having services as singletons for the entire app or a specific component branch, in AngularJS services are always app-level singletons. This is not a big deal as in a typical Angular app we use app-level singletons anyway. In particular, you can use a singleton and DI for storing the state of the hybrid app. During the migration, you need to identify which services will be injected from Angular to AngularJS and those that will be injected in the opposite direction.

Components of both frameworks need to communicate with each other. If you’re not familiar with how to arrange a loosely-coupled component communication in Angular using injectable services, watch my video on the subject.

While running a mixed Angular/AngularJS app, the Angular framework will be responsible for triggering change detection of the entire app. Angular includes a library zone.js that serves as an execution context for all asynchronous processes of the app. On any change that may need to update a UI, it makes a single pass through the entire component tree and triggers the UI updates. There is no need to invoke $scope.$apply() as it’s done in AngularJS. In a hybrid app, on any async change that would start Angular change detection, the UpgradeModule will invoke $rootScope.$apply() in your AngularJS code.

Finally, roll-up your sleeves, start reading the AngularJS code and gradually implement it in Angular.

Automating deployment

Don’t forget about re-thinking your deployment process. Most likely you have an automated deployment implemented using Gulp or Grunt. In Angular apps most of the features that we had to manually configure in AngularJS are provided by the tool called Angular CLI. We wrap Angular CLI commands into npm scripts and add Gulp tasks if need be. It takes only several lines of code in npm scripts to build the bundles for deployment in Angular. In this video I show how to write a script that will build the Angular bundles and deploy them under a Java Spring server. If I wanted to gzip the files before deployment, I could have added one more line like `“postbuild:prod”: “gulp –gulpfile compress.js”` that invokes my script that uses the Gulp plugin for compression.

Good luck with your migration projects!

Advanced Angular course – need your input

We started receiving requests for teaching an advanced Angular workshop. My colleague Anton and I started preparing the courseware and are planning to offer such a workshop this fall. Below is a draft of this course outline, which will start with refactoring and upgrading the ngShop app that we’ve  created for one of our Intro to Angular courses.  Please take a look at the draft below, and if you see some topics that should be added to this workshop, please leave comments to this blog. Thank you!

Advanced Angular Course (draft)

  1. Using UI libraries: Angular Material and PrimeNG

    1. Adding @angular/material package to the ngShop application
    2. Configuring custom theme / SCSS
    3. Laying out component with @angular/flex-layout library
    4. Programmatically changing UI layouts with MediaQueryList
    5. Combining Angular Material 2 and the PrimeNG UI components
  2. Modularizing Angular application:

    1. Minimizing the initial app payload by splitting it into modules
    2. Lazy-loaded modules and preloaders
    3. Adding new Admin module to ngShop
    4. Configuring a lazy-loaded route for Admin module
    5. Configuring route resolvers
  3. Application Security with JWT

    1. Intro to JWT-based authentication
    2. Adding a JWT-based Login page
    3. Authorizing access to the Admin module via route guard
    4. Adding JWT token to the HTTP requests required authorized access
    5. Handling Unauthorized errors
  4. Dynamically adding components to your app

    1. Creating a dynamically configurable  Dashboard page
    2. Dynamically adding components with ComponentFactoryResolver
    3. Dynamically adding components with
  5. Advanced work with Forms

    1. Creating custom form controls. ControlValueAccessor.
    2. Splitting complex forms into multiple Angular components
    3. Validating form groups
    4. Refactoring the Checkout page of ngShop
    5. Adding an inventory page with a data grid
  6. End-to-end testing with Protractor

  7. Production deployment

    1. Customizing Webpack build configuration and  ng eject
    2. Building Angular application on the Continuous Integration server
    3. Running tests on CI
    4. Automatic deployments to the nginx server
    5. Configuring HTTPS
    6. Combining multiple Angular apps under a single domain
    7. Server-side rendering with Angular Universal
  8. Refactoring ngShop to introduce state management  with ngrx

    1. Benefits of  unidirectional data flow
    2. Managing state with @ngrx/store
    3. Time-travelling debugging with @ngrx/store-devtools
    4. Using  HTTP APIs with @ngrx/effects library
    5. Integration with the router via @ngrx/router library

 

My presentations and workshops in 2017


This is a list of presentations and workshops that Yakov Fain offers in 2017. If you’d like to invite Yakov to deliver these talks/workshops at your organization, please send an email at training@faratasystems.com. To get familiar with Yakov’s teaching style, watch his Youtube Java tutorial.

Presentations

Modern JavaScript – 70 min

In this presentation, you’ll learn how to write code using the latest syntax of JavaScript. While most of the apps use the ES5 version of the language, majority of the modern web browsers fully support the ES6 specification. Some of them started supporting the ES7 and ES8 syntax. In this presentation you’ll learn how to use classes, fat arrow functions, destructuring, spread and rest operators, promises, async-await, and modules.

Mastering TypeScript – 90 min

In this presentation, you’ll learn how to write code in TypeScript, one of the most loved languages today.TypeScript is a superset of JavaScript, which allows you to be more productive in writing JavaScript applications. Per StackOverflow developers survey TypeScript is the 3rd place in the most loved languages and 5th in most wanted. The syntax of this language is pretty easy to pick up for anyone who’s familiar with such object-oriented languages as Java or C#. During this presentation, you’ll learn the syntax of TypeScript and will understand the benefits it brings to the table.

Angular Tooling – 90 min

Learning Angular is easier than AngularJS, and developing in TypeScript is more productive than in JavaScript. But you need to know your tools to create, bundle, and deploy your app.This presentation is not about the Angular syntax. We’ll discuss the development process with Angular starting from setting up the project to deploying an optimized application. Most part of this presentation is about using Angular CLI. We’ll start with generating a new project, and then discuss such subjects as configuring proxies, working with environment variables, automating builds with npm scripts, and more.

Communication with the server via HTTP and WebSocket protocols in Angular – 90 min

In this session, you’ll see how to create an Angular 4 app that can communicate with the servers via a pull (HTTP) and push (WebSocket) modes. We’ll program a simple Node server and then will go through a number of code samples that communicate with it using HTTP and WebSocket protocols. We’ll start with creating a simple NodeJS server, and then will enable it to handle HTTP requests from an Angular app. Then you’ll see how to wrap a service into an observable stream. Finally, we’ll teach our server to perform a data push to an Angular client using the WebSocket protocol.

Angular for Java developers – 90 min

Angular is a complete re-write of the super popular Web framework AngularJS. Angular is a component-based framework that will have an effect in JavaScript community similar to what Spring framework did for Java. This presentation is a high-level overview of Angular, which in combination with TypeScript, finally made Web development understandable for Java developers. At the end of the presentation, you’ll see how to deploy Angular app can communicate with the Spring Boot backend.

Make a facelift to your Angular app with UI libraries – 90 min

In this presentation, you’ll see how to create a nice looking UI with Angular Material 2 and PrimeNG components.Commercial applications need to be good looking, which means that you should pick up a rich library of UI components for your app. While Angular Material 2 library offers two dozen of great looking components, this may not be enough for your application needs. The good news is that there are other libraries that you can use. In this presentation, we’ll start with an overview of Angular Material 2 components. Then we’ll proceed with another open-source library called PrimeNG, which offers more than 70 UI components.

Implementing inter-component communication in Angular – 90 min

Angular is a component-based framework with a well-defined API for passing data to and getting data from a component. Any application is a tree of components that often need to communicate with each other. You’ll see how to create reusable application components that can exchange data with each other in a loosely-coupled manner. You’ll see how components can communicate via a common parent or via an injectable service. You’ll see how to pass data using the router, input and output parameters, events and callbacks. You’ll also learn how to use projection to pass HTML fragments to a component’s template. You’ll see how to pass parameters to routes. We’ll also touch upon the incorporation of the third-party JavaScript libraries into an Angular 4 app.

Working with the Angular router – 90 min

The Angular framework includes a powerful component router. In this session, you’ll see how to use the router that comes with Angular 4. We’ll start with configuring the navigation in a simple app. Then you’ll see how to pass data to routes, work child routes, and create apps with multiple router outlets (auxiliary routes). We’ll also review a unit-test configuration for testing the app router. Finally, you’ll see how to lazy load modules using the router.

Using Observable Streams in Angular – 90 min

Angular includes RxJS, which is a library of reactive extensions built on the premise that everything is an observable stream. Angular includes RxJS, which is a library of reactive extensions built on the premise that everything is an observable stream. Observables introduce the push model to your application. First, we’ll get familiar with the RxJS library, and then will continue reviewing observables in Angular.You’ll see how observables are used to handle events, forms, the router, and HTTP requests. We’ll talk about using subjects, implementing the mediator design pattern, and more.

RxJS essentials – 90 min

Libraries of reactive extensions exist in many programming languages. RxJS 5 is a popular library of reactive extensions for JavaScript. This library is used for transforming and composing streams of data. RxJS promotes the push model where the data flow through the algorithms of your application. RxJS is not a framework and can be used in any JavaScript app. Using RxJS allows writing certain portions of your app by composing functions where you see fit. You’ll learn how to create observable data streams, what are the roles of observers and subscribers, how to apply and compose operators to process the data emitted by observables, how to compose multiple data streams and more.

Reactive thinking with RxJava2 – 70 min

This presentation is about asynchronous programming in Java, where the streams of data are handled in a non-blocking fashion. We’ll talk about Reactive Streams and specifically about the RxJava2 library that may change the way you design Java applications. You’ll see how to consume streams of events, deal with backpressure, and apply a variety of operators offered by this library, which requires a different way of thinking about writing code.

JHipster: Bringing together Angular and Spring Boot – 70 min

JHipster is a popular open-source code generator that automates creation and configuration of a Web project that uses the Angular framework on the front and Java Spring Boot on the back. We’ll start with a simple example where an Angular app consumes the REST service from Spring Boot. Then we’ll proceed with an intro to JHipster followed by the generation of a new Angular/Spring Boot app from scratch. This will be a CRUD app of the following architecture: a gateway (the front end), a microservice (the back end), and a service discovery server.

Hands-on workshops

Developing Web apps with Angular and TypeScript – 3 days

Participants of this workshop will gain practical skills while exploring the best practices and principles of developing Angular applications and get familiar with multiple sample applications illustrating solutions for real-world challenges. During this course, we’ll cover all the latest APIs (routing, dependency injection, forms). At the end of each day, the participants will spend an hour working on the front end of a sample application “Online Auction”.

Angular Material 2 Applied – 1 day

This hands-on workshop is for developers who are already familiar with Angular. Under the instructor’s guidance, participants will work on the front end of the online store application, which uses Angular and the library of UI components Angular Material 2. By the end of the day, each participant will develop an online store with a shopping cart the will look and work like this one. This workshop assumes participants are already familiar with Angular. This workshop is NOT an Angular intro.

Angular: Advanced Topics – 3 days

This workshop is still in the works and will be offered in September of 2017. The participants of this workshop are expected to have a working knowledge of Angular. In this workshop, we’ll cover such topics as state management, authentication, advanced work with forms, themeing, modularization, server-side rendering, page layouts and more. Stay tuned.

BIO

Yakov Fain works as a Solutions Architect at Farata Systems that offers consulting and training services in developing of the Web Apps with Angular and Java. A Java Champion, he has taught multiple classes and workshops on the web and Java-related technologies, presented at international conferences, and published more than a thousand blog posts (see https://yakovfain.com). Yakov authored and co-authored a number of technical books on programming including the Amazon bestseller “Angular 2 Development with TypeScript”. He leads Princeton Java Users Group.

Why enterprises welcome Angular

This year I already ran about ten Angular workshops and made several presentations at various conferences (e.g. DevoxxUS, DevNexus, BuzzJS, JEEConf). Over the last 20 years, I’ve been running workshops on different software but I don’t recall seeing such a positive reception of any new software as I see with the latest Angular framework in the enterprise world.

I was thinking of why enterprise developers like it so much, and here what I came up with:

– Getting started with a new project is a breeze thanks to Angular CLI code generator

– TypeScript is an optionally-typed object-oriented language with many constructs that Java and C# developers already know (classes, inheritance, interfaces, generics, annotations)

– A typical enterprise Java developer hates JavaScript, but from what I’ve seen so far, they like TypeScript. No wonder that a recent survey on StackOverflow lists TypeScript as a third most loved language.

– Even though you write code in TypeScript, you can still use thousands of existing JS libraries in your app. With 3K+ type definition files your IDE will offer auto-complete and will show compile-time errors if you try to use the API of these libraries incorrectly

– Most popular IDEs offer great support for TypeScript

– Angular offers a clean separation of the UI (templates) and business logic (TypeScript)

– Angular is not an MVC, but a component-based framework with a clean way of arranging loosely-coupled communication with components

– The Angular rendering engine allows to replace HTML with a third-party markup, and there are already products that offer another markup for developing the UI for mobile apps.

– Angular supports modularization and lazy loading, which allows to substantially decrease the size of the landing page of the app (think perceived performance and module re-usability)

– The size of the landing page of literally any app can be as low as two-tree hundred kilobytes (not counting the app images and third-party JavaScript libraries).

– Angular Universal supports server-side rendering

– There is already a large community of Angular developers, and the questions on StackOverflow are answered pretty fast

– Bundling and optimizing the app code for deployment is simple and doesn’t require you to write complex scripts and manually configure the tools

– From a project manager’s perspective, adopting Angular is a safe bet. If you need to replace or bring a new Angular developer to the team, he/she already knows the set of all required modules and how they operate. This would not be the case with other libraries or frameworks (e.g. React) that would require someone to pick multiple building blocks from third-party vendors, which may be different for each enterprise app.

This is all good, but what has to be done to increase the adoption of Angular in the enterprises?

– The Angular team should substantially increase the speed of developing new UI components in the Angular Material 2 library. They release hight quality components, but there are only 26 of them at the time of this writing, which is not enough for the enterprise apps. Currently, we have to use third-party UI libraries in addition to Angular Material to fill the gaps.

– I’d change the priorities in Angular Material 2 component developments. The lack of a data table component (similar to angular-ui-grid for AngularJS) is a serious obstacle in adopting Angular. I realize that the data table is probably the most complex UI component, but it’s crucial for the most enterprise apps. You can find data table components elsewhere, but in the ideal platform, all batteries are included.

– Implement the responsive layout in Angular Material 2. Currently, you can use either Bootstrap or the flex-layout library, but again, it would be nice to have everything as a part of the Angular package.

Finally, I’d like to mention some specific use cases. Currently, I’m working on a project to migrate a large codebase written in Adobe Flex framework. Moving the code from Flex to Angular is smooth. Within the next couple of weeks, I’ll blog providing more details.

I’d also like to bring the attention of Java developers to a very interesting project called JHipster. It’s a code generator that allows you to generate a complete Angular/Spring Boot app with configured controllers, services, and entities. With JHipster you can either generate a monolith or microservices app with generated config files for deployment on popular cloud platforms.

If you’re not familiar with Angular yet, listen to my conversation with the folks at Software Engineering Radio podcast where I answered multiple questions about Angular. If you’re a Java developer, watch my presentation at the DevoxxUS conference.

While typically I run private Angular workshops by requests, in about a month I’ll be running a public online workshop with my colleague and the co-author of our Angular book.

Update. The initial version of Angular Material DataTable has been released on July 6, 2017.