From Java to Javascript

In this article I want to share my experiences trying to get started with language engineering on the web while coming from Java. Although I was trying to do language engineering, I think this article can be useful to any programmer who wants to enter the world of Javascript and the Web platform.

From the JVM to the Web

I think the main problem that I had approaching the web was not considering it as a platform on the same level of the JVM. I thought of it like just adding some Javascript to a web page to have the UI for my powerful backend. However, the web has gone a long way from the simple scripts people were doing 20 years ago. It is now a platform in its own right and it needs a lot of tooling to make the amazing things it does.

Now, let us offer an overview of the web for someone who comes from Java.

The run-time environment

If you come from Java, your run-time is the Java Virtual Machine. An excellent, mature and reliable piece of software that can run on most hardware with an acceptable performance. The web platform has two of such environments: nodejs and the browser. Nodejs is like the JVM, but for Javascript. Just take your Javascript program and run it on the nodejs run-time environment. It allows to run Javascriopt programs, just like you run Java programs on the JVM. The other run-time environment is the browser. It allows to run Javascript programs in the browser, as they were originally intended.

The package manager

In Java we have maven and ivy. maven is both a package manager and a build tool, ivy is just a package manager. In Javascript, we have yarn and npm, both are package managers. They allow to get the dependencies for the project.

Packaging your code

In Java we have the jar. Since Javascript is an interpreted language the natural packaging would be the code itself, and it can be. However, modern applications can contain several dependencies (packages). Also, running code in the browser usually requires downloading each dependency or the code itself. To improve performance, there are packagers like webpack and rollup. They can do things like minify (compress the code for better transfer speed), uglify (obfuscate the code), dead code elimination, transpile (transform code from other higher level languages, like Typescript) and a buch of other stuff. This allows better and simpler distribution through the browser.

Transpiling your code

In Java we have that Java compiler, but we have also other languages that target the JVM through compilation, like Scala or Clojure. The same thing exists in Javascript, we have for example Typescript, that transpiles to vanilla Javascript. This involves adding a transpiler to the toolset. For example, the Typescript transpiler is tsc. The packager can run this transpiler and package the code in vanilla Javascript.

Modular code

In java we usually have packages, bundled in jar files, that are part of a classpath. If a package is in classpath, we can directly import it. When Javascript was created, it was not thought to be used like that, so several ways of having modules were implemented. Some of these are CommonJS and AMD. Later, subsequent versions of the language added native support for modules. It seems that today transpilers and packages take care of this for you. It is just important to know that this is the way it is in Javascript.

Conclusion

My suggestion to start with the web world would be to just choose some of the tools and start using them until you are confortable with the different workflows.