One year ago when we decided to sacrifice all of our spare time to create Babylon.js we had a really interesting discussion about using TypeScript as main development language.
Before going further, here are some numbers you may need to correctly understand my explanations. Indeed Babylon.js is:
- An average of 1 version per month
- 21 contributors
- 32 releases
- 365 commits (one per day!)
- 14000+ lines of code
- More than 120 files of code
- More than 200 forks
- A bandwidth of 1TB per month for the website
- All my spare time (I cannot even remember the last time I went to see a movie)
- 1.3GB (Code and samples)
Let me explain you what the main reasons for this decision are.
You want to discuss about this article: reach me on Twitter: @deltakosh
Because it is transparent for users
Because Babylon.js is an open-source project
And here why:
- Using TypeScript, we benefit from the power of static compilation and this helps A LOT. We can easily find wrong parameters, wrong names, typos and all kind of syntax errors thanks to TypeScript
- Integrating a pull-request is a hard task because you must guarantee that a code you did not produce nor manage will not break things. With TypeScript it is easier thanks to static compilation
- Reading and understanding TypeScript code is easier because parameters and functions are typed, so you know what kind of parameters you should pass to a function for instance.
The funny thing is that during the port to TypeScript I even found a bug into my own code. It was in the collisions engine code where I do a lot of computations. The bug was hidden there:
Nothing remarkable, especially when there are tons of other lines like this.
When I moved to TypeScript this code remains the same but thanks to strong typing and static compilation here is what I got:
Because TypeScript is an open source project
But no worries, TypeScript has us covered! First of all you can find all the source code here:
Then, TypeScript can run under:
- Node.js (NPM package)
- Eclipse (Plugin)
- Sublime Text (Plugin)
- WebStorm (support since v6.0)
- Emacs (Plugin)
- VI (Plugin)
- Visual Studio 2012 (MSI)
- Visual Studio 2013 (Natively included in update 2 RC)
You also have to know that everything using classes/packages/modules compiles to RequireJS and CommonJS.
Because tooling is awesome when working with a modern IDE
TypeScript works extremely well with Sublime Text, Eclipse and almost all major IDEs. On our side we are using Visual Studio and to be honest, the experience is really great.
Indeed, using Visual Studio 2013, you will have:
- Integrated TypeScript file support
- Syntax color
- Discoverability: With intellisense and strong typing, you have a kind of API documentation just under your mouse
- Refactoring support
- Integrated class browser (I LOVE this one):
I also use Resharper (www.jetbrains.com) as a plugin into Visual Studio. And with this tool you can get some goodness like for instance auto refactoring for lambda expressions:
Here is my initial code:
Can you see the green line? If I right-click on it, I have an option to convert my function to a lambda expression:
No more “that = this” stuff! (With just one mouse click)
- The debug experience is also great because you can put a breakpoint into your TypeScript code! Visual Studio will handle the link between .ts and .js files for you:
Because TypeScript is handy
We have just seen the lambda expression (An elegant way to get rid of closures). And there are tons of other wonderful stuff like this one in TypeScript. For instance, here how to handle inheritance:
Here my Camera class inherits from Node class. Nothing more to do! Obviously you can call parent’s function within child’s code:
How can it be simpler?
The generated code handles for you all the burden of inheritance with prototyping:
Because of the future
For instance according to TypeScript’s roadmap, the async/await language feature from C# is under exploration. This means that perhaps one day, we will not have to struggle with callback/promises/handling exceptions in an asynchronous flow.
Obviously the generated code will have to do that but as a developer you will just have a clear vision of your code.
Now imagine you can do that!
And this is the same thing for ECMAScript 6 current and upcoming features!
Call to action
We have just started porting our code so it is a bit too early for a post-mortem but I will write an article in two or three months about how things will have gone our 3D engine written using TypeScript.
In the meantime, if you want to learn more about TypeScript here are some useful pointers:
- Official site: http://www.TypeScriptlang.org/
- Online playground: http://www.TypeScriptlang.org/Playground
- Source code: http://TypeScript.codeplex.com/
- Documentation: http://TypeScript.codeplex.com/documentation