Angular Interns Summer 2019

The Angular team believes that people are essential to building great technology, and so we are taking part in Google’s 2019 intern program with three new projects.

This year, we have three team members participating: Alyssa Wang, Ayaz Hafiz, and returning intern Elana Olson. They are each working on projects that will be valuable to the team and the community.

Caretaker Dashboard

Angular receives hundreds of issue reports and pull requests each month from the community on GitHub. Additionally we verify and sync every commit to Angular into Google. Each week we assign a “caretaker” who leads the process of incorporating contributions into our repository.

We are working to build a dashboard that helps us streamline our triaging process, so we can process and merge pull requests more efficiently and ensure important issues from the community don’t fall through the cracks.

This dashboard will expand the work done on Andrew Seguin’s dashboard tooling.

Scaled Searching Within Angular Code

Google has thousands of Angular projects, and therefore a lot of Angular code. There’s an important opportunity to enhance the developer experience of searching through Angular code. To improve this experience, we’re working on an Angular indexer for Kythe that extends an existing TypeScript indexer, and adds an API to the Angular compiler to get access to semantic information about applications.

Kythe is an ecosystem for building language analysis tools. One of its hallmark features is generating cross-references for source codes, similar to how “go-to-definition” works in some IDEs. For Angular, this enables cross-referencing selectors to directives and interpolated variables to their declarations. Kythe is critical for large codebases, where you often don’t want to load all of the source code into memory.

The indexing pipeline consists of two main steps:

1. Analyze the Angular project to find semantic entities of interest, like interpolated variables and their declarations.
2. Generate Kythe entries that describe these entities and their relationships. These entries are used by the Kythe graph store to generate source code analysis information and cross-references.

The Angular compiler did not previously have a convenient API for querying information about templates and directives in an Angular program. We’re creating a new API as part of the compiler in the Ivy rendering pipeline to enable this. Developers wishing to take advantage of this work can do so by programmatically creating an NgtscProgram instance and calling the indexing API.

This indexer would not be possible without the great work that has already gone into developing the Angular compiler. For those interested in learning more about Angular’s compilation, reading the ngtsc compiler source code can provide an appreciation of the compiler’s operation and design choices.

Connecting Angular’s Ecosystem

There are many ways to find Angular components, and search for tools and libraries from the ecosystem. Most commonly folks will use word of mouth or web searches, but there are also great tools out there such as ngx.tools or the angular.io resources page.

These paths do not always return the highest quality results, so we are working on building a new site that will add curation and metadata such as information about bundle size, accessibility, and the presence of Angular specific tools like ng-add or ng-update compatibility.

The new site will recognize some of the many awesome component libraries and tools out there, offer a way for folks to submit new tools (with similar notability and quality requirements as the resources page), and will monitor bundle size changes over time.

By providing a deeper understanding of the bundle size cost of adding a dependency, developers will be better equipped to make intelligent choices about new dependencies they add to their applications.