Building Large Scale Web Apps with TypeScript

Image by Ruiwen Chua / CC BY-SA 2.0

Track: OPEN226

Presenter: Jakub Jedryszek

Jakub is a software engineer on the Azure Portal – ¬†largest single page application in the world written in TypeScript, it’s safe to say that he’s an evangelist for TypeScript.

I came in to the session with little knowledge of TypeScript, apart from the idea that it was JavaScript with type checking. As a C# developer that appeals to me as it gives me consistency across the to main languages I use day to day.

Jacob gives a nice brief history of JavaScript then gets into a simple example of some JavaScript that returns a first name and last name. Whilst he’s doing that in VS Code we get to see some of the nice features of TypeScript as he turns code written in JavaScript into more complex TypeScript.

We get to see the use of types and type annotations as he adds some complexity to the code, and within a couple of minutes we go from looking at something that looks alot like JavaScript, to code that more resembles C# or Java. We have code that has classes, constructors, Private properties and even an Interface is added, all of it type safe.

The key advantage he is pushing here is in the real world code will be written by different developers, developers who come and go, and a dynamic language like JavaScript becomes incredibly hard to maintain over time, being type safe makes maintenance so much easier. JavaScript won’t always display an error at compile time, only when the code is running would we see an error, and even then it may be that classic JavaScript ‘undefined’ or ‘undefined is not a function’

Another good feature of TypeScript is that it will compile the code back into Javascript – it is a superset of JavaScript – and compile the code into ES5 compatible JavaScript, this means that TypeScript maintains compatibility with Browsers such as IE9, FF4 etc.

There’s a second application example to show that TypeScript will work with existing JavaScript frameworks, and frameworks that allow us to more easily buld large scale apps. So we are shown Yarn, the Package manager, and how easily we can pull in JQuery,

We also see WebPack used in the development process, which is good for bundling. In the presentation we see that the build process will bundle together all of the .js files being used, along with a minifier, so we get the app code, plus the JQuery bundled into on .js files.

We finally get to see Wallaby, and continuous unit testing. He shows us lines of code highlighted if that line is contributing to a passed or failed test.

Put together, VS code (the IDE) along with TypeScript, Yarn, Webpack and Wallaby we get a full set of tools allowing development of large apps. I always felt that JavaScript was something to allow a small amount of client side processing, with all of the heavy lifting being done in the back end by another language. For me that would be C#, but of course could be Java, or PHP, but it’s now clear to see that model isn’t always required, and that I could complete a large fully featured web application away from the Microsoft stack.

Links
TypeScript  https://www.typescriptlang.org/
TS Template https://github.com/remojansen/ts-vscode-boilerplate

Leave a Reply

Your email address will not be published. Required fields are marked *