JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
Un
framework
,entorno de trabajo
omarco de trabajo
es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar. En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto. Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio. Wikipedia
Razones
- Es muy complicado mantener la UI (User Interface) sincronizada con el estado de la aplicación
- Los frameworks modernos se basan en componentes que se pueden reutilizar
- Existe una comundiad fuerte que se enfrenta a retos similares
- Existen muchas extensiones y librerias para los frameworks
- Existen publicaciones especificas (blogs, podcasts, tags, libros...) que facilitan la investigación
Recursos
- Bootstrapping y estructura
- Patrones y arquitectura (MV* Pattern)
- Polyfills y transpilación
- Web components
- Templates
- virtual DOM
- Data Binding (One-way, Two-way, etc...)
- Gestión de AJAX y Eventos
- Dependency Injection
- Routing y Vistas
- y más....
Web Components constiste en distintas tecnologías independientes. Puedes pensar en Web Components como en widgets de interfaz de usuario reusables que son creados usando tecnología Web abierta. Son parte del navegador, y por lo tanto no necesitan bibliotecas externas como jQuery o Dojo. Un Web Component puede ser usado sin escribir código, simplemente añadiendo una sentencia para importarlo en una página HTML. Web Components usa capacidades estándar, nuevas o aún en desarrollo, del navegador. MDN
Soporte
Partes en juego
- Custom Elements Necesario para agregar nuevos elementos HTML en el DOM
- HTML Templates Las reglas sobre cómo crear un DOM único encapsulado con sintaxis HTML
- Shadow DOM Permiten importar código HTML y reutilizar sus componentes en otras webs
- HTML Imports Necesario para escribir código reutilizable y declarar cómo debe verse, aunque es problemático
- ¿Que pasa con import y los Web Components?
¿Cómo crear un web component nativo?
Ciclo de Vida de los componentes (Custom Element Lifecycle)
connectedCallback
Cuando el elemento se inserta en el DOMdisconnectedCallback
Cuando el elemento se elimina en el DOMadoptedCallback
Cuando el elemento se mueve a otro documentoattributeChangedCallback
Cuando un atributo que esta siendo observado cambia
Ejemplos en Acción
- carlosazaustre/webcomponents-example
- PLAIN ES6. Web components and Shadow DOM by Mikko Kämäräinen
- nuclei/material-input
Frameworks y librerías destacadas
- Hybrids 🖍 UI library for creating Web Components with simple and functional API
- LitElement A simple base class for creating fast, lightweight web components
- Polymer Our original Web Component library
- Skate.js a web component library designed to give you an augmentation of the web component specs focusing on a functional rendering pipeline, clean property / attribute semantics and a small footprint
- Slim.js Fast and robust micro-framework and tooling for web components
- Stencil.js A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team
Recursos
- Building Web Components with Vanilla JavaScript
- HTML Web Component using Plain JavaScript
- Web Fundamentals Guides | Custom Elements v1: Componentes web reutilizables
- Carlos Azaustre | Cómo crear un WebComponent de forma nativa
- MDN | Web components
- Intro To Web Components: What They Are & How They Work
- Stencil.js: crear web components nunca fue tan fácil
- Web Components in 2018
- The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
- Communication between components (universal)
- Front-end microservices with Web Components
- The Wonderful World of Web Components
- Building a custom tag input with Skate.js
En primer lugar, el DOM virtual no fue inventado por React, pero React lo usa y lo proporciona de forma gratuita.
El DOM virtual es una abstracción del DOM HTML. Es ligero y separado de los detalles de implementación específicos del navegador. Dado que el propio DOM ya era una abstracción, el DOM virtual es, de hecho, una abstracción de una abstracción. React Kung Fu
Claves
- Necesitas crear una abstracción del DOM Actual y su estado
- Trabajas contra el DOM Virtual que se encarga de sincronizar los cambios con el DOM Real
- El DOM Virtual se encarga de mantenerse sincronizado con el estado de la aplicación
- El DOM Virtual deber contener un algoritmo que analice las diferencias respecto al DOM y pueda atomizar los cambios
- El DOM Virtual debe gestionar la inclusión y eliminado de nuevos y viejos elementos de forma atomica sin perder la sincronización con el estado
Librerías
- Virtual-dom A Virtual DOM and diffing algorithm
- Snabbdom A virtual DOM library with focus on simplicity, modularity, powerful features and performance
- Maquette Pure and simple virtual DOM library
Recursos
- Learn the differences between Shadow DOM and Virtual DOM
- Shadow DOM != Virtual DOM
- JSDayES 2018 - Rubén Valseca - "¿Cómo funciona un Virtual DOM?"
- How to write your own Virtual DOM
- ¿Qué es el Virtual DOM y como funciona?
- The difference between Virtual DOM and DOM
En la programación de computadoras, el enlace de datos es una técnica general que une los orígenes de datos del proveedor y el consumidor y los sincroniza. Esto generalmente se hace con dos fuentes de datos / información con diferentes idiomas como en el enlace de datos XML. En el enlace de datos de la IU, los objetos de datos e información del mismo lenguaje pero con diferentes funciones lógicas están vinculados entre sí (por ejemplo, los elementos de la IU de Java a los objetos de Java).
En un proceso de enlace de datos, cada cambio de datos se refleja automáticamente por los elementos que están vinculados a los datos. El término enlace de datos también se usa en los casos en que una representación externa de los datos en un elemento cambia, y los datos subyacentes se actualizan automáticamente para reflejar este cambio. Wikipedia
Concepto: One-way
Concepto: Two-way
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
/*
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
@see: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_controller
*/
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.changeName = function() {
$scope.firstname = "Nelly";
}
});
Ejemplo de Angularjs en RAW es6
- 24k lineas de código de distancia (incluyendo comentarios)
- Recordemos que el
$scope
de Angularjs tiene muchas funcionales addicionales
<div>
<h1 onclick="changeName()"></h1>
</div>
// Sin proxies y mal abstraido
const h1Selector = document.querySelector("h1")
h1Selector.innerText = "John";
function changeName () {
h1Selector.innerText = "Nelly";
}
// Con Proxies (Metaprogramación) y mejor abstraido
const data = {};
const $scope = new Proxy(data, {
set: function(target, prop, value) {
console.log(`Ejecutando "set" para propiedad ${prop} en ${value}`);
target[prop] = value // Materializar el cambio
updateHTML(); // Actualizamos el HTML
return target[prop]; // Retornamos el valor como se espera
}
});
function updateHTML(){
document.querySelector("h1").innerText = $scope.firstname
}
function changeName () {
$scope.firstname = "Nelly";
}
$scope.firstname = "John";
Librerías
- nx-js | observer-util Transparent reactivity with 100% language coverage. Made with ❤️ and ES6 Proxies.
- razilobind ES6 JS/HTML binding library for creating dynamic web applications through HTML attribute binding. Pulls in all required parts and configures as RaziloBind
- hamsa-es6 A dead simple, data-binding & observable model in EcmaScript 6
- GIST | WickyNilliams/bind.js Super simple one-way data-binding
Recursos
- Writing a JavaScript Framework - Data Binding with ES6 Proxies
- Frameworkless JavaScript Part 3: One-Way Data Binding
- ES6 in Action: How to Use Proxies
- JS & DOM data bindings in 2017
- Data-binding Revolutions with Object.observe()
- 📖 ExploringJS | Metaprogramming with proxies
- Metaprogramming in ES6: Part 3 - Proxies
- Mozilla Hacks | ES6 In Depth: Proxies
¿Qué es un Crawler?
Un rastreador web, indexador web, indizador web o araña web es un programa informático que inspecciona las páginas del World Wide Web de forma metódica y automatizada. Uno de los usos más frecuentes que se les da consiste en crear una copia de todas las páginas web visitadas para su procesado posterior por un motor de búsqueda que indexa las páginas proporcionando un sistema de búsquedas rápido. Las arañas web suelen ser bots. - Wikipedia
Funcionamineto de googlebot
- Información sobre el procesamiento en la Búsqueda de Google
- Cómo asegurarse de que Google pueda acceder al contenido de carga diferida
- Cómo comenzar a usar el procesamiento dinámico
- Cómo depurar problemas de procesamiento
Robots.txt
Este protocolo es consultivo. Confía en la cooperación de los robots del sitio Web, de modo que marca una o más áreas de un sitio fuera de los límites de búsqueda con el uso de un archivo robots.txt, aunque este no necesariamente garantice aislamiento completo. (...) En algunos casos el incluir un directorio en este archivo le anuncia su presencia a posibles hackers, así ellos pueden determinar fácilmente algunos softwares usados en el sitio mediante buscar "huellas típicas" en el robots.txt. Wikipedia
User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Disallow: /tmp/
Disallow: /private/
Los problemas de las arañas
Actualmente, es difícil procesar contenido en JavaScript y no todos los rastreadores de motores de búsqueda pueden hacerlo de manera correcta o inmediata. Esperamos que se pueda solucionar este problema en el futuro. Google
Mitigación con Procesamiento Dinámico
Por el momento, recomendamos el procesamiento dinámico como una solución alternativa a este inconveniente. Este tipo de procesamiento implica alternar entre contenido procesado por el cliente y contenido procesado previamente para usuarios-agentes específicos. Google
En resumen:
- El buscador entiendo que tu web necesita JavaScript para funcionar (SPA), usando
#!
en las rutas o incluyendo<meta name="fragment" content="!">
- El buscador se relocaliza a una URL distinta especial para el.
- Retornas el HTML prerenderizado al robot en esa localización.
Herramientas
recursos
- Google: Crawling SPA (Single-Page Application) Isn't Easy But Can Work
- AngularJS SEO: Get your site indexed and to the top of the search results.
- SEO-friendly Single Page Applications (AngularJS, Prerender.io) by Battlefy Jaime Bueza
- Optimizing AngularJS Single-Page Applications for Googlebot Crawlers
- The Benefits of Server Side Rendering Over Client Side Rendering
- Headless Chrome: an answer to server-side rendering JS sites
- AngularJS - server-side rendering