What We Are Trying to Achieve

As a side project I am in the middle of porting a website from Angular.js to Vue.js. Why you may ask, well it is not a complicated site and even though I am proficient with AngularJS, I saw the jump to Angular too heavy and I don’t need all the functionality or complexity that introduces. I have worked with Vue.js before and find it a superb framework that allows you to get a site running quickly with just the basics and only include the parts of the framework you need. It is easy enough to come back and put more functionality in such as routing, state management later on.

So as part of this work I have large chunks of TypeScript that interact with jQuery UI that I need to bring over. I know I could write or find on GitHub some of this functionality, but this is supposed to be a quick project and I haven’t got the time. I just need to get Vue to interact with jQuery UI written in TypeScript. Should be easy…and it is.

Create the Component

Firstly a new TypeScript file is needed to place the jQuery UI functionality into. I am going to use the DatePicker in this example, but the process is pretty much the same with other widgets as well.

For TypeScript to understand what Vue is, you need to import Vue, then you extend the Vue instance adding the template and mounted functions. The mounted function is a lifecycle hook you can use for when the Vue instance is being instantiated.It allows you to start to interact with the DOM or Virtual DOM in the case of Vue.

In the above example you simply use this.$el to get jQuery to find the element as you would any other jQuery UI code. Looking at the DatePicker API, there is a onSelect function that gets called when the date is changed. To get Vue to use this date object, we need to emit it using self.$emit and a kebab case property that matches a property in the HTML.

In the HTML (actually Razor syntax in this case) we add the element like this:-

Where the same kebab cased property is used to call a function called calculateJulianDate. I have to use two @ symbols here other wise Razor will think it is a segment of Razor code.

Import Into Your Vue Page

So now we come to our page code. Generally I set out my Vue code so all I need to call is run the WebPack CLI command and it will pick up my app.js file (generated from app.ts).

This app.js file simply lists out all the JavaScript files I want to compile into the one script. So I have for example:-

Which includes both page and datepicker scripts.

So at the top of page.ts I again need to do an import, this time for DatePicker which works because we export it from the datePicker.ts file earlier.

We also need to extend the Vue instance similar to what we did earlier and register the component like this:-

Now we also need to add the actual function we specified earlier as a kebab case property, in this case I am calculating the Julian Date from the date object passed in so we use the Vue methods properties like this:-

I have left out the actual function code as it doesn’t add anything to this example, but the take home is it sets a data property which is then bound to the HTML like this:-

Happy coding

Some years ago I started a little library written in F# to perform calculations for astronomy. This was published on an open source platform hosted by Microsoft of which the name escapes me it was that long ago. I never did much maintenance with it for many years and it was just for learning about functional programming. Since then I have created the ObsPlanner website for astronomy which uses many hand written JavaScript routines as well as lots of C# code that do similar things to the JavaScript ones. Because of this I have created a repository on GitHub which I aim to build up over the coming months that is a cross language astronomical library for performing basic functions such as:-

  • calculating Julian dates
  • sun rise/sun set
  • moon rise/moon set
  • moon phases
  • conversions between different times (Local Sidereal Time to Universal Time etc)
  • conversions between different positional systems (Right Ascension and Declination to Altitude Azimuth and vice versa)
  • and many more

I plan on writing this library using TypeScript and C#, so JavaScript can easily be created by simply compiling the TypeScript files. Also I am taking a TDD approach using Jasmine, for JavaScript and MSTest for the C# code.

It is early days, and there is not much there at the moment, in fact I am not even sure how to structure the whole thing, but anyway keep an eye on the repo if you want to be kept up to date with it.


Happy coding

HTTP Endpoint Monitoring for both Windows and Android
WebUp App