Skip to content

Commit

Permalink
improved info about Naja, removed obsolete Nittro
Browse files Browse the repository at this point in the history
  • Loading branch information
dg committed Dec 2, 2022
1 parent ebbc4aa commit 79291fa
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 12 deletions.
31 changes: 25 additions & 6 deletions doc/cs/application/ajax.texy
Expand Up @@ -15,9 +15,6 @@ AJAXový požadavek lze detekovat metodou služby [zapouzdřující HTTP požada

AJAXový požadavek se nijak neliší od klasického požadavku - je zavolán presenter s určitým view a parametry. Je také věcí presenteru, jak bude na něj reagovat: může použít vlastní rutinu, která vrátí nějaký fragment HTML kódu (HTML snippet), XML dokument, JSON objekt nebo kód v JavaScriptu.

.[caution]
Nette neobsahuje implementaci AJAX požadavků na straně klienta. Doporučujeme knihovnu [Naja |https://naja.js.org] nebo [Nittro framework |https://www.nittro.org].

Pro odesílání dat prohlížeči ve formátu JSON lze využít předpřipravený objekt `payload`:

```php
Expand Down Expand Up @@ -48,13 +45,35 @@ public function handleClick($param): void
}
```

Nicméně daleko silnější nástroj představuje vestavěná podpora AJAXových snippetů. Díky ní lze udělat z obyčejné aplikace AJAXovou prakticky několika řádky kódu. Jak to celé funguje, demonstruje příklad Fifteen, jehož kód najdete na [GitHubu |https://github.com/nette-examples/fifteen].

Naja
====

K obsluze AJAXových požadavků na straně prohlížeče slouží [knihovna Naja |https://naja.js.org], kterou si [nainstalujte |https://naja.js.org/#/guide/01-install-setup-naja] jako node.js balíček (pro použití s aplikacemi Webpack, Rollup, Vite, Parcel a dalšími):

```shell
npm install naja
```

…nebo přímo vložte do šablony stránky:

```html
<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>
```


Snippety
========

Daleko silnější nástroj představuje vestavěná podpora AJAXových snippetů. Díky ní lze udělat z obyčejné aplikace AJAXovou prakticky několika řádky kódu. Jak to celé funguje, demonstruje příklad Fifteen, jehož kód najdete na [GitHubu |https://github.com/nette-examples/fifteen].

Snippety fungují tak, že při prvotním (tedy neAJAXovém) požadavku se přenese celá stránka a poté se při každém již AJAXovém [subrequestu |components#Signál] (= požadavku na stejný presenter a view) přenáší pouze kód změněných částí ve zmíněném úložišti `payload`. K tomu slouží dva mechanismy: invalidace a renderování snippetů.

Snippety vám mohou připomínat Hotwire pro Ruby on Rails nebo Symfony UX Turbo, nicméně Nette s nimi přišlo už o čtrnáct let dříve.


Invalidace
==========
Invalidace snippetů
===================

Každý objekt třídy [Control |components] (což je i samotný Presenter) si umí zapamatovat, jestli při signálu došlo ke změnám, které si vyžadují jej překreslit. K tomu slouží dvojice metod `redrawControl()` a `isControlInvalid()`. Příklad:

Expand Down
34 changes: 28 additions & 6 deletions doc/en/application/ajax.texy
Expand Up @@ -14,9 +14,6 @@ An AJAX request can be detected using a method of a service [encapsulating a HTT

An AJAX request is no different from a normal one – a presenter is called with a certain view and parameters. It is, too, up to the presenter how will it react: it can use its routines to either return a fragment of HTML code (a snippet), an XML document, a JSON object or a piece of Javascript code.

.[caution]
Nette doesn't implement client-side AJAX requests. We recommend library [Naja |https://naja.js.org] or [Nittro framework |https://www.nittro.org].

There is a pre-processed object called `payload` dedicated to sending data to the browser in JSON.

```php
Expand Down Expand Up @@ -46,12 +43,37 @@ public function handleClick($param): void
// ...
}
```
However, there is a far more powerful tool of built-in AJAX support – snippets. Using them makes it possible to turn a regular application into an AJAX one using only a few lines of code. How it all works is demonstrated in the Fifteen example whose code is also accessible in the build or on [GitHub |https://github.com/nette-examples/fifteen].


Naja
====

K obsluze AJAXových požadavků na straně prohlížeče slouží [knihovna Naja |https://naja.js.org], [install |https://naja.js.org/#/guide/01-install-setup-naja] it as a node.js package (to use with Webpack, Rollup, Vite, Parcel and more):

```shell
npm install naja
```

…or insert it directly into the page template:

```html
<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>
```


Snippets
========

There is a far more powerful tool of built-in AJAX support – snippets. Using them makes it possible to turn a regular application into an AJAX one using only a few lines of code. How it all works is demonstrated in the Fifteen example whose code is also accessible in the build or on [GitHub |https://github.com/nette-examples/fifteen].

The way snippets work is that the whole page is transferred during the initial (i.e. non-AJAX) request and then with every AJAX [subrequest |components#signal] (request of the same view of the same presenter) only the code of the changed parts is transferred in the `payload` repository mentioned earlier.

Snippets may remind you of Hotwire for Ruby on Rails or Symfony UX Turbo, but Nette came up with them fourteen years earlier.


Invalidation of Snippets
========================

Invalidation
============
Each descendant of class [Control |components] (which a Presenter is too) is able to remember whether there were any changes during a request that require it to re-render. There are a pair of methods to handle this: `redrawControl()` and `isControlInvalid()`. An example:

```php
Expand Down

0 comments on commit 79291fa

Please sign in to comment.