未加星标

Metaprogramming, Higher-Order Components and Mixins with Angular Ivy

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Metaprogramming, Higher-Order Components and Mixins with AngularIvy

Victor Savkin


Metaprogramming, Higher-Order Components and Mixins with Angular Ivy
Metaprogramming, Higher-Order Components and Mixins with Angular Ivy

Everyone in the Angular community is excited about the approaching release of Ivy ― the new Angular renderer.

Ivy makes Angular faster. Ivy tree shakes better (the hello world Angular app built with it is under 4k). Ivy simplifies the generated code making Angular easier to debug. Ivy streamlines the build pipeline (no more metadata or ngfactory files) making things like lazy-loading individual component trivial.

I’m excited about all of these. But deep down the thing I’m excited about the most is something else.

Ivy makes Angular dynamic. It enables metaprogramming, and makes things like mixins and higher-order components trivial to implement.

How to Use Ivy to Do Metaprogramming

Let’s take an example: reading data from the NgRx store. Right now, we would implement it like this:

To see how we can use Ivy to do metaprogramming, let’s see what this component is compiled into.

One could write a whole post about this data structure and how Angular uses it. One could also write a series of posts on how the compiler uses the incremental DOM technique to render templates into sets of instructions. Those are interesting topics, but not the topics of this post.

In this post, let’s focus on the factory part of the data structure:

Angular will use the factory function to create a TodosComponent . directiveInject will walk up the node injector tree (think of walking up the DOM) trying to find the Store service. If it cannot find it, it will walk the module injector tree.

Dynamism

Angular will use ngComponentDef when instantiating and rendering the component, at runtime. This means that we can write a decorator modifying this data structure.

We can then apply to our component class, as follows:

This works but with a big caveat ― it breaks tree shaking . Why? Because the trees shaker will treat FromStore as a side-effectful function. We know that FromStore changes only TodosComponent itself, but the tree shaker has no way of knowing that. This is a big problem. After all, better tree shaking is one of the key advantages of the Ivy renderer.

Thankfully, there is a solution. Features

The solution is to define a function that takes the ComponentDef and adds the behavior to it

This function will need to added to the ngComponentRef property.

The array of features serve the same purpose as the decorator we defined above. It allows us to modify the ngComponentDef data structure, with one important difference: it doesn’t break tree shaking.

Why are we adding the fromStore into compiled code?

The Ivy renderer itself supports features, but the compiler turning @Component into ngComponentDef doesn’t. So, as of know, we cannot add it to the component decorator, but the following API (or something similar) should become available:

HOCs andMixins

Using this capability, and also the ability to generate templates on the fly, we can easily write a feature wrapping a component into another component, or mixing behavior into existing components. In other words, Ivy makes higher-order components and mixins not just possible but easy.

Why Use Metaprogramming

We can use metaprogramming to achieve two things.

We can encapsulate established code patterns making our components more concise . Fun fact: early on, before Angular 2 came out, I had a special set of decorators that would rely on conventions and would make the component declaration a lot shorter. I called it “the hipster mode”. Ivy makes it possible again. We can experiment with new framework features, without making changes to the framework itself. We can evolve libraries without introducing breaking changes.

But there is a price:

The code can be harder to follow. In the example above, if you don’t know what FromStore does, we might have a problem understanding how the todos observable is created. The code can become less toolable. The example above is not bad: WebStorm/VSCode will still be able to provide autocompletion in the template, but it is easy to go overboard and lose the toolability that Angular provides know. Word ofCaution

The current focus of the Angular team is to make Ivy fully backwards-compatible. The official documentation on how to do metaprogramming will come after.

Summary

The Ivy renderer brings a lot of goodness to Angular. It makes the framework faster, smaller, and simpler. Ivy also makes Angular more flexible by adding the dynamism, which we can use to do metaprogramming, implement higher-order components and mixins.

We’re taking about Angular Ivy with Rob Wormald on Dec 13. Rob is charismatic and fun, so it’s going be great.

Want to watch it live? Sign up here:


Metaprogramming, Higher-Order Components and Mixins with Angular Ivy

As always, if you’re looking for Angular consulting, training and support, you can find out more about how we work with our clientshere.


Metaprogramming, Higher-Order Components and Mixins with Angular Ivy

If you liked this, click the :clap: below so other people will see this here on Medium. Follow @victorsavkin and @nrwl_io to read more about Angular.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Metaprogramming, Higher-Order Components and Mixins with Angular Ivy
本站链接:https://www.codesec.net/view/620850.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(11)