If you are already familiar with Aurelia and have worked with Aurelia 1, then HTML custom elements are not a new concept to you. If you’re starting out with Aurelia 2, they might be a new concept to you. How HTML Only Custom Elements Looked In Aurelia 1 We have a custom element called user-info.html which accepts a user object through a bindable property called user and we display their name and email.
While Aurelia 2 is still not quite ready for release, you can use it right now as the basic core pieces are functional. I thought it would be fun to build a weather application using Aurelia 2. If you don’t want to run through a tutorial and just want the final result, all of the code for the weather application can be found on GitHub here. What Are We Building? In this tutorial, we are going to be building an Aurelia 2 application that displays weather information. Original, right? You will learn how to create new Aurelia 2 applications, as well as work with the OpenWeatherMap API where we will consume JSON for the information.
The front-end space over the last six years or so has really heated up, you could say superheated. As browsers become more powerful, devices continually improved and innovation a constant thing, no language is more popular and widely used than Javascript. And yet, as learning resources have become more easily accessible and coding boot camps have become a thing, newcomers are being taught to lean on frameworks and libraries straight out of the gate.
Staunch functional proponents will fire up at the mere mention of classes or any form of object-oriented programming. These arguments go way back to before Javascript was even a thing or as popular as it is now. Let’s clear the air and point out that classes in Javascript are not real classes. They’re often compared to the likes of Java and other languages that promote OOP-style programming, but classes in JS are unlike those implementations. Javascript has prototypes and prototypes are not classes.
The hype surrounding Svelte right now is inescapable. Every blog post comment section, the article comment section on Dev.to or Twitter thread/hot take seems to solicit a response about Svelte. If you are not familiar, Svelte is a Javascript library which leverages a compiler to turn your Svelte code into plain old Javascript and HTML. You write your applications inside of .svelte files and they get compiled to something that has no runtime.
Aurelia’s robust binding system allows you to not only bind values into your custom attributes and elements, but also the ability to pass in callback functions as well. While your first instinct might be to try using you will quickly realise that this will not work because of scoping issues. This is where `.call` comes in. Using `.call` allows you to pass in callback functions to your bindables, and when they get called, their scope is retained. ## Callbacks Without Parameters Say we have a custom element we have created called `my-custom-element` and it has a bindable property called `callback` defined inside of the view-model using ``` @bindable callback = () => {} ``` Then our custom element callback binding looks like this: Inside of our custom element, when the callback bindable is fired, it will call our callback function and the scope of `someCallbackFunction` will be retained (the view-model it is defined in). When you are not using parameters things are easy enough. You just need to define your callback with the circular function brackets like you would if you're using `click.delegate` or other more event-type bindings. ## Callbacks With Parameters This is where I see developers get caught out quite a bit, passing parameters to callback functions. Using our above function, let's say that our callback accepts two parameters: `user` and `item`. Inside of your custom element, when you call the callback you might try something like this if you didn't read or understand the documentation correctly: ``` this.callback(this.selectedUser, this.selectedItem) ``` Because of how the `.call` feature works, this will not work (as you might have possibly already discovered). This is because you need to pass an object to the callback with your parameters matching the names you use in your HTML. In our case, we are expecting two parameters: one called `user` and one called `item` to be passed into the callback. Inside of our custom element, we need to pass them like this: ``` this.callback({user: this.selectedUser, item: this.selectedItem}) ``` Now, our values get passed correctly and the callback retains its scope.
It is almost the year 2020, and you are still not using Aurelia, say it isn’t so. No more excuses, it’s time to charge up your Bluetooth keyboard and mouse batteries, make yourself a coffee and start using Aurelia. Version 2 is coming and it’s going to be FAST While Aurelia 1 is plenty fast, Aurelia 2 is a complete rewrite of Aurelia from the ground up. It not only focuses on JIT (Just In Time) runtime performance but also sees the introduction of AOT (Ahead of Time) compiling support which will yield upwards 100x speed improvements in your applications.
Recently whilst writing some unit tests in Jest, I had to test some code that took ISO date strings and converted them to formatted date strings, then code that converts them back to ISO strings before it’s sent to the server. My first attempt was to use jest.mock and mock each individual method. For some of the uses of moment where simple dates are being converted, it is easy enough to mock format and other methods, but once you start chaining Moment methods, things get tricky from a mocking perspective.
Recently I updated to the latest version at the time of writing this post 5.0.2 of the file-loader plugin for Webpack. I use this for dealing with some image files in my project amongst other things. To my surprise after updating, I noticed my SVG images had all broken without explanation. It turns out a recent fix to the esModule option had enabled a default value of true for esModule which generates Javascript modules that use ES syntax.
Some of you might know that I spend my time immersing myself in the latest and greatest technologies and a couple of years ago got active involved in cryptocurrencies and blockchain. The rise of GraphQL has become too high to ignore. Unlike traditional RESTful API’s, GraphQL uses an expressive query language to allow you to query your server for the pieces of data that you need, leaving the implementation details on the server in resolver functions.