-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
i18n(pl): Add new Astro Islands [islands.mdx] translation (#8926)
* add: english placeholder template * add: english template * feat: translation from en to pl * fix: 'to Astr' i kolejność w zdaniu * docs: update Polish translation of Islands Architecture article (by woolf1717) * docs: fix minor typo --------- Co-authored-by: Yan <[email protected]>
- Loading branch information
1 parent
86b25f9
commit 558da8a
Showing
1 changed file
with
84 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
--- | ||
title: Wyspy Astro | ||
description: Wyspy Astro (znane również jako Wyspy Komponentów) to wzorzec architektury webowej zapoczątkowany przez Astro. Termin "architektura wysp" został po raz pierwszy użyty przez Katie Sylor-Miller, architektkę frontendu w Etsy, w 2019 roku, a następnie rozwinięty przez Jasona Millera, twórcę Preact. | ||
i18nReady: true | ||
--- | ||
|
||
import IslandsDiagram from '~/components/IslandsDiagram.astro'; | ||
|
||
Framework Astro zapoczątkował i spopularyzował architekturę frontendu zwaną **Wyspy.** Architektura Wysp zapewnia lepszą wydajność frontendu, pomagając uniknąć monolitycznych wzorców JavaScript i automatycznie usuwając ze strony cały niepotrzebny JavaScript. Deweloperzy mogą nadal korzystać ze swoich ulubionych komponentów UI i frameworków z Astro, jednocześnie czerpiąc te korzyści. | ||
|
||
## Krótka historia | ||
|
||
Termin "wyspa komponentów" został po raz pierwszy użyty przez [Katie Sylor-Miller](https://twitter.com/ksylor), architektkę frontendu w Etsy, w 2019 roku. Idea ta została następnie rozwinięta i udokumentowana w [tym poście](https://jasonformat.com/islands-architecture/) przez Jasona Millera, twórcę Preact, 11 sierpnia 2020 roku. | ||
|
||
> Ogólna idea architektury "Wyspy" jest zwodniczo prosta: renderuj strony HTML na serwerze i wstrzykuj placeholdery lub sloty wokół wysoce dynamicznych regionów [...], które mogą być następnie "nawodnione" po stronie klienta w małe, samodzielne widżety, ponownie wykorzystując ich początkowo wyrenderowany HTML po stronie serwera. \ | ||
> — Jason Miller, Twórca Preact | ||
Technika, na której opiera się ten wzorzec architektoniczny, znana jest również jako **częściowa** lub **selektywna hydracja.** | ||
|
||
W przeciwieństwie do tego, większość frameworków webowych opartych na JavaScripcie hydruje i renderuje całą stronę internetową jako jedną dużą aplikację JavaScript (znaną również jako aplikacja jednostronicowa lub SPA). SPA zapewniają prostotę i moc, ale cierpią z powodu problemów z wydajnością ładowania strony ze względu na intensywne wykorzystanie JavaScript po stronie klienta. | ||
|
||
SPA mają swoje miejsce, nawet [osadzone wewnątrz strony Astro](/pl/guides/migrate-to-astro/from-create-react-app/). Jednak SPA brakuje wrodzonej zdolności do selektywnej i strategicznej hydracji, co czyni je w dzisiejszych czasach zbyt ciężkim wyborem dla większości projektów w sieci. | ||
|
||
Astro zyskało popularność jako pierwszy powszechny framework webowy JavaScript z wbudowaną selektywną hydracją, wykorzystując wzorzec wysp komponentów po raz pierwszy nazwany w ten sposób przez Sylor-Miller. | ||
|
||
## Czym jest wyspa? | ||
|
||
**W Astro "wyspa" odnosi się do każdego interaktywnego komponentu UI na stronie.** Wyobraź sobie wyspę jako interaktywny widżet unoszący się w morzu statycznego, lekkiego HTML renderowanego po stronie serwera. | ||
|
||
<IslandsDiagram> | ||
<Fragment slot="headerApp">Nagłówek (interaktywna wyspa)</Fragment> | ||
<Fragment slot="sidebarApp">Pasek boczny (statyczny HTML)</Fragment> | ||
<Fragment slot="main">Statyczna treść takie jak tekst, obrazy, itp.</Fragment> | ||
<Fragment slot="carouselApp">Karuzela obrazów (interaktywna wyspa)</Fragment> | ||
<Fragment slot="footer">Stopka (statyczny HTML)</Fragment> | ||
<Fragment slot="source">Źródło: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment> | ||
</IslandsDiagram> | ||
|
||
Wyspa zawsze działa w izolacji od innych wysp na stronie, a na jednej stronie może istnieć wiele wysp. Wyspy nadal mogą dzielić stan i komunikować się ze sobą, mimo że działają w różnych kontekstach komponentów. | ||
|
||
Ta elastyczność pozwala Astro na obsługę wielu frameworków UI, takich jak [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) i [SolidJS](https://www.solidjs.com/). Ponieważ są one niezależne, możesz nawet mieszać kilka frameworków na każdej stronie. | ||
|
||
:::tip | ||
Chociaż większość deweloperów będzie trzymać się tylko jednego frameworka UI, Astro obsługuje wiele frameworków w tym samym projekcie. Pozwala to na: | ||
|
||
- Wybór frameworka, który jest najlepszy dla każdego komponentu. | ||
- Naukę nowego frameworka bez konieczności rozpoczynania nowego projektu. | ||
- Współpracę z innymi, nawet przy pracy z różnymi frameworkami. | ||
- Stopniowe konwertowanie istniejącej strony na inny framework bez przestojów. | ||
::: | ||
|
||
## Tworzenie wyspy | ||
|
||
Domyślnie Astro automatycznie renderuje każdy komponent UI do samego HTML i CSS, **automatycznie usuwając cały JavaScript po stronie klienta.** | ||
|
||
```astro title="src/pages/index.astro" | ||
<MyReactComponent /> | ||
``` | ||
|
||
Może to brzmieć restrykcyjnie, ale to zachowanie utrzymuje strony Astro szybkimi domyślnie i chroni deweloperów przed przypadkowym wysyłaniem niepotrzebnego lub niechcianego JavaScript, który mógłby spowolnić ich stronę internetową. | ||
|
||
Przekształcenie dowolnego statycznego komponentu UI w interaktywną wyspę wymaga tylko dyrektywy `client:*`. Astro następnie automatycznie buduje i pakuje Twój JavaScript po stronie klienta dla zoptymalizowanej wydajności. | ||
|
||
```astro title="src/pages/index.astro" ins="client:load" | ||
<!-- Ten komponent jest teraz interaktywny na stronie! | ||
Reszta Twojej strony pozostaje statyczna. --> | ||
<MyReactComponent client:load /> | ||
``` | ||
|
||
Dzięki wyspom, JavaScript po stronie klienta jest ładowany tylko dla jawnych interaktywnych komponentów, które oznaczysz za pomocą dyrektyw `client:*`. | ||
|
||
A ponieważ interakcja jest konfigurowana na poziomie komponentu, możesz obsłużyć różne priorytety ładowania dla każdego komponentu w oparciu o jego wykorzystanie. Na przykład, `client:idle` mówi komponentowi, aby ładował się, gdy przeglądarka staje się bezczynna, a `client:visible` mówi komponentowi, aby ładował się tylko wtedy, gdy wchodzi w obszar widoczności. | ||
|
||
## Jakie są korzyści z Wysp? | ||
|
||
Najbardziej oczywistą korzyścią z budowania z Wyspami Astro jest wydajność: większość Twojej strony internetowej jest konwertowana na szybki, statyczny HTML, a JavaScript jest ładowany tylko dla pojedynczych komponentów, które go potrzebują. JavaScript jest jednym z najwolniejszych zasobów, które możesz załadować w przeliczeniu na bajt, więc każdy bajt się liczy. | ||
|
||
Kolejną korzyścią jest równoległe ładowanie. W przykładowej ilustracji powyżej, nisko priorytetowa wyspa "karuzela obrazów" nie musi blokować wysoko priorytetowej wyspy "Nagłówek". Obie ładują się równolegle i hydrują w izolacji, co oznacza, że nagłówek staje się interaktywny natychmiast, bez konieczności czekania na cięższą karuzelę niżej na stronie. | ||
|
||
Co więcej, możesz powiedzieć Astro dokładnie jak i kiedy renderować każdy komponent. Jeśli ta karuzela obrazów jest naprawdę kosztowna do załadowania, możesz dołączyć specjalną [dyrektywę klienta](/pl/reference/directives-reference/#client-directives), która mówi Astro, aby ładować karuzelę tylko wtedy, gdy staje się widoczna na stronie. Jeśli użytkownik nigdy jej nie zobaczy, nigdy się nie załaduje. | ||
|
||
W Astro to ty jako deweloper musisz wyraźnie powiedzieć Astro, które komponenty na stronie muszą również działać w przeglądarce. Astro będzie hydrować tylko to, co jest dokładnie potrzebne na stronie i pozostawi resztę Twojej strony jako statyczny HTML. | ||
|
||
**Wyspy są tajemnicą sukcesu Astro w zakresie domyślnej wydajności!** |