Personal Finance Win10 App – Part 1

Before I write another word, let me just list the JavaScript libraries I used for this project: Knockout, Pager, Moment, Numeral, Underscore, CanvasJS, jQuery. I am now intimately familiar with Knockout, Pager and Moment. I spent probably several hours fiddling with Moment’s formatting, parsing and setting methods to get the right settings for Japan. Oh yeah, this app is for the Japan market, so it’s entirely in Japanese.

Alright so…

I started out with WinJS. Microsoft’s JavaScript offering is actually pretty cool … if you’re building Microsoft-looking apps and want to use Microsoft-looking controls in your app. They’re great when you want to get a prototype of something up and running quickly. I’m guessing these controls also pretty much the default a lot of developers go with when coding their apps in C# with XAML. I, however, opted for JavaScript, because I feel a lot more comfortable in that world than C#.

Ultimately, I ended up dropping WinJS and going with the tried and true jQuery UI with Knockout bindings. However, I dropped those too after a couple days and defaulted to my own solutions, because I needed more granular control over how content was being rendered. I’ll mention this now and probably again later in this article, but rendering Kana/Kanji is totally different than English or any other Latin-based alphabet. Buttons suddenly go from being 150 pixels wide to 50 and look weird. It really didn’t work with any of the jQuery UI widgets very well since they use pretty tiny font to achieve good usability.

To get the widgets I needed, I had to write my own components. I wrote my own datepicker, because the way date is displayed in Japan is different; not just the order of day, month, year, but they also display the actual Kanji for the day, month and year after the number. I wrote my own dropdown, because I needed the font to be bigger without breaking wrapping inside the controls. I also wrote my own filter, styled all inputs and wrote a few other custom components tailored specifically to Kana/Kanji.

Another thing I needed to write that doesn’t exist anywhere is a Knockout binding wrapper for CanvasJS. I actually started out with ChartJS as my graphing library of choice, but after a week of fighting with it, I dropped it like a bad habit and dipped my toes into CanvasJS. Love it. Awesome library, 5/5 stars would visit again. While the app currently only has one pie chart graph, I plan on adding two more in future releases, and I know CanvasJS can build them for me.

Last thing I want to mention in Part 1 is about mobile. Before I even wrote one line of code, I did a bit of market research. My goal was to target a market that wasn’t flooded with Personal Finance apps. Android and iOS are full of them for all languages (even Afrikaans). Windows 10, or actually Windows in general is theoretically a platform with a potentially wider audience, despite the [currently] smaller install base. Thing is, Windows Phone is a joke pretty much everywhere except Seattle where Microsoft basically slips them under your pillow while you’re asleep. So to sum it up: Android and iOS are flooded and Windows Phone is non-existent. Desktop Windows however … is nearly barren in this category, especially in foreign markets. Bam!

In the next part I’ll cover some of the logical challenges I encountered while writing the app both from design and coding perspectives.