Scala.js, czym jest i jak używać

Scala.js, czym jest i jak używać

Scala.js to w gruncie rzeczy kompilator języka Scala do JavaScript’u. Prosta sprawa – piszemy kod w Scali – dostajemy kod w JavaScript’cie. Scala.js to nie pierwszy stwór, który robi za translatora Scala -> JavaScript. TypeScript robi  to samo – z tym wyjątkiem, że TypeScript to język, który kompiluje sam siebie na JavaScript. Istnieje również CoffeeScript, który również kompiluje się do JavaScript’u. A wszystko po to by mieć większą kontrolę nad pisanym kodem.

Trochę więcej o Scala.js

Scala.js to całe dobrodziejstwo języka Scala zaprzęgnięte do tworzenia front-endu. Poza samym JavaScript’em możemy również tworzyć w nim HTML, a jak mamy HTML oraz JS to znaczy, że mamy cały front-end w zasięgu ręki. Co więcej – nie dostajemy suchego narzędzia, razem ze Scala.js dostajemy możliwość używania bibliotek .js w kodzie Scali – tak zwane fasady (eng. facade). Wiele bibliotek posiada już swoje fasady, wystarczy je zaimportować i można ich używać wedle uznania.
Wsparcie dla IDE, źródło: https://www.scala-js.org/

Dlaczego mielibyśmy pisać JavaScript w języku Scala czy jakimkolwiek innym języki? Dla niektórych jest to herezja, dla tych samych osób język typowany to herezja a zaprzęgnięcie do tego Scali to hańba i ujma na honorze. Wspomniałem kiedyś o tym dlaczego nie pisze w JavaScripcie a w Scali i jednym z głównych powodów braku mojej tęsknoty do JS jest właśnie Scala.js. Mocne typowanie (to zaleta a nie wada ), wydajność tworzonego kodu, wykorzystanie tego samego języka do pisania serwera i klienta to tylko początek zalet takiego rozwiązania. Naszą aplikację możemy pisać w idea IntelIJ – świetnym IDE ze wsparciem typów. Dodatkowo Scala.js umożliwia tworzenie projektów współdzielonych, które pozwalają na dzielenie kodu pomiędzy serwerem a klientem. Taki motyw pozwala na pisanie np. definicji API używanej zarówno na kliencie jak i serwerze czy stosowanie API RPC pomiędzy systemami Scala.

Fasady w Scala.js


@js.native
@JSGlobal
object MojaBiblioteka extends js.Object {
  def pierwiastek(text: String): js.Any = js.native
  def fibonacci(value: Int): Int = js.native
  def MD5(value: js.Any): String = js.native
}

Listing nr 1

Zdecydowanie na większą uwagę zasługują fasady – czyli takie „API” pomiędzy biblioteką napisaną w JavaScript’cie a Scalą. W Scali nie mamy dostępu do każdej biblioteki JS’a – dlatego możemy zaimportować ją na naszej stronie jak normalną bibliotekę a w Scali napisać fasadę, której później będziemy używać. Żeby sprawa była jasna – nie musimy pisać dużo, a na pewno nie przepisywać funkcji na nowo.
Powyżej znajduje się przykład takiej fasady w Scali.js dla biblioteki MojaBiblioteka(postarałem się z tą nazwą). Pozwolę sobie nie wyjaśniać całych opisów używanych adnotacji, ważne jest, że @JSGlobal mówi Scali.js, że po stronie JS’a jest biblioteka o nazwie MojaBiblioteka. Funkcje zadeklarowane w obiekcie MojaBiblioteka to niekoniecznie muszą być wszystkie funkcje, w bibliotece może być ich tam sto, my użyć chcemy tylko 3 i te 3 deklarujemy. By napisać deklaracje funkcji to co musimy wiedzieć to ile przyjmuje argumentów i jakiego są mnie-więcej typu. Gdy tego nie wiemy albo funkcja przyjmuje dowolny argument, to piszemy js.Any i funkcja łyknie każdy typ. Do tego dopisujemy jako deklarację metody js.nativevualá – to wszystko. Teraz gdy w kodzie Scali wywołamy MojaBiblioteka.fibonacci(7) zostanie zwrócona wartość równa 13.
Fasady mogą naprawdę uprzyjemnić życie i dostarczyć wiele przydanych narzędzi. Jedną z gotowych i bardzo gorąco polecanych fasad jest fasada React’a. Jest zrobiona porządnie, aktualizowana na bieżąco i sprawia, że pisanie w Scali części front-end’owej to czysta przyjemność. Listing nr 2 demonstruje wykorzystanie funkcji render z biblioteki React’a do wyświetlenia bardzo ciekawego napisu w dwóch kontenerach. Warto również zwrócić uwagę na sposób tworzenia tagów <.div() – jakże przypomina to pisanie w HTML’u… O samych fasadach można poczytać w oficjalnej dokumentacji Scala.js.

def render(p: Props): VdomElement = {
  <.div(
    <.div(
      <.h1("PawsCode !"),<.br()
      <.p("Kolejny blog o programowaniu!")
    )
  )
}    

Listing nr 2

Scala.js w aplikacjach webowych

Narzędzie Scala.js można wykorzystywać jako stand-alone do kompilowania Scali na JS’a ale można również połączyć go np. z Play Framework i stworzyć całkiem solidną aplikacje webową! Jednym z moich projektów było właśnie wykorzystanie Play! wraz ze Scala.js do stworzenia monitora stron internetowych Gamma WebMonitor. Podczas tworzenia tego projektu zauważyłem jak dużo rzeczy musiałem tworzyć od podstaw. Postanowiłem, że najpierw zrobię solidną bazę a później na tych fudamentach zbuduję swoją aplikację.
Strona logowania mojego szkieletu aplikacji
To na czym mi zależało to SPA czyli by moja aplikacja zachowywała się jak Single Page Application. Dodatkowo chciałem mieć autoryzację użytkowników – ale nie taką nachalną – już z googlem, kluczami API i zaawansowaną integracją. W aplikacji zależało mi również by mieć nie jednego a dwóch klientów – by oddzielić część logowania od części aplikacji właściwej. Ważne też, by aplikacja uruchamiała się w kontenerach Docker, korzystała z MongoDB, implementowała API RPC itd. itd. Miałem swoje powody!
Ogólnie rzecz biorąc Scala.js + Play Framework to maszyna do tworzenia każdej aplikacji webowej o jakiej tylko możecie pomyśleć. Play! sam w sobie może generować front-end, ale nie jest to tak przyjemne jak z wykorzystaniem Scala.js. Gdyby ktoś chciał przeglądnąć przykładowe projekty z użyciem Scali.js są one dostępne na oficjalnej stronie Scala.js. Znajduje się tam również mój projekt i nosi wszystko mówiącą nazwę: „Play | Scala.js | React – web application skeleton”.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Back to top