[Blog] Pagination avec Turbo #504

maximecolin · 2022-12-01T13:00:59Z

No description provided.

for commit 2208f2d

ogizanagi

🙏🏻

ogizanagi · 2022-12-01T13:08:34Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+authors:            ["mcolin"]
+---
+
+La pagination avec scroll infin est le fait de chargé automatiquement les pages suivante d'une pagination au fur et à mesure du scroll. C'est un artifice qui fait en général son effet et qui peut s'avérer une bonne pratique UX dans certains cas.


Suggested change

La pagination avec scroll infin est le fait de chargé automatiquement les pages suivante d'une pagination au fur et à mesure du scroll. C'est un artifice qui fait en général son effet et qui peut s'avérer une bonne pratique UX dans certains cas.

La pagination avec scroll infini est le fait de charger automatiquement les pages suivantes d'une pagination au fur et à mesure du scroll. C'est un artifice qui fait en général son effet et qui peut s'avérer une bonne pratique UX dans certains cas.

ogizanagi · 2022-12-01T13:09:08Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+
+Nous allons voir dans cet article comment réaliser cet effet grâce à [Hotwired Turbo](https://turbo.hotwired.dev/) sans coder la moindre ligne de Javascript.
+
+Je vais pour cela partir d'une base Symfony qui dispose déjà du Turbo installé et configuré grâce au bundle [Symfony UX Turbo](https://symfony.com/bundles/ux-turbo/current/index.html), mais les principes décrits ici sont utilisable dans n'importe quel autre environnement utilisant Turbo.


Suggested change

Je vais pour cela partir d'une base Symfony qui dispose déjà du Turbo installé et configuré grâce au bundle [Symfony UX Turbo](https://symfony.com/bundles/ux-turbo/current/index.html), mais les principes décrits ici sont utilisable dans n'importe quel autre environnement utilisant Turbo.

Je vais pour cela partir d'une base Symfony qui dispose déjà de Turbo installé et configuré grâce au bundle [Symfony UX Turbo](https://symfony.com/bundles/ux-turbo/current/index.html), mais les principes décrits ici sont utilisable dans n'importe quel autre environnement utilisant Turbo.

ogizanagi · 2022-12-01T13:10:21Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+
+Nous allons commencer par quelques petits rappels sur le fonctionnement de Turbo.
+
+Le principe de cette librairie est de prendre la main sur les liens et les formulaires de votre page html afin de remplacer les requêtes que ferait votre navigateur par des rêquêtes asyncrhones (`fetch`) réalisé en javascript. La librairie va ensuite mettre à jour le DOM de votre page avec le HTML retourner par le serveur, l'idée étant ainsi de faire de éconnomie de requête en ne rechargeant pas toute la page comme avec une requête navigateur classique.


Suggested change

Le principe de cette librairie est de prendre la main sur les liens et les formulaires de votre page html afin de remplacer les requêtes que ferait votre navigateur par des rêquêtes asyncrhones (`fetch`) réalisé en javascript. La librairie va ensuite mettre à jour le DOM de votre page avec le HTML retourner par le serveur, l'idée étant ainsi de faire de éconnomie de requête en ne rechargeant pas toute la page comme avec une requête navigateur classique.

Le principe de cette librairie est de prendre la main sur les liens et les formulaires de votre page html afin de remplacer les requêtes que ferait votre navigateur par des requêtes asynchrones (`fetch`) réalisées en javascript. La librairie va ensuite mettre à jour le DOM de votre page avec le HTML retourné par le serveur. L'idée étant ainsi de faire des économies de requête en ne rechargeant pas toute la page contrairement à une requête navigateur classique.

Peut-être mentionner qu'il s'agit là de Turbo Drive (et donc différent de Turbo Frame utilisé en complément pour la pagination)

ogizanagi · 2022-12-01T13:12:32Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+
+Turbo propose également deux fonctionnalités qui font de paire avec ce principe :
+
+- Les `<turbo-frame>` qui permettent de décomposer votre page en portions indépendantes qui pourront être rechargée ou modifiée indépendamment de la page.


Suggested change

- Les `<turbo-frame>` qui permettent de décomposer votre page en portions indépendantes qui pourront être rechargée ou modifiée indépendamment de la page.

- Les `<turbo-frame>` qui permettent de décomposer votre page en portions indépendantes qui pourront être rechargées ou modifiées indépendamment de la page.

ogizanagi · 2022-12-01T13:13:07Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+3. Lorsque l'on arrive à nouveau en base de liste, on ajoute les n éléments suivants à la liste
+4. Et ainsi de suite jusqu'au dernier élément disponible
+
+##


Titre manquant ? 😄

ogizanagi · 2022-12-01T13:14:11Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+
+Pour la suite je vais prendre comme hypothèque que nous avons une pagination par page fonctionnelle. Mais que vous utilisiez une pagination par page ou par curseur, le principe est le même.
+
+Je prend donc pour hypothèse que vous disposez d'une classe `ItemPaginator` proposant une méthode `paginate(int $page): Pagination` retournant un objet `Pagination` contenant les éléments de la page demandée ainsi que différentes méthodes : `getCurrentPage(): int` permetant de connaitre la page courante, `getNextPage(): int` retournant la page suivante et `isLastPage(): bool` indiquant si la page courante est la dernière.


Suggested change

Je prend donc pour hypothèse que vous disposez d'une classe `ItemPaginator` proposant une méthode `paginate(int $page): Pagination` retournant un objet `Pagination` contenant les éléments de la page demandée ainsi que différentes méthodes : `getCurrentPage(): int` permetant de connaitre la page courante, `getNextPage(): int` retournant la page suivante et `isLastPage(): bool` indiquant si la page courante est la dernière.

Je prends donc pour hypothèse que vous disposez d'une classe `ItemPaginator` proposant une méthode `paginate(int $page): Pagination` retournant un objet `Pagination` contenant les éléments de la page demandée ainsi que différentes méthodes :

- `getCurrentPage(): int` permettant de connaitre la page courante

- `getNextPage(): int` retournant la page suivante

- `isLastPage(): bool` indiquant si la page courante est la dernière

ogizanagi · 2022-12-01T13:14:24Z

content/blog/dev/turbo-infinite-scroll-pagination.md

+
+### Etape 1 - Afficher la première page
+
+Ici rien de sorcier, comme dans une pagination classique on utilise une boucle pour afficher les élément de la première page.


Suggested change

Ici rien de sorcier, comme dans une pagination classique on utilise une boucle pour afficher les élément de la première page.

Ici, rien de sorcier, comme dans une pagination classique on utilise une boucle pour afficher les éléments de la première page.

WIP

18fb8a0

maximecolin self-assigned this Dec 1, 2022

maximecolin marked this pull request as draft December 1, 2022 13:01

maximecolin deployed to staging December 1, 2022 13:01 View deployment

github-actions bot pushed a commit that referenced this pull request Dec 1, 2022

[AUTO] Deploy PR #504

b68d69f

for commit 2208f2d

ogizanagi added the blog Article de blog label Dec 1, 2022

ogizanagi reviewed Dec 1, 2022

View reviewed changes

maximecolin added 3 commits December 1, 2022 15:37

Update turbo-infinite-scroll-pagination.md

74fa821

Update turbo-infinite-scroll-pagination.md

e8d60a8

Update turbo-infinite-scroll-pagination.md

87f4a42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Blog] Pagination avec Turbo #504

[Blog] Pagination avec Turbo #504

maximecolin commented Dec 1, 2022

ogizanagi left a comment

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

ogizanagi Dec 1, 2022

	La pagination avec scroll infin est le fait de chargé automatiquement les pages suivante d'une pagination au fur et à mesure du scroll. C'est un artifice qui fait en général son effet et qui peut s'avérer une bonne pratique UX dans certains cas.
	La pagination avec scroll infini est le fait de charger automatiquement les pages suivantes d'une pagination au fur et à mesure du scroll. C'est un artifice qui fait en général son effet et qui peut s'avérer une bonne pratique UX dans certains cas.


		Nous allons voir dans cet article comment réaliser cet effet grâce à [Hotwired Turbo](https://turbo.hotwired.dev/) sans coder la moindre ligne de Javascript.

		Je vais pour cela partir d'une base Symfony qui dispose déjà du Turbo installé et configuré grâce au bundle [Symfony UX Turbo](https://symfony.com/bundles/ux-turbo/current/index.html), mais les principes décrits ici sont utilisable dans n'importe quel autre environnement utilisant Turbo.


		Nous allons commencer par quelques petits rappels sur le fonctionnement de Turbo.

		Le principe de cette librairie est de prendre la main sur les liens et les formulaires de votre page html afin de remplacer les requêtes que ferait votre navigateur par des rêquêtes asyncrhones (`fetch`) réalisé en javascript. La librairie va ensuite mettre à jour le DOM de votre page avec le HTML retourner par le serveur, l'idée étant ainsi de faire de éconnomie de requête en ne rechargeant pas toute la page comme avec une requête navigateur classique.


		Turbo propose également deux fonctionnalités qui font de paire avec ce principe :

		- Les `<turbo-frame>` qui permettent de décomposer votre page en portions indépendantes qui pourront être rechargée ou modifiée indépendamment de la page.


		Pour la suite je vais prendre comme hypothèque que nous avons une pagination par page fonctionnelle. Mais que vous utilisiez une pagination par page ou par curseur, le principe est le même.

		Je prend donc pour hypothèse que vous disposez d'une classe `ItemPaginator` proposant une méthode `paginate(int $page): Pagination` retournant un objet `Pagination` contenant les éléments de la page demandée ainsi que différentes méthodes : `getCurrentPage(): int` permetant de connaitre la page courante, `getNextPage(): int` retournant la page suivante et `isLastPage(): bool` indiquant si la page courante est la dernière.


		### Etape 1 - Afficher la première page

		Ici rien de sorcier, comme dans une pagination classique on utilise une boucle pour afficher les élément de la première page.

	Ici rien de sorcier, comme dans une pagination classique on utilise une boucle pour afficher les élément de la première page.
	Ici, rien de sorcier, comme dans une pagination classique on utilise une boucle pour afficher les éléments de la première page.

[Blog] Pagination avec Turbo #504

Are you sure you want to change the base?

[Blog] Pagination avec Turbo #504

Conversation

maximecolin commented Dec 1, 2022

ogizanagi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment