Abstract

Google Technology Manager Liang Chen will talk about what TypeScript and Angular are and how they can be used across mobile platforms.

On July 15, 2017, Liang Chen, Google Engineering Manager, delivered a speech titled “TypeScript, Angular, and Mobile Cross-platform Development” at the 2017 JavaScript China Developer Conference. IT big said as the exclusive video partner, by the organizers and speakers review authorized release.

Read the word count: 2027 | 3 minutes to read

Guest Speech video and PPT:
t.cn/RTRvFIc

What ‘s the TypeScript?

TypeScript is a superset of statically typed JavaScript over ES5 and ES6. Some of the advantages it brings to TypeScript include features of future JavaScript. It also has a very powerful type system, through which it can be well integrated with the IDE.

TypeScript was released in 2012 when founder Anders HejIsberg, an architect at Microsoft, described TypeScript as “making JavaScript scale.” When we write in TypeScript, we make more template extensions and extend software to make it more readable. At the same time, some of the interfaces we see will be more clear, which will be very helpful for our development. When we write in TypeScript, readability is greatly improved, and all the apis are clearer to help us expand the development of large applications. The idea behind TypeScript is that we can run a stable and extensible language on all browsers and worksystems.

TypeScript Type System

TypeScript comes with a compiler that converts TypeScript to ES5 or ES6 by simply configuring tsconfig.json. In addition to basic type detection, it can also help us do some refactoring.

When the type of a variable changes, it is likely to change elsewhere in the project. Its TSC compiler can help us make changes without having to change everything manually.

TypeScript expects you to annotate its type everywhere you can, but it’s optional. There are two reasons, one of which is that when we need to integrate with many other third-party libraries, we can’t guarantee that it has this type definition. Another reason is that TypeScript is still relatively new to many development teams, and projects are often designed with this in mind as they need to be gradually changed to integrate with TypeScript.

The three popular frameworks are all integrated with TypeScript, and their type definitions can be downloaded online.





TypeScript Typing

TypeScript itself has some very subtle but useful mechanisms that can help us be more efficient at writing front-end code.

StrictNullCheck prevents common errors throughout the process.

For developers, we often need some control. TypeScript provides type conversions and type assertions.

There is a very special Type in TypeScript called any that describes the unknown Type Type at compile time.

TypeScript Type Definition

What really makes TypeScript powerful comes down to type definition files. The type definition file contains interfaces, function definitions, and so on. In general front-end constructs, browsers and DOM have a wide variety of types.

When you install these modules using NPM, if it already has these types of definitions, the editing environment will immediately realize that the features that help you automate your programming process will greatly increase developer productivity.

Why Angular?

Speed and performance are important reasons to choose Angular.

One of the strengths of Angular is that its template compilation is cross-platform, decoupling the concept of the DOM and making the user interface more accessible to the user. In addition, Angular’s powerful filtering engine compresses an APP to about 60% of its original size when it is finally released.

Angular focused on the Scalability from the beginning. Inside Google, thousands of unit tests are run every time an engineer changes a line of Angular code. We want the platform to be stable, and new releases will not disrupt the development of existing products.

Angular also has three pillars: a core, libraries derived from it, and tools.

Angular Core

Given that our renderer is now completely out of the DOM, this rendering makes us very expressive. Components, directives, content delivery, and “pipes” all make it easier for our developers to describe what they want to do.

Then there is dependency injection, which should be familiar to anyone who has written a lot of unit tests. It helps us better connect to services and internal apis in Angular components, so we as developers don’t have to worry too much about managing those relationships.

Zones is an execution environment for asynchronous processing. Our application has many events or functions that are out of sync, and Zones are directly overwritten to them. After overwritten, we can effectively improve the speed of local template updates by monitoring events and functions.



Angular change detection, like many front-end frameworks, has a template that needs to be rendered and detected when an internal component changes an object.

Angular has an asynchronously executed context that overwrites all asynchronously executed functions and events, requiring a change detection in each component at the end of each execution.



Angular Animation

Angular animations are based on the STANDARD Web Animation API, so it can take advantage of hardware acceleration that comes with many browsers to make them run faster.

Angular Tooling

Angular tools are also powerful, with AOT, Angular Universal, and Angular CLI to help you develop projects quickly.

Future:Smaller,Faster,Easier to Use

The next generation of Angular is Angular5, due out later this year. The idea is to make the entire framework smaller, faster on all platforms, and more accessible for rentals and apis.

Native Script

NativeScript is a runtime framework that provides runtime transcoding to convert your JavaScript and Angular templates directly to their native functions and dependencies. Each element will eventually become a native element, and because it uses Angular syntax, front-end developers will be familiar with it at a glance. At runtime, NativeScript compiles the template using Angular’s renderer, converts it to a Protoview, and the Protoview converts it to a Native control via NativeScript run-time.

Each element will eventually become a native element. Note that all of its syntax is the same as Angular’s, so there are no problems with rendering.



Native Script rendering

The Angular renderer compiles the XML, and when the Prase is complete, the compiler converts it to a ProtoView, which then converts it to a Native control through Native Script run-time.





I think what I’ve shown you today is just skin deep, and I recommend that you look at TypeScript because it helps you write better programs. I’m glad to share some of Google’s technology with you today, and I hope you can think about the future of the front end. Thank you!