push state

estado hy-push

hy-push-state es un componente web que le permite convertir páginas web en aplicaciones web. El componente carga dinámicamente contenido nuevo (anteriormente conocido como "ajax") y lo inserta en la página actual, sin provocar Flash of White, Flash of Unstyled Content, etc.

Convierta sitios web estáticos en aplicaciones web dinámicas. {:.dirigir}

hy-push-state es similar a pjax y smoothState, pero ofrece una lógica de búsqueda previa más avanzada y le brinda más control sobre sus componentes internos para permitir animaciones de transición de página avanzadas.

hy-push-state ya es utilizado por cientos de sitios como parte del tema Hydejack{:.external} Jekyll.

NOTA : La versión actual aún es una versión preliminar. La API pública aún puede cambiar de manera importante. {:.mensaje}

Ejemplos

Al visualizar esta página en webcomponents.org, el siguiente ejemplo se mostrará como una demostración interactiva. De lo contrario, busque los ejemplos independientes a continuación.

 < 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 >

Al ver este documento en GitHub, npm o en otro lugar, puede consultar los ejemplos independientes:

• Ejemplo de componente web{:.external}
• Ejemplo de jQuery{:.externo}
• Ejemplo de Vanilla JS{:.external}
• Ejemplo de mezcla{:.external}

Licencia

hy-push-state es de código abierto pero no gratuito.

Puede utilizar el componente de acuerdo con la licencia GPL-3.0, pero esto significa que debe estar dispuesto a publicar su código bajo una licencia compatible con GPLv3.

Para los casos en los que esto no sea aceptable, se encuentran disponibles las siguientes licencias comerciales:

	Personal	Puesta en marcha	Empresa
# Desarrolladores	2	15	∞
Licencia	Personal	Puesta en marcha	Empresa
Precio	$29	$249	$499
	Comprar {:.gumroad-button}	Comprar {:.gumroad-button}	Comprar {:.gumroad-button}
{:.mesa-estirable}

Uso

hy-push-state se puede utilizar de diversas formas:

• Como componente web, tanto como módulo ES6 como importación HTML
• Como complemento jQuery
• Como clase de JavaScript vainilla
• Como parte del código de interfaz incluido.
• (Avanzado) Posiblemente como parte de su propia jerarquía de componentes como ES6 Mixin.

Componente web

El componente web es la forma preferida de utilizar hy-push-state , pero requiere soporte en el navegador o un polyfill. Hay varias formas de incluirlo en tu página:

Módulo ES6 incluido

Esta es la versión que tendrá soporte nativo en todos los principales navegadores lo antes posible.

 < 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 > 

Importación HTML

Algunos navegadores han decidido no implementar importaciones de HTML, pero se pueden rellenar fácilmente.

 < 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 > 

Módulo ES6 desagregado (experimental)

Al cargar el componente desde la CDN unpkg, puede importar la fuente directamente agregando el parámetro de consulta ?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 >

Tenga en cuenta que este enfoque generará cientos de solicitudes HTTP independientes (una para cada módulo) y está destinado únicamente a pruebas y prototipos. La importación de módulos ES6 desagregados es mucho más lenta que las distribuciones empaquetadas y seguirá siéndolo en el futuro previsible.

Una ventaja de este enfoque es que las dependencias compartidas no se incluirán dos veces cuando se utilice más de un componente de la familia de componentes Hydejack. Sin embargo, configurar webpack es una mejor solución en estos casos:

empaquetadores

Puede utilizar hy-push-state con un paquete de interfaz como webpack o rollup. Simplemente instale el componente con npm o hilo e importe la fuente en su código:

 import 'hy-push-state/src/webcomponent/module' ;

Si desea tener control sobre cuándo se define el elemento personalizado, también puede importar HTMLElement de esta manera:

 import { HyPushStateElement } from 'hy-push-state/src/webcomponent' ;
// ...
customElements . define ( 'hy-push-state' , HyPushStateElement ) ;

Tenga en cuenta que todas las dependencias de hy-push-state son módulos ES6 válidos, por lo que pueden integrarse con ModuleConcatenationPlugin del paquete web.

Documentación

• Opciones
• Métodos
• Eventos

Captura previa de página

hy-push-state inicia una solicitud HTTP tan pronto como el usuario "insinúa" que está a punto de abrir una nueva página al pasar el cursor, enfocarse o tocar ( touchstart -ing) un enlace. Si la suposición es correcta, la solicitud tiene una ventaja inicial de 100 ms o más, lo que aumenta aún más la velocidad percibida de su sitio además del ya rápido reemplazo de página estilo aplicación web.

A diferencia de otras implementaciones de esta característica, la solicitud de captación previa actual se cancelará si el usuario indica un enlace diferente, lo que garantiza que no habrá más de una solicitud de captación previa en curso a la vez. Esto evita saturar la red con solicitudes que serán descartadas al llegar, lo cual es esencial cuando se trata de conexiones 3G lentas.

Por ejemplo, al colocar el cursor sobre los enlaces en la barra lateral de qwtel.com se producirá una línea de tiempo como la siguiente:

{:.lead} Captura de pantalla de la consola de desarrollador de Chrome de solicitudes de captación previa. {:.cifra}

Animaciones avanzadas

hy-push-state permite crear animaciones de transición de página avanzadas, como las que se utilizan en Hydejack y las aplicaciones web de última generación. Estos pueden basarse en promesas en lugar de en tiempo para tener en cuenta retrasos más pequeños causados ​​por otro código, interrupciones de GC o dispositivos más lentos en general.

El código para una animación de desvanecimiento simple usando la API de animaciones web puede verse así:

 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 )
  ) )
) ;

Las animaciones basadas en el tiempo también son posibles y se configuran con la opción duration .

Patrón oro

Este componente sigue el estándar de oro de componentes web.

Fuente

El código fuente está escrito en un estilo de programación literal y debe ser razonablemente accesible. Sin embargo, se requieren algunos conocimientos de RxJS.

La funcionalidad principal se implementa en mixin / index.js , que se utiliza para crear las versiones específicas del marco del componente.

• jquery
  • index.js
• mixin
  • constants.js
  • event-listeners.js
  • events.js
  • fetching.js
  • history.js
  • index.js
  • methods.js
  • operators.js
  • script-hack.js
  • scrolling.js
  • setup.js
  • update.js
• vanilla
  • index.js
• webcomponent
  • html-import.s
  • index.js
  • module.js
• common.js
• index.js
• url.js

Tamaño

El tamaño del paquete minificado es de alrededor de 90 kb, o ~ 20 kb comprimidos con gzip. La mayor parte proviene de RxJS. Cuando ya utilice RxJS en su proyecto, o utilice más de un componente de la familia de componentes Hydejack, considere utilizar un paquete de interfaz.

Tamaño	Archivo
84K	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
86K	dist/webcomponent/html-import.js
19K	dist/webcomponent/html-import.js.gz
86K	dist/webcomponent/index.js
19K	dist/webcomponent/index.js.gz
86K	dist/webcomponent/module.js
19K	dist/webcomponent/module.js.gz