These are chat archives for systemjs/systemjs

31st
May 2015
matthew harwood
@matthewharwood
May 31 2015 15:26
I've made a class called Animal and imported it System.import('client/app/animal/animal') if I open up console I cannot access Animal class :worried:
Question: From chrome console how can I type var animal = new Animal('red', 4, 'frank'); and get a proper return value?
matthew harwood
@matthewharwood
May 31 2015 17:36
so it was answered for me but I wonder if there is a better way
<script> System.import('reflect-metadata') .then(function(){ return System.import('client/app/animal/animal'); }) .then(function(module) { window.Animal = module.default; }) .catch(console.log.bind(console)); </script>
Rob Wormald
@robwormald
May 31 2015 21:19
@matthewharwood normally you only need one System.import, to import the main file of your app
in that file, you'd import 'reflect-metadata'
and fwiw, imo on of the points of es6 modules is to avoid free floating globals (like you're trying to access :D )
matthew harwood
@matthewharwood
May 31 2015 21:21
haha Yeah I figured @robwormald I really wanted to do testing from console. I'm pretty "nerb" with javascript... just playing around console just sometimes easy to work with
Rob Wormald
@robwormald
May 31 2015 21:22
the simplest thing would be to do your window.Whatever in the main file
and just system.import it
matthew harwood
@matthewharwood
May 31 2015 21:22
Ok so you brought up a bigger problem that is I should only have 1 import file.
lets imagine i have 3 file: index.js, animal.js, farm.js
i want to import index module as my main and animal and farm just come with it
what would my index.js file look like?
cuz currently I just keep chaining .then() and new System.import()
I know this is incorrect
Rob Wormald
@robwormald
May 31 2015 21:25
have you written code in any other languages? specifically compiled ones?
matthew harwood
@matthewharwood
May 31 2015 21:25
sass?
I do a similar concept
i would guess
Rob Wormald
@robwormald
May 31 2015 21:26
i was thinking more "C" or "Java"
in any case
matthew harwood
@matthewharwood
May 31 2015 21:26
just on a tutorial level
so in that plunk, "Foo" is an external module, loaded async, but you don't have to treat it async
so you really only need System to import the main - everything else works via regular es6 import/export
matthew harwood
@matthewharwood
May 31 2015 21:27
yeah I get it
so in your workflow rob
Rob Wormald
@robwormald
May 31 2015 21:28
SystemJS will resolve the imports as they are discovered - in production land, there's some tricks to speed that up
matthew harwood
@matthewharwood
May 31 2015 21:28
do you normally use your main.js to init your application?
Rob Wormald
@robwormald
May 31 2015 21:28
yep
usually i dont have any real code in there, its just a file that imports everything and bootstraps the app
and then for prod, you just tell it to build starting at main, and it'll read the imports and package them in
matthew harwood
@matthewharwood
May 31 2015 21:30
@robwormald Thanks for being so active!
Rob Wormald
@robwormald
May 31 2015 21:31
no worries
at some point in the (far) future, you'd be able to do something like <module src="main"> w/o systemJS being involved
matthew harwood
@matthewharwood
May 31 2015 21:34
I've used a framework for a long time (angular-fullstack). It's taken care of alot of these kind of things for me
I like having this control
but it's really foreign to me
Rob Wormald
@robwormald
May 31 2015 21:34
yeah, its definitely very different
its so much better than the old way, which is basically "grab every-fucking-thing in this directory and concat it together"
matthew harwood
@matthewharwood
May 31 2015 21:35
Yeah totally see the benefits
Rob Wormald
@robwormald
May 31 2015 21:35
what's neat is that if you have "dead" code, that's not explicitly imported, it doesn't get bundled
in multiplatform apps i'll usually have a few main files, that construct the appropriate deps for the specific platform (cordova vs web vs atom-shell)
matthew harwood
@matthewharwood
May 31 2015 21:36
yeah you and lazy load scripts and code. tons of oppertunity
yeah I see what you mean
matthew harwood
@matthewharwood
May 31 2015 21:36
how do you control that logic around those main.js
is it in the build?
Rob Wormald
@robwormald
May 31 2015 21:37
angular + es6 modules - in this case app == main
yeah - the systemjs/builder tool is basically then
builder.build('src/main.android', 'dist/main.android.js')
matthew harwood
@matthewharwood
May 31 2015 21:48
in angular 2 with services and controllers being removed. will it be up to define them similarly in that pattern or will there be new patterns ?
A service for example in angular 1 had a very spefic case
like your ContactManager class
Rob Wormald
@robwormald
May 31 2015 21:49
services aren't removed, they are still very much a thing
matthew harwood
@matthewharwood
May 31 2015 21:49
oh?
app.service('ContactManager',ContactManager);
is gone right?
Rob Wormald
@robwormald
May 31 2015 21:49
yep, that's gone
now you can just do SomeComponent{ constructor(contactManager: ContactManager)
think component == 1.x element directive
matthew harwood
@matthewharwood
May 31 2015 21:51
ahh cuz you dont have to put it on the app anymore
you can just put it onto whatever module you like
Just leaves me confused why the ".service" even exsisted in the past
the main difference with services is around DI - in ng1, every single service was singleton
that still applies, but in angular2, with child injectors, you can init multiple instances of things
matthew harwood
@matthewharwood
May 31 2015 22:18
so you can have muliple version .. I dont know why you would be do you mean constructor(http: Http, http2: Http){} from inside the App
I dont knwo why you would but**
Rob Wormald
@robwormald
May 31 2015 22:19
typically not in the same component
but imagine you had a specific component that talked to a different baseURL - you could init a specific version of Http for that API
(that's a stretch, Http isn't really the best example here)
matthew harwood
@matthewharwood
May 31 2015 22:20
where would you set that different baseURL.. the constructor or the service itself?
Rob Wormald
@robwormald
May 31 2015 22:26
usually the Http service would inject a config service
and that's what you'd override
(not exactly what we're talking about, but that's more or less how it works - notice in app.js i'm binding the ResponseTransformer to the LoggingResponseTransformer
so when Http injects ResponseTransformer, it actually gets LoggingResponseTransformer
that's at the "top level" of the app - kinda sorta "global" (but not actually global)