W ubiegłym roku, podczas konferencji programistycznej PolyConf, po raz pierwszy spotkałem się z językiem programowania Elm. Nie będę kłamał - urzekł mnie. W pociągu, wracając z eventu, napisałem post-a (na starą wersje bloga) o początkach pracy z tym językiem. Od tamtego dnia minęło kilka miesięcy, a ja nadal jestem nim zauroczony. Myślę, że i na tej wersji bloga nie powinno zabraknąć wzmianek o nim.
Co to jest?
Zaczynając od początku: Elm to język całkowicie funkcyjny. Jego twórca, Evan Czaplicki, wzorował jego składnię na podstawie Haskell-a. Jego zaletami są:
- Immutable (po stworzeniu zmiennej, jej wartość nie może zostać zmieniona)
- Statyczne typowanie (W odróżnieniu od JavaScript-u, Elm wymusza statyczne typowanie. Znaczy to, że przy tworzeniu zmiennej, po zdefiniowaniu metody musimy podać jej typ ('int', 'string', etc.))
- Prosty system modularności (umożliwia dzielenie kodu na mniejsze kawałki, pozwalający na importowanie i exportowanie wartości z modułów)
- Możliwość komunikacji z bibliotekami JavaScript (zawiera wbudowany mechanizm portów pozwalający na przesyłanie informacji z/do części kodu napisanego w JavaScript)
Język wspiera takie typy jak:
- Prymitywy ('int', 'string')
- Struktury danych takie jak lista czy słownik
- Typy zdefiniowane przez użytkownika
Instalacja
Zainstalować Elm-a na swoim komputerze można na kilka sposobów:
- Instalator dla platformy Mac
- Instalator dla platformy Windows
- Za pomocą paczki npm
- Zbudować z źródeł
Osobiście wybrałem instalacje przez npm-a. Tej sposób wydał mi się najprostrzy. Wystarczy jedna komenda:
$ npm i -g elm
Aby po chwili wszystko było gotowe.
Elm CLI
Po instalacji otrzymujemy do dyspozycji CLI (Command Line Interface). Otrzymanie spisu wszystkich metod jest proste, wystarczy w konsoli wpisać:
$ elm
Elm Make
Polecenie make buduje projekt. Oznacza to że wszystkie źródła zostaną przekompilowane do postaci HTML + JavaScript.
$ elm make
Jest to najbardziej podstawowa wersja budowania aplikacji. Stosuje się ja w momencie, gdy aplikacja jest już zbyt duża, aby korzystać z reactor-a.
Innym sposobem budowania apki jest webpack z odpowiednim loader-em, jednak o tym napiszę w oddzielnym poście.
Elm Reactor
Narzędzie to służy do łatwiejszego tworzenia aplikacji. Uruchomiamy go za pomocą komendy:
$ elm reactor
Otrzymujemy serwer, który udostępnia nam wszystkie pliki z katalogu. Jeżeli otworzymy jakiś plik *.elm to zostanie on automatycznie przekompilowany do postaci HTML i JavaScript. Jest to idealne narzędzie do tworzenia prototypów aplikacji. W przypadku większych projektów przychodzi moment, kiedy trzeba się przerzucić na natywnego elm make lub elm-loader i webpack.
Elm Package
Jest to interfejs do zarządzania paczkami w aplikacji. Pozwala na ściąganie jak i upublicznianie paczek z/do package.elm-lang.org
Po wpisaniu komendy:
$ elm package
w konsoli zobaczymy wszystkie możliwe metody, które możemy wywołać w tym interfejsie:
- install - zainstaluj paczkę lokalnie
- publish - opublikuj paczkę
- bump - podbij wersję paczki w zależności od zmian w publicznym API
- diff - zobacz różnicę pomiędzy starym a nowym API
Przykładowo, jeśli nasza aplikacja potrzebuje korzystać z modułu http, to musimy wykonać komendę:
$ elm-package install elm-lang/http
Spowoduje to dodanie tej paczki jako zależność do pliku elm-package.json i ściągnięcie paczki do katalogu elm-stuff.
Elm repl
Read-Eval-Print Loop to narzędzie pozwalające uruchomić interpreter Elm-a w konsoli. Dzięki temu można w szybki sposób sprawdzić, czy składnia, którą chcemy napisać, jest poprawna. Read-Eval-Print Loop to idealne narzędzie do nauki i poznania języka.
$ elm repl
Pierwsza aplikacja
Teraz, kiedy środowisko mamy postawione i omówione, możemy przejść do tego, co tygryski lubią najbardziej - samego mięcha :)
Stwórzmy plik Hello.elm. Następnie trzeba go uzupełnić działającym kodem, który wygląda następująco:
https://gist.github.com/BlackDante/0b80592cb39dd1db6c7becd5d06e122c
Zanim uruchomimy kod, omówmy co tutaj się dzieje.
Zaczynając od samej góry:
- w pierwszej linii importujemy moduł
Html,z którego wyciągamy funkcjętext. - Od linii trzeciej przechodzimy do całej logiki naszej aplikacji, mianowicie definiujemy funkcję
main, której jedyne zadanie to zwrócenie wartości wywołania funkcjitextz parametremHello, World!.
Wten sposób otrzymujemy nieśmiertelną apkę "Hello World".
No dobra, mamy już środowisko, kod źródłowy, w końcu można przejść do uruchomienia aplikacji. W konsoli musimy przejść do miejsca, gdzie znajduje się plik Hello.elm , po czym wywołać komendę make z parametrami:
$ elm make Hello.elm --output=Hello.html
Elm w pierwszej kolejności zapyta nas o pozwolenie na ściągnięcie brakujących paczek i stworzenie pliku elm-package.json. Służy on do przechowywania informacji zarówno o zależnościach aplikacji jak i o wersji jej i samego języka Elm etc.
W ten sposób otrzymaliśmy plik Hello.html, który możemy otworzyć w przeglądarce, gdzie wyświetli piękny napis "Hello World".
Podsumowanie
To by było na tyle w tym poście. Mam nadzieje, że przyda się wam wiedza w nim zawarta. Pamiętajcie żeby wróci na mój blog za jakiś czas - pokaże więcej informacji na temat języka programowania Elm.
Trzymajcie się!