Recently I built a small app, Meteo, that was a clone of Currently, an app I use everyday. I talked about it briefly in my last post but wanted to discuss it more here.
Initially I built the app on the Meteor platform as Meteor serves as a simple way to set up a server, have a build process, and deploy the app. However, I found the ease of Meteor to be both a gift and a curse. There are several technologies I’ve wanted to explore in more detail so after building the app with Meteor I decided to rebuild it to work on these pieces I’ve wanted to learn including:
In this post I’m going to focus on ES2015, and how I refactored my two angular directives to take advantage of this new syntax.
The first directive I refactored was the dateTimeDirective that displays the current time and date of a user’s local machine.
The initial directive writtin in ES5 was:
Taking advantage of ES2015’s new let and const variables I was able to change the var declarations I had to let which now creates a block scope for the variables.
I then changed my function declarations to include the fat arrow syntax. The benefit of this is that I can remove setting this equal to another value, in my case vm, since this is now lexically bound within the function.
With these changes made my dateTimeDirective directive now looked like:
With a similar structure I implemented the same changes on the weatherForecastDirective.
Now that I had refactored the code to utilize this new syntax, the next step was making sure my build process was properly compiling the code back to ES5 for the browser to render properly.
While I won’t go through my entire Gulp file here, the following is what I’m using to take all my client side code, browserify the dependencies, then run Babel, and finally have it concatanated to one final file.
Once the browserify task is ran the client side code is transpiled back to ES5 and ready to be viewed in the browser.
To see all the code for this project please visit: Code
To visit the site in production please visit: Météo