push state
1.0.0
hy-push-state est un composant Web qui vous permet de transformer des pages Web en applications Web. Le composant charge dynamiquement un nouveau contenu (anciennement appelé « ajax ») et l'insère dans la page actuelle, sans provoquer de Flash of White, Flash of Unstyled Content, etc.
Transformez des sites Web statiques en applications Web dynamiques. {:.plomb}
hy-push-state est similaire à pjax et smoothState, mais offre une logique de prélecture plus avancée et vous donne plus de contrôle sur ses composants internes pour permettre des animations avancées de transition de page.
hy-push-state est déjà utilisé par des centaines de sites dans le cadre du thème Hydejack{:.external} Jekyll.
REMARQUE : La version actuelle est encore une pré-version. L'API publique peut encore changer de manière importante. {:.message}
Lors de la visualisation de cette page sur webcomponents.org, l'exemple ci-dessous s'affichera sous forme de démo interactive. Sinon, trouvez les exemples autonomes ci-dessous.
< hy-push-state initial-href =" https://qwtel.com/hy-push-state/example/simple/ " prefetch >
< p >
< a href =" ./1.html " > Page 1 </ a >
< a href =" ./2.html " > Page 2 </ a >
< a href =" ./3.html " > Page 3 </ a >
</ p >
< p > Super simple example. </ p >
</ hy-push-state >Lorsque vous consultez ce document sur GitHub, npm ou ailleurs, vous pouvez consulter les exemples autonomes :
hy-push-state est Open Source mais pas gratuit.
Vous pouvez utiliser le composant conformément à la licence GPL-3.0, mais cela signifie que vous devez être prêt à publier votre code sous une licence compatible GPLv3 à votre tour.
Dans les cas où cela n'est pas acceptable, les licences commerciales suivantes sont disponibles :
| Personnel | Démarrer | Entreprise | |
|---|---|---|---|
| # Développeurs | 2 | 15 | ∞ |
| Licence | Personnel | Démarrer | Entreprise |
| Prix | 29 $ | 249 $ | 499 $ |
| Acheter {:.gumroad-button} | Acheter {:.gumroad-button} | Acheter {:.gumroad-button} | |
| {:.stretch-table} |
hy-push-state peut être utilisé de différentes manières :
Le composant Web est le moyen préféré d'utiliser hy-push-state , mais nécessite une prise en charge dans le navigateur ou un polyfill. Il existe plusieurs façons de l'inclure sur votre page :
C’est la version qui bénéficiera le plus tôt d’un support natif sur tous les principaux navigateurs.
< script type =" module " href =" https://unpkg.com/hy-push-state/dist/webcomponent/module " > </ script >
< hy-push-state replace-ids =" main,aside " prefetch >
< main id =" main " > <!-- ... --> </ main >
< aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > Certains navigateurs ont décidé de ne pas implémenter les importations HTML, mais elles sont facilement polyremplies.
< link rel =" import " href =" https://unpkg.com/hy-push-state/dist/webcomponent/hy-push-state.html " >
< hy-push-state replace-ids =" main,aside " prefetch >
< main id =" main " > <!-- ... --> </ main >
< aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state > Lors du chargement du composant à partir du CDN unpkg, vous pouvez importer la source directement en ajoutant le paramètre de requête ?module .
< script type =" module " src =" https://unpkg.com/hy-push-state/src/webcomponent/module?module " > </ script >
< hy-push-state replace-ids =" main,aside " prefetch >
< main id =" main " > <!-- ... --> </ main >
< aside id =" aside " > <!-- ... --> </ aside >
</ hy-push-state >Notez que cette approche entraînera des centaines de requêtes HTTP distinctes (une pour chaque module) et est destinée uniquement aux tests et aux prototypes. L'importation de modules ES6 dégroupés est beaucoup plus lente que les distributions groupées et le restera dans un avenir prévisible.
L'un des avantages de cette approche est que les dépendances partagées ne seront pas incluses deux fois lors de l'utilisation de plusieurs composants de la famille de composants Hydejack. Cependant, la configuration de webpack est une meilleure solution dans ces cas :
Vous pouvez utiliser hy-push-state avec un bundler frontal tel que webpack ou rollup. Installez simplement le composant avec npm ou Yarn et importez la source dans votre code :
import 'hy-push-state/src/webcomponent/module' ; Si vous souhaitez contrôler le moment où l'élément personnalisé est define , vous pouvez également importer le HTMLElement comme ceci :
import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ; Notez que toutes les dépendances de hy-push-state sont des modules ES6 valides, de sorte qu'elles peuvent être intégrées au ModuleConcatenationPlugin de webpack.
hy-push-state démarre une requête HTTP dès que l'utilisateur « laisse entendre » qu'il est sur le point d'ouvrir une nouvelle page en survolant, en se concentrant ou en touchant ( touchstart -ing) un lien. Si la supposition est correcte, la requête a une longueur d'avance de 100 ms ou plus, augmentant encore la vitesse perçue de votre site en plus du remplacement déjà rapide des pages de style application Web.
Contrairement à d'autres implémentations de cette fonctionnalité, la demande de prélecture actuelle sera annulée si l'utilisateur fait allusion à un lien différent, garantissant ainsi qu'il n'y aura pas plus d'une demande de prélecture en cours à la fois. Cela évite d'encombrer le réseau avec des requêtes qui vont être rejetées à l'arrivée, ce qui est essentiel lorsque l'on utilise des connexions 3G lentes.
Par exemple, survoler les liens dans la barre latérale sur qwtel.com produira une chronologie comme celle ci-dessous :
{:.lead} Capture d'écran de la console du développeur Chrome des requêtes de prélecture. {:.chiffre}
hy-push-state permet de créer des animations avancées de transition de page, comme celles utilisées dans Hydejack et les applications Web de pointe. Celles-ci peuvent être basées sur des promesses plutôt que sur le temps pour tenir compte des retards plus faibles causés par d'autres codes, des interruptions du GC ou des appareils plus lents en général.
Le code d'une simple animation de fondu sortant utilisant l'API Web Animations peut ressembler à :
pushStateEl . addEventListener ( 'hy-push-state-start' , ( { detail } ) =>
detail . transitionUntil ( new Promise ( res =>
document
. getElementById ( 'my-content' )
. animate ( [ { opacity : 1 } , { opacity : 0 } ] , { duration : 250 } )
. addEventListener ( 'finish' , res )
) )
) ; Des animations basées sur le temps sont également possibles et sont configurées avec l'option duration .
Ce composant suit le Web Components Gold Standard.
Le code source est écrit dans un style de programmation littéral et doit être raisonnablement accessible. Cependant, certaines connaissances de RxJS sont requises.
La fonctionnalité de base est implémentée dans mixin / index.js , qui est utilisée pour créer les versions spécifiques au framework du composant.
jqueryindex.jsmixinconstants.jsevent-listeners.jsevents.jsfetching.jshistory.jsindex.jsmethods.jsoperators.jsscript-hack.jsscrolling.jssetup.jsupdate.jsvanillaindex.jswebcomponenthtml-import.sindex.jsmodule.jscommon.jsindex.jsurl.jsLa taille du bundle minifié est d'environ 90 Ko, soit ~ 20 Ko gzippé. La majorité provient de RxJS. Si vous utilisez déjà RxJS dans votre projet ou si vous utilisez plusieurs composants de la famille de composants Hydejack, envisagez d'utiliser un bundler frontend.
| Taille | Déposer |
|---|---|
| 84 Ko | dist/jquery/index.js |
| 19K | dist/jquery/index.js.gz |
| 80K | dist/mixin/index.js |
| 18K | dist/mixin/index.js.gz |
| 81K | dist/vanilla/index.js |
| 18K | dist/vanilla/index.js.gz |
| 86 Ko | dist/webcomponent/html-import.js |
| 19K | dist/webcomponent/html-import.js.gz |
| 86 Ko | dist/webcomponent/index.js |
| 19K | dist/webcomponent/index.js.gz |
| 86 Ko | dist/webcomponent/module.js |
| 19K | dist/webcomponent/module.js.gz |
