Posts

The Template Element Is Finally In Edge

It really does feel like the Microsoft team working on the Edge browser are legitimately trying to put out a decent and truly evergreen web browser. Today is a glorious day for Edge users and developers alike. Support for the

Understanding Aurelia Router Events

Unknown to some is the Aurelia router supports events. Using the Event Aggregator dependency in Aurelia, we can actually listen to various events fired via the router. All events can be subscribed to using the Event Aggregator dependency and the subscribe method. It is worth noting that you don’t always need to use the Event Aggregator, sometimes a router pipeline step is all that is needed to hook into a certain aspect of the router flow and in some cases, this might be the desired choice.

My Thoughts On Jetbrains Toolbox: SaaS Moneygrab

Recently the makers of Webstorm, Jetbrains announced something called Jetbrains Toolbox. The site describes it as a “new licencing model” marketing speak aside, it is a subscription based model which means users will now rent their software instead of owning it. If you’re a polyglot developer, then this might appeal to you. If you’re working with C# and love ReSharper and also working with the front-end and using WebStorm, a subscription based all-you-can-eat-as-long-as-you-keep-paying model might make sense to you.

Aurelia + JSPM: Deployment Best Practices & Unknowns

Update February 2016: A more comprehensive article on bundling and exporting Aurelia applications has been published here. This post will remain, but it is encouraged to take a look at the newer post which answers things more clearly and gives examples. If you’re using the JSPM Package Manager with Aurelia, then this post is for you. There is a lot of uncertainty about bundling an Aurelia application and what deploying to production actually looks like. Until Aurelia comes with a proper bundling solution (the Aurelia CLI has been dropped), then we’re left to scratch our heads and use snippets from blog posts. There is now an official Aurelia bundler released which means we don’t have to glue together bundling solutions anymore.

Aurelia Configuration

One of the most important aspects of a web application (besides the application itself) is how configurable it is. Where you define key global pieces of data accessible to whatever part of the application needs them; name, version number, API endpoints, API keys and more. This is why I created Aurelia Configuration. A simple plugin for the Aurelia Javascript framework that allows you to have a configuration file for your application and then pull out values (with support for temporarily overriding values).

Privates In ES2015 Javascript Classes

One feature missing in ES2015 (formerly ES6) classes is the concept of a private variable or function. However, thanks to ES2015 modules we can actually easily define private properties and functions that can only be accessed within our class. Private Properties in ES2015 classes Using a WeakMap which we have discussed before, we are going to implement the concept of private class properties. Because classes are just objects, we can use WeakMaps on them. Then by specifying getter and or setter methods on the class, we can control access to these private properties. The beautiful thing about this is that using the export keyword, we are only exposing the class Person. This is akin to the revealing module pattern where we choose what is exposed to the client.

Convert Javascript Prototype Name From PascalCase to file-case

At my day job, I am currently building a pretty complex Aurelia application. One such component of the application is a widget system which allows ES2015 classes to define new widgets and then the system can load them in. I ran into an instance where I needed to convert the class prototype name value to file-case (all lowercased and hyphen separated). What this will essentially do is take the prototype.name value in PascalCase and convert it. So a classname value of: MyClassName would be converted into my-class-name instead. There isn’t much to the code to be quite honest.

Aurelia Code Snippets

I swear this will be my last Aurelia post for a little while. As the community and use of the framework grows, I thought it would be a great idea to create a repository of handy code snippets for use with the Aurelia Javascript framework. One of those features is the Value Converters feature where a custom Value Converter can be created to modify values within a View. The repository currently has a few converters for working with dates, a couple for iterating objects and eventually there will be many more.

Iterating Objects Using Repeat.for In Aurelia

In Aurelia we already have the power to iterate arrays from within our views and for most purposes, this is fine. However, sometimes there are situations where we might want to iterate an object’s properties or values without needing to normalise it into an array. In the Aurelia Gitter chat, this question came up, so I decided to create a couple of custom ValueConverters to help with iterating Objects like they were arrays. Other than including the Value Converters themselves, you don’t need to change anything else.

Aurelia Custom Elements & Custom Callback Events (tutorial)

Before Aurelia came onto the scene I had worked extensively with Angular and then shortly thereafter, React.js (sometimes both together). After using React for a while, I became accustomed to passing functions as callbacks to my components. So naturally when I started using Aurelia and creating custom elements, I tried the callback function approach first. Callbacks are not the answer While I was successful in creating a bindable property on my initial custom elements and then passing a function, it became apparent this approach is flawed. Not only do you have scope issues to deal with, but I encountered issues with singletons not being singletons and struggling to pass exact references.