Full-stack Development with TypeScript

[If you’d like to skip my rambling and get started with full-stack TypeScript dev, check out my clyde project on GitHub.]

Recently I started work on a new web application. I am the only developer, so I had complete freedom to choose the stack.

I’ve worked on many apps over the years that used a “split stack” like AngularJS on the front-end and C#/MVC on the backend. These apps turned out well, but you’d often have a lot of redundancy when it came to models: C# domain models and view models on the back-end, and the corresponding JavaScript objects on the front-end. These JS objects often had no linting, code prediction, or any of the nice features you’d get on the C# side.

I chose Angular 2 for the front-end of the new app, which introduced me to TypeScript. The language seems to bridge the gap between something like C# and JavaScript. I really like having the flexibility of JS with the added bonuses of a strongly-typed language.

I added a node.js RESTful API that uses TypeScript as the backend, instead of C#. This allowed me to consolidate models in a common project. I also added some model utility functions that utilize reflection (see reflect-metadata). Both the models and utility functions can be accessed from anywhere: front and back-end.

clyde-flow

 

Using Visual Studio Code as the IDE for development has been fantastic. The performance is great, it runs on my Mac, and the built-in terminals make it easy to serve the entire stack locally. I see this as a huge productivity improvement over proper Visual Studio, which always takes a while to start, build, run in debug, etc.

If you’re interested in trying out this approach, I created a boilerplate project on GitHub called clyde. I’ve set it up so that you can clone the repo and start developing immediately. The front-end Angular project includes a service that connects to the backend API and retrieves sample user data. Using this approach, you could easily add code to the back-end to pull data from a database or third-party API.

We’ll see how it goes once this app moves into Production. Stay tuned for a part 2 blog post.

[Also, here’s a picture of my fat cat Clyde, who is the inspiration for the name.]

IMG_4464.JPG

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s