Zawartość
- 01. Kątowy
- 02. Reaguj
- 03. Vue
- Jak wypada składnia frameworków?
- Popularność i rynek
- Tworzenie aplikacji mobilnych
- Inne ramy, na które należy zwrócić uwagę w 2020 r
- Wniosek
W 2020 roku otrzymaliśmy wiele ram i bibliotek, które pomogą nam w tworzeniu stron internetowych. Ale nie zawsze było tyle różnorodności. W 2005 roku facet o imieniu Brendan Eich stworzył nowy język skryptowy o nazwie Mocha. Kilka miesięcy po zmianie nazwy na LiveScript nazwa została ponownie zmieniona na JavaScript. Od tego czasu JavaScript przeszedł długą drogę.
W 2010 roku wprowadziliśmy Backbone i Angular jako pierwsze frameworki JavaScript, a do 2016 roku 92 procent wszystkich stron internetowych korzystało z JavaScript. W tym artykule przyjrzymy się trzem głównym frameworkom JavaScript (Angular, React i Vue) oraz ich stanom w następnej dekadzie. Chcesz stworzyć własną witrynę? Wypróbuj tę listę kreatorów witryn.
Aby uzyskać wspaniałe zasoby, zapoznaj się z naszą listą najlepszych narzędzi do projektowania stron internetowych, przeglądem usług hostingowych, a także listą doskonałego oprogramowania do testowania użytkowników.
01. Kątowy
AngularJS został wydany w 2010 roku, ale w 2016 roku został całkowicie przepisany i wydany jako Angular 2. Angular to pełnowartościowa platforma internetowa opracowana przez Google, z której korzystają Wix, Upwork, The Guardian, HBO i nie tylko.
Plusy:
- Wyjątkowe wsparcie dla TypeScript
- MVVM umożliwia programistom oddzielenie pracy nad tą samą sekcją aplikacji przy użyciu tego samego zestawu danych
- Doskonała dokumentacja
Cons:
- Ma trochę krzywej uczenia się
- Migracja ze starej wersji może być trudna.
- Aktualizacje są wprowadzane dość regularnie, co oznacza, że programiści muszą się do nich dostosować
Co dalej?
W Angular 9, Ivy jest domyślnym kompilatorem. Zostało wprowadzone, aby rozwiązać wiele problemów związanych z wydajnością i rozmiarem pliku. Powinien sprawić, że aplikacje będą mniejsze, szybsze i prostsze.
Porównując poprzednie wersje Angular z React i Vue, plik
Ostateczne rozmiary pakietów były znacznie większe w przypadku korzystania z Angulara. Ivy umożliwia także Progressive Hydration, czym zespół Angular pokazał na I / O 2019. Progressive Hydration wykorzystuje Ivy do progresywnego ładowania na serwerze i kliencie. Na przykład, gdy użytkownik zaczyna wchodzić w interakcję ze stroną, kod komponentów wraz z dowolnym środowiskiem wykonawczym jest pobierany kawałek po kawałku.
Ivy wydaje się być głównym celem dla Angular i mam nadzieję, że będzie dostępny dla wszystkich aplikacji. Dostępna będzie opcja rezygnacji w wersji 9, aż do Angular 10.
02. Reaguj
React został pierwotnie wydany w 2013 roku przez Facebooka i służy do tworzenia interaktywnych interfejsów internetowych. Jest używany przez Netflix, Dropbox, PayPal i Uber, by wymienić tylko kilka.
Plusy:
- React korzysta z wirtualnego DOM, co pozytywnie wpływa na wydajność
- JSX jest łatwy do napisania
- Aktualizacje nie zagrażają stabilności
Cons:
- Jedną z głównych przeszkód jest potrzeba bibliotek innych firm do tworzenia bardziej złożonych aplikacji
- Deweloperzy nie wiedzą, jak najlepiej się rozwijać
Co dalej?
Na konferencji React Conf 2019 zespół React poruszył kilka kwestii, nad którymi pracowali. Pierwszym jest Selective Hydration, w którym React wstrzymuje wszystko, nad czym pracuje, aby nadać priorytet komponentom, z którymi użytkownik wchodzi w interakcję. Gdy użytkownik wejdzie w interakcję z określoną sekcją, ten obszar zostanie nawodniony. Zespół pracował również nad Suspense, czyli systemem firmy React do organizowania ładowania kodu, danych i obrazów. Dzięki temu komponenty mogą czekać na coś przed renderowaniem.
Zarówno Selective Hydration, jak i Suspense są możliwe dzięki trybowi współbieżnemu, który umożliwia aplikacjom szybsze reagowanie, dając Reactowi możliwość wchodzenia w duże bloki zadań o niższym priorytecie, aby skupić się na czymś, co ma wyższy priorytet, np. Reagowaniu na działania użytkownika. Zespół wspomniał również o dostępności jako o innym obszarze, któremu się przyglądali, koncentrując się na dwóch konkretnych tematach - zarządzaniu fokusem i interfejsach wejściowych.
03. Vue
Vue został opracowany w 2014 roku przez Evana You, byłego pracownika Google. Jest używany przez Xiaomi, Alibaba i GitLab. Vue udało się zdobyć popularność i wsparcie programistów w krótkim czasie i bez wsparcia dużej marki.
Plusy:
- Bardzo lekki rozmiar
- Przyjazny dla początkujących - łatwy do nauczenia
- Świetna społeczność
Cons:
- Nie jest wspierany przez wielką firmę, taką jak React with Facebook i Angular with Google
- Brak prawdziwej struktury
Co dalej?
Vue postawiło sobie za cel bycie szybszym, mniejszym, łatwiejszym w utrzymaniu i ułatwienie programistom kierowania na natywne rozwiązania (jeśli masz problemy z utrzymaniem, rozważ usługę hostingu internetowego). Kolejna wersja (3.0) ma się ukazać w pierwszym kwartale 2020 r. I obejmuje przepisywanie wirtualnego DOM w celu uzyskania lepszej wydajności oraz ulepszoną obsługę języka TypeScript. Dodano również API Composition, które zapewnia programistom nowy sposób tworzenia komponentów i organizowania ich według funkcji, a nie operacji.
Twórcy Vue byli również zajęci pracą nad Suspense, który wstrzymuje renderowanie komponentu i renderuje komponent rezerwowy, dopóki warunek nie zostanie spełniony.
Jedną z największych zalet aktualizacji Vue jest to, że zachowują wsteczną kompatybilność. Nie chcą, abyś zepsuł swoje stare projekty Vue. Widzieliśmy to podczas migracji z 1.0 do 2.0, gdzie 90 procent API było takie samo.
Jak wypada składnia frameworków?
Wszystkie trzy frameworki przeszły zmiany od czasu ich wydania, ale jedną rzeczą, która jest krytyczna do zrozumienia, jest składnia i różnice. Przyjrzyjmy się, jak wypada porównanie składni, jeśli chodzi o proste wiązanie zdarzeń:
Vue: Plik v-on dyrektywa służy do dołączania detektorów zdarzeń, które wywołują metody w instancjach Vue. Dyrektywy są poprzedzone przedrostkiem v- w celu wskazania, że są to specjalne atrybuty dostarczone przez Vue i zastosują specjalne zachowanie reaktywne do renderowanego DOM. Procedury obsługi zdarzeń można podać w tekście lub jako nazwę metody.
template> button v-on: click = ”clickHandler”> Kliknij mnie / przycisk> / template> skrypt> eksportuj domyślny {name: „HelloWorld”, metody: {clickHandler: function () {console.log („Zostałem kliknięty! ”); }}}; / skrypt>
Reagować: React umieszcza znaczniki i logikę w JS i JSX, rozszerzeniu składni języka JavaScript. W JSX funkcja jest przekazywana jako procedura obsługi zdarzeń. Obsługa zdarzeń za pomocą elementów React jest bardzo podobna do obsługi zdarzeń w elementach DOM. Ale są pewne różnice składniowe; na przykład zdarzenia React są nazywane przy użyciu camelCase zamiast małych liter.
function Button () {function clickHandler (e) {console.log („Zostałem kliknięty”); } przycisk powrotu onClick = {clickHandler}> Kliknij mnie! / button>; }
Kątowy: Składnia powiązania zdarzenia składa się z nazwy zdarzenia docelowego w nawiasach po lewej stronie znaku równości i cytowanej instrukcji szablonu po prawej stronie. Alternatywnie możesz użyć na- przedrostek, znany jako forma kanoniczna.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) eksportuj klasę ClickMeComponent {onClickMe () {console.log (" Kliknąłeś mnie! ”); }}
Popularność i rynek
Zacznijmy od spojrzenia na ogólny obraz trzech frameworków w odniesieniu do reszty sieci, analizując statystyki z W3Techs. Angular jest obecnie używany przez 0,4 procent wszystkich witryn internetowych, a udział w rynku bibliotek JavaScript wynosi 0,5 procent. React jest używany przez 0,3% wszystkich stron internetowych i ma 0,4% udziału w rynku bibliotek JavaScript, a Vue ma 0,3% w obu przypadkach. Wydaje się to dość wyrównane i można by się spodziewać wzrostu liczby.
Google Trends: W ciągu ostatnich 12 miesięcy React był najpopularniejszym wyszukiwanym hasłem, tuż za nim uplasował się Angular. Vue.js jest daleko w tyle; Jednak jedną rzeczą do zapamiętania jest to, że Vue jest wciąż młody w porównaniu z pozostałymi dwoma.
Poszukiwania pracy: W chwili pisania tego tekstu React i Angular są dość blisko dopasowane pod względem ofert pracy w Indeed, a Vue jest daleko w tyle. Wydaje się jednak, że na LinkedIn rośnie zapotrzebowanie na programistów Vue.
Przepełnienie stosu: Jeśli spojrzysz na wyniki ankiety Stack Overflow Developer Survey dla 2019, React i Vue.js to zarówno najbardziej lubiane, jak i pożądane frameworki internetowe. Angular siada na dziewiątej pozycji dla najbardziej kochanej, ale trzeciej najbardziej poszukiwanej.
GitHub: Vue ma największą liczbę gwiazdek - 153 tys., Ale ma najmniejszą liczbę współtwórców (283). Z drugiej strony React ma 140 tysięcy gwiazdek i 1341 współtwórców. Angular ma tylko 59,6 tys. Gwiazdek, ale ma największą liczbę współtwórców spośród trzech (1579).
Trendy NPM: Powyższy obrazek przedstawia statystyki z ostatnich 12 miesięcy, na których widać, że React ma wyższą liczbę pobrań miesięcznie w porównaniu z Angular i Vue.
Tworzenie aplikacji mobilnych
Jednym z głównych celów dla wielkiej trójki jest wdrożenie mobilne. React ma React Native, który stał się popularnym wyborem do tworzenia aplikacji na iOS i Androida nie tylko dla użytkowników React, ale także dla szerszej społeczności programistów aplikacji. Programiści Angular mogą używać NativeScript do natywnych aplikacji lub Ionic do hybrydowych aplikacji mobilnych, podczas gdy programiści Vue mają do wyboru NativeScript lub Vue Native. Ze względu na popularność aplikacji mobilnych pozostaje to kluczowy obszar inwestycji.
Inne ramy, na które należy zwrócić uwagę w 2020 r
Jeśli chcesz wypróbować coś nowego w 2020 roku, sprawdź te frameworki JavaScript.
Niedopałek: Framework open source do tworzenia aplikacji internetowych, który działa w oparciu o wzorzec MVVM. Jest używany przez kilka dużych firm, takich jak Microsoft, Netflix i LinkedIn.
Meteor: Pełna platforma JavaScript do tworzenia nowoczesnych aplikacji internetowych i mobilnych. Jest łatwy do nauczenia i ma bardzo wspierającą społeczność.
Wniosek
Wszystkie trzy ramy są stale ulepszane, co jest zachęcającym znakiem. Każdy ma własną perspektywę i preferowane rozwiązanie, z którego powinien skorzystać, ale tak naprawdę sprowadza się to do wielkości projektu i sprawia, że czujesz się bardziej komfortowo.
Najważniejszym aspektem jest ciągłe wspieranie ich społeczności, więc jeśli planujesz rozpocząć nowy projekt i nigdy wcześniej nie korzystałeś z żadnego z trzech, uważam, że jesteś w dobrych rękach z nimi wszystkimi. Jeśli nie miałeś jeszcze okazji nauczyć się żadnego z trzech schematów, proponuję uczynić z tego noworoczne postanowienie, aby rozpocząć naukę. Przyszłość będzie kręcić się wokół tych trzech.
Ta treść pierwotnie ukazała się w magazynie sieciowym.
