Friday, January 12, 2018

Isomorphic SmartClient with TypeScript

Short version: Check out the Isomorphic SmartClient TypeScript type defnition library on GitHub.

Longer version (how I get here):
I started out programming thick-client Windows applications for enterprises. The demand for that has significantly decreased over the last 10 years as web technologies have improved immensely. So now I'm an enterprise web application developer. But, coming from a thick-client background, I don't much care for slow, full page refresh applications. And, coming from an Object Oriented Programming background, I don't much care for JavaScript as it lets me make all kinds of mistakes which I do consistently. What to do?

With my first attempt at a single page application (SPA) in 2008-ish, I chose to use GWT and with it the Isomorphic SmartGWT library which contains a ton of widgets that all work together nicely. I learned a lot with that project including Java, GWT, the Isomorphic SmartClient/GWT library, the Net Beans IDE etc. and it worked. Maintaining that application, however, was difficult because I only worked on it once in a while and every time I came back to it, I spent hours updating my environment: Visual Studio, NetBeans, browsers, libraries, GWT etc. and usually at least one of those things would cause my application or development environment to break. So before I could even get to the fixes/enhancements I had planned for the day, I spent hours fixing bugs introduced (or exposed) by the environment updates and then of course testing those fixes.

While I really liked programming in Java compared to JavaScript, the GWT environment seemed unstable to me. It started off with browser plug-ins for debugging which were always behind the browser versions, much of the time it didn't even work with Google's own browser, Chrome, so I was using Firefox sometimes and Chrome other times. The compiler was really slow (with good reason) which slowed down my development cycle. Debugging in the IDE was great when it worked but then it changed to what they called 'Super Dev Mode' which was really just debugging in the browser with map files. I know that Google has many applications using GWT so I know it's a good system... just maybe not for a guy who programs mostly with Microsoft stuff and who's not using it everyday to keep everything up-to-date.

So, for my next attempt at a SPA, I decided to bite the bullet and use JavaScript so that I could still use the Isomorphic SmartClient library (the JavaScript version) and not worry about maintaining multiple IDEs, web servers, plug-ins etc. I could do everything with Visual Studio and IIS. Also, my client probably would not have accepted introducing Java into the house. This worked well also. All I had to do was maintain a bunch of JavaScript instead of Java and only one IDE. Debugging is done in the browser, just like with GWT, just no map files.

But then the application started to get more complicated and maintaining the JavaScript was troublesome. It's no fun to refactor JavaScript because you never know what you're going to break... until you test of course. Yes, there are ways of maintaining OOP-like JavaScript (that's what the SmartClient library does) but that was beyond my pain threshold. So, I looked for alternatives like TypeScript, CoffeeScript etc. that wouldn't require a new IDE. I settled on TypeScript because:
  1. It was created by Microsoft, fully supported in Visual Studio and I work in a Microsoft shop so I knew there wouldn't be any backlash.
  2. It's really gaining in popularity (a la Angular).
  3. There are already a bunch of type definition libraries available for JavsScript libraries like JQuery which makes it really easy to use existing JavaScript libraries.
Unfortunately, there was no type definition library for SmartClient, by far the largest JavaScript library I was using and the face of my application.... bummer. I proceeded anyway figuring I could convert everything except the SmartClient stuff to TypeScript. Since JavaScript is TypeScript, the SmartClient JavaScript still works, it's just not typed and thus still prone to JavaScript errors (of which I had many). I had actually considered TypeScript at the beginning of the project but decided not to go that route because there were no type definitions for SmartClient, figuring someone would build one and then I would switch over. Well, that never happened.

Fortunately I had recently gained a lot of experience with code generation and Isomorphic published an XML file for their documentation that had all the information necessary to build TypeScript typedef libary. I just had to build a code generator to read the file and build the library. It took a while and required some help from Isomorphic to fix up the XML file but it worked. You can find the library on my GitHub page at The library has been working well for me and my client such that we now have a good sized single page application written in C# on the back-end and TypeScript on the client. It has proven to be much easier to maintain and more robust than the JavaScript version.

Now that TypeScript is becoming more mainstream, Isomorphic has announced that they will begin supporting TypeScript in their next version ( which is of course what I was hoping for all along. Everybody wins!

No comments: