Support for different preprocessors?

[davej]

As it happens, your opinions closely match mine, coffeescript + sass (although I prefer the scss syntax) + jade. Obviously not everybody is going to agree with us though.

Is it in your plans to support other preprocessors? Stylus + nib is a viable alternative to compass for example. Also some people will want to work with vanilla js or css or html.

[ahmednuaman]

Sounds good, the main thing is to update the generator too, so feel free to create a PR here and then do one on the generator too to provide the user with the set up options.

[ahmednuaman]

So I've added scss support: 2b561f4

[ahmednuaman]

Can haz less support too: 475f2ea (although there isn't sprite support yet).

[ahmednuaman]

Can also haz stylus/styl support but no sprites still: e48afdd

[davej]

This is awesome! I might throw a hand at a PR for supporting vanilla CSS/JS/HTML over the weekend, what do you think?

I was thinking for those wanting to use vanilla JS, we could use the _.extend() function to replicate the current helper CS classes in vanilla JS, what do you think?

edit: Oops, I assumed that _.extend() could be used in a similar way to how extend works in Backbone. It won't be so simple.

edit2: This is probably more like what I would want: https://github.com/jimmydo/js-toolbox/blob/master/toolbox.js

[davej]

So the equivalent of this in Coffeescript:

define [
  'controller/radian-controller'
], (RC) ->
  class extends RC
    @register 'FooBarController', [
      '$scope'
    ]

    init: () ->

would be this in vanilla JS:

define([
  'controller/radian-controller'
], function(RC) {
  RC.extend({
    this.register('FooBarController', [
      '$scope'
    ])

    init: function() {

    }
  }
});

edit: that's not quite right because I've got a function call in the middle of an object literal. I'll have to research this a bit more.

[davej]

Perhaps this:

define([
  'controller/radian-controller'
], function(RC) {
  RC.register('FooBarController', [
    '$scope'
  ]).extend({

    init: function() { }

  });
});

[ahmednuaman]

They need to use the prototype to keep them 'classy'. The best way to see this is to examine the output from coffee script compiler.

[davej]

No, I think you misunderstand. There would be a different Radian Controller/Service/etc for the javascript version of the code. Extending coffeescript classes in javascript is a bit unwieldy so I think it makes sense to do things a bit differently so we can have nicer syntax for those who wish to write in JS.

[ahmednuaman]

That's a bad idea. This'll make the code different and that's not nice because moving between languages should be simple.

[davej]

The problem is that the coffeescript base classes are as good as useless in Javascript, there is too much boilerplate involved in extending them. I think it would be nice to have a story for plain old JS too.

Had a play around on my lunch break and I think there might be a way to shim the base classes so they can be extended in a more javascript-friendly way while still working just the same with coffeescript. It will obviously mean that the footprint of the base controller/service/etc will be a bit larger but it should be doable.

[davej]

Ok, so if we had a base class like this:

class RadianController
  @register: (name, deps) ->
    helper.registerController [name, deps, @]

  constructor: () ->
    helper.construct @, arguments

  @create: (name, deps, proto) ->
    rc = class extends @
      @register(name, deps)
    for own key,value of proto
      rc::[key] = value
    return rc

Then we could extend it in javascript like this:

RadianController.create('FooBarController', [
  '$scope'
],{

  init: function() { }

});

I can probably move the bulk of the create function into the helper module and add it to the other base classes. I just wanted to run this by you first to see if you would accept it as a pull request?

[ahmednuaman]

So how does init call other controller functions?

[ahmednuaman]

This is old but check out https://github.com/ahmednuaman/connectedtv-bbc-yt-app/tree/bare/assets/js

All classes extend Dispatcher, this is a was to super in JS.

[davej]

So how does init call other controller functions?

Same way it does normally, with the this keyword:

RadianController.create('FooBarController', [
  '$scope'
],{

  init: function() { this.anotherFunc('Hello World'); },

  anotherFunc: function(text) { alert(text); }

});

[ahmednuaman]

So the generator has been updated: https://github.com/ahmednuaman/generator-radian/releases/tag/v1.7.0

I'm gonna look at some JS soon, I was thinking of adding some Typescript and Livescript support too.

[davej]

What are your thoughts? Do you want to try and use the same base class for JS/CS/TS/LS or are you going to have a different base class based on which JS pre-compiler they choose?

[ahmednuaman]

Not sure yet, I'm gonna look at JS again, making sure it's super performant.

[ahmednuaman]

Check this out: https://github.com/ahmednuaman/radian/tree/master/assets/javascript

[ahmednuaman]

And coffee logic has been refactored too, time for a new release!

[davej]

Excellent, I'm going to check it out now.

FYI, I went my own way with Class-based controllers and created a class that works better with the way I like to write my code. I pushed this last night: https://github.com/davej/angular-classy

[ahmednuaman]

Nice work!