JavaScript z biegiem lat zyskał coraz większą popularność, społeczność szybko się rozrasta, a programiści codziennie rozwijają i budują narzędzia dla tego języka.
To sprawia, że jest to przytłaczające, jeśli chodzi o decydowanie, jakiego narzędzia/szkieletu/biblioteki użyć do konkretnego zadania, ponieważ zawsze istnieje wiele opcji dosłownie wszystkiego, co chcesz zrobić w JavaScript. Na początku nadal trudno jest zdecydować, jakiej biblioteki lub frameworka się nauczyć.
Ten artykuł skupia się na wyjaśnieniu korzyści płynących z używania kilku front-endowych frameworków/bibliotek JavaScript i ostatecznie daje wyraźniejszy ich obraz. Ma to na celu ułatwienie procesu decyzyjnego wyboru jednego.
Spis treści:
Reagować
Reagować nie jest frameworkiem, ale biblioteką JavaScript do budowania interfejsów użytkownika.
Jest open-source i jest utrzymywany przez Facebooka i społeczność indywidualnych programistów. React został początkowo napisany przez Jordan Walke jako wewnętrzne narzędzie na Facebooku. Został później otwarty i wydany dla ogółu społeczeństwa w 2013 roku, a następnie zyskał szeroką popularność.
Niektóre z funkcji obejmują następujące.
- Zapewnia reaktywne, konfigurowalne i wielokrotnego użytku komponenty
- Wykorzystuje wirtualny DOM
- Ekstremalnie szybko
- Oparte na komponentach
- Jednokierunkowe wiązanie danych
- Możliwość ponownego wykorzystania kodu
- Ma za sobą żywy, kwitnący ekosystem
- Wygodna obsługa zarządzania stanem
Instalacja/Użytkowanie
React może być używany na interfejsie użytkownika na dwa różne sposoby.
Przez CDN
Możesz odwołać się do ich oficjalna strona aby uzyskać link do skryptów, który możesz umieścić w tagu nagłówka w znaczniku HTML. Wybierz linki w oparciu o cel.
Na przykład, jeśli używasz w środowisku programistycznym, wtedy:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
A do produkcji
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Korzystanie z Node.JS
Zakładam, że masz już zainstalowany NodeJS. Aby zainstalować React, po prostu wpisz następujące polecenie.
sudo npm i -g create-react-app –save-dev
Po zakończeniu instalacji wpisz następujące polecenie
utwórz-aplikację-reaguj moja-pierwsza-aplikacja-reaguj
Powyższe polecenie zainstaluje wszystkie niezbędne biblioteki potrzebne do prawidłowego działania Reacta, w tym serwer programistyczny, pakiet webowy i babel.
Przejdź do folderu my-first-react-application i uruchom następujące polecenie
początek npm
Powyższe uruchomi serwer programistyczny na porcie 3000. A kiedy uzyskasz dostęp do adresu IP serwera z portem 3000, powinieneś zobaczyć coś takiego jak poniżej.
React zyskuje popularność i jest dostępny na żądanie przez wiele dużych organizacji. Jeśli jesteś zainteresowany nauką, polecam wziąć to pełny kurs.
Vue.js
Vue.js to progresywny framework JavaScript do tworzenia interaktywnych interfejsów użytkownika i aplikacji jednostronicowych. Jest to framework widoku modelu z podstawową biblioteką, skupiający się na warstwie widoku. Vue jest popularny, ponieważ umożliwia obsługę aplikacji jednostronicowych. W przeciwieństwie do Reacta, Vue używa surowego HTML, a nie JSX.
Vue.js jest open-source i początkowo został stworzony przez Evan You i wydany publicznie w lutym 2014 r. Poniżej przedstawiono niektóre z funkcji.
- Zapewnia reaktywne i komponowalne komponenty widoku.
- Wykorzystuje wirtualny DOM
- Koncentruje się na podstawowej bibliotece (tj. Routing i zarządzanie stanem)
- Scoping w CSS jest obsługiwany bez CSS-In-Js
- Jednostronne wiązanie w komponentach.
- Wsparcie dla niezbędnych dodatków
- Możliwość ponownego wykorzystania kodu
Instalacja/Użytkowanie
Możesz używać Vue.js na interfejsie albo przez CDN, albo z Node.js
Aby użyć sposobu CDN, możesz dodać następujący skrypt do sekcji nagłówka strony HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Powyższy skrypt nadaje się do celów programistycznych, ponieważ zawiera ważny komunikat konsoli. Jednak do produkcji powinieneś użyć poniższego.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Aby korzystać z Nodejs, możesz zainstalować go za pomocą polecenia npm.
npm install vue
Gorąco radzę zapoznać się z oficjalnym Vue JS dokumentacja aby dowiedzieć się więcej lub rozważyć wzięcie tego ścieżka.
Kątowy
Kątowy to strukturalna struktura JavaScript dla stron dynamicznych. Pozwala na użycie HTML jako języka szablonów i pozwala na użycie składni HTML do jasnego i zwięzłego wyrażenia komponentów aplikacji. Jest to projekt open source utrzymywany przez Google i innych współtwórców.
Instalacja
Upewnij się, że masz zainstalowane najnowsze oprogramowanie Nodejs. Pierwszą rzeczą, którą musimy zainstalować, jest narzędzie Angular CLI.
npm install -g @angular/cli
Po zainstalowaniu możemy stworzyć nowy projekt za pomocą następującego polecenia.
ng new my-first-angular-app
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie. Spowoduje to wygenerowanie niektórych plików i folderów oraz użycie modułu npm do pobrania bibliotek innych firm potrzebnych do prawidłowego działania Angulara.
Aby uruchomić nowo utworzoną aplikację, uruchom następujące polecenie z folderu apps.
ng server
Powinno to automatycznie uruchomić serwer na porcie 4200.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Wniosek
Tak więc to, czego się uczysz, jest bardziej osobistym upodobaniem niż „co jest lepsze”.
Wszystkie wymienione powyżej frameworki/biblioteki są świetne. Oto krótkie podsumowanie;
- Powinieneś nauczyć się Angulara, jeśli chcesz Framework, na którym chcesz polegać, bez konieczności zajmowania się zależnościami zewnętrznymi.
- Powinieneś nauczyć się React, jeśli chcesz szybko budować aplikacje PWA, Single Page i czujesz się komfortowo w JSX.
- React ma najbardziej dynamiczną społeczność i więcej możliwości pracy dzięki dużej społeczności.
- React jest stosunkowo łatwy do rozpoczęcia.
- React jest wysoce konfigurowalny i traktuje każdy element interfejsu użytkownika jako komponent.
- Vue ma te same zalety co React, ale bez JSX.
- Rynek pracy dla Vue stale się powiększa.
Oto wykres w Trendach Google pokazujący porównanie wskaźnika popularności trzech z nich.
Jeśli interesuje Cię rozwój front-endu, możesz to sprawdzić Kurs Udemy.