Technology is changing continuously. This is how your coding workflow might evolve. It is a simplified version of my journey which certainly was and is not as straight forward as described here.
This post focuses on web development with node.js and github for your code hosting.
Local development
At first you start like everyone by installing everything you need locally. You install node.js, git and vscode on your laptop.
This has the least amount of overhead in terms of configuration and setup is easy to get everything up and running. The first problem arises when you want to work on multiple projects with different versions of node. This is when you learn about nvm - node version manager; problem solved.
But what happens when you switch computers - you have to set up everything again and good luck getting the same version of everything.
The next natural progression is to put your application into a docker container. So you create a Dockerfile and install everything you need to build the application inside a container. Because you most likely need a database too, you create a docker-compose.yml file to define and start your application and database together.
But what about vscode? You propably have multiple plugins installed. You can use github to sync your vscode config but if you also work on projects with different programming languages and toolchains some plugins might conflict with another. Also if you work with different people on the same project you want a way for everyone to easily have the same plugins installed.
Introducing devcontainer. With creating a devcontainer.json file in your project you can also define plugins you want to install for this specific project, scripts you want to run to setup you application initially and many other things.
Great, but what if you want to work on your project on a computer where no docker nor vscode is installed? This when you explore options to work on your project remotely.
Remote development
Because you use github you come across github codespaces. A codespace is an instant remote development environment in the cloud. Luck you because you already have a devcontainer.json file. You can create a new codespace directly from your github repository. Github will create a new virtual machine in one of their data centers, clone your repo into it, build your Dockerfile, run scripts you have defined in your devcontainer.json file, setup vscode with all your plugins and give you access to all of it via the browser. Fantastic! 🥳🎉
Please keep in mind that you are actively using resources in the cloud and github does not offer this for free. They provide a generous free tier with many hours of free usage each month but if you use it heavily you might run out of free time. You will have to actively set a spending limit if you want to use it more.
Browser based development
The browser can run JavaScript so you might start to ask yourself why it can not your backend code wich is also written in JavaScript too. Introducing WebContainers and StackBlitz powered by WebAssembly. What is all of this?
- WebAssembly is a binary format for a virtual machine. The main goal of WebAssembly is to enable high-performance applications on web pages but it can also be used outside the context of web pages.
- WebContainers WebContainers are a browser-based runtime for executing Node.js applications and operating system commands, entirely inside your browser tab.
- StackBlitz StackBlitz is an instant fullstack web IDE for the JavaScript ecosystem.
You can now run your node.js application locally (!) inside the browser.
What about your database? Unless you use an exotic database written in javascript, you will not be able to run it in your browser, yet. If you are still reading your are propably into serverless and do not run your own database at all.
So we came full circle. This is a phenomenon you can observe in many areas of tech.