Mar 20, 2016

Isomorphic Web Applications with Scala and ScalaJs

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.
Can Google crawl my website successfully? emoji-smile
Fetch as Google your SPA to see the result.

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 function errors 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.

emoji-pencil2 Quiz time:

What does this JavaScript snippet print?

["10", "10", "10", "10"].map(parseInt);

Isomorphic web app with ScalaJs

Many JavaScript frameworks have introduced the server side rendering capability such as Ember's FastBoot, backbone's rendr, Universal Angular2 etc.
Facebook's React in one of them and thanks to the ScalaJs facade you can write your views server side in Scala, compile them to JavaScript with ScalaJs and push them to the client that can take control from there once is ready.

With ScalaJs you can literally be a full stack Scala engineer and also target the mobile world. You can write your React Native mobile application in Scala with React Native interface, compile your code with ScalaJs and deploy it.

Awesome.

You can start learning ScalaJs with the basic tutorial.
I also suggest the Scalatags library, to write HTML in Scala.
You can also find projects and a Single Page Application example here and here.

Keep Learning.
Until next time emoji-sunglasses