Typescript workflow in 2016

Question

I'm a complete newbie to web development. I've been wanting to try to develop a simple, client-side project in Typescript (in this instance, a game, but this question applies to other projects as well). No server technology, just something that runs in a browser.

I booted up Webstorm and managed to get a simple Typescript project up and working in minutes.

However when I attempted to set up some structure and a reasonable workflow for a larger project, I started running into what seems to be an insane amount of tools, managers, build systems, each in various states of depreciation.

I'm after a way to simply and reliably:

• Use multiple files without manually including script tags
• Use external type definitions and javascript libraries and load them in a sensible way

For my own code, it seems like es6 modules are my best bet, but for some reason it seems like I still need to use a third party module loader? There seems to be a huge variety of them available - commonjs, requirejs, systemjs, webpack. Also, although numerous sources are recommending using es6, it's still not fully supported in the majority of browsers, meaning I need to get transpilation going as well. Also, somewhere along the lines there's a build process using gulp/grunt that I don't even know if I need do use!

I'm not at all sure what to do for external modules. I tried Bower but it still seems like I need to include the tags manually for all my external libraries (not a huge problem but I'm sure there's a better way!)

And that's really the general feeling I'm getting through all of this - surely there's a better way to do things. But wading through the mountains of outdated information means that I haven't been able to find anything solid.

So - front end experts - what would you suggest to a complete newbie as a good workflow for Typescript (or even just Javascript) development in today's world?

Answer 1

I'm after a way to simply and reliably:

• Use multiple files without manually including script tags
• Use external type definitions and javascript libraries and load them in a sensible way

The easiest way : just use Webpack.

For the whole picture, you can choose between: the bundlers Webpack, Browserify, Rollup. With these solutions, a bundle is re-built with all the JS code after each modification in the code. Or the asynchronous loaders SystemJS (here is a tutorial) with JSPM for bundling, or RequireJS.

Notice that, with the use of ES6 syntax import / export in the TypeScript code, the choice of the loader doesn't implies major difference in the TypeScript code. The same code can be compiled to the different formats, with the help of the TS module option.

For my own code, it seems like es6 modules are my best bet, but for some reason it seems like I still need to use a third party module loader?

You're right.

Read the article from Mozilla:

What does import actually do?

Would you believe… nothing? [...]

ES6 leaves the details of module loading entirely up to the implementation.

And there is an unfinished programmatic API. See also the book of Dr. Axel Rauschmayer:

The module loader API is work in progress

As you can see in the repository of the JavaScript Loader Standard, the module loader API is still work in progress.

About the necessity of bundling, I suggest this article.

But today, with TypeScript and a loader, you'll be able to use easily the standard syntax import / export on a large front-end project.

...

Also, although numerous sources are recommending using es6, it's still not fully supported in the majority of browsers, meaning I need to get transpilation going as well.

It's still required to understand the differences in the targeted browsers. But for the new API that can be polyfilled, the es6-shim can be packed with the code of your application.