ng2-ts-hello icon indicating copy to clipboard operation
ng2-ts-hello copied to clipboard

Why SystemJS?

Open johnjelinek opened this issue 10 years ago • 9 comments

With TypeScript compilation, should it be necessary to still use jspm/traceur/systemjs?

johnjelinek avatar May 03 '15 04:05 johnjelinek

For simplicity, it allows 1:1 mapping between the files you write and what you load in the browser. Otherwise, I have to bring in a bundling tool into this picture - browserify, webpack or systemjs-buildtool.

rkirov avatar May 27 '15 18:05 rkirov

There seems to be good success using gulp-typescript over in this repo: https://github.com/mgechev/angular2-seed. Turns out SystemJS + ES6 Module Loader is still required, but no Traceur/Babel needed.

johnjelinek avatar Jun 01 '15 18:06 johnjelinek

@johnjelinek the next few versions of systemjs will support typescript natively. Traceur will be removed soon once Angular2 is fully off of typescript. If you're looking for an example without systemjs then you can check out this one angular-class/angular2-webpack-starter. Once TypeScript is able to compile to systemjs and systemjs can also read typescript then the build story will be a lot better (when typescript and systemjs are both out of beta)

PatrickJS avatar Jun 01 '15 18:06 PatrickJS

To clarify our quick started guide at angular.io - https://angular.io/docs/js/latest/quickstart.html does not need babel/traceur, by virtue of using the angular2.dev.js bundle.

All that is needed is something to transpile your .ts files locally and system.js at runtime to glue your app and the angular 2 bundle.

rkirov avatar Jun 01 '15 19:06 rkirov

@gdi2290: I installed the latest tsc from master yesterday and found it supports --module system and --module umd.

johnjelinek avatar Jun 01 '15 19:06 johnjelinek

You also will need SystemJS to do ES6 module imports, methinks (regardless of traceur/babel).

johnjelinek avatar Jun 01 '15 19:06 johnjelinek

oh -- scratch that, you can use ES6 module imports without SystemJS if you use relative paths (as seen in angular2-webpack-starter.

johnjelinek avatar Jun 01 '15 19:06 johnjelinek

@johnjelinek No matter how you declare and what language the modules are written in, they have to be put together. Here are the options:

  • (static) bundle the modules by a server-side tool - webpack, browserify.
  • (dynamic) provide a browser shim for requiring modules (that XHRs and evals) - System.js

rkirov avatar Jun 01 '15 19:06 rkirov

@johnjelinek I decided not to include systemjs for practical reasons but it's not to say you shouldn't get systemjs a try. Systemjs is the future but it's missing a lot of production ready stuff. Webpack (you can also provide dynamic loading) is great but the api is showing age of it's generation so you can think of it like this (made of on the fly only for demonstration purposes)

// scripttags: generation1
// requirejs: generation1++
// browserify: generation2
webpack: generation2++ (built with commonjs in mind)
systemjs: generation3- (built with es6 in mind)

now you can see why they're kinda on the same playing field with each one having their pros and cons. Also keep in mind Angular's goal is allowing you to use the future today which means some stuff aren't quite there yet but it will be. Also keep in mind these decisions for the build system are moot since they're depended on the developer and their workflow. The purpose on this repo is to show how easy it is to get started with angular leaving everything else up to you afterwards

PatrickJS avatar Jun 01 '15 19:06 PatrickJS