Jakie to uczucie uczyć się JavaScript w 2016 roku

Podczas pisania tego artykułu nie stworzono żadnych frameworków JavaScript .

Poniższy tekst jest inspirowany artykułem „It's the future” z Circle CI. Oryginał można przeczytać tutaj . Ten artykuł jest tylko opinią i jak każdy framework JavaScript, nie należy go traktować zbyt poważnie.

Hej, mam nowy projekt webowy, ale szczerze mówiąc, nie kodowałem zbyt wiele webów od kilku lat i słyszałem, że krajobraz trochę się zmienił. Jesteś najbardziej aktualnym web developerem w okolicy, prawda?

- Prawdziwy termin to inżynier front-end, ale tak, jestem właściwym facetem. Zajmuję się webem w 2016 roku. Wizualizacje, odtwarzacze muzyki, latające drony grające w piłkę nożną, cokolwiek. Właśnie wróciłem z JsConf i ReactConf, więc znam najnowsze technologie tworzenia aplikacji webowych.

Fajnie. Muszę utworzyć stronę, która wyświetla najnowsze działania użytkowników, więc muszę tylko pobrać dane z punktu końcowego REST i wyświetlić je w jakiejś filtrowalnej tabeli, a także zaktualizować je, jeśli coś się zmieni na serwerze. Myślałem, że może użyć jQuery do pobrania i wyświetlenia danych?

-O mój Boże, nie, nikt już nie używa jQuery. Powinieneś spróbować nauczyć się Reacta, mamy 2016 rok.

O, OK. Co to jest React?

- To super biblioteka stworzona przez grupę ludzi z Facebooka. Naprawdę zapewnia kontrolę i wydajność Twojej aplikacji, pozwalając Ci bardzo łatwo zarządzać wszelkimi zmianami widoku.

Brzmi fajnie. Czy mogę użyć React do wyświetlania danych z serwera?

- Tak, ale najpierw musisz dodać React i React DOM jako bibliotekę do swojej strony internetowej.

Poczekaj, dlaczego dwie biblioteki?

- Jedna jest faktyczną biblioteką, a druga służy do manipulowania DOM, co teraz można opisać w JSX.

JSX? Co to jest JSX?

-JSX to po prostu rozszerzenie składni JavaScript, które wygląda bardzo podobnie do XML. To inny sposób na opisanie DOM, pomyśl o tym jak o lepszym HTML.

Co jest nie tak z HTML?

- Jest rok 2016. Nikt już nie koduje bezpośrednio w HTML.

Dobrze. Tak czy inaczej, jeśli dodam te dwie biblioteki, to mogę używać React?

- Niezupełnie. Musisz dodać Babel, a potem będziesz mógł używać React.

Kolejna biblioteka? Czym jest Babel?

- Och, Babel to transpilator, który pozwala na kierowanie na konkretne wersje JavaScript, podczas gdy kodujesz w dowolnej wersji JavaScript. Nie MUSISZ dołączać Babel, aby używać ReactJS, ale jeśli tego nie zrobisz, będziesz zmuszony używać ES5, a bądźmy szczerzy, mamy 2016 rok, powinieneś kodować w ES2016+, tak jak reszta fajnych dzieciaków.

ES5? ES2016+? Gubię się tutaj. Czym jest ES5 i ES2016+?

-ES5 to skrót od ECMAScript 5. Jest to edycja, na którą decyduje się większość użytkowników, ponieważ została zaimplementowana w większości współczesnych przeglądarek.

Czy to jest ECMAScript?

- Tak, wiesz, standard skryptowy JavaScript był oparty w 1999 roku po jego pierwszym wydaniu w 1995 roku, wtedy JavaScript nazywał się Livescript i działał tylko w Netscape Navigator. Wtedy było to bardzo chaotyczne, ale na szczęście teraz wszystko jest jasne i mamy, jak, 7 edycji tej implementacji.

7 wydań. Naprawdę. A ES5 i ES2016+ są?

- Odpowiednio piąte i siódme wydanie.

Poczekaj, co się stało z szóstym?

- Masz na myśli ES6? Tak, mam na myśli, że każda edycja jest rozszerzeniem poprzedniej, więc jeśli używasz ES2016+, używasz wszystkich funkcji poprzednich wersji.

Jasne. A dlaczego w takim razie używać ES2016+ zamiast ES6?

-Cóż, MOŻESZ użyć ES6, ale aby użyć fajnych funkcji, takich jak async i await, musisz użyć ES2016+. W przeciwnym razie utkniesz z generatorami ES6 z coroutinami, aby blokować asynchroniczne wywołania dla prawidłowego przepływu sterowania.

Nie mam pojęcia, co powiedziałeś, a wszystkie te nazwy są mylące. Słuchaj, po prostu ładuję masę danych z serwera, kiedyś mogłem po prostu dołączyć jQuery z CDN i po prostu pobrać dane za pomocą wywołań AJAX, dlaczego nie mogę tego po prostu zrobić?

- Jest 2016, człowieku, nikt już nie używa jQuery, kończy się to kupą spaghetti code. Każdy to wie.

Dobrze. Więc moją alternatywą jest załadowanie trzech bibliotek w celu pobrania danych i wyświetlenia tabeli HTML.

- No cóż, dodajesz te trzy biblioteki, ale łączysz je za pomocą menedżera modułów, aby załadować tylko jeden plik.

Rozumiem. A co to jest menedżer modułów?

- Definicja zależy od środowiska, ale w sieci zwykle mamy na myśli wszystko, co obsługuje moduły AMD lub CommonJS.

Jasne. A AMD i CommonJS to…?

-Definicje. Istnieją sposoby opisania, jak wiele bibliotek i klas JavaScript powinno współdziałać. Wiesz, eksporty i wymagania? Możesz napisać wiele plików JavaScript definiujących API AMD lub CommonJS i możesz użyć czegoś takiego jak Browserify, aby je połączyć.

OK, to ma sens… Myślę. Czym jest Browserify?

-To narzędzie, które pozwala na pakowanie opisanych zależności CommonJS do plików, które można uruchomić w przeglądarce. Zostało stworzone, ponieważ większość osób publikuje te zależności w rejestrze npm.

rejestr npm?

-To bardzo duże publiczne repozytorium, w którym inteligentni ludzie umieszczają kod i zależności w postaci modułów.

Coś jak CDN?

- Niezupełnie. To raczej scentralizowana baza danych, w której każdy może publikować i pobierać biblioteki, więc możesz ich używać lokalnie do rozwoju, a następnie przesyłać je do CDN, jeśli chcesz.

O, jak Bower!

- Tak, ale teraz jest rok 2016 i nikt już nie używa Bowera.

Aha, rozumiem… więc muszę pobrać biblioteki z npm?

- Tak. Na przykład, jeśli chcesz użyć React, pobierasz moduł React i importujesz go do swojego kodu. Możesz to zrobić dla prawie każdej popularnej biblioteki JavaScript.

O, jak Angular!

-Angular jest taki z 2015 roku. Ale tak. Angular byłby tam, obok VueJS lub RxJS i innych fajnych bibliotek 2016 roku. Chcesz się o nich dowiedzieć?

Zostańmy przy React, już teraz uczę się zbyt wielu rzeczy. Więc jeśli muszę użyć React, to pobieram go z tego npm, a potem używam tej rzeczy Browserify?

-Tak.

Wydaje się, że to zbyt skomplikowane – po prostu chwycić kilka zależności i połączyć je ze sobą.

- Tak, dlatego używasz menedżera zadań, takiego jak Grunt, Gulp lub Broccoli, aby zautomatyzować uruchamianie Browserify. Do licha, możesz nawet użyć Mimosa.

Grunt? Łyk? Brokuły? Mimosa? O czym my teraz mówimy?

-Menedżerów zadań. Ale już nie są fajne. Używaliśmy ich w 2015 roku, potem używaliśmy Makefiles, ale teraz wszystko pakujemy w Webpack.

Makefiles? Myślałem, że są używane głównie w projektach C lub C++.

- Tak, ale najwyraźniej w sieci uwielbiamy komplikować rzeczy, a potem wracać do podstaw. Robimy to mniej więcej co roku, po prostu poczekaj, będziemy robić montaż w sieci za rok lub dwa.

Ech. Wspomniałeś o czymś takim jak Webpack?

-To kolejny menedżer modułów dla przeglądarki, będący jednocześnie swego rodzaju programem do uruchamiania zadań. To lepsza wersja Browserify.

O, OK. Dlaczego jest lepiej?

- Cóż, może nie lepiej, po prostu jest bardziej opiniotwórczy w kwestii tego, jak powinny być powiązane zależności. Webpack pozwala używać różnych menedżerów modułów, nie tylko CommonJS, na przykład natywnych modułów obsługiwanych przez ES6.

Jestem strasznie zdezorientowany całą tą sprawą CommonJS/ES6.

- Każdy tak robi, ale nie powinieneś już przejmować się SystemJS.

Jezu Chryste, kolejny rzeczownik-js. Ok, a czym jest ten SystemJS?

- Cóż, w przeciwieństwie do Browserify i Webpack 1.x, SystemJS jest dynamicznym modułem ładującym, który umożliwia łączenie wielu modułów w wiele plików zamiast umieszczania ich w jednym dużym pliku.

Poczekaj, ale myślałem, że chcemy zbudować nasze biblioteki w jednym dużym pliku i go załadować!

- Tak, ale ponieważ teraz nadchodzi protokół HTTP/2, wielokrotne żądania HTTP są w rzeczywistości lepsze.

Poczekaj, czy nie możemy po prostu dodać trzech oryginalnych bibliotek dla React?

- Niezupełnie. Mam na myśli, że można je dodać jako zewnętrzne skrypty z CDN, ale nadal trzeba by wtedy uwzględnić Babel.

Ech. I to jest złe, prawda?

- Tak, uwzględniłbyś cały Babel-core, a nie byłoby to wydajne w produkcji. W produkcji musisz wykonać serię zadań wstępnych, aby przygotować projekt, który sprawi, że rytuał przywoływania Szatana będzie wyglądał jak przepis na gotowane jajka. Musisz zminimalizować zasoby, oszpecić je, umieścić kod CSS powyżej linii zagięcia, odroczyć skrypty, a także-

Mam to, mam to. Więc jeśli nie chcesz uwzględniać bibliotek bezpośrednio w CDN, jak to zrobisz?

- Ja bym to transpilował z Typescriptu używając kombinacji Webpack + SystemJS + Babel.

Typescript? Myślałem, że kodujemy w JavaScript!

-Typescript JEST JavaScript, albo lepiej, nadzbiór JavaScript, a dokładniej JavaScript w wersji ES6. Wiecie, ta szósta wersja, o której mówiliśmy wcześniej?

Myślałem, że ES2016+ jest już superzbiorem ES6! DLACZEGO teraz potrzebujemy tej rzeczy zwanej Typescript?

- Och, ponieważ pozwala nam używać JavaScript jako języka typowanego i zmniejszać błędy czasu wykonania. Jest 2016, powinieneś dodawać typy do swojego kodu JavaScript.

I Typescript najwyraźniej to robi.

-Flow również, choć sprawdza tylko typizację, podczas gdy TypeScript jest nadzbiór JavaScript, który wymaga kompilacji.

Ech… a Flow jest?

-To statyczny sprawdzacz typów stworzony przez kilku gości z Facebooka. Zakodowali go w OCaml, ponieważ programowanie funkcyjne jest niesamowite.

OCaml? Programowanie funkcyjne?

- To jest to, czego używają teraz fajne dzieciaki, wiesz, 2016? Programowanie funkcyjne? Funkcje wyższego rzędu? Currying? Czyste funkcje?

Nie mam pojęcia, co właśnie powiedziałeś.

- Na początku nikt tego nie robi. Słuchaj, po prostu musisz wiedzieć, że programowanie funkcyjne jest lepsze od OOP i to właśnie powinniśmy używać w 2016 roku.

Poczekaj, nauczyłem się programowania obiektowego na studiach, myślałem, że to dobre?

-Tak samo było z Javą, zanim została kupiona przez Oracle. Mam na myśli, że OOP było dobre w tamtych czasach i nadal ma swoje zastosowanie, ale teraz wszyscy zdają sobie sprawę, że modyfikowanie stanów jest równoznaczne z kopaniem dzieci, więc teraz wszyscy przechodzą na niezmienne obiekty i programowanie funkcyjne. Ludzie od Haskella nazywali to od lat, -i nie każcie mi zaczynać od ludzi od Elma - ale na szczęście w sieci mamy teraz biblioteki takie jak Ramda, które pozwalają nam używać programowania funkcyjnego w zwykłym JavaScript.

Czy po prostu rzucasz nazwiskami dla zasady? Co do cholery jest Ramnda?

- Nie. Ramda. Jak Lambda. Wiesz, ta biblioteka Davida Chambersa?

Kto Dawid?

-David Chambers. Spoko gość. Gra w Coup. Jeden z autorów Ramda. Powinieneś też sprawdzić Erika Meijera, jeśli poważnie myślisz o nauce programowania funkcyjnego.

A Erik Meijer jest…?

-Facet od programowania funkcyjnego. Świetny facet. Ma mnóstwo prezentacji, w których krytykuje Agile, używając tej dziwnej kolorowej koszulki. Powinieneś również sprawdzić niektóre rzeczy od Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Zatrzymam cię tutaj. Wszystko to jest dobre i piękne, ale myślę, że to wszystko jest po prostu zbyt skomplikowane i niepotrzebne do pobierania danych i wyświetlania ich. Jestem prawie pewien, że nie muszę znać tych ludzi ani uczyć się wszystkich tych rzeczy, aby utworzyć tabelę z dynamicznymi danymi. Wróćmy do React. Jak mogę pobrać dane z serwera za pomocą React?

- Cóż, tak naprawdę nie pobierasz danych za pomocą React, tylko je wyświetlasz.

O, cholera. Więc czego używasz do pobierania danych?

-Używasz Fetch, aby pobrać dane z serwera.

Przepraszam? Używasz Fetch do pobierania danych? Ktokolwiek nazywa te rzeczy, potrzebuje tezaurusa.

-Wiem, prawda? Fetch to nazwa natywnej implementacji do wykonywania XMLHttpRequests na serwerze.

O, więc AJAX.

-AJAX to po prostu użycie XMLHttpRequests. Ale jasne. Fetch pozwala na AJAX w oparciu o obietnice, które następnie można rozwiązać, aby uniknąć piekła wywołań zwrotnych.

Piekło oddzwaniania?

- Tak. Za każdym razem, gdy wykonujesz asynchroniczne żądanie do serwera, musisz czekać na jego odpowiedź, co zmusza cię do dodania funkcji w funkcji, co nazywa się piramidą wywołań zwrotnych z piekła rodem.

O, OK. I ta obietnica rozwiązuje sprawę?

- Rzeczywiście. Manipulując wywołaniami zwrotnymi za pomocą obietnic, możesz pisać łatwiejszy do zrozumienia kod, symulować je i testować, a także wykonywać jednoczesne żądania na raz i czekać, aż wszystkie zostaną załadowane.

Czy da się to zrobić za pomocą Fetch?

- Tak, ale tylko jeśli użytkownik korzysta z przeglądarki evergreen, w przeciwnym razie należy dołączyć polyfill Fetch lub użyć Request, Bluebird lub Axios.

Ile bibliotek muszę znać na litość boską? Ile ich jest?

-To JavaScript. Muszą być tysiące bibliotek, które wszystkie robią to samo. Znamy biblioteki, w rzeczywistości mamy najlepsze biblioteki. Nasze biblioteki są ogromniaste i czasami umieszczamy w nich zdjęcia Guya Fieriego.

Czy ty właśnie powiedziałeś Guy Fieri? Skończmy z tym. Co robią te biblioteki Bluebird, Request, Axios?

-Są to biblioteki umożliwiające wykonywanie żądań XMLHttpRequest, które zwracają obietnice.

Czy metoda AJAX biblioteki jQuery nie zaczęła również zwracać obietnic?

- W 2016 roku nie używamy już słowa „J”. Po prostu użyj Fetch i polyfill, gdy nie jest w przeglądarce, lub użyj Bluebird, Request lub Axios zamiast tego. Następnie zarządzaj obietnicą za pomocą await w funkcji asynchronicznej i bum, masz właściwy przepływ sterowania.

Już trzeci raz wspominasz o „await”, ale nie mam pojęcia, co to jest.

-Await pozwala zablokować wywołanie asynchroniczne, co pozwala na lepszą kontrolę nad momentem pobierania danych i ogólnie zwiększa czytelność kodu. To niesamowite, musisz tylko upewnić się, że dodasz ustawienie wstępne stage-3 w Babel lub użyjesz syntax-async-functions i wtyczki transform-async-to-generator.

To jest szaleństwo.

-Nie, szaleństwem jest to, że musisz wstępnie skompilować kod TypeScript, a potem transpilować go za pomocą Babel, żeby móc używać await.

Co? Nie ma tego w Typescript?

-Tak, w następnej wersji tak, ale od wersji 1.7 obsługuje ona tylko ES6, więc jeśli chcesz używać await w przeglądarce, najpierw musisz skompilować kod TypeScript obsługujący ES6, a następnie przerobić to wszystko na Babel, aby obsługiwało ES5.

W tym momencie nie wiem, co powiedzieć.

- Spójrz, to proste. Koduj wszystko w Typescript. Wszystkie moduły, które używają Fetch, kompilują je do ES6, transpilują je za pomocą Babel na preselekcji stage-3 i ładują za pomocą SystemJS. Jeśli nie masz Fetch, wypełnij go polyfillem lub użyj Bluebird, Request lub Axios i obsłuż wszystkie swoje obietnice za pomocą await.

Mamy bardzo różne definicje łatwości. Więc dzięki temu rytuałowi w końcu pobrałem dane i teraz mogę je wyświetlić za pomocą React, prawda?

-Czy Twoja aplikacja będzie obsługiwać jakiekolwiek zmiany stanu?

Eee, nie sądzę. Muszę tylko wyświetlić dane.

- Och, dzięki Bogu. W przeciwnym razie musiałbym ci tłumaczyć Flux i implementacje takie jak Flummox, Alt, Fluxible. Chociaż szczerze mówiąc, powinieneś używać Redux.

Przelecę nad tymi nazwami. Ponownie, muszę tylko wyświetlić dane.

- Och, jeśli po prostu wyświetlasz dane, to nie potrzebowałeś Reacta na początku. Byłbyś zadowolony z silnika szablonów.

Czy ty sobie ze mnie żartujesz? Czy uważasz, że to zabawne? Czy tak traktujesz swoich bliskich?

-Tłumaczyłem tylko, co ci się może przydać.

Przestań. Po prostu przestań.

- Nawet jeśli korzystasz tylko z silnika szablonów, to na Twoim miejscu i tak użyłbym kombinacji TypeScript + SystemJS + Babel.

Muszę wyświetlić dane na stronie, a nie wykonać oryginalnego MK fatality Sub Zero. Powiedz mi tylko, jakiego silnika szablonów użyć, a ja zajmę się resztą.

- Jest ich sporo. Które znasz?

Ugh, nie pamiętam nazwy. To było dawno temu.

-jTemplates? jQote? CZYSTY?

Eee, nic mi to nie mówi. Jeszcze jeden?

-Przezroczystość? JSRender? MarkupJS? KnockoutJS? Tamten miał dwukierunkowe wiązanie.

Jeszcze jeden?

-PlatesJS? jQuery-tmpl? Kierownice? Niektórzy nadal tego używają.

Może. Czy są podobne do tego ostatniego?

- Wąsy, podkreśl? Myślę, że teraz nawet Lodash ma, szczerze mówiąc, ale to jest coś z 2014 roku.

No cóż... może było nowsze.

-Jade? DustJS?

NIE.

-DotJS? EJS?

NIE.

-Nunjucks? ECT?

NIE.

-Mah, i tak nikt nie lubi składni Coffeescript. Jade?

Nie, już powiedziałaś Jade.

- Miałam na myśli Pug. Miałam na myśli Jade. Mam na myśli, że Jade jest teraz Pug.

Ech. Nie. Nie pamiętam. Którego byś użył?

-Prawdopodobnie tylko natywne szablony ES6.

Daj mi zgadnąć. I to wymaga ES6.

-Prawidłowy.

Który, w zależności od używanej przeglądarki, wymaga Babel.

-Prawidłowy.

Jeśli jednak chcę uwzględnić to bez dodawania całej biblioteki rdzeniowej, muszę załadować ją jako moduł z npm.

-Prawidłowy.

Do czego potrzebny jest Browserify, Wepback lub najprawdopodobniej coś innego o nazwie SystemJS.

-Prawidłowy.

Którym, o ile nie jest to Webpack, w idealnym przypadku powinno się zarządzać za pomocą modułu uruchamiającego zadania.

-Prawidłowy.

Ponieważ jednak powinienem używać programowania funkcyjnego i języków typowanych, najpierw muszę wstępnie skompilować TypeScript lub dodać to coś w rodzaju Flow.

-Prawidłowy.

A potem wysyłam to do Babel, jeśli chcę użyć wait.

-Prawidłowy.

Wtedy mogę używać Fetch, obietnic, Control Flow i całej tej magii.

- Tylko nie zapomnij użyć polyfilla Fetch, jeśli nie jest obsługiwany. Safari i tak sobie z tym nie poradzi.

Wiesz co. Myślę, że skończyliśmy. Właściwie, myślę, że skończyłem. Skończyłem z siecią, skończyłem z JavaScriptem w ogóle.

- Świetnie, za kilka lat wszyscy będziemy kodować w Elm albo WebAssembly.

Po prostu wrócę do zaplecza. Po prostu nie mogę poradzić sobie z tymi wszystkimi zmianami, wersjami, edycjami, kompilatorami i transpilatorami. Społeczność JavaScript jest szalona, jeśli myśli, że ktokolwiek może za tym nadążyć.

-Rozumiem cię. Powinieneś spróbować społeczności Pythona.

Dlaczego?

- Czy słyszałeś kiedyś o Pythonie 3?

Aktualizacja: Dzięki za wskazanie literówek i błędów, zaktualizuję artykuł zgodnie z uwagami. Dyskusja w HackerNews i Reddit .