Skip to content

Latest commit

 

History

History
300 lines (226 loc) · 18.7 KB

clase60.md

File metadata and controls

300 lines (226 loc) · 18.7 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 60

Frameworks

img

Un framework, entorno de trabajo o marco 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

JS Frameworks: ¿Por qué existen?

img

Razones

  • Es muy complicado mantener la UI 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

JS Frameworks: Anatomía

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

JS Frameworks - Partes: Web components

img

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

img

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

¿Cómo crear un web component nativo?

img

Ciclo de Vida de los componentes (Custom Element Lifecycle)

  • connectedCallback Cuando el elemento se inserta en el DOM
  • disconnectedCallback Cuando el elemento se elimina en el DOM
  • adoptedCallback Cuando el elemento se mueve a otro documento
  • attributeChangedCallback Cuando un atributo que esta siendo observado cambia

Ejemplos en Acción

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

JS Frameworks - Partes: virtual dom

img

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

Concepto img

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 sincronziado 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 soncronización con el estado

La guía definitiva img

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

JS Frameworks - Partes: Data Binding

img

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

img

Concepto: Two-way

img

Ejemplo de Angularjs

<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

<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

JS Frameworks - Partes: Hablemos de SEO y Crawlers...

img

¿Qué es un Crawler?

img

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

img

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

img

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 img

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