The Frontend Hitchhiker's Guide: JavaScript Alternatives
Tags: flutter, angular, codenewbie, webdev
Published: 2021-07-11 02:17:20

# Introduction
Web development... Without JavaScript? While the idea might seem inconceivable, there are many alternative languages for building frontend web apps. Let's take a look at them.

# But first... Web Assembly

The default runtime of the web browser is JavaScript. However [Web Assembly](https://webassembly.org/) is a very interesting language that is recently supported by modern browsers. 

One cool thing about web assembly is that it is often used as a compile point to migrate code in other languages to run on the browser!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rotvtjo2byev6axev19.png)

[Image Credit](https://www.interlogica.it/en/insight-en/webassembly-why/)

While the JavaScript alternatives that we will explore let's you **write** apps in a different language, they are eventually **compiled** to JavaScript or Web Assembly for production.

# Non-JS Frameworks

1. [Angular](#angular)
2. [Scala.js](#scala-js)
3. [Yew](#yew)
4. [Clojure Script](#clojure-script)
5. [Emscripten](#emscripten)
6. [Flutter](#flutter)
8. [Kotlin](#kotlin)
7. [Blazor](#blazor)

## [Angular](https://angular.io/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uaok3ux75xb9d7m5z7fr.png) 

Angular.JS was originally released in 2012 but was reworked from the ground up in 2015 for version 2. The major change being the language of the framework switching from JavaScript to Typescript hence its rebranding to Angular.

Angular is known for its moderate learning curve but that's what you get for an all in one framework. Angular supports features such as routing, ajax, SSR, translation, routing, http, animations, testing and much more.

## [Scala JS](https://www.scala-js.org/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzdtj9n3sffwtpaxl89s.png)
 
Scala.js let's you transpile applications written in the programming language [Scala](https://www.scala-lang.org/) into JavaScript. Scala.js boasts correctness, performance and interoperability with other JavaScript frameworks. 

Scala is often seen as a java alternative so if you already know java this might be interesting for you to look at.


## [Yew](https://yew.rs/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtaaxwt8wqkfgsdfx2pf.png)

Yew is a framework built on top of a promising programming language called [rust](https://www.rust-lang.org/) and then is transpiled into web assembly as a web app. A big sell of Yew is that apps built with it can be mutli-threaded due to the web assembly runtime. Yew is also interoperable with javascript npm packages.

## [Clojure Script](https://clojurescript.org/index)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grdod1gw2t13cbtoguhu.png)
 
[Clojure](https://clojure.org/) is a dynamic, general purpose language based on another language called [Lisp](https://en.wikipedia.org/wiki/Lisp_(programming_language)). Because of this its syntax looks very different from the other languages featured in this list.

The ClojureScript compiler will allow you to port your Clojure programs to the web.

## [Emscripten](https://emscripten.org/docs/introducing_emscripten/about_emscripten.html)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnlb8efy184k96pg2iug.png) 

Emscripten is just another example of the power of web assembly. It is a compiler that can transpile your C/C++ code to web assembly. Emscripten was used to 
port the 30 year old software [AutoCad](https://web.autocad.com/) to the web (which is really nuts if you think about it)!

## [Flutter](https://flutter.dev/web)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhw4ef14krjqxfxchapg.png) 

Flutter is framework created by google that is built with the dart programming language. Flutter was originally made for building for cross platform IOS and Android apps but today you can also use it for the web! The prospect of having one code base for Web, IOS and Android is an attractive one indeed.


## [Kotlin](https://kotlinlang.org/docs/js-overview.html#use-cases-for-kotlin-js)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0stkjr1scsxj2t5bqnz.png) 

Like Flutter, Kotlin was created for building mobile apps, specifically as a java sdk alternative for android. Since then, kotlin has ambitiously positioned itself as a general purpose language. Whether is for web apps, data science, native or server-side programming, you can use Kotlin! Kotlin is transpiled into JavaScript when used for web.

## [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1yurir52aq1lt866wbq.png)
 
Blazor is a framework by Microsoft written in the [C#](https://en.wikipedia.org/wiki/C_Sharp_(programming_language)) programming language and [.NET](https://dotnet.microsoft.com/). Like flutter and Kotlin, .NET is a cross platform technology that lets you build for web, mobile, desktop and more. Blazor lets you compile your C# code to web assembly to run in the browser but you can also run it server side. Blazor can interop with other Javascript libraries such as React or Vue.


# Conclusion
I'm sure in this post you would have seen at least 2 programming languages you that you never heard of before. Exploring new technologies is what the hitchhikers guide is all about. Yet, it seems that this 2 month long journey is soon reaching its end... See you next week for our final stop!

# Resources
* [What is WASM?](https://www.interlogica.it/en/insight-en/webassembly-why/)
* [11 Frontend frameworks that are written with backend languages.](https://codesight.medium.com/10-frontend-frameworks-that-are-written-with-backend-languages-f73fa29fcf78)
* [AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web](https://www.infoq.com/presentations/autocad-webassembly/)
* [Blazor in a Nutshell](https://dev.to/zwdor20/blazor-in-nutshell-5g75)