Google and Microsoft Unite in Effort to Rebuild JavaScript – InApps 2022

Two efforts — one begun by Microsoft, the other by Google — to give skilled developers the tools they prefer when building Web applications with JavaScript and HTML, officially became joined at the hip last Thursday. Stage two of the Angular 2 project recently launched by Google, and the TypeScript project begun in 2012 by Microsoft, began a joint development process with the acknowledgement by the Angular team that they were actually using TypeScript to build onto Angular.

The project is another example of how the largest Internet scale companies have to cooperate to best serve developers. It may have been unheard of in another time, but this is a new generation that depends on open communities to solve new kinds of problems.

Both projects were begun as a new, but necessary, feature of the Web development environment: transpilers. It is a terrible sounding word to describe a kind of re-interpreter that reads the stricter, safer code developers wish that browsers could recognize, and uses it to reproduce the slimier code that browsers actually do recognize. The Google-based team had been using a transpiler called Traceur to re-interpret ECMAScript 6 syntax (JavaScript currently being standardized by the ECMA organization) into ECMAScript 5 (ES5).

“You’ll be able to take advantage of Angular 2,” stated Angular development lead Igor Minar, “whether you’re using ES5, the new standard ES6, or you can go all the way in with all the optional types and annotations provided by TypeScript.”

An Exercise in Building Down

JavaScript, such as it is, is not anyone’s preference for efficiency, scalability or especially, beauty. Essentially, it is the language that everyone inherited from Netscape’s endeavor to staple functionality onto HTML that looked sorta, kinda Java-ish. Over the years of evolution and standardization by ECMA, it has evolved toward overcoming the original implementation’s principal fault: a lack of context.

Without context, type — the set of predefined characteristics of variables in a program, so interpreters can allocate the precise memory — doesn’t matter. As the components of Web pages coalesced into what we now think of as the Document Object Model — the all-important DOM — something resembling context began to piece itself together. Objects were given properties to which code could be attached.

But partly because browsers require lightweight interpreters, and partly because HTML is a markup language that allows JavaScript to interrupt it at points, the irregularity of Web development has historically put off developers whose skills were honed with high-level languages. It has always been an inelegant hybridization, and skilled developers have done what they could to mask the unpleasantness. (Perhaps a nice alternate title for TypeScript would have been “Febreze.”)

For its part, TypeScript is a means for enforcing consistency among variable types within the development environment — for instance, Visual Studio. When instantiating a variable, rather than just making it a dynamically typed “var” and letting the interpreter figure it out, you annotate the variable with its explicit type. This way, the IDE can determine whether that variable is assigned a value that the interpreter may not expect, avoiding situations where the user discovers the error at runtime. TypeScript also accepts “class” designations, which will eventually be incorporated into ES6, but which for the meantime the transpiler will convert into the uglier ES5 equivalent.

Angular, meanwhile, inverts the relationship between HTML and script. You create components within separate files. There, the “host” language is the script, and HTML code is assigned to variables, or asserted as the operands of methods. In so doing, the HTML becomes the components themselves, so that when script constructors refer to those components, they’re rendered. The script syntax, which the Angular team had been calling AtScript, is another extension of syntax intended for ES6.

When you use a constructor in Angular to define a property, that property may be used inside the HTML code of that component to denote where that property should appear. It’s markup within markup, and Angular does this with {{double-mustache syntax}}, inspired by the Mustache.js library for templating with JSON-formatted variables.

Distinctions Without a Difference

The Angular team had been using Traceur to transpile EC6 script into EC5, but the processes behind this Jekyll-to-Hyde mutation could use some scripting automation themselves. Meanwhile, the TypeScript team had been coping with a few incompatibilities between their vision of type consistency, and the vision being constructed for the forthcoming ES6.

Late last year, the Angular team published its hopes and dreams for incorporating more declarative programming practices into ES6. And as Microsoft’s program lead for TypeScript, Jonathan Turner, told the ng-conf for the Angular team last week, that’s when he noticed some curious similarities.

“So we reached out [to Angular] and formed a collaboration,” said Turner. “We started talking about, what would be possible if we started taking those features that were part of AtScript, and put them into TypeScript – merged it with the type system, merged it with how the compiler output JavaScript code?”

As the TypeScript team examined the question, he says, they came to the mutual realization that their existing TypeScript 1.4 was not as mature as it should be. They concluded they needed to incorporate more ES6 syntax in a forthcoming TypeScript 1.5. Then, through the Angular collaboration, TypeScript incorporated Angular’s idea of annotations (components declared in separate files) with its own (variable types inserted into declarations).

“The next version of TypeScript really fills out this story,” Turner continued, “where we have ES5, and types sitting on top of ES6, and annotations working well with types – nice tooling across all of these features, and nice ES3 and ES5 output.”

Once the Microsoft-backed team effectively realigned TypeScript in accordance with what developers expect to see in ES6, the Google-backed team had no reason not to replace the AtScript they had been using with TypeScript 1.5.

In a blog post last Thursday, Microsoft Corporate Vice President for the Developer Division S. Somasegar wrote, “Even more than the language innovations and library that have been built by the two teams, I’m proud of the productive relationship and partnership we’ve built between the TypeScript and Angular teams. Both teams are looking forward to continuing to move TypeScript and JavaScript forward together in the future, including working with the ECMAScript standards body on the future of types in JavaScript.”

In their presentation, the Angular team depicted the new relationship with a picture of barefoot children laying in a meadow. It’s not at all the kind of superpower-style, “Cold War” relationship that tech publications generally apply to Microsoft and Google. But it appears to be the kind of relationship their developers prefer to have with one another: not just an alliance, but a genuine friendship. The eccentricities and dissimilarities in both teams’ approaches to the same problem gave neither one a competitive advantage. So they both agreed to eliminate those distinctions for their mutual benefit.

It’s the type of working relationship that will ensure InApps will be worlds different from the old one.

Feature image via Flickr Creative Commons.