JSPM, SystemJs, Aurelia and a Web API

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

These are the technologies that are at the foundation of my current web stack that I am learning and coming from an ASP.NET background, it feels really good.

Some of the variables that affect what technology I choose in my job are the fact that I am supporting internal applications, I am connecting to an MSSQL data source and most of the applications I am maintaining or putting into place are contained as a projects (Web API, MVC, WebForms and default Web projects) in a Visual Studio Solution and most of the developers I work with use the same. I only throw the part about Visual Studio in because the more I can make the application maintenance friendly to someone who’s workflow typically incorporates Visual Studio the technology I choose needs have some support in Visual Studio and take it into consideration considering how the application will be built and deployed. Of course I embrace all of the tools that make building modern web applications a better experience in Visual Studio.

Extensions in Visual Studio like Web Essentials, Emmet (Zen Coding), MVC Boilerplate, ASP.NET Project Templates, Web Tools, NodeJs Tools, Task Runner Explorer, and other extensions that extend the intellisense, code completion and navigation between TypeScript, JavaScript and modern CSS more enhanced are huge productivity boosts that make the Visual Studio workflow great. But in the case where I’m working on an Aurelia or Angular project where the files I am editing are part of a set of static files in a project that is basically an empty web template. I find taking a break from Visual Studio and dropping down to something more simple like Visual Studio Code, Sublime or Atom is totally doable, allows me to get right to the point on a change or new feature that is not something that needs to be compiled in the standard ASP.NET F5 build process needed when editng an MVC or Web Forms project. When I’m just building features as JavaScript and HTML file changes and the close constant manipulation of one to many command line windows open. I find that Visual Studio can be a little too much and knowing I have an easy option like VS Code to get down to business whether I’m using it in tandem with Visual Studio or without, this addition to the workflow as a replacement for Atom & Sublime makes working with Modern JavaScript Libraries such a better experience for me.

The biggest change in my front end work has been going from a ASP.NET MVC and WebForms mindset into a Web API and Single Page Application mindset. And by the way it never has been a pure switch from one to the other. I have mixed the two using Angular, peppered SPA functionality throughout MVC projects creating micro views inside my already defined MVC views and even the god awful idea of putting Angular in a WebForms project (not advisable). More recently the latter mindset (Web API & SPA) has been rocked by the idea of using a more modular SPA Framework workflow with either Angular 2 or Aurelia. So far I am firmly planted in Aurelia and the technology making things different is SystemJs and JSPM. Together they provide a JavaScript runtime and flexible package management that is complimentary to the way SystemJS works.

Too much for me to go into completely but I found this article from SitePoint that can get you familiar with the concepts, Specifically the link below takes you to the meat of the explanation of these two technologies. The article has steps all the way up to bundling.

Modular JavaScript: A Beginners Guide to SystemJS & jspm

The reason behind choosing this stack of technology is a product of being an ASP.NET developer, learning over the past three or four years that moving away from the idea of loading jQuery, Bootstrap and managing front end dependencies with Nuget was something I had to get away from and finding a way to make my front end programming more like my back end C# coding flow and concepts was paramount in saving time and setting my project up for better scalability, more modularity and potentially more efficiency and better performance.

Embracing things like ES6 module loader, ES6 & 7 features, creating a JavaScript runtime with SystemJs enabling the ability to load JavScript pages as modules and not have to fuss with aligning external scripts up at the top and bottom of my html pages. These are all things that drive the change that I have brought to my front end workflow. And Aurelia feels like the one framework that is putting all of this stuff together in the most semantic and productive way. And the fact that the concepts in Aurelia are in some cases purposely and others accidentally very similar to concepts that have been championed by ASP.NET developers for years and are reminiscent of the Caliburn Micro, WPF and Silverlight days. There were some great idea like Dependency Injection, Inversion of Control, Value Converters, Binding and so much more that definitely feeled lik the right way to do things and these concepts and more are part of the default conventions in AUrelia and make it really easy to get up and running because if you know these patterns then everything just makes sense.

The biggest and best features of Aurelia I believe are in the ability to know JavaScript only (this includes being up to date on ES 6 & 7 features) and with that knowledge alone enables you to intuitively know how to work in Aurelia as you will mostly only be writing code that is specific to Aurelia when you are building your HTML views which even there they decide to keep the syntax as semantic as possible. All of this if used right can improve the way teams work together on the front end of your applications and take advantage of future standards that are not yet natively supported by browsers but we can write like developers from the future and Aurelia will take care of transpiling that down to something the browsers can read (ES 5). As features become available the polyfill can be removed and the newly native capabilities of the browser take over. This I believe is a solid path to whatever is next for us as developers to develop the modern web.

Getting where I am is not easy. And I still see that I have so much more to learn. I feel like the others in the Aurelia Community (Aurelia Discuss) are all in a similar position being at the front of the front end technology and we all can see that this arrangement of technologies is far better than the traditional way of the Dark Matter Developers that we may have once been or know exist who have a hard time breaking out of their comfortable Visual Studio 2010 workflow.

So what I have done is curated a list of links that I know can help you as a developer and especially if you come from the ASP.NET side of the tracks. These links are all must see articles tutorials and courses that will help you on your journey into Aurelia and the most popular technologies around it.

Before we even get started with my custom list of things that I think you should be aware of, lets cover the basic resources fro Aurelia, SystemJs, JSPM and babel, which form the foundation of the technologies used with Aurelia.

Aurelia Support (Gitter Page)
Aurelia on Github
Aurelia Docs

jspm on Github

SystemJs on Github

Babel on Gihub

The first is a list of all of the official articles and podcasts around anything Aurelia related.

History of Aurelia in Articles and Podcasts

Next we have a few Aurelia Fundamentals courses on Pluralsight

Aurelia Fundamentals by Brian Noyes

Building Applications with Aurelia by Scott Allen

It’s also referenced and used for UI in the following Pluralsight course

Then we have several courses around SystemJs, JSPM and ES6/7

Modern, Modular JavaScript with SystemJS and jspm by Wes Higbee

JavaScript Module Fundamentals by Brice Wilson

Using ES6 with TypeScript by Steve Ognibene

Object-oriented Programming in JavaScript – ES6 by Mark Zamoyta

Rapid ES6 Training by Mark Zamoyta

Babel: Get Started by Craig McKeachie

JS.Next: ES6 by Aaron Frost

JavaScript Fundamentals for ES6 by Scott Allen and Joe Eames

Visual Studio Code by John Papa

All of these courses are relevant to the core technologies around Aurelia and specifically the flavor I favor using Babel. Also know that there is a ton of courses based around TypeScript as well that are on Pluralsight that you can apply towards working with Aurelia and SystemJs, as well, if you are like me and work in both Angular and Aurelia, the majority of these courses teach concepts that can be used between the two frameworks and other frameworks and libraries that are similar.

Next is a list of courses that I feel will help you to build your backend API and how to create endpoints that Aurelia will consume. And know that anything you do when building a Web API for Angular is transferable to Aurelia.

Building a Consistent RESTful API with OData V4 in ASP.NET by Kevin Dockx

Angular Front to Back with Web API by Deborah Kurata

Building and Securing a RESTful API for Multiple Clients in ASP.NET by Kevin Dockx

Implementing an API in ASP.NET Web API by Shawn Wildermuth

Building ASP.NET Web API OData Services by Brian Noyes

Introduction to the ASP.NET Web API by Jon Flanders

If you prefer NodeJs for the API

Building Web Applications with Node.js and Express 4.0 by Jonathan Mills

RESTful Web Services with Node.js and Express by Jonathan Mills

Finally, we have just pure API Design courses

Designing Fluent APIs in C# by Floyd May

Web API Design by Shawn Wildermuth

Five Essential Tools for Building REST APIs by Elton Stoneman

This is all the kick in the butt you need to start learning about how you can change your workflow and start embracing the modern web and using the most bleeding edge technology in your SPA Frameworks. Don’t take it from me though, definitely look at the courses I have assembled here, but also make sure to use what fits your needs the most. I hope that this article will give you some new resources that you did not know existed. I will continue to update the articel with new links and courses as they become available!

Leave a Reply

You must be logged in to post a comment.