Ember, Electron, Vue, and TypeScript!
2022 January 13
Electron,JavaScript,Ember,Vue,SQLite,TypeScript

New Job

I started a new job in October. I am glad I took the leap, as it has been quite a learning experience. However, I am not sure if this is the right long-term fit for me.

Ember is ..... different


In my new job, I am responsible for upgrading a large cross-platform desktop app made with Ember and Electron. The app is over 10 years old, and has a lot of long since deprecated code. While I am officially upgrading the app from version 3.x to version 4.1, it is much more like upgrading form 2.x to 4.1. To top things off, apparently one of the previous devs had a fear of ES6.

Keeping my Vue skills sharp, and picking up TypeScript

I love working with Vue, and I hope to eventually end up in a position where I'm working with it every day for my job. I don't want to lose the skills I have in Vue, so I am rebuilding my GPX app with Vue 3 and Electron. I also thought it would be a good chance to really give TypeScript a go. After working with Dart, I really started to appreciate statically typed code. I've done a bit of TypeScript work in the past, but not much. Since I already have the logic worked out for the GPX app, it presented an excellent opportunity to use TypeScript. I also added Bootstrap for styling.


Getting started

I haven't done much on the app so far. I'm just getting used to TypeScript.

One challenge I have tackled, however, is building an interface for the large JSON object that is imported:

// types/index.ts
export interface RootObject {
  gpx: {
    $: {
      creator: string
      version: string
      xmlns: string
      'xmlns:gpxtpx': string
      'xmlns:gpxx': string
      'xmlns:xsi': string
      'xsi:schemaLocation': string
    }
    metadata: [
      {
        name: string[]
        copyright: {
          $: {
            author: string
          }
          year: string[]
          license: string[]
        }
        link: {
          $: {
            href: string
          }
          text: string[]
        }
        time: Date[]
      }
    ]
    trk: {
      name: string[]
      link: {
        $: {
          href: string
        }
        text: string[]
      }
      trkseg: {
        trkpt: {
          $: {
            lat: string
            lon: string
          }
          ele: string[]
          time: Date[]
          extensions: {
            'gpxtpx:TrackPointExtension': {
              'gpxtpx:hr': string[]
            }
          }
        }
      }
    }
  }
}

This took some work, but I really think it helped my understanding of TypeScript.

Up Next

I will keep at it with Ember. I'm trying to reserve judgement on it, but it is difficult not to compare it to Vue. Vue just seems so much more intuitive. In the meantime, I'll keep working on the GPX app in my spare time and improving my TypeScript skills.