Now is a Great Time to Learn TypeScript

Today I am pleased to share some exciting news.  I just finished authoring a new 5-day course on TypeScript!

Essential TypeScript 2.0 with Visual Studio Code

It is timed to coincide with the 2.0 release of TypeScript, a relatively new programming language designed to make JavaScript strongly typed and more capable of supporting large-scale web applications.

gk-dm.png

I authored the course for Global Knowledge, an IT training company that in 2015 acquired DevelopMentor, a developer training company where I authored and taught courses in C# and .NET since 2006.  The course represents the culmination of a four-month odyssey, in which I not only had to grok TypeScript grammar and syntax but also mastered an entirely new technology stack and toolchain.

It was fun!

Here is a list of topics included in the course:

  1. Introduction to TypeScript
  2. Language Basics
  3. Using Visual Studio Code with TypeScript
  4. Task Automation, Unit Testing, Continuous Integration
  5. The TypeScript Type System
  6. Functional Programming
  7. Asynchronous Programming
  8. Object-Oriented Programming
  9. Generics and Decorators
  10. Namespaces and Modules
  11. Practical TypeScript with Express and Angular

While performing the herculean task of creating a 5-day class with slides, labs and numerous demos, I have to say I thoroughly enjoyed the process of adding a new weapon to my arsenal as a software developer and the chance to venture off in an entirely new direction.  So I thought I would take this opportunity to put together some thoughts about why I think this is a great time to learn web development with TypeScript — and at the same time plug my new course. 🙂

Revenge of JavaScript

One motivation for me to pick up JavaScript (of which TypeScript is a superset) is that we no longer live in a world in which Windows is dominant, and JavaScript can be used to write apps for more than just web browsers — you can use it to write desktop and mobile applications, as well as backend services running in the Cloud.  It has unwittingly become one language to rule them all.

express-logo.jpg

Secondly, web development has matured to the point where it is possible to write an app that has nearly the same interactivity and responsiveness as a traditional desktop application.  One of the reasons I previously gravitated toward WPF (and unconsciously drifted away from ASP.NET) was that desktop and native mobile apps seemed to offer a more fluid user experience where you could work with data locally without having to continually refresh the screen from a remote server.

All that has changed with the advent of SPA’s (Single Page Applications), where turbocharged JavaScript engines quickly render rich, interactive web pages.  It’s the perfect time to build SPA’s because second generation frameworks have emerged that take web development to a whole new level and implement the MVVM (Model-View-ViewModel) pattern (or some MV-* variation), providing benefits such as better separation of concerns, testability and maintainability.  Frameworks like Angular, Aurelia and ReactRedux also provide tools for quickly scaffolding new applications and preparing them for production.

angular2-logo

TypeScript has emerged as the language of choice for building many of these kinds of modern web apps, because its strong-typing enables features we’ve come to take for granted, such as interfaces and generics. It also provides things most developers couldn’t think of doing without, such as intellisense, statement completion code refactorings.  And TypeScript’s popularity received a shot in the arm from the Angular team at Google, which is using it to build Angular.  In addition, most of their tutorials are written in TypeScript.

JavaScript Has Grown Up

In 2015 JavaScript had its most significant upgrade since it was created in 1995 by Brendan Eich in a 10-day hackathon.  With the release of ECMAScript 2015, JavaScript received a slew of new features, many of which classical languages, such as Java and C#, have had for years.  These include classes, inheritance, constants, iterators, modules and promises, to name a few.  TypeScript not only includes all ES 2015 features, but it fast-forwards to future versions ECMAScript by supporting proposed features such as async and await operators, which help simplify asynchronous code.  TypeScript lets you use advanced features of JavaScript by transpiling down to ES5, a flavor of JavaScript compatible with most browsers.

es2015

When you put modern JavaScript together with TypeScript, you get a powerful combination that gives you just about everything you might want for building SOLID applications that can run in the browser, on the server or on mobile and desktop platforms.

Shiny New Tools

The nice thing about TypeScript is that you’re free to use whatever tool you like, from a full-fledged IDE like Visual Studio or Web Storm, to a lightweight code editor, such as SublimeText, Atom, Brackets or Visual Studio Code.  While there’s nothing wrong with any of these options, I prefer using VS Code for TypeScript development, because it comes with TypeScript in the box and the team eats their own dogfood by using TypeScript to build the editor.

vs-code

Coming from a C# background, where I was confined to using Visual Studio on Windows with its enormous overhead, I can run code editors such as VS Code on my Mac, giving me one less reason to fire up a Windows VM.  VS Code starts quickly, and I can open it at a specific folder from either the Finder or Terminal.  I also found navigation in VS Code to be straightforward and intuitive, and you can perform many tasks from the command palette, including custom gulp tasks.  VS Code functions as a great markdown editor with a side-by-side preview that refreshes in real time as you make changes.  It has Git integration and debugging support, as well as a marketplace of third-party extensions that provide a variety of nifty services, such as TypeScript linting and Angular 2 code snippets.  Put it all together, and VS Code is a perfect fit for TypeScript development.

Living in Harmony

One of the most compelling reasons I can think of for picking up TypeScript is that it’s the brainchild of the same person who created C#, Anders Hejlsberg, who in a prior life also invented Turbo Paschal and Delphi.  Having such an amazing track record, I have a high degree of confidence in following him into the world of web and native JavaScript development, where he has made it possible to be more productive and write code that is more resilient because the TypeScript compiler is able to catch problems at development-time that would otherwise only become apparent at runtime.

Lastly, it’s significant that Anders did not choose to create a language that is not JavaScript, such as CoffeeScript, but rather one that includes all of JavaScript with optional type annotations that disappear when TypeScript is compiled down to plain old JavaScript.  In fact, all JavaScript is valid TypeScript, and you can put in annotations or leave them out wherever you like, giving you the best of both dynamic and static typing.  In other words, TypeScript does not impose itself on you or dictate that you follow any of its prescriptions.

To conclude, this is a great time for learning TypeScript, even if you don’t know much about JavaScript, because the two are mostly one and the same, except for extra features designed to make your life easier and that allow you to write JavaScript programs capable of growing over time without becoming too unwieldy.  This frees you to concentrate on learning JavaScript frameworks, such as Express and Angular, that empower you to build RESTful web services and modern client applications.

Happy coding!

About Tony Sneed

Sr. Software Solutions Architect, Hilti Global Application Software
This entry was posted in Technical and tagged . Bookmark the permalink.

2 Responses to Now is a Great Time to Learn TypeScript

  1. Andrey says:

    Hello, Tony, haven’t read your blog for a while, last time we were discussing your STE framework in case of big LOB app.
    So you really think that web stack is adequate alternative for WPF-ntier stack for really complicated enterprice ERP app? I’ve read your posts on this topic aswell as some documentation and i have questions if you dont mind:
    • Does angular2 have whole viewmodel analogue? From samples it seems like you still binding to events or write expression just in html? No analogue to commands? Separation of concerns seems not that strict as in WPF.
    • Does it have customization of bindings? Updatesourcetrigger, fallbackvalue, converters and like ~20 properties that wpf have?
    • this.counterChange.emit(this.counterValue) is analogue to notifyPropChange?
    • Support of async and pararel programming. Including both convenience and wide functional.
    • Es6 and new features of JS looks like they’re just inventing all that was if not in .net 3 then .net 4 for sure and much is still missing.
    – still doesnt have full support for classes? (“Classes” seems like a joke and still no generics, no overloads, no inheritance, no precompile check and intellisense?) So you still need TypeScript and even it doesnt provide whole functionality that c# have.
    • Does it have analogue to linq and working with collections?
    • Performance? Especcially with all this translators limitations , trasplitaions, etc
    what else pros and cons you can name? Im speaking of need to make really complicated app with regions, tons of data, including dynamic data, grafics, quick responsiveness and so on.

    And about .netStandart: like year ago we were speaking with you about leaky abstraction antipattern – dont you think new paradigm of .netStandart also have it in terms of PlatformNotSupportedException?

    Summing this as for me i still like the power of WPF more, though i can see that web stack really matures and might get to this power in like 5 years.
    Im still sticking to such stack for now:
    -MS SQL legacy db and STE\t4\ReversePoco templates for ORM
    – making n-tier stack based on web api hosted on owin (or maybe .netCore already, just dont see too much of value to have middle tier not on Windows for now)
    WPF as client for desktop
    Xamarin for mobile functionality (not more than 5% of forms for now)
    PCL (or .netStandart?) viewmodels so they can be shared with Xamarin lately
    Platform-specific Viewmodels
    DTOs, rules, some simple nonserver validation – poco, platform agnostic
    Web service layer also provides platform agnostic interface so it can be used from .netStandart (whether it will be odata, STE or another framework)
    So in theory i stick with wpf now but make if more flexible to easily reuse much of code if i would like to make mobile POS interface or move some other functional to mobile.

    What do you think? Also have you done STE support for .net core?
    Thanks a lot and sorry if i misunderstood smth, im far from web-frontend world now.

    • Tony Sneed says:

      @Andrey: Thanks for your comments and questions! Before answering each individual question, I’ll address your overarching concern:

      So you really think that web stack is adequate alternative for WPF-ntier stack for really complicated enterprise ERP app?

      My answer is a resounding “YES”! A few years ago, I might not have been so bold, but since that time, web and JavaScript technologies have grown up, and we have marvelous frameworks that implement MVVM patterns on the client and allow you to target browsers, desktop and mobile apps.

      n-tier stack based on web api hosted on owin (or maybe .netCore already, just dont see too much of value to have middle tier not on Windows for now)

      You should definitely be on ASP.NET Core at this point. It offers much more than cross-platform capability. It’s a modern unified web stack that has benefited from lessons learned from ASP.NET Web API 2.x and OWIN, which were stopgap measures that have their own limitations.

      What do you think? Also have you done STE support for .net core?

      I am actively working on a port of Trackable Entities to .NET Core.

      Does angular2 have whole viewmodel analogue?

      Yes, Angular 2 adheres strictly to the MVVM paradigm.

      Does it have customization of bindings?

      Yes, I believe so.

      Support of async and parallel programming.

      Yes it does! TypeScript 2.1 includes async-await on the client-side.

      So you still need TypeScript and even it doesnt provide whole functionality that c# have

      I would say that TypeScript v2.1 comes pretty close to having most C# features, including generics, overloads and inheritance.

      Does it have analogue to linq and working with collections?

      Yes, with functions such as map, reduce and filter with arrow functions (aka lambdas).

      Performance?

      Good performance with modern JavaScript engines, such as Chrome’s V8 Engine.

      And about NET Standard?

      NET Standard is a huge improvement over portable class libraries and should be used for portable code. The problem with PCL’s was that you had to go back and re-compile to a profile to include a new framework. That’s no longer needed with NET Standard, and v2 covers a ton of API’s for broad compatibility across various flavors of .NET.

      I’m far from web-frontend world now.

      Now is a great time to check out the latest web frameworks and to learn TypeScript. There are frameworks that let you build cross-plat client apps in C#, such as mono/xwt and Eto.Forms, but what you don’t get there is the browser client. Angular 2 (or a framework such as Aurelia) with TypeScript and HTML/CSS will allow you to have one code base with implementations in the browser and on the desktop (Electron for Windows, Mac, Linux), and mobile (NativeScript). That said, I would recommend .NET Core with C# for the Web API layer.

      Cheers,
      Tony

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.