Learn about the benefits of AoT compiling and Universal rendering, and how to apply that to your Kendo UI for Angular 2 components.

AoT and Universal support is here (well, almost—some of our beta components now have support and we’re rolling out more support in the next week). But what does that mean? Firstly, AoT means “Ahead-of-Time,” referring to Angular 2’s compiling at the build-step. Secondly, Universal support means Angular Universal—think server-side rendering.

Let’s explore what this means for you using Kendo UI for Angular 2. Get ready for performance!

Ahead-of-Time Compiling

Angular’s AoT compiling means that we can essentially ship a pre-compiled version of our application to the browser. Think “offline compiling,” where Angular will transform your templates before you’ve even deployed the app to production for example.

Angular 1.x had an internal compiler, and so does Angular 2. Angular 2’s compiler can be used (indirectly) in two different ways, AoT or JiT (Just-in-Time).

Let’s cover JiT quickly so you can understand the benefits of AoT. Using JiT is essentially what you’ll get whilst developing Angular 2 applications. You’ll be coding “live” and shipping Angular 2 template code to the browser each time you make a change, and Angular will compile it for you there.

This can be slower than pre-compiling, because the Angular 2 compiler makes up around half of Angular 2 itself. So that’s a huge payload saving as soon as the browser has rendered the page.

Now, where things get really exciting is what AoT actually does for performance. Because with AoT we are pre-compiling, Angular skips the compile phase, meaning it pushes fully renderable code to the browser. The compiler also inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate AJAX requests for those source files. AoT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

Angular core team member Rob Wormald has an excellent performance demo that demonstrates the performance before AoT and after AoT that I’d highly recommend checking out.

You can read more about AoT here.

Angular Universal

Angular Universal is absolutely fantastic, and allows you to render on the server. Adding support for our Kendo UI for Angular 2 components is a must, to allow you to build applications with the scalability and performance measures Angular 2 promotes itself.

With Angular Universal rendering, we can render initial client-side views on the server, allowing us to hydrate the DOM with Angular 2 once the initial view has been rendered. This is much faster than straight up compiling in the browser (even with AoT support). Universal rendering is powerful, but adds complexity to client-side application development, as some of the routing and data-fetching logic is moved to the server to populate initial views rendered for users.

According to research at Google, the difference of just 200 milliseconds in page load performance has an impact on user behavior.

Kendo UI for Angular 2 Components

You can follow the progress of our component development, which at the time of writing is in our beta release phase, by visiting the official website. What’s more, each component has a full changelog that you can dig through and see the support and new features we’re adding. A few examples of our changelogs:

We’re focusing on keeping the changelogs visible, so you can see what’s being worked on at the individual component level. Keep an eye on things as we’re excited to be adding more AoT, Universal and many more features and native Angular 2 powered support to our components!


todd-motto
About the Author

Todd Motto

Todd Motto (@toddmotto) is a Developer Advocate at Telerik based in England, UK. Todd is also a Google Developer Expert, runs Angular and JavaScript training workshops, speaks at conferences all around the world, contributes to Open Source and is heavily involved in the Angular community.

Related Posts

Comments

Comments are disabled in preview mode.