What is an isomorphic web application?
An isomorphism is a mathematical term used to indicate that two things, from an high level perspective, are essentialy the same.
In the context of web applications it means that we have code shared between the front-end and the back-end.
It also means that we can execute the client side code on the server.
With no doubt a more clear and less scary term is Universal web application.
With the traditional approach of an application built with an MVC framework (one that doesn't support server side rendering of your front-end components) and an API backend, the client has to wait for the JavaScript to download and execute until he can finally see something. And we know from studies that a reduction of 100ms of page load can make a big difference.
Why is server side rendering useful?
It's useful for a number of reasons:
- SEO: Having your MVC framework generate the views client side make difficult, if not impossibile, for crawlers to index your application. That's why a number of libraries, such as React, if configured appropriately, can easily render views server side.
- Performance: Server side rendering speeds up the initial page load. The server can pre render the view and send it to the client that can render it until the JavaScript gets downloaded and executed. This is what Twitter did in one year and with 40 engineers.
An example of this architectural pattern is the Meteor framework. You can achieve similar results with the MERN stack.
Must an isomorphic web application necessarily be written in JavaScript?
If you read the title of this blog post you can stay calm and stop comparing the feeling of programming in JavaScript with the one of the time you went skydiving without the reserve parachute.
I know that your front-end code is written in JavaScript but if your codebase is in Scala you can write your client side code in that language and make a transpiler do the dirty work of producing the JavaScript. Or you can do a similar thing with the Lift framework and its JavaScript abstractions.
This is the trend that is emerging. You don't need to write your JavaScript by hand anymore.
JavaScript is becoming the Assembly of the web.
What is ScalaJs?
ScalaJs is a compiler that translates Scala code to JavaScript, and can run on any browser or in an execution environment such as NodeJs. There are also ScalaJs facades to interact with existing libraries such as facebook's React in a typesafe manner.
There are tons of languages that transpiles to JavaScript such as Typescript, Dart, Closurescript, Coffescript just to name a few. All of them are born to reduce the JavaScript tendency of helping you to make mistakes.
I like JavaScript, why should I care about ScalaJs?
-
It's safer.
No more
undefined is not a functionerrors discovered at runtime, maybe in a production environment.You now have strong type checking and lots of errors will be discovered at compile time. Your code will be more robust and your cortisol level will be optimal.
-
You have more expressive, modular and reusable code.
When you start building large (10k+ LOC) and complex Single Page Applications and your codebase grows rapidly, it's better to have a more expressive language in order to express the same concept with fewer lines of code (arrow functions in ES6 make your keyboard last longer).
Less code, less bugs -
Same language for the server and the client.
It's great to know many programming languages but for a web application, maybe with offline support, it's great using only one. This way you reduce code duplication, for example form validation, currency formatting and so on, sharing the business logic code easily with the server. This way you reduce your cognitive load and the probability of making stupid mistakes such as writing
throw new Exception()in JavaScript. -
You also get better tooling and better IDE support.
You can navigate easily your code and refactoring is safer and so easier.
Quiz time:
What does this JavaScript snippet print?
["10", "10", "10", "10"].map(parseInt);
