Psst! Oto dlaczego ReasonReact to najlepszy sposób na napisanie React

Czy używasz React do tworzenia interfejsów użytkownika? Cóż, ja też. A teraz dowiesz się, dlaczego powinieneś pisać aplikacje React za pomocą ReasonML.

React to całkiem fajny sposób na pisanie interfejsów użytkownika. Ale czy możemy sprawić, że będzie jeszcze chłodniej? Lepszy?

Aby było lepiej, musimy najpierw zidentyfikować jego problemy. Więc jaki jest główny problem React jako biblioteki JavaScript?

React nie został początkowo opracowany dla JavaScript

Jeśli przyjrzysz się bliżej React, zobaczysz, że niektóre z jego głównych zasad są obce JavaScript. Porozmawiajmy o niezmienności, zasadach programowania funkcjonalnego, a zwłaszcza o systemie pisma.

Niezmienność jest jedną z podstawowych zasad React. Nie chcesz mutować swoich rekwizytów ani swojego stanu, ponieważ jeśli to zrobisz, możesz doświadczyć nieprzewidzianych konsekwencji. W JavaScript nie mamy niezmienności po wyjęciu z pudełka. Utrzymujemy nasze struktury danych niezmienne przez konwencję lub używamy do tego bibliotek takich jak immutableJS.

React opiera się na zasadach programowania funkcjonalnego, ponieważ jego aplikacje są kompozycjami funkcji. Chociaż JavaScript ma niektóre z tych funkcji, takie jak funkcje najwyższej klasy, nie jest to funkcjonalny język programowania. Kiedy chcemy napisać ładny kod deklaratywny, musimy użyć zewnętrznych bibliotek, takich jak Lodash / fp lub Ramda.

O co chodzi z systemem typów? W React mieliśmy PropTypes. Użyliśmy ich do naśladowania typów w JavaScript, ponieważ nie jest to język o typie statycznym. Aby skorzystać z zaawansowanego pisania statycznego, ponownie musimy użyć zewnętrznych zależności, takich jak Flow i TypeScript.

Reakcja i porównanie JavaScript

Jak widać, JavaScript nie jest zgodny z podstawowymi zasadami React.

Czy istnieje inny język programowania, który byłby bardziej zgodny z React niż JavaScript?

Na szczęście mamy ReasonML.

W Reason otrzymujemy niezmienność po wyjęciu z pudełka. Ponieważ jest oparty na OCaml, funkcjonalnym języku programowania, mamy takie funkcje wbudowane w sam język. Powód zapewnia nam również silny system typowania.

Porównanie reakcji, JavaScript i przyczyny

Rozum jest zgodny z podstawowymi zasadami React.

Powód

To nie jest nowy język. Jest to alternatywna składnia podobna do JavaScript i zestaw narzędzi dla OCaml, funkcjonalnego języka programowania, który istnieje od ponad 20 lat. Powód został stworzony przez programistów Facebooka, którzy już używali OCaml w swoich projektach (Flow, Infer).

Powód, ze składnią podobną do C, sprawia, że ​​OCaml jest dostępny dla osób pochodzących z głównych języków, takich jak JavaScript lub Java. Zapewnia lepszą dokumentację (w porównaniu do OCaml) i rosnącą społeczność wokół niej. Ponadto ułatwia integrację z istniejącą bazą kodów JavaScript.

OCaml służy jako język pomocniczy dla Reason. Powód ma taką samą semantykę jak OCaml - tylko składnia jest inna. Oznacza to, że możesz pisać OCaml przy użyciu podobnej do JavaScript składni Reason. W rezultacie możesz skorzystać z niesamowitych funkcji OCaml, takich jak silny system typów i dopasowywanie wzorców.

Rzućmy okiem na przykład składni Reason.

let fizzbuzz = (i) =>
  przełącznik (i mod 3, i mod 5) {
  | (0, 0) => „FizzBuzz”
  | (0, _) => „Fizz”
  | (_, 0) => „Buzz”
  | _ => string_of_int (i)
  };
dla (w 1 do 100) {
  Js.log (fizzbuzz (i))
};

Chociaż w tym przykładzie używamy dopasowywania wzorców, nadal jest on bardzo podobny do JavaScript, prawda?

Jednak jedynym używanym językiem dla przeglądarek jest JavaScript, co oznacza, że ​​musimy się do niego skompilować.

BuckleScript

Jedną z potężnych funkcji Reason jest kompilator BuckleScript, który pobiera kod Reason i kompiluje go do czytelnego i wydajnego JavaScript z wielką eliminacją martwego kodu. Docenisz czytelność, jeśli pracujesz w zespole, w którym nie wszyscy znają powód, ponieważ nadal będą mogli odczytać skompilowany kod JavaScript.

Podobieństwo do JavaScript jest tak bliskie, że kompilator nie musi wcale zmieniać kodu Reason. Dzięki temu możesz cieszyć się zaletami statycznie wpisanego języka bez zmiany kodu.

dodajmy = (a, b) => a + b;
dodać (6, 9);

Jest to poprawny kod zarówno w Reason, jak i JavaScript.

BuckleScript jest dostarczany z czterema bibliotekami: standardową biblioteką o nazwie Belt (standardowa biblioteka OCaml jest niewystarczająca) oraz powiązaniami z JavaScript, Node.js i interfejsami API DOM.

Ponieważ BuckleScript jest oparty na kompilatorze OCaml, otrzymasz niesamowicie szybką kompilację, która jest znacznie szybsza niż Babel i kilka razy szybsza niż TypeScript.

Skompilujmy nasz algorytm FizzBuzz napisany w Reason do JavaScript.

Kompilacja kodu przyczyny do JavaScript za pomocą BuckleScript

Jak widać, wynikowy kod JavaScript jest dość czytelny. Wygląda na to, że został napisany przez programistę JavaScript.

Powód kompiluje się nie tylko do JavaScript, ale także do kodu natywnego i bajtowego. Możesz więc napisać pojedynczą aplikację przy użyciu składni Reason i być w stanie uruchomić ją w przeglądarce na telefonach z systemem MacOS, Android i iOS. Jest gra o nazwie Gravitron autorstwa Jareda Forsytha, napisana w Reason, którą można uruchomić na wszystkich platformach, o których właśnie wspomniałem.

JavaScript interop

BuckleScript zapewnia nam także interoperacyjność JavaScript. Nie tylko możesz wkleić działający kod JavaScript do bazy kodu Reason, ale kod Reason może również współdziałać z tym kodem JavaScript. Oznacza to, że możesz łatwo zintegrować kod przyczyny z istniejącą bazą kodów JavaScript. Ponadto możesz używać wszystkich pakietów JavaScript z ekosystemu NPM w kodzie przyczyny. Na przykład możesz połączyć Flow, TypeScript i Reason razem w jednym projekcie.

Nie jest to jednak takie proste. Aby użyć bibliotek JavaScript lub kodu w Reason, musisz najpierw przenieść go do Reason poprzez powiązania Reason. Innymi słowy, potrzebujesz typów dla swojego beztypowego kodu JavaScript, aby móc skorzystać z silnego systemu typów Reason.

Ilekroć musisz użyć biblioteki JavaScript w kodzie przyczyny, sprawdź, czy biblioteka została już przeniesiona do Reason, przeglądając bazę danych Reex Package Index (Redex). To witryna gromadząca różne biblioteki i narzędzia napisane w bibliotekach Reason i JavaScript z powiązaniami Reason. Jeśli znajdziesz tam swoją bibliotekę, możesz po prostu zainstalować ją jako zależność i użyć jej w aplikacji Reason.

Jeśli jednak nie znalazłeś swojej biblioteki, musisz samodzielnie napisać powiązania przyczyny. Jeśli dopiero zaczynasz od Reason, pamiętaj, że pisanie powiązań nie jest rzeczą, od której chcesz zacząć, ponieważ jest to jedna z bardziej wymagających rzeczy w ekosystemie Reason.

Na szczęście piszę tylko post o pisaniu powiązań przyczyny, więc bądźcie czujni!

Gdy potrzebujesz funkcji z biblioteki JavaScript, nie musisz pisać powiązań przyczyny dla biblioteki jako całości. Możesz to zrobić tylko dla funkcji lub komponentów, których potrzebujesz.

Powód Reakcja

Ten artykuł dotyczy pisania React in Reason, co możesz zrobić dzięki bibliotece ReasonReact.

Może myślisz teraz: „Nadal nie wiem, dlaczego powinienem używać React w Reason”.

Wspominaliśmy już o głównym powodzie - Powód jest bardziej zgodny z React niż JavaScript. Dlaczego jest bardziej kompatybilny? Ponieważ React został opracowany dla Reason, a dokładniej dla OCaml.

Droga do przyczyny Reakcja

Pierwszy prototyp React został opracowany przez Facebooka i napisany w języku Standard Meta Language (StandardML), kuzynie OCaml. Następnie został przeniesiony do OCaml. React został również przepisany na JavaScript.

Stało się tak, ponieważ cała sieć używała JavaScript i prawdopodobnie nie było mądre powiedzieć: „Teraz zbudujemy interfejs użytkownika w OCaml”. I działało - React w JavaScript został powszechnie przyjęty.

Przyzwyczailiśmy się do React jako biblioteki JavaScript. Reakcja wraz z innymi bibliotekami i językami - Elm, Redux, Recompose, Ramda i PureScript - sprawiły, że programowanie funkcjonalne w JavaScript jest popularne. Wraz z rozwojem Flow i TypeScript popularne stało się także pisanie statyczne. W rezultacie paradygmat programowania funkcjonalnego z typami statycznymi stał się głównym nurtem w świecie frontonu.

W 2016 Bloomberg opracował i skompilował BuckleScript, kompilator, który przekształca OCaml w JavaScript. Umożliwiło im to napisanie bezpiecznego kodu na interfejsie za pomocą silnego systemu typu OCaml. Wzięli zoptymalizowany i niesamowicie szybki kompilator OCaml i wymienili jego natywny kod generujący back-end na kod generujący JavaScript.

Popularność programowania funkcjonalnego wraz z wydaniem BuckleScript stworzyła idealny klimat dla Facebooka, aby powrócić do pierwotnego pomysłu React, który początkowo został napisany w języku ML.

Powód Reakcja

Wzięli semantykę OCaml i JavaScript i stworzyli Reason. Stworzyli również opakowanie Reason wokół React - bibliotekę ReasonReact - z dodatkowymi funkcjami, takimi jak enkapsulacja zasad Redux w stanowych komponentach. W ten sposób przywrócili React do pierwotnych korzeni.

Moc React w rozumie

Kiedy React pojawił się w JavaScript, dostosowaliśmy JavaScript do potrzeb React, wprowadzając różne biblioteki i narzędzia. Oznaczało to również więcej zależności dla naszych projektów. Nie wspominając o tym, że biblioteki te są wciąż w fazie rozwoju i regularnie wprowadzane są przełomowe zmiany. Musisz więc zachować te zależności z rozwagą w swoich projektach.

To dodało kolejną warstwę złożoności do rozwoju JavaScript.

Typowa aplikacja React będzie miała przynajmniej następujące zależności:

  • pisanie statyczne - Flow / TypeScript
  • niezmienna - niezmienna JS
  • routing - ReactRouter
  • formatowanie - ładniejsze
  • poszycie - ESLint
  • funkcja pomocnicza - Ramda / Lodash

Zamieńmy teraz JavaScript React na ReasonReact.

Czy nadal potrzebujemy tych wszystkich zależności?

  • pisanie statyczne - wbudowane
  • niezmienność - wbudowany
  • routing - wbudowany
  • formatowanie - wbudowane
  • linting - wbudowany
  • funkcje pomocnicze - wbudowane

Możesz dowiedzieć się więcej o tych wbudowanych funkcjach w moim innym poście.

W aplikacji ReasonReact nie potrzebujesz tych i wielu innych zależności, ponieważ wiele kluczowych funkcji ułatwiających rozwój jest już zawartych w samym języku. Tak więc utrzymanie paczek stanie się łatwiejsze i z czasem nie będziesz mieć wzrostu złożoności.

Dzieje się tak dzięki OCamlowi, który ma ponad 20 lat. Jest to dojrzały język z wszystkimi podstawowymi zasadami i stabilny.

Zakończyć

Na początku twórcy Reason mieli dwie opcje. Aby wziąć JavaScript i jakoś go ulepszyć. W ten sposób musieliby również poradzić sobie z obciążeniami historycznymi.

Jednak poszli inną drogą. Wzięli OCaml jako dojrzały język o doskonałej wydajności i zmodyfikowali go, aby przypominał JavaScript.

React opiera się również na zasadach OCaml. Dlatego uzyskasz znacznie lepsze wrażenia programistyczne, gdy będziesz go używać z Powodem. React in Reason reprezentuje bezpieczniejszy sposób budowania komponentów React, ponieważ silny system typów ma Cię za plecami i nie musisz zajmować się większością błędów JavaScript (starszych).

Co dalej?

Jeśli pochodzisz ze świata JavaScript, łatwiej będzie Ci zacząć pracę z Reason, ze względu na podobieństwo składni z JavaScript. Jeśli programujesz w React, będzie ci jeszcze łatwiej, ponieważ możesz wykorzystać całą swoją wiedzę o React, ponieważ ReasonReact ma ten sam model mentalny co React i bardzo podobny przepływ pracy. Oznacza to, że nie musisz zaczynać od zera. Dowiesz się o Powodzie w miarę rozwoju.

Najlepszym sposobem, aby zacząć używać Reason w swoich projektach, jest robienie tego stopniowo. Wspomniałem już, że możesz pobrać kod przyczyny i użyć go w JavaScript i na odwrót. Możesz zrobić to samo z ReasonReact. Bierzesz swój komponent ReasonReact i używasz go w aplikacji React JavaScript i odwrotnie.

To podejście przyrostowe zostało wybrane przez programistów Facebooka, którzy intensywnie korzystają z Reason w rozwoju aplikacji Facebook Messenger.

Jeśli chcesz zbudować aplikację przy użyciu React in Reason i poznać podstawy Reason w praktyczny sposób, sprawdź mój drugi artykuł, w którym wspólnie zbudujemy grę w kółko i krzyżyk.

Jeśli masz jakieś pytania, krytykę, spostrzeżenia lub wskazówki dotyczące ulepszeń, napisz komentarz poniżej lub skontaktuj się ze mną za pośrednictwem Twittera lub mojego bloga.