Understanding aurelia.io development prerequisites from a .NET perspective (NPM, JSPM, GULP, KARMA, WTH)

There is this awesome javascript framework called aurelia.io that I’ve been working on and using for a little while now. At a certain point, I feel you’ll owe it to yourself (*if not then at least you owe it to me *) to download one of the sample apps and play around a bit.

Some time ago, when I was trying to do just that, I felt overwhelmed at first. I had limited experience with javascript, HTML and CSS. Aurelia itself looked (is) really easy to grasp, especially since it has a very C# + XAMLesque feel to it. The learning curve still felt steep though, but only because of the surrounding open source stack: NPM, JSPM, GULP, KARMA and the likes. I was like WTH are all of these, and I wish I took 3 minutes to read an absolute beginners blog post like this one to bring my vocabulary up to speed.

Your system

There are some things you’ll need to setup on your system before making the switch to this (or any) open source project…

Git

Git is a free and distributed version control system. In .NET speak: yes it is exactly the same as TFS but it’s totally different. Whenever you want to pull or clone a project (‘check out’) from a server (like github, you’ll need git so your OS understands what the hell pull or clone even means.
Additionally, you’ll often need to execute a command (more about that later). The normal cmd.exe or hipster mac OS alternative will at one point or the other drop the ball in understanding those commands, whereas installing git gives you a ‘git bash’ which looks and acts completely the same as your command prompt but understands how everything in this OSS stack fits together, better.

NodeJS

NodeJS is a platform based on Chrome’s javascript runtime. You could compare this to installing the .NET runtime on your system. To run your aurelia apps, users do not need to install NodeJS first, because your app will run in the browser and use that stack. However, when you are developing apps, you do need a runtime for your tooling to execute in. And that runtime, will be NodeJS.

IDE

You’ll also need an IDE. Your IDE should be an integrated bundle that can do three things: manage your project, execute commands and help you write code.

Unfortunately, Visual Studio ultimate super duper bundle, fails the third requirement as it does not (yet) support ES6 syntax. I know! What a shocker right!

My first alternative was going back to a simple text editor. According to stackoverflow’s 2015 survey, SublimeText is the second favorite one. Once set up with an ES6 plugin for next generation javascript syntax highlighting and intellisense and an integrated terminal/command prompt I realized going back to a text editor was the exact opposite of taking a step back. It’s really, really, really fast. Like: really fast!

A little later, we received a free OSS license for JetBrain’s WebStorm IDE. One of the biggest, noteworthy advantages for me was the integrated (visual) support for git&github. After using it for about 2 months now, it has my love, my official seal of approval, and I doubt I’ll go back to VS for javascript development…

Package managers

Managers… Plural.

NPM

NPM is a javascript package manager. In aurelia, we use NPM because of it’s ability not only to install packages in your project, but also in your tooling. Think of it as Visual Studio’s “plugins”, only you install the plugins in your build process/tooling instead of your IDE.

JSPM

JSPM is also a javascript package manager. In aurelia, we use JSPM because of it’s ability to manage dependencies not only in your project but also in your app while it’s running. Suppose your project uses package A and B. Both A and B have a dependency on package C, but they depend on a different major version: A uses C1 and B uses C2. Whoa, now what? Actually, JSPM will download both version 1 and 2 of C, then when you run your project it will load both C1 and C2 in a different ‘scope’. If some component in A needs something of C, it’ll get the C1 version, whereas a component in B will get the C2 version. WHOA! Think of it as a (really) advanced Nuget.

NPM Libraries

Remember: NPM is used to install tooling, so these libraries are your development tools.

Gulp

Using NPM, you can install Gulp. Gulp runs automated development tasks. gulp watch for example, is the equivalent of your Visual Studio’s F5. It will run several automation tasks like cleaning the code, building it, starting a NodeJS server (like VS starts an IISExpress) and serve up your website (the actual watch part). While you are developing, you can keep the gulp watch command running and any change you do in your code will trigger the complete clean, build & run task chain (in about 0.3 secs) so that your website is automatically refreshed and you can see your changes.

Wait: build? Is javascript built? Javascript itself is not built but it’s a scripting language that’s executed by the browser’s javascript runtime. However, you’ll often use a superset of Javascript (like TypeScript, Dart, … The aurelia team just code in ES6/ES7 (the next and next-next javascript spec)). Because your browser does not understand those, your TS/Dart/ES6 is compiled down (called ‘transpiled’) to plain vanilla javascript that works in any browser.

We use gulp for a number of tasks including building documentation, releasing, etc as well.

Karma

Karma is your test runner. It performs a number of tasks to build the code (like gulp), scan a directory for all test cases and run them lightning fast. Just like gulp watch, you can trigger your test runner with karma start and keep the command running. Any code change will trigger a rerun of affected tests (again: wow) so you can instantly check what you’re breaking/fixing. (More breaking than fixing in my case, but whatev)

Time to play

Armed with this knowledge, I hope you find it easier to go play with an aurelia sample. Set up git and NodeJS from the System chapter, then launch a git bash. Navigate to a working folder:

cd .. #go up one directory, or
cd someFolderName # go into a directory

Now, execute

git clone https://github.com/aurelia/app-contacts.git

This will clone (download) the contents of the a sample app into a folder called app-contacts. When done, navigate to that folder

cd app-contacts

Armed with the knowledge in this article, you should now be able to follow this little guide, and have the app running locally without screaming WTH once. πŸ˜‰

Advertisements

13 thoughts on “Understanding aurelia.io development prerequisites from a .NET perspective (NPM, JSPM, GULP, KARMA, WTH)

  1. I’ve been dabbling with things like node.js/Express, Node Tools for Visual Studio etc, and also frameworks like Angular JS, plus a bunch of modules like Breeze, Knockout and others whose names I can’t think of right now.

    Even Aurelia (which I think looks good, and is on a good path IMNSHO). But after several attempts to set up the environment that Aurelia needs on Windows, it always fails on attempting to install jspm, even following your steps above. So far from wanting to contradict you, there have definitely been some WTF’s uttered loudly in my experiences to get my first Aurelia app to run.

    Now if LightSwitch would just get open-sourced & modified to produce Aurelia-like code, now that would be something worth heavy consideration!

    • My only hope is that MSFT learned their lesson and the next version / product will be open source from the start…
      We’re waiting for Typescript 1.5 to be released, then we can fully embrace VS2013+VS2015 as aurelia development tools and the hurdle should be a lot lower πŸ˜‰

    • @Yann
      Many of the documents that I ran into concerning aurelia said to install jspm as

           npm install -g jspm
      

      But, I found a note from Samuel Joseph Barone III that reads (in part):
      Β 
      “this is what I did to resolve it:”Β 

           npm uninstall jspm -g       #just in-case you installed jspm already
      
           npm install -g jspm/jspm-cli
      

      I tried that and it seems to have worked ok for me. A boatload of depencency packages were installed in my project directory when I ran

           jspm install -y
      
  2. Hi Jan,

    reaading all the needed prerequisites, wouldn’t it be a good idea – together with a wish for donation – to put some ready installed virtual machines (VM + Hyper-v) for download ? I’m convinced that would lower the hurdles for beginners quite a lot… best regards form Germany … Klaus

    • Hey Klaus!
      That is an awesome idea. Right now aurelia is still in early alpha and has major updates every week, so the maintenance right now is still too large.
      Anyways, I do know there’s a VS2013/2015 + typescript blog post coming up about aurelia, which will make it even easier for .NET developers to try it out πŸ™‚

  3. Great stuff here, thanks for putting it together Jan. A lot of us .Net developers are really feeling our way through the JS open source stack, and as you said, it can be overwhelming.

    • I always wish someone would just give me a few analogies with already known technologies, when trying to learn a new one. Since we got a common history, let’s help each other meet the future πŸ˜‰

  4. Couldn’t agree with this sentence more: “The learning curve still felt steep though, but only because of the surrounding open source stack: NPM, JSPM, GULP, KARMA and the likes.”

    The hardest part of getting started with Aurelia was getting all the packages and frameworks for the sample.

  5. Thanks Jan,
    I am not new to Visual Studio (since 1987). Yet I fumbled with the install until I found you.
    Now we both worship the same goddess – Aurelia.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s