JavaScript/TypeScript transpiler workflow

Question

My workflow with JS/HTML has always been

1. write code
2. reload website
3. fix bugs / tweak code
4. goto 2

All my projects are still on AngularJS 1.x, and I'm afraid I have to move on to the TypeScript-cli-transpilation workflow.

I don't really understand it. I always saw an inmense benefit of just being able to hit F5 and then see the result of the JavaScript code.

I don't understand how I can continue using that F5-based workflow when there is a compiler which needs to be invoked before every page reload.

Am I missing something? What is the workflow supposed to look like?

This is not necessarily focused on Angular 2+, as other frameworks seem to want to be compiled as well.

---

About 90% of my JavaScript coding occurs inside an editor which has excellent SFTP-support, so I SFTP into the development machine and edit the HTML/JS live on this development server. I have at least three dozen software servers on about three machines, all with a very clean per-project/server directory structure, so I just have to select the directory in the editor and start editing the files, and reload them in the browser.

Switching to CLI would need to have the CLI-server adapt to the existing directory structure, have the CLI-server run alongside the server which actually hosts the HTML/JS-files. It then somehow needs to compile the modified files and put them into the directory where I usually just go ahead editing the file.

My structure usually is as follows

/project1/data/log.txt
               uploaded.jpg
         /python/server.py
                /server_handler_1.py (auto-reloads)
                /server_handler_2.py (auto-reloads)
                /html/page1.html
                      page2.html
                /scripts/script1.js
                         script2.js
                /static/image1.png
                        image2.png

Then, when all is done, I push it via rsync to the destination server.

I very seldomely code web projects on the local machine. I use no IDE's or "modern" text-editors, mainly because of their lack of good SFTP support, but also because of their performance.

Answer 1

You can continue with the same workflow. The typescript compiler (or, if you're using Angular, the Angular compiler -- which uses typescript compiler under the hood) has a 'watch' mode, so it compiles TypeScript files as you save them, meaning that you can hit F5 an see your changes.

In fact, if you're using the Angular CLI, it automatically updates the web page when you save a file and it compiles the result, so you don't even have to hit F5 at all.

And if you don't use Angular, you can start the TypeScript compiler in watch mode, and it'll compile each typescript file as you save it:

tsc -w

So if that are your worries, you can forget them, and instead think of all the benefits of a typed language.

Answer 2

If you are like me you get no joy in learning how to setup a project these days, but the good news is the workflow, once all configured correctly, has never been better.

Compared to your original workflow you can layer up like so:

Compile in watch mode

Use TypeScript's --watch compiler option:

tsc --watch

Every time a source *.ts file is changed it will incrementally recompile the output *.js files. Now you can edit code and refresh your browser window and see the changes, just like before.

Use an IDE that compiles on save

Many IDEs with support for TypeScript, such as Visual Studio Code and Atom, can compile TypeScript to JavaScript every time you edit a file. Again, now you can simply edit code and refresh browser like you did before, without even needing to use the command line.

Use Webpack

Webpack is a JavaScript bundler. It will be quite intimidating at first, but it's powerful, flexible, and currently an industry standard. You can think of it like a highly configurable build tool for browser development. They have a guide for setting up TypeScript. Once you have configured webpack to handle TypeScript (using ts-loader) you can run the webpack-dev-server. Now code changes will not only incrementally recompile TypeScript on save (in memory, not on the file system), but it will also live-reload the browser window for you. Webpack has a lot of tricks, so the initial setup is well worth it.

(Angular) Use angular-cli

For Angular projects they provide the angular-cli, a tool built on top of Webpack which makes the initial setup and development workflow even simpler.

(React) Use react-create-app

Similarly for React projects they've built create-react-app, a tool to get up and running without much configuration. It has a lot of options that simplify the setup, for example you can easily add Flow, a static type-system similar to TypeScript that works great with React, or you can use create-react-app-typescript which is a fork of the project that enables TypeScript (which also works great with React).

---

Conclusion

I know where you're coming from, I reminisce about the simple days of web development myself, but hopefully I've convinced you that there are some great tools to enable really good workflows today, even better than before! This post actually only scratches the surface.