TIM: I’m in Windows today; oh, boy.
CHUCK: Nooooo!
AJ: I’d appreciate if you wouldn’t use that kind of language.
[Laughter]
TIM: Well you see, I’m trying to dog food Cloud9 and Linux is just too nice; so if I’m in Windows, I’ll actually use Cloud9.
[This episode is sponsored by ComponentOne, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.]
[Hosting and bandwidth provided by the Blue Box Group. Check them out at bluebox.net.]
CHUCK: Hey everybody and welcome to episode 25 of the JavaScript Jabber Show. This week on our panel, we have Jamison Dance.
JAMISON: Hi guys!
CHUCK: We also have Tim Caswell… who is muted.
TIM: Here I am!
CHUCK: AJ O’Neal.
AJ: Coming at you live from the ethosphere of Orem, Utah.
CHUCK: Yeah, we can hear a little bit of interference in the ethosphere. We also have James… or Joe Eames. Sorry. I keep wanting to say ‘James Edward Gray’. This is the wrong podcast for that. [Chuckles]
JOE: Howdy? Coming at you live from the Mars rover.
CHUCK: Oh, you are going to tweet from Mars?
JOE: There’s a 16-minute delay, FYI.
CHUCK: Oh, is that all?
JAMISON: …guessing where the pauses are going to be, right?
CHUCK: All right. I’m Charles Max Wood from devchat.tv and this week we have a special guess and that is James Burke.
JAMES: Howdy? Coming live from Vancouver, BC.
CHUCK: Awesome. I love Vancouver; I’ve been here a few times. Do you wanna introduce yourself really quick for the folks that don’t know who you are?
JAMES: Sure. I’m James Burke; I work at Mozilla in the labs group and I mostly focus on open source web operated tooling. I originally joined Mozilla’s part of Mozilla messaging group and I was doing an experiment around web-based messaging systems. And then before that, I worked at AOL and was a core Dojo contributor.
CHUCK: Awesome. So when you look at RequireJS, it actually says that Dojo foundation; can you explain what that is?
JAMES: Yes. It’s similar to the Apache foundation; it’s just a legal entity that’s set up to hold code; mostly to deal with some of the legal stuff around managing code. And so, I really like it versus something like Apache, where if you were to be on the official Apache project, there’s a lot of stuff involved with that. Whereas the Dojo one is fairly light-weight; the individual projects decide how they wanna run. It’s just that you should get CLAs for larger code contributions and then use the foundation as the copyright… or whoever gives code contributions gives up the license to the foundation to use them. So it’s mostly just for legal stuff.
CHUCK: Nice. And what is the CLA?
JAMES: Contributor License Agreement, so if you’ve had to deal with any of these larger open source foundations, it normally asks that you sign things saying, “Yes, I’m contributing on this stuff; it’s my own work; I’m not taking it from someone else and I’m giving you permission to use it.” So it’s mostly to satisfy lawyers.
CHUCK: Yeah. I think I remember when I talked to a lot of people at the Apache foundation; in fact I’m actually wearing my ApacheCon shirt from last year. And yeah, they had CLAs for I think both the developers and for the corporations they work for so the corporation wouldn’t try and claim the code as copyrighted under their umbrella.
JAMES: Yeah and Dojo has similar thing too.
JAMISON: You said it’s to satisfy lawyers; I don’t think lawyers are ever satisfied.
JAMES: That’s true. I think that this is just a…
JAMISON: They hardly felt…
JAMES: Yeah. It hasn’t really been tested; I don’t think, so it could change if somebody ever try to test it.
CHUCK: Yeah. It’s kind of like having garlic for vampires; it’s not a guarantee, but it works most of the time.
JAMISON: [Laughs] Or if it doesn’t work, you don’t hear about it.
CHUCK: [Laughs] Oh, I’m sure somebody would hear about it. Anyway, so we are here to talk about RequireJS. Now, I keep hearing the terms ‘AMD’ and ‘RequireJS’ and sometimes it almost sounds like AMD is a library. Is there an AMD library or is RequireJS just an implementation of AMD, as kind of a concept?
JAMES: Yeah. It’s an implementation of AMD, which is short of Asynchronous Module Definition; which is a really bad name, but that’s the original proposal had on it and it just sort of stuck. I would have preferred a different name, but naming is hard. So AMD, there’s an AMD implement group that discusses the API specification and then there’s a with the specification and there’s a set of compliance unit tests that you can run to test your order; and so, … and RequireJS is an implementation about API.
JAMISON: Are they related to the CommonJS guys at all?
JAMES: Yeah, a lot of it came out of talking with the CommonJS folks. It grew out of some of our experience in Dojo where we had an XHR eval-based loader and there’s enough sort of rough edges with that, that we felt like it will be nice to have this sort of the format which is what AMD is. And so, in trying to investigate how best to go about that, I tried… because Dojo had an … order that was basically tgat sort of wrapped format that it would compile the… not ‘compile’ but just convert the code; the regular Dojo module code into that format. So well, if we can just use that format directly, then there’s less translation layers, there’s less discontinuities when you wanna push code to CDNs. And then there’s some environments that don’t allow eval; I mean the Chrome extension system I think by default, they won’t allow eval.
But at that time, when the CommonJS people started out a newer contributing module system, they already had something going when I started to interact with them. And Chris, also from Dojo, we talked in this. And so, we were trying to apply what we learned from Dojo and then we picked up the CommonJS concepts as far as like relative modules; the idea of a Require to do a module export. There’s a lot of those … we try to match up on there, I think where we disagreed was the CommonJS… it felt that it was not right to author in this sort of wrap format; the prefer to do builds and just treat the browser do delivery as a transport, which from our experience was not optimal. One of the things for Dojo is that you shouldn’t either compile stuff to develop web code. And I think that should be the idea for standards group that’s trying to make the web better in the browser.
One of my … is I guess with CSS is that, to really make larger CSS, a lot of people are going to basically compile like the … just because CSS is lagging so far behind. But ideally, they should be gearing towards like, “Hey, it’s so easy to make in the browser, you just write some text files then you load it in the browser and it works.” And so, that was one of our requirements in Dojo. And so, … we decided to take the pieces of the CommonJS stuff that were really neat; their relative references to modules, be one of the bigger ones and then just apply that system to something that we felt would work better with the browser.
JAMISON: I just have to say I really love that idea. I think it’s a great idea to just be able to hit refresh and see your code changes. It seems like such a small thing to have… I don’t know, to go type some command to recompile your code, but wears on you if you have to do it every time you make a change, so I think it’s a great thing.
CHUCK: Yeah, you see that in other server-side languages too where when you start up your web server, it loads the whole program into memory. And so there’s not a compile step, but you still have to restart the web server in order to load the code changes into memory. And yeah, it’s the same deal; it’s so much more convenient just to hit refresh and get the changes there.
JAMISON: To some extent, you can get around via watchers. You can do that on server-side language too. But I know like Browserify has a file watcher thing and some other compiled like module systems things too. But yeah, it’s a good thing over all.
JAMES: Yeah and I think for me, it’s always like stop gap measures. And I think it also increases the barrier like when … that level, you have to… there’s assumptions now for example maybe what kind of servers that you use. And so somebody coming in to JavaScript, I think to reach a broader audience that doesn’t… the fewer sort of dependencies you have, the easier it gets to be adapted.
CHUCK: Right. So what are the advantages of using an AMD system like Require over just like requiring the JavaScript libraries that you want?
JAMISON: You mean just putting them in script tags?
CHUCK: Yeah.
JAMISON: Like in the HTML?
CHUCK: Yeah, exactly.
JAMISON: Oh, man so you have to like order your dependencies correctly in your HTML; which is weird. And you have to put everything in global scope to do that; which is also weird. And it’s really hard to deal with… it discourages making your code modular, I guess. You end up with lots of like monolithic, huge, gigantic global objects because if there’s a high barrier of entry to just adding another file, then you are not going to do it; you are just going to stick crap on the same file. Does that makes sense?
JAMES: Yeah, agreed.
JAMISON: So I’m just talking about the disadvantage of not doing it and someone should probably talk about the advantages of doing it.
JOE: Well, one of the biggest frustrations can be my files aren’t in the right order and finding them in the right order; finding the right order for them can just be a huge pain in the butt.
JAMISON: Yeah. It turns you into a human dependency manager; and that’s something computers should do; for you. And that’s what RequireJS does.
JOE: So does anybody have any good reasons why it’s more advantageous to not do it? Because I can’t think of any.
JAMISON: What do you mean?
JOE: To not require have a module definition.
JAMISON: I think the only advantage is just like straight up least number of steps to get something working at all. So maybe if you’re teaching someone how to program or how to do like the basic minimal for example. But for actually production use, I wouldn’t wanna do JavaScript without some kind of modular system for the browser.
AJ: And you also have to realize, JavaScript is a community of amateurs; just like PHP is. And so, like this new era of actually designing code rather than just throwing things on the floor is a different paradigm. So a lot of existing code is difficult to work with when you start doing modules because it screws things up. So it’s like that ‘refactor versus hack and fix’ kind of thing. So for …, its great but if you’ve got something that is existing maybe it will do weird stuff.
JOE: Yeah, that’s true. And there’s also the fact that there’s just a lot of friction in JavaScript when you are trying to put this in. You know, how many libraries out there that just don’t support RequireJS. My fill in the blank here with your favorite library.
JAMISON: So RequireJS does have some plugins (and James should probably the one to talk about this more) but there are plugins to wrap libraries to just expose global objects and make them into AMD modules. So you can just take like your own JavaScript files that stick stuff on window and I believe it will turn those into just exported modules, wont it?
JAMES: Well, the config that’s in the RequireJS 2.0, it won’t do any sort of wrapping itself; it will just be sure to load those legacy scripts in the order that you say. So you what you do is you specify the dependencies in the exports in the RequireJS config and you will load it and it will grab that global and then use that as sort of module export.
JAMISON: So, it kind of makes it look like their modules, even if they are global, so you don’t have to worry about ordering issues? Is that what happens?
JAMES: Sure. Yeah. And so the only downside with that approach is that… I mean there are global still exists but for most apps, that’s fine and then when you do sort of an optimization stuff, you don’t have the flexibility of say… if you have a shim library that depends on say, underscore; for that to work in the system, you need build an underscore into your combine file. But those are for most projects, those are perfectly fine which will allow you to use library systems that you prefer.
JAMISON: Is there a better way to use libraries that aren’t like AMD modules or is that best way to just use the shim?
JAMES: Ideally just … and then you do an export. But you know, you modify library code and that makes people uncomfortable — and understandably so. Ideally there’s these UMD patterns, universal module patterns where… so that if you are a library author, then you can pull up your code so that it can act as a module or just do browser globals; so you get a nice resources… developers would go to that that system that would make it easier too.
CHUCK: So, how do you find out about the universal module definition?
JAMES: It’s on GitHub; there’s umdjs/umd and there’s a sort of templates for that.
JAMISON: It’s kind of just some boiler plate where you check basically for the existence of different loaders and if you don’t find any of them; you just stick it on the global pretty much, right?
JAMES: Right. Or you can detect for different module API; so the common ones will be Node or CommonJS-style AMD-style or browser globals.
CHUCK: Hmm. Looks like the last committer on that is JR Burke. [Chuckles] You know a little bit about this, huh?
JAMES: Yeah. Well, I think … I think he started the group, which since I have experienced on these things, yeah…
CHUCK: Right. That makes sense. So do you ever find or do you… I don’t know, is there a major push out there for people to start writing their libraries in this way? Are there other advantages to the library authors to do it this way?
JAMES: yeah. Well I think it’s the… it definitely makes it an easier for people that now for like MVC systems in particular, it makes a lot sense like once you’ve gone… you know what, I’m going partition code models to use control… that’s just natural to be different files, different modules. And once you start doing that, you are realize, “If only I have a module system, this will be so much easier to be able to read the code better.”
And I think as developers get in to that, you know, we do need to take some of these patterns; break this code apart, I think the most library, you would see in the value of having a module system. And so I think the only trick then is what do you think is worth supporting? And so, I think one thing to realize is that Ecmascript is looking at a module support… It’s not done yet, but the basic mechanics of it, as far as I have this dependency, I’m going to reference it with a string, it’s going to give me an export value and I’m going to use that locally and I’m not going to depend it on globals; that’s the model going forward. So, I think the AMD fits into that nicely, it works today and it has the least number of gotchas across the development cycle; and of course I’m biased.
CHUCK: Right. So does RequireJS, if you author a library in a module, does it name space it for you or does it just load it in to the global space anyway?
JAMES: So it keeps the module in a space and RequireJS actually has this multiversion contact support so you can create different dots or buckets of modules. But technically, if you go on the RequireJS object, you can be like .s.contexts, you’ll be able to find that thing but that’s only because… but that’s sort of internal data in the system where I could properly hide like an es5 environment. You know, that itself wouldn’t have to be globally accessible; and most doesn’t access it directly. So I think the idea is by using strings for the modules and by making sure that your module doesn’t name itself, it allows you to load multiple versions of the same thing in same module space, or in RequireJS case, you can also create a different contexts. So for unit tests, this has been useful; you can have a separate sort of bucket that locks one or two dependencies and then runs some tests. And as long as you are not modifying global state like a document or changing the DOM, you will always…
CHUCK: Right. So how widely used is RequireJS? Do you really have a good handle on that?
JAMES: Yeah. For me, I think it’s important to… if I focus on the right things and provide the right support and not worry so much about tracking, then things work out. So, there’s bigger projects like… I think once you get a sort of webmail class system, you’re gonna wanna module format things. I think IDEs sort of like Adobe Brackets and then Cloud9, it allow use RequireJS on the front end.
And so Dojo itself… so as far as like AMD modules in general, if you Require a library author and say, “Hey, should I worry about doing AMD or opting into calling that module API,” Dojo has its own AMD loader; there are some other ones and … if I remember right, it can store files in local storage. So you can get a lot more options. So going to use RequireJS itself, I think AMD in general, it does feel like its growing and if I gauge by the number support questions I get, I’m getting more like sort of newbie questions that are basic JavaScript questions and so to me, that’s an indication that it’s really starting to seep into that sort of mainstream developer thing.
CHUCK: One other thing that I’ve been looking at RequireJS, you have like a project directory right on the webpage it shows it and then there’s a scripts folder; a lot of times, people have some kind of build process on their system, so basically, all other scripts are going to be compiled and minified into one file. So if that’s the case, so when you try and require something, is there a way to work around that?
JAMES: I don’t think I quite followed that.
CHUCK: So, let’s say that I have like jQuery and jQueryUI and a bunch of other things that I need on my webpage and you know, I just wanna compile it all into one big file that has all the libraries included in it, can I still use RequireJS and if all of that stuff is required?
JAMES: Yes. There’s the RequireJS optimizer which is just r.js and it’s goal… so what it can do, it actually runs RequireJS either in Node or in Rhino. And then there’s been a request to have it run in the windows script host, which should be easy to do, I just have to create some modules, but what it does is it will trace your dependency tree, match it up find all the dependencies, combine them into one file. It has JS support, so if you have like has blocks and you will convert those so that when you do the optimization, those disappear.
JAMISON: What’s fjs?
JAMES: It’s something sorted by Pete Higgins and it’s similar to a Modernizr; it’s just that it’s a JavaScript API it’s a for running a feature or capability tests. And so, yeah it’s just a way for you to select different…
JAMISON: So it will actually optimize out parts of your code that aren’t available in the browser that you’re going to be running on it? What do you mean it has JS support?
JAMES: You can tell that by build these set of scripts but for this has test like has array, say that that’s true and so then in your code, if you have like if not has array extras, do this work. What will happen after that is that each block will be a…
JAMISON: Oh, okay. So you can kind of assume an environment in your build step?
JAMES: Right.
JAMISON: Okay. That’s cool. I didn’t know that.
JAMES: I like that idea as well. And I guess then the other stage of that is, “Okay, great I’ve optimized all of my code into a one js file you know, do I need to deliver Require.js which is a dynamic loader which is does workings because it allows you to load code through network. Well, I don’t need that anymore.” And so there’s Almond, which is on GitHub, jrburke/almond; it’s just an AMD API shim which is a lot smaller, its alike 1KB and that just provides the basic define require API, so that you can put that into your build script so that you don’t need to require JS on a few code.
CHUCK: Nice.
JAMISON: So… oh go ahead, Tim.
TIM: Sorry. So as you guys know, I’ve been working on backend Node stuff for the last few years, but recently, I’ve been porting a lot of my libraries to the browser. And one thing that’s really spoiled me in Node is I can declare my dependencies in a json file and then give some of my code and then they can just NPM install and get their dependencies. And I’ve been looking for something like that in the browser and recently, I’ve found JamJS, which does that and then uses RequireJS to load all the modules. And so that’s what got me using RequireJS. And it kind of breaks so many rules because the JamJS system is essential repository and there’s only one jQuery there; there’s only one whatever. It’s kind of hard to like drop in Zepto instead. I mean, have you seen a lot of increase in use because of this or have you not really heard much about it?
JAMES: Yeah. So it does seem like JamJS is getting some traction which is neat because it uses Require and that’s awesome. But I’ve worked on a thing called … and I think it’s like …. GitHub. And so the idea behind that is uses GitHub as the package repository and uses the diversion tags that are stored on GitHub for the git repo to find the zip file for that version and install it. But it will also then allow you to do things like if you say, “Okay, in my package json … dependency section, you can say for jQuery in this case, I use Zepto,” and so, if the project that assumes that, if it doesn’t already have a jQuery installed it will go and use Zepto in there. And with the RequireJS… by putting in the RequireJS config to say, when somebody asks for jQuery, load zepto or if somebody rename zepto to jQuery, then you know, you got some options to sort of swap in a different provider for that sort of API that you assume by the dependency name.
TIM: So, you basically just declare some aliases?
JAMES: Right. Yes.
TIM: That’s cool. I mean the main thing I want is I just want to be able to declare my dependencies and not include them in my repo. And I really like the semver versioning that Node has, but I mean, GitHub tags isn’t that far off either; you just don’t get all the magic from semver.
JAMES: Well, I think you could still apply that semver stuff to a GitHub repo. I don’t support that now just because I’m lazy and a lot of times, projects are a lot shallower and semver in Node project because in our front end project, you can’t do the same thing with Node where it has this sort of nested Node modules installation for things that make… It’s a great way to avoid conflicts that you got sort of a very big file tree on disc. So anyway, I think you can apply the same semver stuff to a GitHub repo thing; it’s just that you wanna say it’s greater than or equal to these version numbers. People properly version their repos, which they should be, I think that can still be worked out.
TIM: Okay, some seems to adapt logic to the client … from GitHub?
JAMES: Right.
JAMISON: So, would there be a way to write some kind of wrapper that would let you use RequireJS with NPM? Because my the biggest problem with Jam I think is just that it’s not NPM; I guess it’s another package manager and it’s another different place to put JavaScript code and there’s tons of JavaScript code already in NPM and lots of it would work in the browser; some of it is just like utility code that doesn’t touch file system APIs or something. So it seems like it would be awesome you could use RequireJS but also have the ability to do dependency resolution and all the nice stuff that NPM gives you.
JAMES: Yeah, so I think for me it’s actually good that they are not the same because NPM assumes some things that are not true in browser space. So in particular, NPM is not good at saying, “Hey, I just have this one JS file and dependency and I want to install that.” And it wants to do these directories… it doesn’t feel natural to me as a frontend developer to have these nested… these directory on disc; whereas I would put everything in like a scripts folder or a mid-folder. And then I think there’s also the assumption that the code in there works for Node. I think one of the folks, one of the difficulties they had was that sort of assumption try to piggy backing into NPM. It comes with some sort of Node assumptions already.
JAMISON: So I mean, obviously you wouldn’t be able to use like the file system tools without doing tons of shimming and crazy stuff, but I’m just talking about as more of a code repository. Because there is code that doesn’t… I mean it was written for Node but it’s just like a utility to parse date/time stamps or something just like, you know, random little things that are already there. So you are talking about the nested directory structures being bad because… I mean, why would that be a bad thing to have a nested directory structure like that?
JAMES: So, I think it’s good to go to sort of a convention-based thing; it grows more out of my experience with RequireJS; it has very nice convention where you say, “Hey, if it has a base … and then you should say ask for jQuery and just for jQuery.js inside of a base …”. So the browser, you only get when I/O lookup for the dependency and so I think it’s the best if you also have a convention that doesn’t require sort of that configuration line for each dependency that you install. Because then you have these giant config block, which to me is a little bit more brutal; and you are delivering a lost of code that doesn’t need to be there if you just follow… I mean, you are delivering a code block that doesn’t need go to their client if you just follow a convention.
And so, what I would like to see, like if there’s couple things with NPM; there’s the registry and then there’s the tool that downloads the code from that registry. So maybe one option will be if you can use that registry but when it downloads, it knows, “Hey, I’m not just going to put this in jQuery folder under like Node modules or something but I’m going to put it in a scripts folder and call it jQuery.js.” And so that sort of natural ID to path usually works out; you know, that might be an option. so I think that’s the thing for me where I think Node was right to say, “Okay. You know what, we’re just going to work out a system that just works for Node; we are not going to consider browser concerns,” and so they’ve worked out a great system for them. I think conversely, as folks on the browser side, we should make sure that we work on a system that works best for us and the code in a sort of layout we would expect. And then, hey, if there’s a way to match those things up later, great; but I wouldn’t want to start at first try … NPM generate in a browser-based project
TIM: Right. I mean, I recently have been porting a lot of my Node libraries to the browser and the problem I had initially is that you have a lot of dependencies depending on which environment you are in. For example, there is jQuery NPM that runs in Node and it depends on JSDOM or something that provides a DOM; in the browser you have the DOM. Whereas, some of my libraries might depend on Node’s even emitter which you don’t declare that dependency in your Node package. But if you are in the browser, you need something that provides that interface. So you have very different dependencies depending on where you are running; you can’t really use the same package.
AJ: So, one of the pities there is that I don’t think there is a general desire in the community to standardize on a way to do that. So I’ve got pack manager and in that, I have a key in package.json called ‘browser dependencies.’ So if you list something in browser dependencies, you can list it there, you can also give it an alias, so you can have like events.Nnode and events.browser and alias both of them as events when you wanna put them in. But I’ve contacted a few of the other people that do some of the things like I think it was ender and one of the ones that Jamison had mentioned before. And they didn’t really want to standardize on some sort of key or some sort of system in doing that.
JAMES: Yeah. So for me, I think this is the same thing with module systems too; it’s better to code up something that works well on the brand that you are targeting and then if two other environments finds something that works together where they could …, then I think it makes sense. But I think at this point, Node is fairly settled in its ways; probably NPM 2 where their main focus is just making sure that they can provide a great server infrastructure. So anything that makes… where they would have to do code changes for the browser, I think they are just because less likely to do because they are … in either, and that’s totally fine because they built some good server stuff but yeah, I can see where it will be hard to find agreement.
CHUCK: Yeah. So what’s kind of the future of RequireJS? I mean, have you put in all the features in that you want and you are just going to have it be the tool that it is or do you have other features that you wanna put in?
JAMES: No. it’s mostly a refinement. There’s a loaded plugin support, so it’s great for transpilers. So I think there’s still some rough edges in there when you start to get really complicated about the transpiler stuff. So like there’s a CoffeeScript plugin so that you can run CoffeeScript in these systems. But I think the dependency support in that pathway is not as strong as it could be and so I’ve got an idea on how to get that working.
And then, I also wanna use this… and I think, hopefully it’s already been a true… as a sort of try out some of the Ecmascript stuff, so that I have these other loader plugin it’s require-hm under jrburke on GitHub; where you can code in sort of the existing Ecmascript module spec and it will convert that into a JavaScript that runs in today’s browsers loaded via RequireJS. And so I’m hoping to use that sort of thing to help inform their process because there are some things to be worked at for that. And so yeah, what I’m hoping in the future is just about stability; refining how it executes and then hopefully informing something that will get in to the… because at some point, it would be nice for me not to have to do RequireJS amd stuff.
CHUCK: Right. So one other question I have since it’s an open source technology, what’s the best way for people to get involved? I mean, do they need a CLA and then they are good or is there more to it than that?
JAMES: No. Like the CLA is for sort of non-trivial patches; so I take a lot of like 1-2 line patches because if it’s just like, oh yeah, I was being dumb and forgot to do something. And then there’s also helping out on the RequireJS manual, that’s always appreciated; because it is seems to be getting a lot more popular and so the traffic is pretty steady now so, more people that can help on that, I have more time to actually work on core issues. And so yeah, to get involved, I would say check out the progress list, help on questions and you can do pull requests and simple ones that you don’t require CLA; if you wanna refactor the plugin system, then that will be part of CLA.
CHUCK: Awesome. And then the other question I have is since you are no longer working at AOL under the Dojo project, does that really affect the amount of time and things you have to put in to RequireJS?
JAMES: Yeah. I think one of the drivers for me for stepping away for working on Dojo was Require itself seem to be… it was getting enough steam and it needed enough of my attention that I really couldn’t do the other stuff. And so, very fortunately … in the Dojo community, he stepped up and he’s converted their loader over to AMD and he’s done a lot on some of the base loader and base system work done that I would have probably done. And so, right, I think it’s just more about RequireJS and AMD stuff taking a lot more time; but it’s great to see that the Dojo folks has been able to handle it themselves.
CHUCK: Right.
JOE: I have a question for people that are just getting started out, want to get into RequireJS, do you have a recommendation on where they should go, what the best resources are for learning and implementing RequireJS in your projects?
JAMES: well Yeah, there is a getting started page on the RequireJS site. I feel like I need to rework that probably a little bit; it’s probably a little old, but I think it’s the best place to start. There’s also now, depending on your… oh gosh, choice of other tools like Tim from …, he’s got a Backbone boiler plate that uses RequireJS, so if you are a backbone person that’s probably a nice way to hop into it. But yeah other than that, hopefully the Requirejs.org is a good way to start. And then there’s list you have questions.
CHUCK: Awesome.
JAMISON: I have a question; I was doing some templating stuff; it wasn’t with RequireJS but I remember that RequireJS has a text plugin, so it loads just text as a JavaScript module and I looked at it and, have you ever found something like in the back to your fridge and be like, “Oh, this looks pretty good.” And then you pull off the lid and like Cthulhu like pops out and these spores of like mold and fungus just like overwhelm you? Like I’m looking at the text plugin and it does like Java, I/O stuff in the browser; why do you need to do that? I obviously don’t understand all the complexities of… I mean, this is in use in production all the time so it definitely works and there are probably all kind of crazy edge cases.
JAMES: Yeah, so…
JAMISON: I think it uses Java to load text…
JAMES: So that text plugin, so how the RequireJS optimizer works for loaded plugins is it actually runs the loader plugin in the build environment, because otherwise it wouldn’t be able to sort of resolve all the plugin resource ID. And so for that to work, since the optimizer runs in Rhino and in Node, it has code paths for those. So there’s a couple of options. If you didn’t like that you can always just write your own text plugin and when in runtime, you load that one while you are running the build, you point to this sort of single file one that does all of them. And then it’s also common once you do the build, if you don’t need to do any dynamic loading with the plugin, you don’t need to include it. So there’s a… you can do an exclude in R.js in the optimizer and then you can do a stub module for text things and so just write a single line things and yeah there’s text module but it doesn’t need to do anything.
JAMISON: Okay. So that makes sense. It’s running in Rhino, so it builds this Java string to get run in Rhino?
JAMES: Right. And so, why is that all in one file? Most people just like to deal with one file; as far as to say, you know, so I think that’s sort of trade off.
JAMISON: I think I phrased my question poorly; I wasn’t trying to say, “Oh, this is horrible code,” as much as like is this really how you have to write RequireJS; like do you need to write some Java code in there.
JAMES: Oh, yeah. No, no. That one, it’s because it’s doing the I/O access; so in Rhino, the way you get access to the i/o systems is through Java and Java is horrible just wanting to say, “I wanna load some text…”
JAMISON: Yeah. [Chuckles]
JAMES: So yeah, I’m sure if you look at the Node pathway, it’s a lot simpler. So yeah, that is just the cost of Java.
JAMISON: Do lots of people use the optimizer on Rhino? I mean, with all the community plugins work, I mean, is it pretty much the standard for them to work it with Rhino and with Node or do people just kind of pick Node because it’s easier if you know it?
JAMES: I would recommend Node because just the build itself runs so much faster. But there are definitely people who they just can’t take on Node as a dependency.
JAMISON: Sure.
JAMES: …particularly in the internet environments where they already have Java…
JAMISON: Yeah.
JAMES: …things build up and that’s one of the things that’s been interesting for me is once you work on… if you worry about just the client stuff and not as in certain build tools or build environments, there’s these vast JavaScript communities that are not in Node. And like there’s the Visual Studio crowd, they have a new Git which is a package manager and they deliver some JavaScript code through there. They have their whole other ecosystem; and same with the Java folks. So I think it’s just which sort of subculture you see getting used. But I definitely get regular on running on Rhino because one of the issues I just was that the closure compiler used optimizer to have failed but it’s just how you construct the class path. Anyway so it’s used. I would say though most people and I would encourage most people to use the Node ones because it will be faster and I think if you are a JavaScript person, being able to small server things that are JavaScript base, it’s a great thing. But optimize runs a lot quicker in Node.
JAMISON: You heard it first here; “Node is faster than the JVM.” We’re quoting you.
CHUCK: [Evil laugh]
AJ: Is there anything that isn’t faster than the JVM?
JAMISON: Oh, no JVM is fast.
CHUCK: Yeah. They keep optimizing it it’s just….
JAMISON: JVM is super-fast.
AJ: It seems like whenever I look at Java code, its 90,000% bloat and 2% what you need to do.
CHUCK: Well that’s Java code, that’s not the JVM.
AJ: I guess It can’t…
JAMES: Well I think in my use case in particular since I’m using Rhino, there’s extra translation layer going on. you know, I’m sure that’s part of the class. But yeah, Node is so much faster; at least for my use case.
TIM: Well command line tools; with Rhino, you have to start up JVM every time you launch your CLI and that’s not fast.
JAMES: Right. Agreed.
TIM: So, I have one quick question and I mentioned this on Twitter a few weeks ago, one of the first things I noticed when I started using RequireJS is it’s 80KB of code and the bulk of that can be minified out. Is there a place in the world for smaller AMD loader that like only supports like maybe one AMD format in just the mainstream browsers? I mean, how much of that 15K of minified code is used in the 90% case?
JAMES: Yeah, so…
CHUCK: Did you just ask if RequireJS is bloatware?
JAMISON: [Laughs]
TIM: No, I did not. I asked how much of it is handling the edge cases; because I’m pretty sure all of it is needed for some edge case.
CHUCK: Right.
JAMES: Yeah. And so there’s a couple things; so there’s of course there’s IE, which is always a challenge.
JAMISON: It’s one giant edge case.
JAMES: Yeah.
CHUCK: [Laughs]
JAMES: Unfortunately, it’s a pretty large percentage of browser use. But it’s for IE10, I think now it’s good enough where I can strip some things out with that, but I try to make sure that it runs even on IE6 although the deal is supporting IE6 through IE9, it’s the equivalent. As soon as I can cut IE9, then that’s what would eliminate some of that code. I have a little bit of extra code because I support the multiversion context stuff. And then I think… but good portion of it is it’s just hard to make a network loaded linker. So you know, you have these dependencies you are going to fetch, you got to wait for them to load, you wanna then wait for those dependencies to load and then tracing that back correctly.
But that said, you know, I’m open for pull requests. Oh you know, the other part of that is support some config options that other may not need. But yeah, so I think that’s the strength of the AMD ecosystem; if you don’t like RequireJS in particular, you are welcome to choose another one. I was just like starting with CurlJS; if you didn’t think that RequireJS was probably you know, the size that you wanted. So I guess gauge on the complexity cause, would be like…. so for me I always measure minified gzip because gzip sort of works out to like the amount of entropy stuff that’s different in the file. So minified gzip RequireJS is probably close to 6K whereas Almond is 1K.
So what is the difference between those two; Almond doesn’t do dynamic loading, so that’s one of the bigger hits. If you have to do dynamic loading or you do synchronous loading, you reduce the size of the loader quite a bit. So I think that’s the where the bulk of the implementation cost comes from. And I think for me, it’s also been about… s once you get to that level of 1K versus 6K and minified gzip… the reason that you are going to wanna use RequireJS.. well, two things; you think modular code is the way to go and you wanna get in to that pattern now; and the other thing is that once you have a module loader, it’s much easier to have larger programs like load on demand as user clicks a button. And once you look at that aggregated cost of all that code loading, the loader does not factor in to the overall cost.
TIM: Right. I mean, my issue is not the file size at all; I just take a 100 pixels up your JPEG header and there you go. I mean, what’s on the web page. My main concern is just the complexity of the… the mental complexity. I noticed on the website that you support like 12 different signatures for defining a module between the permutations of Require and define and RequireJS and all the various options. Do you want to a port a certain format or just each one has its own strengths?
JAMES: Yeah, so I think for the define format, so it’s really nice for configuration to just be able to say define object literal, and so signatures are about making it easier so that the user typing cost is not… you know, what they are focusing on. So there’s the object literal form or define and there’s the… I just got 2 or 3 dependencies, I wanna load. So passing the array of dependencies and then a function that the factory function that gets called with that array, that’s pretty sweet and it matches to what a lot of web libraries today, because you will see a lot that have the immediately invoked function that has passing jQuery and some other things.
So then, but once you go past maybe 3 or 4 dependencies you wanna align the dependency name with a local variable name. So I think that’s where the simplified CommonJS wrapper where you just say define function require and inside there, you can say while a=require and a is …, that meets the need of those developers. Because there are definitely people that want that alignment and I appreciate that alignment when you have more than 4 dependencies. And new modules should have more than 4 dependencies but there are going to be top level modules that tie a bunch of things together and those are naturally to access more than four. So I think it’s all about meeting the developer convenience and hopefully informing them in the eventual module of things.
So yeah, and I think the other sort of complication too is when you do the simplified CommonJS format, or just define function require, in order for the loader to find the dependency, it converts that function to a string and then parses up the require calls. But once you minify the code, that gets hard to do. And so, you need to sort of compile down to just say, here’s the dependency rate, here’s the function and then you don’t have to depend on the functions after build. Because there’s also the possibility that someday a JavaScript engine doesn’t need to require… isn’t obligated to give you back a sort of source version of function to string; could just return like compiled code or something like that. The string compiled code. So in most situations, we wouldn’t be able to scan for dependency and so it’s also sort of against that.
CHUCK: All right. Cool. Well, we need to start wrapping up. I did email you and tell you about picks, right?
JAMES: Yes, I listen to the show and I’m aware of that.
CHUCK: Okay. Because I’ve sprung that as a surprise on a few people. And I know that we probably have a few more questions, what we’ll do is we’ll do the picks, we’ll wrap the show up and then if you guys have some question you wanna ask James and he has time, then we will keep recording and we’ll put it up as bonus content. Does that work for everybody?
JAMISON: Sure. Yeah, if it works for James.
JAMES: Yeah, works for me.
CHUCK: All right. Cool. Well, Tim, why don’t you start us of with the picks?
TIM: All right. So, the every time someone asked me what testing library I use in Node, I just say use Node … but I recently finally gave in and used Mocha. And it’s kind of a balance between the …. BDD stuff and still usable. It’s a fairly simple test runner. And I don’t know, I like it; it’s fun. And you can use test library you want and you can use Node or you can go crazy and use something that’s based on … and JavaScript. And the one neat thing I discovered last night is you can combine that with JSCoverage on your code. So Mocha and JSCoverage are cool for doing your tests.
CHUCK: Awesome. Jamison, what are your picks?
JAMISON: All right. My first one is lots of you have probably seen it all around the internet but the Steve Yegge post, I think it’s called The Magic Bus or something like that. Notes from the Mystery Machine Bus, where he talks about how there’s a software spectrum from conservative to liberal as far as what style of programing language and what style software development you like. And it’s a Steve Yegge post, its super long, I think he’s a good writer so I think it’s interesting. There’s a lot of stuff I agree with and a lot of stuff that I disagree with but it’s a great read and it made me think about some of the choices that I make as far as language and the way I design programs. So, that was great.
There’s another article; I think I’ve read this a few weeks ago but I just came across it again. It was actually a Ruby talk by one of the core Ruby developers who’s from Japan and it’s all about garbage collection but at really high level. It delves a little bit into some basic C code and some basic Ruby code, but I think it will be pretty readable even if you are not super familiar with those languages. And especially in the beginning, it’s just all metaphors that explain garbage collection really well. It’s also kind of cute because it has all these like Japanese cultural metaphors that he sticks in that the translator kind of makes notes about. So that was a good read.
And my last one is… oh, weird, I didn’t plan this, but it’s a Japanese movie called ‘Howl’s Moving Castle.’ It’s a cartoon. I feel like I’ve watched all the famous like family entertainment that is in English and so I was just looking on IMDB and I found this movie that was rated super highly and I had dismissed it before out of prejudice because I am a doofus, but I sat down and watched with my wife and it’s so good. It’s amazing. Christian Bale was one of the voice actors and he does his batman voice; it’s pretty great.
CHUCK: Awesome. All right, AJ, what are your picks?
AJ: So, just spinning off of Jamison for a second, I think the name of the guy that makes the movie is Miazaki and he’s got a whole bunch of movies.
JAMISON: Yeah. I’ve watched a couple of those other ones; they are all pretty good.
AJ: Yeah, they are all extremely weird, but good.
CHUCK: Yeah. Spirited away, Ponyo… I’m trying to think… Kiki’s Delivery Service…
JAMISON: It’s so cool how… I mean, it’s not the normal western arc of like, normal intro and then the conflict builds up in the middle and then it ends with resolving the conflict; like it’s a lot different style of plot and things happen that seemed really weird that they just kind of ignore all the time. Like I don’t know, it’s very you can tell it’s from a very different culture, but its great entertainment.
CHUCK: Yeah.
AJ: So anyway, a couple of things I’ll mention; I set up a 120-inch projector screen in my new living room. I switched apartments, so I watched a few movies on it and it’s pretty awesome. So I’m going to have to give a big plus to ‘projector movie nights’ as a pick. Also in aiding that, I would like to mention Make MKV, Handbreak and Requiem. MakeMKV, I think you only need if you are using windows or if you are trying to do a Blu-ray; but it does the decryption on DVDs and Blu-ray’s, so that you can copy to your hard drive.
And then Handbreak on Mac and I think on Linux as well, allows you to just straight convert from your DVD drive to a file that you can use on your android phone or on your iPhone; whereas on Windows, I think you have to use MKV first. And it was a simple enough process that my sister figured it out. And then Requiem is a program that for your legally purchased content on iTunes, makes it so that you can use that content on any device of your choice. You have to be logged with the account that the stuff is purchased with so that you can’t pirate with it; which I think is good because I don’t think people should be pirating, but I do think that people should be exercising their rights and we shouldn’t let the media companies stick it to us.
CHUCK: Right. Okay, cool. James, what are your picks?
JAMES: So I think for web stuff, there’s x-tag which is done by David Walsh at Mozilla. It’s really neat; it ties into the web component stuff; be able to create your own tags … into code, JavaScript code. So just that whole area of web component is neat and the object stuff on the es-discuss list it’s also on that. And then there’s the Firefox OS BtG. What I really like about that is I’m hoping that sets the stage for Apple and Google to just build in that … directly into the browser in that sort of install web apps themselves. Hopefully that’s … for mobile devices and then desktop devices. So it will be great to see that and then lastly. I just saw last night was Jiro Dreams of Sushi and that was just, yeah, it was just really neat and philosophical thing too. So, that’s it for me.
CHUCK: Nice. Joe, what are your picks?
JOE: All right, so my first pick is the book series The Lost Fleet by Jack Campbell. It’s a really awesome sci-fi war series of books and I don’t know; there’s like ten books in there something like that; it’s way cool. My second pick is a card game, kind of a card game called ‘SpotIt’; super awesome fun family game
CHUCK: That’s a fun one.
JOE: Yeah, really awesome; played it a ton yesterday. Probably played 15 games over the course of half an hour with ten different people, different groups and really just had a blast. And then my last pick is Lets Code JavaScript Test Driven JavaScript by James Shore; which I think I’ve picked before, but I just really feel like I wanna pick it again. It’s James Shore basically just streaming himself writing an app from scratch, using JavaScript, using test driven development — and it’s really super awesome.
CHUCK: Nice. All right. Well, I guess it’s my turn. In the pre-show I mentioned that my car kind of blew up again. [Chuckles] And so I’m just going to pick some of the things that make life easier when you are working on your car; in this case the water pump on the new engine that we put in the car ceased up and when the pulleys don’t turn, the belt doesn’t turn and then eventually the belt just come off and that’s what happened. And there’s not driving things like your air conditioning or your power stirring or your alternator and so you don’t get very far and since the water pump isn’t turning it anymore, it’s not cooling your engine, which bad things happen and could overheat your engine. And so, I locked out because and finally gave up right before I got home so I can pull in to the garage right as it was telling me it was overheating.
Anyway, if you are going to work on cars like that, a good set of wrenches is handy, but what you really want is an air compressor and an impact wrench. And if you have the air compressor and the air-powered impact wrench, then a good set of sockets is all you really need to get most of the work done. And beyond those, you know, a good hydraulic jack and some jack stands will get you the rest of the way. So anyway, I’m just going to throw those out.
One other pick that I wanna put out there (and it was something that Joe reminded me of when he mentioned SpotIT) another fun matching kind of game is Set and it’s the same kind of thing; you are looking for different shapes and colors and patterns; and so they can all be the same or they can all be different in the shape, the color and the pattern. And anyway, so you are trying to match 3 cards and so when you pick up the cards and whoever is dealing will put more cards down and whoever gets the most cards win. And so it’s a pretty fun game. Anyway we’ll get the links to all that in the show notes and just wanna thank James again for coming on the show. It was great discussion.
JAMES: Yeah, thanks for having me.
JAMISON: I think RequireJS is really pushing the web forward, which is awesome.
CHUCK: Yeah. I’m going to have to give it another serious look here. Anyway, we’ll wrap this up. We’ll catch you all next week. Thanks for listening!
