Chcę zostać kotem internetu – Angular/Vue/React

devkot.pl 1 rok temu

W poprzednich artykułach z cyklu miałeś okazję zapoznać się podstawami języka JavaScript oraz z narzędziami programistycznymi dostarczanymi przez przeglądarki internetowe. jeżeli czujesz się już swobodnie w czystym JavaScript to kolejnym krokiem w Twojej przygodzie powinno być zapoznanie się z dostępnymi na rynku frameworkami JavaScript. ale zanim się za to zabierzesz warto najpierw zapoznać się z dwoma najpopularniejszymi odmianami języka JavaScript. Mianowicie z TypeScriptem oraz JSX. TypeScript to zorientowana obiektowo wersja JavaScriptu, wykorzystywana w takich frameworkach jak np. Angular, natomiast JSX jest wspierany przez bibliotekę React i tak naprawdę jest rozszerzeniem JavaScriptu o możliwość wstawiania znaczników HTML. Wiem, iż jeszcze może brzmieć to troszkę skomplikowanie, ale postaram się to wytłumaczyć. Zatem do dzieła!

Typescript – co to adekwatnie jest?

TypeScript jest to nadzbiór języka programowania JavaScript. Oznacza to, iż zawiera on cechy i funkcjonalności JavaScriptu oraz rozszerza go o nowe mechanizmy związane z obsługą typów. To dzięki wsparciu dla obiektowości TypeScript stał tak popularny. Tworzenie nowoczesnych stron internetowych w czystym JavaScriptcie jest dużym wyzwaniem. Dzięki TypeScriptowi progrmiści lepiej mogą zarządzać kodem i tym jak program się wykonuje.

Język ten gwałtownie zdobył popularność oraz został wdrożony w wielu projektach. Jest on również wykorzystywany przez jedne z najpopularniejszych frameworków (zestawów narzędzi) do tworzenia stron internetowych takich jak Angular czy Vue. Kod TypeScript zapisuje się w plikach z rozszerzeniem .ts. W odróznieniu od JavaScriptu TypeScript nie jest językiem interpetowanym, ale kompilowanym. Oznacza to, iż wymaga on skompilowania go przed uruchomieniem, dzięki temu już podczas prac nad projektem można znaleźć potencjalne błędy takie jak np. przypisanie błędnego typu do zmiennej. Kod TypeScript kompilowany jest do kodu JavaScript, który następnie może być wykonany przez przeglądarkę internetową.

Przykładowy kod TypeScript:

class Tester { private hiddenValue: string; constructor(hiddenValue: string) { this.hiddenValue = name; } public hiddenValue(): string { return `${this.hiddenValue}!`; } } console.log(new Tester("Test").hiddenValue());

Powyższy kod TypeScript zostanie przekonwertowany na poniższy w procesie kompilacji:

JSX – co to jest?

JSX, a dokładniej JavaScript XML, jest wariacją języka JavaScript zaproponowaną przez Facebooka specjalnie dla biblioteki React. Rozszerza on JavaScript o możliwość dodawania znaczników, przez co kod JSX nie jest typowym JavaScriptem oraz HTMLem. Jest on pewnego rodzaju hybrydą jednego i drugiego. Ale co tak naprawdę znaczy i co to nam daje jako programistom? Pisząc standardowy kod JavaScript oraz HTML należy pamiętać, iż ten pierwszy zawsze należy dołączać dzięki taga <script /> oraz iż są 2 oddzielne elementy, które finalnie składają się w 1 całość. HTML oraz CSS dostarczają wygląd natomiast JavaScript dostarcza zachowania.

Co byś powiedział gdyby można połączyć te 2 elementy w 1 pliku i móc przeplatać ze sobą kod HTML i JavaScript? W tym właśnie miejscu wkracza JSX oraz dostarcza właśnie takiej możliwości. Nie trzeba już rozdzielać tego kodu. dzięki JSX możesz napisać mieszankę kodu HTML oraz JavaScript, która dostarczy zarówno wygląd jak i zachowania. Dzięki takiemu podejściu, można tworzyć proste komponenty, które definiują zarówno swój wygląd jak iz achowania w 1 miejscu.

Przykład kodu JSX:

class App extends React.Component { constructor(props) { super(props) this.state = { total: 0 }; this.handleClick = () => { this.setState(() => { return { total: this.state.total + 1 }}); } } render() { return (

Wynik to: {this.state.total}
Dodaj 1

) } } ReactDOM.render(, document.querySelector("#app"))

Powyższy kod JavaScript odpowiada za wyświetlenie prostej strony zawierającej licznik oraz przycisk, który pozwala zwiększyć jego wartość o 1. Jest to bardzo prosta aplikacja, ale przedstawia możliwości JSX dotyczące łączenia kodu JavaScript wraz z kodem HTML. Za wyświetlenie komponentu na ekranie odpowiada metoda render() i to właśnie w niej definiuje się to co ma zostać wyświetlone na ekranie.

Frameworki JavaScript

Czym jest framework?

Framework jest zestawem narzędzi wykorzystywanym do tworzenia aplikacji internetowych. Tak jak każdy dobry fachowiec programiści również mają swoje specjalistyczne narzędzia i nie ograniczają się one do tylko wyboru programu/środowiska, w którym będziesz pisał kod. Rozpoczynając nowy projekt prawdopodobnie będziesz musiał podjąć decyzję dotyczącą tego, w jakiej technologii będziesz chciał go wykonać oraz z jakich narzędzi skorzystasz. Dodatkowo szukając pracy na pewno natrafisz na oferty, które będą wymagać znajomości co najmniej jednego z frameworków.

Ale co tak naprawdę kryje się pod tą nazwą? Samo słowo framework oznacza strukturę, szkielet, model lub kontekst. Nie bez przyczyny właśnie w ten sposób zostały one nazwane, ponieważ w świecie programowania to właśnie ich wybór definiuje strukturę i szkielet aplikacji. Ale dlaczego są one tak ważne i popularne? Wynika to głównie z tego, iż dostarczają dużo mechanizmów, które ułatwiają pracę nad projektem. Szczególnie w jego wczesnych fazach.

Przeanalizujmy przykład tego bloga, a dokładniej przyjrzymy się kilku mechanizmom, z których się składa:

Routing – wyświetlanie odpowiedniej strony na podstawie adresu URL
Autoryzacja/Autentykacja – kontrola dostępu
Odczyt/zapis do bazy danych
System szablonów
Obsługa błędów
Obsługa formularzy

Jeśli chciałbyś stworzyć bloga bez korzystania z frameworka musiałbyś napisać te wszystkie mechanizmy samodzielnie od podstaw. Ale po co wymyślać koło na nowo skoro ktoś już to zrobił, a dodatkowo zrobił to dobrze? Właśnie dlatego w świecie programowania powstały frameworki. Dostarczają one podstawowe mechanizmy pozwalające na pracę z daną platformą. jeżeli chciałbyś dowiedzieć się więcej na temat frameworków zachęcam Cię do przeczytania tego artykułu: Co to jest framework?

Czym różni się framework od biblioteki?

Bardzo często te hasła potrafią być używane jako synonimy. Nie jest to niestety poprawne, ponieważ biblioteka w przeciwieństwie do frameworka często odpowiada za realizację 1 konkretnego zadania. Jako przykład biblioteki można wskazać np. axios, która dostarcza mechanizmy ułatwiające wysyłanie żądań http z poziomu kodu JavaScript. Ma jedno proste zadanie, które realizuje. Framework zwykle składa się z wielu bibliotek i za ich pomocą dostarcza większość mechanizmów potrzebnych do budowy nowoczesnych aplikacji.

Angular – framework od Google

AngularJS – pierwsza wersja frameworka

Pierwsza wersja frameworka została wydana w 2010 roku przez Google i nosiła nazwę AngularJS. Angular został opracowany, w celu wsparcia programistów tworzących strony internetowe typu SPA (Single Page Application). Był on odpowiedzialny za wdrożenie wzorca MVC (Model-View-Controller) do aplikacji frontendowych. Wcześniej ten model był wykorzystywany głównie w implementacji części backendowych. 31 grudnia 2021 roku Google ogłosiło koniec wsparcia dla tego frameworka.

Angular – nowa wersja frameworka

W 2016 roku Google opublikowało nową wersję frameworka o nazwie Angular, zdecydowali się usunąć JS z nazwy aby wskazać, iż nowa wersja frameworka nie jest kompatybilna wstecznie. To oznaczało, iż aplikacje wykorzystujące AngularJS wymagały przepisania aby wspierać nową wersję frameworka.
Nowa wersja została zbudowana z wykorzystaniem Typescriptu i w odróżnieniu od AngularJs nie odpowiada za wdrożenie do aplikacji modelu MVC, ale kompletnie zmienia podejście. Od 2016 Angular został zbudowany tak by był zorientowany na komponenty, które ze sobą współpracują i tworzą całość aplikacji.

Komponenty

Komponenty są główne bloki konstrukcyjne aplikacji tworzonych z wykorzystaniem Angualra. Komponent składa się z 3 elementów:

Kodu Typescript zawierającego adnotację @Component
Szablonu HTML
Styli CSS

Przykładowy komponent:

import { Component } from '@angular/core'; @Component({ selector: 'hello-world', template: `

Hello World

` }) export class HelloWorldComponent { // The code in this class drives the component's behavior. }

Zadaniem powyższego komponentu jest wyświetlenie tekstu Hello World. Ciekawą rzeczą, którą prezentuje jest to, iż zawiera kod HTML zapisany w pliku Typescript. Nie jest to jedyne możliwe podejście. Osobiście częściej spotykam się z tym, iż kod HTML oraz CSS jest oddzielony od pliku Typescript, który zawiera logikę komponentu.

Poniżej znajduje się przykładowy komponent zawierający osobny szablon i plik ze stylami CSS.

app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Example component with styles and template'; }

app.component.html:

{{ title }} app is running!

app.component.css:

span { color: red; }

Powyższy komponent powinien wyświetlić następujący element na ekranie:

Aplikacje napisane z wykorzystaniem Angulara składają się z wielu komponentów, które ze sobą współpracują. Dzięki takiemu podejściu programista może skupić się na tworzeniu osobnych odizolowanych od siebie części aplikacji, które razem dostarczą odpowiednią funkcjonalność jego stronie.

Pozostałe elementy konstrukcyjne Angulara

Komponenty to nie jedyne elementy konstrukcyjne wykorzystywane w Angularze. Pracując z tym frameworkiem na pewno spotkasz się z pojęciami modułu oraz serwisu.

Moduł jak sama nazwa wskazuje jest to pewna spójna część aplikacji, która została napisana w izolacji od reszty. Mam tutaj na myśli, iż jest to logicznie niezależna część aplikacji. Zastosowanie modułów pomaga w utrzymaniu czytelności projektu.

Skoro już mniej więcej wiesz czym jest moduł, przejdźmy do serwisu. W prostych słowach serwisy są odpowiedzialne za dostarczanie danych do komponentów. Bardzo często są one odpowiedzialne za komunikację z backendem, wykorzystując protokuł HTTP. Odpowiadają za transmisję danych z frontendu do backendu oraz odwrotnie. Są wykorzystywane również w celu komunikacji między komponentami oraz do przechowywania danych w aplikacji.

Jeśli zainteresował Ciebie temat angolara polecam zapoznać się oficjalną dokumentacją tego frameworki dostępna pod tym adresem: Angular.

React – biblioteka od Facebooka

React jest biblioteką JavaScript utworzoną i opublikowaną przez Facebooka w 2013 roku. Jest on przeznaczony do budowania interfejsu użytkownika. Podobnie jak angular umożliwia tworzenie frontendu z wykorzystaniem odizolowanych od siebie komponentów. Pewnie nasuwa Ci się pytanie, dlaczego React nie jest frameworkiem skoro zasady budowania aplikacji są podobne jak np. w angularze? Otóż sam React w odróżnieniu od Angulara dostarcza tylko i wyłącznie mechanizmy związane z tworzeniem warstwy prezentacji, aby dodać np. routing do aplikacji opartej o ReactJS, należy skorzystać z dodatkowej biblioteki. Sam React nie określa struktury oraz architektury aplikacji. Dostarcza jedynie koncepcji i mechanizmów do budowania interfejsu bazującego na komponentach.

Przykładowy komponent

Budowanie aplikacji opartej na bibliotece React polega głównie na tworzeniu komponentów i składaniu ich w całość, poniżej znajduje się przykładowa aplikacja wykorzystująca ReactJS:

ReactDOM.render(

Hello, world!

, document.getElementById('root') );

Powyższy komponent został stworzony z wykorzystaniem składni JSX, która jest jedną z głównych cech Reacta. To właśnie dla tej biblioteki została ona opracowana. Zadaniem powyższego komponentu jest wyświetlenie napisu Hello world! w miejscu znacznika HTML z id=”root”.

Ale gdzie w tym przykładowym kodzie komponent? Otóż został on ukryty w wywołaniu metody render(). Przedstawiona aplikacja jest bardzo prosta, więc przejdźmy do czegoś bardziej złożonego aby pokazać komponenty w praktyce.

Przykładowy komponent:

class HelloWorld extends React.Component { render() { return (

Hello

); } } function Greeter(props) { return ( {props.name} ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();

Kod JSX definiuje 2 komponenty, jeden o nazwie HelloWorld a drugi o nazwie Greeter. Co interesujący pierwszy z nich został napisany jako klasa i nie przyjmę żadnych parametrów. Drugi został napisany jako funkcja, która przyjmuje argument props, który służy do przekazania wartości, zdefiniowanych jako atrybuty HTML, do wyświetlanego komponentu. Na końcu kodu JS został umieszczony kod przeznaczony do wyrenderowania komponentów w miejscu elementu z id=root.

Podstawową metodą, która musi być zaimplementowana w klasach komponentów jest metoda render(). Mówi ona Reactowi co dokładnie powinno być wyświetlone na ekranie. W ramach tej metody można wykorzystywać inne komponenty.

Wynikiem wykonania powyższego kodu jest wyświetlenie tekstu Hello world na ekranie.

Więcej na temat reacta możesz znaleźć w jego oficjalnej dokumentacji, która jest dostępna w języku polskim pod tym linkiem: React

Vue – progresywny framework JavaScript

Vue.js również jest frameworkiem JavaScript przeznaczonym do tworzenia interfejsów użytkownika. Podobnie do wyżej wymienionych frameworków jest on oparty na komponentach. Framework ten rozszerza składnie HTML o składnie związaną z obsługą szablonów. Mechanizm ten nazywany jest declarative rendering. W odróżnieniu od pozostałych frameworków komponenty Vue wykorzystują składnie podobną do HTML:

Count is: {{ count }}

Jak możesz zaobserwować powyższy komponent składa się z 3 części odseparowanych od siebie znacznikami HTML:

script – zawiera kod JavaScript komponentu, definiujący jego logikę
template – zawiera szablon HTML komponentu
style – zawiera style komponentu

Ten format nosi nazwę SFC (Single-File-Component) i może być stosowany w plikach z rozszerzeniem .vue. Taki format definiowania komponentów jest rekomendowany przez autora tego frameworka.
Powyższy kod jest odpowiedzialny za wyświetlenie przycisku na ekranie, który po kliknięciu powinien zwiększyć licznik o 1. Kod takiego komponentu korzystającego z formatu SFC jest przejrzysty i czytelny.
Jeśli chciałbyś dowiedzieć się czegoś więcej na temat Vue zachęcam do zapoznania się z jego oficjalną dokumentacją.

Idź do oryginalnego materiału