Cuenta con las siguientes partes:
- Interfaz de Usuario
- Motor de navegación
- Motor de renderizado
- Persistencia de Datos
- Networking
- Interpretes de Script
- Backend de la interfaz de Usuario
El rendering engine es el encargado de presentar el contenido enviado por el servidor en respuesta a la solicitud del navegador.
HTML se encarga de:
- El análisis sintáctico (parsing) del código HTML y CSS que le llega, así transforma la entrada en...
- El árbol DOM (Document Object Model) que representa la estructura del documento.
- Se aplica el estilo CSS en el DOM
- Se crea el árbol de renderizado (render tree) que contiene la información necesaria para la presentación visual del documento.
- Se disponen los elementos en la pantalla (Layout o Render)
- Se presenta todo el contenido del DOM en la pantalla, a este proceso se le conoce como Painting the render tree.
El browser engine coordina las acciones entre la UI y el render engine. Se encarga también de manejar las URLs que pueda contener el proyecto.
El motor de JS es el responsable de ejecutar el código JS que se este aplicando en la página web, ya que interpreta el código, genera bytecode para luego ejecutarlo.
Los motores de JS implementan a su manera el core de JS, caracterizado por un mínima API (conjunto de funciones y objetos) que permiten la interacción con el entorno de ejecución.
Para generar componentes reutilizables, ya que se le puede invocar todas las veces que sea necesario. Las funciones son un conjunto de instrucciones que cuentan con parámetros, no hay que olvidarlo.
Important
Las funciones también son objetos.
Es un dato no primitivo (referenciado) que incluye propiedades asociadas a otros datos. Normalmente se escriben utilizando llaves.
{
userName: 'Pipo';
age: 33;
}Los datos los usamos para asignarlos a una variable. Así que lo que hemos realizado antes se transforma en;
const dataUser = {
userName: 'Pipo',
age: 33,
};Así podemos usar esta variable como lo deseemos. Además, también podemos añadir datos y funciones a una función desde afuera.
// Declaración de una función
function make() {
const x = 22;
console.log(x);
}
// Asignación de una función (esto es por el operador =). También llamado expresión funcional
const foo = function () {
const x = 22;
console.log(x);
};
// Arrow functions
const baz = () => {
const x = 22;
console.log(x);
};Normalmente también se pueden escribir de manera abreviada, a esto se le conoce como escritura funcional o lambda
const add = (x, y) => x + y;Reciben como parámetro una función o retornan una función. JS lo que hace es evaluar las expresiones según los datos que obtengan, en este caso centrará en coger la función y los demás parámetros que le des, para ejecutarlos.
const calculate = function (fn, a = 0, b = 0) {
const r = fn(a, b);
console.log(r);
};
const prod = (x, y) => {
return x * y;
};
calculate(prod, 6, 7); //42Esto es importante porque aparece el concepto de los callbacks, esto se usa mucho en JS moderno
Esto se usa mucho a la hora de construir webs, por ejemplo addEventListener y otros controladores de eventos (handles) son HOF que responden de manera asíncrona cuando el usuario realiza el proceso que se le está indicando.
Son útiles solo si no las vas a utilizar en otra parte de tu proyecto, solo como un parámetro más de una HOF.
Son funciones especiales, ya que ejecutan otras funciones según el tiempo o intervalo de tiempo que le des.
Para desactivarlos, tienes que asignarlos a una variable, esto nos permite conocer un poco mejor la asincronía.
Es la manera actual para usar los archivos JS dentro de la web, usando las importaciones. Para ello tenemos que realizar lo siguiente:
<!-- No debe faltar el atributo type -->
<script src="./index.js" type="module" defer></script>// main.js
export function main() {
console.log('Loaded Main');
}
// index.js
import main from './main.js';Se pueden importar y exportar funciones y constantes.
Consiste en mejorar el código que uno ha escrito y que le funciona para obtener mejores prácticas y un código más limpio.
Recuerda que los objetos son un dato que cuenta con propiedades y estas propiedades pueden ser objetos, por ello, son cruciales a la hora de crear proyectos y por ende debemos de saber como usarlos.
Una práctica cuestionable es añadir propiedades de manera externa, al estar VSCode escrito usando los tipos de TS, por ende no reconocerá las propiedades externas que le quieras añadir al objeto.
Una mala práctica es eliminar propiedades del objeto, mediante la palabra reservada delete, ya que puede comprometer la estructura del proyecto.
Para poder referenciar las propiedades de un objeto es necesario usar el operador .:
user.age // Quiero acceder a la propiedad age del objeto user
Contamos con la estructura For In para poder recorrer los objetos y así obtener la información de las propiedades que tienen.
for (const key in user) {
const value = user[key];
console.log(`Clave ${key} el valor es ${value}`);
// Clave name el valor es Pepe
// Clave age el valor es 22
// Clave job el valor es Developer
}También contamos con la clase Object que cuenta con distintos métodos que también nos pueden ayudar a la hora de recopilar la información de los valores y de las claves. La información nos aparece como un array de arrays.
Object.keys(user); // Claves o propiedades
Object.values(user); // Información de las propiedades
Object.entries(user); // Toda la informaciónLos arrays tienen la siguiente forma y se realizan mediante corchetes: const user = ['Pablo', 24, 'UI /UX Designer'];
Al ser objetos, se le pueden añadir propiedades desde fuera, a esto se le conoce como excentricidad
Es importante saber que los arrays se pueden iterar para poder obtener sus datos según la posición que queramos referenciar: console.log(user[0]);
- Bucle For
- Bucle For In
- Bucle For Off
Existen las propiedades mutables, las inmutables y las HOF
Se le llaman así ya que modifican el array original.
userContacts.push('Ernestina');
userContacts.pop();
userContacts.unshift('Micaela');
userContacts.shift();
userContacts.sort();
userContacts.reverse();Se le llaman así ya que no modifican el array original, por ende se tiene que guardar en otra variable.
const newArray = userContacts.concat(['Raul', 'Fernando']);Se implementaron en el ECMA Script 1.5 y son la manera más actual de como tratar arrays de forma sincrona. Suelen usar callbacks que reciben como parámetros el item o el array.
userContacts.forEach((item) => console.log(item)); // No crea un nuevo array o modifica el existente, solo itera.
user.map((item) => console.log(`Hola ${item}`)); // Itera también el array
numbers.filter((item) => item > 10); // Devuelve un array con los datos que cumplan con la condición del callback
numbers.find((item) => item > 10); // Devuelve el primer valor que cumpla con la condición
user.findIndex((item) => item === 'Ernesto'); // Devuelve el índice donde se encuentra el item a ubicar, devuelve un '-1' si es que no existe el valor en ese array
numbers.reduce((prev, current) => prev + current); // Sirve para reducir el array en un único elemento. Sirve para acumular números o para convertir un array en una cadena
arrayOfArrays.flat(); // Sirve para aplanar muchos arrays en uno solo.Un objeto puede ser referenciado por 2 o más variables
Una referencia nos permite guardar la información de un objeto en otras zonas de la memoria, y la variable estará en una parte más "cara", así se organiza mejor la información y el objeto puede mutar las veces que sea necesario.
Para evitar la mutación, debemos de crear un objeto nuevo desestructurando el antiguo: objeto.propiedad = {...objeto.propiedad,propiedad: nuevo_valor}
Existe las referencias absolutas y referenciadas a la raíz. Las absolutas se usan para abrir enlaces externos y las referenciales a páginas internas del proyecto y/o documento.
Con esta lógica podremos construir una MultiPage (MP)
Tenemos un ejemplo en la carpeta SPA-Web. Acá estamos revisando la lógica de los eventos
Event tiene 2 métodos que son currentTarget y Target. El target es el emisor del evento y el current es el listener del evento.
Los elementos hijos suelen delegar los eventos a sus elementos padres.
Este objeto nos ayuda a la hora de realizar una navegación útil en una SPA, usando el método pathname que tiene.
Con este sistema, existen problemas a la hora de compartir la URL, ya que se suele quedar pillado en el index, para ello inicializamos la navegación primero en nuestro main.
Sirve cuando un elemento hijo le envía un evento propio a su elemento padre. A esto se le puede entender como lógica de negocio, según lo que se requiera.
Normalmente se usa en el localStorage, para que los datos que modifiquemos se queden guardados sin afectar al backend.
Las API REST nos sirve a la hora de realizar peticiones (request) a un proveedor de datos y este nos devolverá una respuesta.
Los headers más comunes son los de method y status code