Cómo crear una experiencia de desplazamiento infinito con la API History Web

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial vamos a reforzar nuestras habilidades de la API de History Web. Vamos a construir un patrón UX en la Web que es amado y detestado en igual medida: desplazamiento infinito.

El desplazamiento infinito es un patrón de interfaz que carga un nuevo contenido a medida que llegamos al final de una página web dada. El desplazamiento infinito puede retener la participación de los usuarios cuando se implementa cuidadosamente; Algunos de los mejores ejemplos que se encuentran en las plataformas sociales como Facebook, Twitter y Pinterest.

Sin embargo, vale la pena señalar que estamos tomando las cosas en un punto significativo de lo que construimos en nuestro tutorial anterior, Transiciones de páginas suaves y bonitas con la API History Web . En este tutorial vamos a tratar con la interacción de desplazamiento de los usuarios, que puede ocurrir a una velocidad muy frecuente. Si no estamos teniendo cuidado con nuestro código, impactara perjudicando el rendimiento del sitio web . Asegúrese de leer los tutoriales anteriores antes de intentar este, sólo para darle una comprensión adecuada de lo que estamos haciendo.

Sin embargo, si está emocionado con la idea de un desafío, ajuste su cinturón de seguridad, prepárese, y ¡vamos a empezar!

Creación del sitio web de demostración

Nuestro sitio es un blog estático. Puede crearlo desde HTML simple o aprovechar un generador estático de sitios como Jekyll, Middleman o Hexo. Nuestra demostración para este tutorial tiene el siguiente aspecto:

Hay un par de cosas con respecto a la estructura HTML que requieren su atención.

<!-- site header -->
<div class="content" id="main">
  <article class="article" id="article-5" data-article-id="5">
		<!-- content -->
	</article>
<!-- site footer -->

Como se puede ver en el fragmento de código anterior, el artículo debe estar incluido en un elemento HTML con un ID único. Puede utilizar un div o un elemento section, sin restricción en el termino a nombrar el id del elemento.
Además, en el propio artículo, deberá agregar un atributo data-article-id que contenga el número de id correspondiente del artículo.

Siéntase libre de crear los estilos del sitio web; Lo que lo haga más colorido, atractivo o agregar más contenido.

Cargar JavaScript

Para empezar, cargue las siguientes bibliotecas JavaScript en el siguiente orden en cada página de su blog.

Jquery.js: la biblioteca que usaremos para seleccionar elementos, añadir nuevos contenidos, agregar nueva clase y realizar solicitudes AJAX.
History.js: un polyfill que ajusta el API de history nativo de los navegadores.

Nuestro complemento jQuery personalizado

Además de estos dos, tendremos que cargar nuestro propio archivo JavaScript donde podemos escribir los scripts para realizar desplazamientos infinitos. El enfoque que vamos a tomar es envolver nuestro JavaScript en un plugin jQuery, en lugar de escribirlo directamente como hemos hecho en los tutoriales anteriores.

Comenzaremos el plugin con el Plugin jQuery Boilerplate. Esto se asemeja a HTML5 Boilerplate en que proporciona una colección de plantillas, patrones y mejores prácticas sobre las cuales construir un plugin jQuery.

Descargue el Boilerplate, colóquelo en el directorio de su sitio web donde residen todos los archivos JavaScript (como /assets/js/) y cambie el nombre del archivo a "keepscrolling.jquery.js" (Este nombre fue inspirado por Dory de Buscando a Nemo y su famosa línea "Keep Swimming").

assets/js
├── keepscrolling.jquery.js
├── keepscrolling.jquery.js.map
└── src
    └── keepscrolling.jquery.js

El complemento nos permitirá introducir flexibilidad con Opciones o Configuración.

Observando la estructura del Plugin jQuery

Escribir un plugin jQuery requiere una forma de pensar ligeramente diferente, por lo que primero examinaremos cómo nuestro plugin jQuery está estructurado antes de agregar cualquier código. Como se puede ver a continuación, he dividido el código en cuatro secciones:

;( function( $, window, document, undefined ) {

	"use strict";

	// 1.
	var pluginName = "keepScrolling",
		 defaults = {};

	// 2.
	function Plugin ( element, options ) {

		this.element = element;
		this.settings = $.extend( {}, defaults, options );

		this._defaults = defaults;
		this._name = pluginName;

		this.init();
	}

	// 3.
	$.extend( Plugin.prototype, {
		init: function() {
			console.log( "Plugin initialized" );
		},
	} );

	// 4.
	$.fn[ pluginName ] = function( options ) {
		return this.each( function() {
			if ( !$.data( this, "plugin_" + pluginName ) ) {
				$.data( this, "plugin_" +
					pluginName, new Plugin( this, options ) );
			}
		} );
	};

} )( jQuery, window, document );

En la primera sección del código, especificamos nuestro nombre de plugin, keepScrolling, con "camel case" de acuerdo con las convenciones de nombres comunes de JavaScript. También tenemos una variable, defaults, que contendrá la configuración predeterminada del complemento.
A continuación, tenemos la función principal del complemento, Plugin(). Esta función se puede comparar con un "constructor" que, en este caso, inicializa el complemento y fusionar los valores predeterminados con los que se pasen al instanciar el complemento.
La tercera sección es donde vamos a componer nuestras propias funciones para servir a la funcionalidad de desplazamiento infinito.
Por último, la cuarta sección es una que envuelve todo el asunto en un complemento jQuery.

Con todos estos conjuntos, ahora podemos componer nuestro JavaScript. Y comenzamos definiendo las opciones predeterminadas de nuestro complemento.

Las opciones

;( function( $, window, document, undefined ) {

	"use strict";

	var pluginName = "keepScrolling",
		 defaults = {
		 	floor: null,
			article: null,
			data: {}
		 };
	...

} )( jQuery, window, document );

Como puede ver arriba, hemos establecido tres opciones:

floor: un selector de id–como #floor o #footer- que consideramos el final del sitio web o el contenido. Normalmente, sería el pie de página del sitio.
article: un selector de clase que envuelve el artículo.
data: dado que no tenemos acceso a ninguna API externa (nuestro sitio web es estático) necesitamos pasar una colección de datos de artículo, como la URL del artículo, el ID y el título en formato JSON como argumento de opción.

Las funciones

Aquí tenemos el init(). En esta función, agregaremos una serie de funciones que deben ejecutarse inmediatamente durante la inicialización del sitio. Por ejemplo, seleccionamos el piso del sitio.

$.extend( Plugin.prototype, {

	// The `init()` function.
	init: function() {
		this.siteFloor = $( this.settings.floor ); // select the element set as the site floor.
	},
} );

También hay algunas funciones que ejecutaremos fuera de la inicialización. Añadimos estas funciones para crearlas y agregarlas después de la función init.

El primer conjunto de funciones que vamos a escribir son las que utilizamos para recuperar o devolver una "cosa"; Cualquier cosa desde una Cadena, un Objeto o un Número que pueda reutilizarse en las otras funciones del complemento. Estos incluyen cosas para:

Obtener todos los artículos en la página:

/**
 * Find and returns list of articles on the page.
 * @return {jQuery Object} List of selected articles.
 */
getArticles: function() {
	return $( this.element ).find( this.settings.article );
},

Obtenga la dirección del artículo. En WordPress, esto se conoce popularmente como "post slug".

/**
 * Returns the article Address.
 * @param  {Integer} i The article index.
 * @return {String}    The article address, e.g. `post-two.html`
 */
getArticleAddr: function( i ) {

	var href = window.location.href;
	var root = href.substr( 0, href.lastIndexOf( "/" ) );

	return root + "/" + this.settings.data[ i ].address + ".html";
},

Obtenga la siguiente id y direcciónes del artículo a obtener.

/**
 * Return the "next" article.
 * @return {Object} The `id` and `url` of the next article.
 */
getNextArticle: function() {

	// Select the last article.
	var $last = this.getArticles().last();

	var articlePrevURL;

	/**
	 * This is a simplified way to determine the content ID.
	 *
	 * Herein, we substract the last post ID by `1`.
	 * Ideally, we should be calling call an API endpoint, for example:
	 * https://www.techinasia.com/wp-json/techinasia/2.0/posts/329951/previous/
	 */
	var articleID = $last.data( "article-id" );
	var articlePrevID = parseInt( articleID, 10 ) - 1; // Previous ID

	// Loop into the Option `data`, and get the correspending Address.
	for ( var i = this.settings.data.length - 1; i >= 0; i-- ) {
		if ( this.settings.data[ i ].id === articlePrevID ) {
			articlePrevURL = this.getArticleAddr( i ) ;
		}
	}

	return {
		id: articlePrevID,
		url: articlePrevURL
	};
},

A continuación se muestran las funciones de utilidad del complemento; Una función que es responsable de hacer una "cosa" particular. Éstas incluyen:

Función que indica si un elemento está entrando en la ventana gráfica. Lo usamos principalmente para saber si el sitio definido "piso" es visible dentro de la ventana gráfica.

/**
 * Detect whether the target element is visible.
 * https://stackoverflow.com/q/123999/
 *
 * @return {Boolean} `true` if the element in viewport, and `false` if not.
 */
isVisible: function() {
	if ( target instanceof jQuery ) {
		target = target[ 0 ];
	}

	var rect = target.getBoundingClientRect();

	return rect.bottom > 0 &&
		rect.right > 0 &&
		rect.left < ( window.innerWidth || document.documentElement.clientWidth ) &&
		rect.top < ( window.innerHeight || document.documentElement.clientHeight );
}, 

Función que detiene la ejecución de una función; Conocido como rebote. Como se mencionó anteriormente, nos ocuparemos de la actividad de desplazamiento del usuario que se producirá a una velocidad muy frecuente. Por lo tanto, una función dentro del evento de scroll se ejecutará con frecuencia, siguiendo el desplazamiento del usuario, que convertirá la experiencia de desplazamiento en el sitio lento o atrasado.

La función de rebote anterior reducirá la frecuencia de ejecución. Esperará el tiempo especificado, a través del parámetro wait, después de que el usuario deje de desplazarse antes de ejecutar la función.

/**
 * Returns a function, that, as long as it continues to be invoked, will not b
 * triggered.
 * The function will be called after it stops being called for N milliseconds.
 * If immediate is passed, trigger the function on the leading edge, instead of
 * the trailing.
 *
 * @link https://davidwalsh.name/function-debounce
 * @link http://underscorejs.org/docs/underscore.html#section-83
 *
 * @param  {Function} func   	  Function to debounce
 * @param  {Integer}  wait      The time in ms before the Function run
 * @param  {Boolean}  immediate
 * @return {Void}
 */
isDebounced: function( func, wait, immediate ) {
	var timeout;

	return function() {

		var context = this,
		args = arguments;

		var later = function() {
			timeout = null;
			if ( !immediate ) {
				func.apply( context, args );
			}
		};

		var callNow = immediate && !timeout;

		clearTimeout( timeout );
		timeout = setTimeout( later, wait );

		if ( callNow ) {
			func.apply( context, args );
		}
	};
}, 

Función que determina si se debe proceder o anular una operación.

/**
 * Whether to proceed ( or not to ) fetching a new article.
 * @return {Boolean} [description]
 */
isProceed: function() {

	if ( articleFetching // check if we are currently fetching a new content.
		  || articleEnding // check if no more article to load.
		  || !this.isVisible( this.siteFloor ) // check if the defined "floor" is visible.
		  ) {
		return;
	}

	if ( this.getNextArticle().id <= 0 ) {
		articleEnding = true;
		return;
	}

	return true;
},

Utilizaremos la función de utilidad anterior, isProceed(), para examinar si se cumplen todas las condiciones para proceder a extraer nuevo contenido. Si es así, la función que sigue se ejecutará, buscara el nuevo contenido y lo añadira después del último artículo.

/**
 * Function to fetch and append a new article.
 * @return {Void}
 */
fetch: function() {

	// Shall proceed or not?
	if ( !this.isProceed() ) {
		return;
	}

	var main = this.element;
	var $articleLast = this.getArticles().last();

	$.ajax( {
		url: this.getNextArticle().url,
		type: "GET",
		dataType: "html",
		beforeSend: function() {
			articleFetching = true;
		}
	} )

	/**
	 * When the request is complete and it successly
	 * retrieves the content, we append the content.
	 */
	.done( function( res ) {
		$articleLast
			.after( function() {
				if ( !res ) {
					return;
				}
				return $( res ).find( "#" + main.id ).html();
			} );
	} )

	/**
	 * When the function is complete, whether it `fail` or `done`,
	 * always set the `articleFetching` to false.
	 * It specifies that we are done fetching the new content.
	 */
	.always( function() {
		articleFetching = false;
	} );
},

Agregue esta función dentro del init. Así que la función se ejecutará tan pronto como el complemento se inicialice, y luego recuperara el nuevo contenido cuando se cumplen las condiciones.

1	init: function() {
2	this.siteFloor = $( this.settings.floor ); // select the element set as the site floor.
3	this.fetch();
4	},

A continuación, agregamos una función para cambiar el historial del navegador con la API History Web. Esta función particular es más compleja que nuestras funciones anteriores. La parte complicada aquí es cuando exactamente debemos cambiar el historial durante el desplazamiento del usuario, el título del documento, así como la URL. La siguiente es una ilustración para ayudar a simplificar la idea detrás de la función:

Como se puede ver en la figura, tenemos tres líneas: "roof-line", "mid-line" y "floor-line" que ilustran la posición del artículo dentro de la ventana gráfica. La imagen muestra que la parte inferior del primer artículo, así como la parte superior del segundo artículo, está ahora en la línea media. No especifica la intención del usuario en cuanto a qué artículo está mirando; ¿Es el primer post o es el segundo post? Por lo tanto, no cambiaríamos el historial del navegador cuando dos artículos están en esta posición.

Registraremos la historia en el post posterior cuando la parte superior del artículo llegue a la "roof-line", ya que ocupa la mayor parte de la parte visible de la ventana gráfica.

Grabamos la historia del post anterior cuando su fondo llega a la "floor-line", de manera similar, ya que ahora toma la mayor parte de la parte visible del visor.

Éste es el código "while" que necesitará agregar:

init: function() {
	this.roofLine = Math.ceil( window.innerHeight * 0.4 ); // set the roofLine;
	this.siteFloor = $( this.settings.floor );
	this.fetch();
},
/**
 * Change the browser history.
 * @return {Void}
 */
history: function() {

	if ( !window.History.enabled ) {
		return;
	}

	this.getArticles()
		.each( function( index, article ) {

			var scrollTop = $( window ).scrollTop();
			var articleOffset = Math.floor( article.offsetTop - scrollTop );

			if ( articleOffset > this.threshold ) {
				return;
			}

			var articleFloor = ( article.clientHeight - ( this.threshold * 1.4 ) );
				 articleFloor = Math.floor( articleFloor * -1 );

			if ( articleOffset < articleFloor ) {
				return;
			}

			var articleID = $( article ).data( "article-id" );
				 articleID = parseInt( articleID, 10 );

			var articleIndex;
			for ( var i = this.settings.data.length - 1; i >= 0; i-- ) {
				if ( this.settings.data[ i ].id === articleID ) {
					articleIndex = i;
				}
			}

			var articleURL = this.getArticleAddr( articleIndex );

			if ( window.location.href !== articleURL ) {
				var articleTitle = this.settings.data[ articleIndex ].title;
				window.History.pushState( null, articleTitle, articleURL );
			}
		}.bind( this ) );
},

Por último, creamos una función que ejecutará el fetch() y el history() cuando el usuario está desplazando la página. Para ello creamos una nueva función llamada scroller(), y lo ejecutamos en la inicialización del complemento.

/**
 * Functions to run during the scroll.
 * @return {Void}
 */
scroller: function() {
	window.addEventListener( "scroll", this.isDebounced( function() {
		this.fetch();
		this.history();
	}, 300 ).bind( this ), false );
}

Y como se puede ver más arriba, nosotros debounce estos como realizar AJAX y cambiar el historial del navegador son una operación costosa.

Adición de un marcador de posición de contenido

Esto es opcional, pero es recomendado para respetar la experiencia del usuario. El marcador de posición proporciona comentarios al usuario, señalando que un nuevo artículo está en camino.

En primer lugar, creamos en la plantilla el marcador de posición. Comúnmente este tipo de plantilla se pone después del pie de página del sitio.

<script type="text/template" id="tmpl-placeholder">
	<div class="placeholder placeholder--article" id="placeholder-article">
		<div class="container">
			<div class="placeholder__header animated">
				<h1></h1>
			</div>
			<div>
				<p class="placeholder__p-1 animated"></p>
				<p class="placeholder__p-2 animated"></p>
			</div>
		</div>
	</div>
</script>

Tenga en cuenta que el artículo de marcador de posición, su estructura, debe parecerse al contenido real de su blog. Ajuste la estructura HTML en consecuencia.

Los estilos del marcador de posición son más sencillos. Comprende todos los estilos básicos para presentarlo como el artículo real, la animación @keyframe que simula el sentido de carga, y el estilo para cambiar la visibilidad (el marcador de posición se oculta inicialmente, se muestra sólo cuando el elemento padre tiene la clase fetching).

.placeholder {
	color: @gray-light;
	padding-top: 60px;
	padding-bottom: 60px;
	border-top: 6px solid @gray-lighter;
	display: none;
	.fetching & {
		display: block;
	}
	p {
		display: block;
		height: 20px;
		background: @gray-light;
	}
	&__header {
		animation-delay:.1s;
		h1 {
			height: 30px;
			background-color: @gray-light;
		}
	}
	&__p-1 {
		animation-delay:.2s;
		width: 80%;
	}
	&__p-2 {
		animation-delay:.3s;
		width: 70%;
	}
}

A continuación, actualizar algunas líneas para mostrar el marcador de posición durante la solicitud AJAX, como sigue.

/**
 * Initialize.
 * @return {Void}
 */
init: function() {

	this.roofLine = Math.ceil( window.innerHeight * 0.4 );
	this.siteFloor = $( this.settings.floor );

	this.addPlaceholder();

	this.fetch();
	this.scroller();
},

/**
 * Append the addPlaceholder.
 * Placeholder is used to indicate a new post is being loaded.
 * @return {Void}
 */
addPlaceholder: function() {

	var tmplPlaceholder = document.getElementById( "tmpl-placeholder" );
		 tmplPlaceholder = tmplPlaceholder.innerHTML;

		$( this.element ).append( tmplPlaceholder );
},

/**
 * Function to fetch and append a new article.
 * @return {Void}
 */
fetch: function() {
	...

	// Select the element wrapping the article.
	var main = this.element;

	$.ajax( {

		...

		beforeSend: function() {

			...
			// Add the 'fetching' class.
			$( main ).addClass( function() {
				return "fetching";
			} );
		}
	} )

	...

	.always( function() {

		...
		// Remove the 'fetching' class.
		$( main ).removeClass( function() {
			return "fetching";
		} );
	} );

¡Así es como manejamos el marcador de posición! Nuestro complemento está completo, y es el momento de implementar el complemento.

Implementación

Implementar el complemento es bastante sencillo. Designamos el elemento que envuelve nuestro artículo de blog y llamamos a nuestro complemento con el conjunto de opciones, de la siguiente manera.

$( document ).ready( function() {
	$( "#main" ).keepScrolling({
		floor: "#footer",
		article: ".article",
		data : [{
			"id": 1,
			"address": "post-one",
			"title": "Post One"
		}, {
			"id": 2,
			"address": "post-two",
			"title": "Post Two"
		}, {
			"id": 3,
			"address": "post-three",
			"title": "Post Three"
		}, {
			"id": 4,
			"address": "post-four",
			"title": "Post Four"
		}, {
			"id": 5,
			"address": "post-five",
			"title": "Post Five"
		}]
	});
} );

El rollo infinito debería estar funcionando.

Advertencia: el botón Atrás

En este tutorial, hemos construido una experiencia de desplazamiento infinita; Algo que comúnmente se ve en los sitios de noticias como Quartz, TechInAsia y en muchas aplicaciones móviles.

Aunque se ha demostrado que es una forma efectiva de retener la participación de los usuarios, también tiene un inconveniente: rompe el botón "Atrás" en el navegador. Al hacer clic en el botón, no siempre se desplaza con precisión de nuevo al contenido o página visitada anterior.

Los sitios web tratan esta cuestión de varias maneras; Quartz, por ejemplo, te redirigirá a la dirección URL referida; La URL que se visitó anteriormente, pero no está registrada a través de la API de History . TechInAsia simplemente lo llevará de vuelta a la página principal.

Terminando

Este tutorial es largo, ¡cubriendo muchas cosas! Algunos de ellos son fáciles de entender, mientras que algunas piezas pueden no ser tan fáciles de digerir. Para ayudar, he reunido una lista de referencias como un suplemento a este artículo.

Por último, ¡mira en el código fuente completo y vea la demostración!