data.mdx.frontmatter.hero_image

Elm - pierwsze starcie

2017-02-20 | Elm | bd90

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 funkcji text z parametrem Hello, 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ę!

By Bd90 | 20-02-2017 | Elm