Welcome!

@ThingsExpo Authors: Yeshim Deniz, Elizabeth White, Pat Romanski, Liz McMillan, William Schmarzo

Related Topics: @DevOpsSummit, Microservices Expo, @CloudExpo, @ThingsExpo

@DevOpsSummit: Blog Feed Post

Migrating from JavaScript to TypeScript | @CloudExpo #DevOps #Microservices

To let other TypeScript libraries use your library, you need to create a .d.ts file to declare all your public APIs

The Benefits of Migrating from JavaScript to TypeScript

By Raphael Feng

Recently, we moved our Browser RUM agent from JavaScript to TypeScript. In my last post, I focused on walking through the steps of migrating from JavaScript, the challenges, and best practices we uncovered along the way.

This one will focus on more details of the benefits and one missing feature in TypeScript compiler we suggest to implement.

TypeScript's main benefits:

  1. Class and Module Support
  2. Static Type-checking
  3. ES6 Feature Support
  4. Clear Library API Definition
  5. Build-in Support for JavaScript Packaging
  6. Syntax Similarity to Our Backend Languages (Java, Scala)
  7. Superset of JavaScript  (easier to learn for JavaScript developers than CoffeeScript or ClojureScript)

Class and Module Support
Keywords like class, interface, extends and module are available in TypeScript.

You can define a class as

// class define in TypeScript
class VirtualPageTracker extends Tracker {
private virtualPageName: string = '';
constructor(name) {
super(name);
}

getName(): void {
return this.virtualPageName;
}

static getTrackerName(): string {
return 'VirtualPageTracker';
}
}

TypeScript compiler will transcompile it to

var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); };
// class define in TypeScript
var VirtualPageTracker = (function (_super) {
__extends(VirtualPageTracker, _super);
function VirtualPageTracker(name) {
_super.call(this, name);
this.virtualPageName = '';
}
VirtualPageTracker.prototype.getName = function () {
return this.virtualPageName;
};
VirtualPageTracker.getTrackerName = function () {
return 'VirtualPageTracker';
};
return VirtualPageTracker;
})(Tracker);

Static Type-checking
TypeScript compiler will check the type (to surface more typing errors at compiling time)

var name: string;
name = 2; // type error, assign a number to a string type variable

function foo(value: number) {}
foo(''); // type error, use a number as a string type parameter

interface Bar {
setName: (name: string) => void;
getName: () => string;
}


var bar: Bar = {
getName: function() {
return 'myName';
}
} // type error, setName function is missing in the object assigned to bar.

A practical example is if we use the wrong data type in our browser agent beacon, we now get compiling errors. Before migrating to Typescript, they could only be found by testing against the back-end.

ECMAScript 6 Feature Support
It is the current version of the ECMAScript Language Specification with more language features.

With TypeScript, you can start using many ES6 features although it may not be supported in your target browser. TypeScript compile can compile the ts files into "ES3", "ES5" or "ES6".

Some of the ES6 features are very handy like:

// for..of loops
var arr = ['a', 'b', 'c'];
for (let item of arr) {
console.log(item);
}

would be compiled to

// for..of loops
var arr = ['a', 'b', 'c'];
for (var _i = 0; _i < arr.length; _i++) {
var item = arr[_i];
console.log(item);
}

Refer to TypeScript ES6 Compatibility Table for more ES6 features you can use.

Clear API Definition
To let other TypeScript libraries use your library, you need to create a .d.ts file to declare all your public APIs of your library with the typing information. The enforce to clearly list all your public APIs for each libraries you are developing. We found it serves as a quick and accurate reference for all your APIs.

Refer to https://github.com/borisyankov/DefinitelyTyped for TypeScript definition files created for large amounts of JavaScript libraries.

Build-in Support for JavaScript Packaging
You can define one main entry ts file referring all the ts files you needed in the compiled js file.

Running tsc (the TypeScript compiler) with the -out option, the compiler will concatenate all the directly or indirectly referred files into one js file in the order they are referred.

So we can easily tailor our library into multiple versions. For example, from the same code base, we can generate specific versions of browser agent for desktop browser and mobile browser with specific features for different devices. We just need to create a main entry file for each version with the files for specific features referred in it.

Syntax Similarity to Our Backend Languages (Java, Scala)
Due to the similarity, our developers now can switch between front-end and back-end programming more smoothly.

Refer http://www.slideshare.net/razvanc/quick-typescript-vs-scala-sample for a quick syntax comparison between TypeScript and Scala.

Superset of JavaScript
This means a more smooth learning curve for JavaScript developers which helps to faster adoption of TypeScript in your projects.

One Missing Feature Suggested
In addition to the benefit, we also found some missing features could be implemented.

One of them is to merge the same module into the same function rather than multiple functions.

module A {
function foo() { }
}

module A {
function bar() {
foo();
}
}

generates below code with compiling error "cannot find name ‘foo'".

ar A;
(function(A) {
function foo() {}
})(A || (A = {}));
var A;
(function(A) {
function bar() {
foo();
}
})(A || (A = {}));

foo function defined within the first anonymous function call for module A is not visible in the second anonymous function call, so you have to export it as:

module A {
export function foo() {}
}

module A {
function bar() {
foo();
}
}

generates below code without error:

var A;
(function(A) {
function foo() {}
A.foo = foo;
})(A || (A = {}));
var A;
(function(A) {
function bar() {
A.foo();
}
})(A || (A = {}));

The problem here is now A.foo is not only visible to module A. Anyone can call it and modify it now.

There is no module level visible concept which should be similar to Java's "package-private" when there is no modifier for Java classes or members.

This could be solved by generating:

module A {
export function foo() {}
}

module A {
function bar() {
foo();
}
}

to

var A;
(function (A) {
function foo() { }
A.foo = foo;
})(A || (A = {}));
var A;
(function (A) {
function bar() {
A.foo();
}
})(A || (A = {}));

The problem of merging into one function is a potential name conflict between the same module in two files. But the compiler can report error in this case, and if two people are working independently on the same module in two files, it would be better to create two different sub modules. Merging into one function could be a feasible way support module level visibility.

As I write this article, I notice the /* @internal */ annotation in the ts compiler source code; it's an experimental option released with typescript 1.5.0-alpha to strip the declarations marked as @internal.

It helps to only include the declarations without @internal (which serves as your external APIs) when generating the .d.ts file from your code. And if your consumer are using TypeScript too, this prevents it from using your internal members.

Generating the .d.ts file for:

module A {
/* @internal */ export function internal() {}
export function external() {}
}

by

tsc -d --stripInternal A.ts

will output

declare module A {
function external(): void;
}

However, if your consumers use JavaScript, they can still use the internal function.

Conclusion
By and large, it's a pleasant and rewarding experience to move to TypeScript. Though it adds limitations on your JavaScript implementation, you can either find a good workaround or implement the benefits that outweigh it. Moreover, it's an active open source project (about 200 commits to master in last month) with well documentation to help you start easily. And just in March this year, Google also announced they would replace AtScript with TypeScript. Angular 2 is now built with TypeScript too. So far, the move to TypeScript has proved beneficial.

The post The Benefits of Migrating from JavaScript to TypeScript appeared first on Application Performance Monitoring Blog | AppDynamics.

More Stories By AppDynamics Blog

In high-production environments where release cycles are measured in hours or minutes — not days or weeks — there's little room for mistakes and no room for confusion. Everyone has to understand what's happening, in real time, and have the means to do whatever is necessary to keep applications up and running optimally.

DevOps is a high-stakes world, but done well, it delivers the agility and performance to significantly impact business competitiveness.

IoT & Smart Cities Stories
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
DXWorldEXPO LLC announced today that Ed Featherston has been named the "Tech Chair" of "FinTechEXPO - New York Blockchain Event" of CloudEXPO's 10-Year Anniversary Event which will take place on November 12-13, 2018 in New York City. CloudEXPO | DXWorldEXPO New York will present keynotes, general sessions, and more than 20 blockchain sessions by leading FinTech experts.
Apps and devices shouldn't stop working when there's limited or no network connectivity. Learn how to bring data stored in a cloud database to the edge of the network (and back again) whenever an Internet connection is available. In his session at 17th Cloud Expo, Ben Perlmutter, a Sales Engineer with IBM Cloudant, demonstrated techniques for replicating cloud databases with devices in order to build offline-first mobile or Internet of Things (IoT) apps that can provide a better, faster user e...
Bill Schmarzo, Tech Chair of "Big Data | Analytics" of upcoming CloudEXPO | DXWorldEXPO New York (November 12-13, 2018, New York City) today announced the outline and schedule of the track. "The track has been designed in experience/degree order," said Schmarzo. "So, that folks who attend the entire track can leave the conference with some of the skills necessary to get their work done when they get back to their offices. It actually ties back to some work that I'm doing at the University of ...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and Bi...