icon

TypeScript with Vue.js is the Perfect Fit

On a couple recent projects I have had the opportunity to build web applications using modern JS frameworks. As a self-employed UX Dev I have to balance the fun of bleeding edge technology with the need to be productive and efficient with my time. I’ve done enough little projects with Vue.js at this point to know that it’s my frontend framework of choice. It’s very easy to learn, and fun. It keeps simple things simple.

The best part about building apps primarily with JavaScript is the rapid prototypes and ability to see changes reflected quickly. The Vue webpack templates with hot-reload make this even better, because as soon as you save a component file or SCSS stylesheet you see your change reflected in the browser window.

Vue is a JavaScript framework, but I’ve seen the light of strictly typed languages when I had the joy of developing in the C# world in my recent years. So, now I think that the extra discipline of using TypeScript is well worth it and you get to use brand new language features right away, like async / await and decorators. I’m not certain that decorators are the best thing ever, but I am using them a lot in my recent vue projects because of the wonderful work in vue-property-decorator.

Currently for a server backend I’m using CouchDB which is an excellent choice for web apps that need a data persistence mechanism that resembles “document” storage and especially one that needs revision history… also it’s super-simple to run locally for development on all platforms. And the amazing browser database library PouchDB is the perfect interface for it giving the user offline document access for free.

So, the combination of these elements: Vue, Typescript, and PouchDB/CouchDB make for an excellent application building platform. In the JS development world there’s a lot of interest in the data state management solutions like Redux and Vuex… but, I haven’t used them. I haven’t needed to yet. PouchDB and TypeScript decorators provide a lot of powerful data management flexibility and repeatability so I don’t see the need yet for all of that extra ceremony.

For hosting I definitely can recommend Netlify for all of the static frontend code.

For source control I can say that bitbucket is back on top in my mind, with it’s latest addition of Trello board integration.

I still need to settle on a decent user authentication and user data-storage scheme. I still think Azure Table Storage with it’s concept of PartitionKey and RowKey is a useful pattern which I consider going back to from time to time. Especially when CouchDB on the server has me editing config files through vi late into the night…

I’m really happy with the way Vue, TypeScript, webpack, and the related libraries work together to give me everything I need to write clean and readable and fun frontend code. Here’s the big things I’m still searching for answers to:

  1. User Authentication, Auth0 is nice but it worries me to put such a critical collection of your customer information in a service provider’s claws.
  2. Server-side API logic … you can try to write all your app logic into CouchDB actually… something to consider. I’ll probbly default to a Nodejs express app hosted somewhere like Heroku or Azure. Or a ASP.NetCore API. And then there is serverless options for me to consider.

The web development tools have gotten really powerful and really fast but the learning curve to even get to this point has not been small. And some careful consideration still needs to be had around architecting data persistence and user management. Also, seriously I can not figure out the Google Cloud Compute pricing for virtual machines once my free credits expire.