Web development is getting more complex by the day and all the tooling and frameworks introduce more and more overhead whenever I want to quickly prototype something. No more!
Introduction
Writing web apps or just AngularJS modules today requires just too many steps before I actually get to write any code. Sometimes I just want to create a quick prototype or a module outside of the main application. But having to go through the entire project setup phase is just exhausting and demotivational.
So I decided to focus just on the application code, and kinda patch quickly all the other parts. This can be done through some scaffolding tools like Yeoman if you have time to discover everything, but since I use Visual Studio, I should really be taking advantage of that.
Setting up the infrastructure
So lets focus on the goal here. I want my prototype app or module to be decoupled from all the frameworks, infrastructure and other parts of a potentially larger application. That means NO Bower, Nuget, NPM, Webpack, Gulp, Grunt, MSBuild, whatever… We need to go old school!
Just like when you use Plunker, JSFiddle or something else, you would just include external libraries from a CDN. If there is no CDN available, just drag-and-drop the file into your scripts folder, and then include it in your index.html file. As for typings .d.ts files, just download those into a separate folder.
AngularJS with TypeScript
I want my .ts files and a generated .js file I can include in index.html file. Available for about a year is tsconfig.json which works great with the editor. This configuration file just tells your editor how to work with the typescript files, for which you would have to use a task runner before. One thing less in my quick setup.
This, together with Visual Studio, is the infrastructure I need to go from TypeScript to JavaScript.
Simple AngularJS setup
I created a simple project as a starting point for an app or module. This includes Bootstrap and AngularJS libraries, typings, and a simple module with a controller and a service. There is also a configured tsconfig.json file that compiles all TypeScript files.
Conclusion
Now that the base is defined, I could easily build number of modules and couple them in a larger application. If there is a module I need, like a Bootstrap datepicker - I would just include that library from CDN or copy the code from GitHub.
This way I have a quick demo and a well organized prototype.