book

Aprender patrones de diseño de JavaScript, 2ª edición

by Addy Osmani

September 2024

Intermediate to advanced

298 pages

7h 23m

Spanish

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Estructura del LibroConvenciones utilizadas en este libroUtilizar ejemplos de códigoAprendizaje en línea O'ReillyCómo contactar con nosotrosAgradecimientos
Historia de los patrones de diseño¿Qué es un patrón?Un caso de uso cotidiano de los patrones de diseñoResumen
¿Qué son los protopatrones?Las pruebas "patrónRegla de tresResumen
La estructura de un patrón de diseñoPatrones bien escritosEscribir un patrónResumen
¿Qué son los antipatrones?Antipatrones en JavaScriptResumen
La importancia de desacoplar las aplicacionesMódulos con importaciones y exportacionesObjetos del móduloMódulos cargados desde fuentes remotasImportaciones estáticasImportaciones dinámicasImportar en InteracciónImportar en VisibilidadMódulos para el servidorVentajas de utilizar módulosClases con Constructores, Obtenedores y FijadoresClases en frameworks JavaScriptResumenLecturas relacionadas
AntecedentesPatrones de Diseño CreativoPatrones de diseño estructuralPatrones de diseño de comportamientoClases de patrones de diseñoResumen
Patrones de creaciónEl patrón constructorCreación de objetosConstructores básicosConstructores con prototiposEl patrón modularLiterales de objetoEl patrón modularVariaciones del patrón del móduloPatrón Modular Moderno con WeakMapMódulos con bibliotecas modernasEl patrón del módulo reveladorVentajasDesventajasEl patrón SingletonGestión de estados en ReactEl patrón prototipoEl modelo de fábricaCuándo utilizar el patrón de fábricaCuándo no utilizar el patrón de fábricaFábricas abstractasPatrones estructuralesEl patrón de fachadaEl patrón MixinSubclasificaciónMezclasVentajas y desventajasEl patrón decoradorDecoradores pseudoclásicosInterfacesDecoradores abstractosVentajas y desventajasPeso moscaUso de pesos moscaPesos Volantes y Compartir DatosImplementación de los pesos mosca clásicosConvertir código para utilizar el patrón de peso moscaUna fábrica básicaGestión de los estados extrínsecosEl patrón del peso mosca y el DOMEjemplo: Gestión centralizada de eventosPatrones de comportamientoEl patrón del observadorDiferencias entre el patrón Observador y Publicar/SuscribirVentajasDesventajasImplementaciones Publicar/SuscribirEl patrón mediadorUn simple mediadorSimilitudes y diferenciasUso del Agregador de EventosUso del mediadorAgregador de Eventos (Pub/Sub) y Mediador JuntosMediador/Middleware en el JavaScript modernoMediador frente a fachadaEl patrón de mandoResumen
MVCSmalltalk-80 MVCMVC para desarrolladores JavaScriptModelosVistasPlantillasControladores¿Qué nos aporta el MVC?Smalltalk-80 MVC en JavaScriptResumen de MVCMVPModelos, puntos de vista y presentadores¿MVP o MVC?MVVMHistoriaModeloVerViewModelRecapitulación: La Vista y la VistaModeloVistaModelo frente a ModeloVentajas e inconvenientesVentajasDesventajasMVC frente a MVP frente a MVVMPatrones MV* modernosMV* y React.jsResumen
Programación asíncronaAntecedentesPatrones de promesaEncadenamiento de promesasGestión de errores de la promesaPromesa ParalelismoPromesa Ejecución SecuencialPromesa MemoizaciónTubería de promesasPromesa ReintentoPromesa DecoradorCarrera de PromesasPatrones async/awaitComposición de funciones asíncronasIteración asíncronaTratamiento asíncrono de erroresParalelismo asíncronoEjecución secuencial asíncronaMemoización asíncronaManejo asíncrono de eventosasync/await Canalizaciónreintento asíncronoDecorador async/awaitEjemplos prácticos adicionalesHacer una solicitud HTTPLeer un archivo del sistema de archivosEscribir en un archivo del sistema de archivosEjecutar múltiples operaciones asíncronasEjecutar varias operaciones asíncronas en secuenciaGuardar en caché el resultado de una operación asíncronaManejar eventos con async/awaitReintentar una operación asíncrona en caso de falloCrear un decorador asíncrono/de esperaResumen

Nota sobre los cargadores de scriptsAMDIntroducción a los módulosMódulos AMD con jQueryConclusiones de AMDCommonJSCómo empezarConsumir múltiples dependenciasCommonJS en Node.js¿Es CommonJS adecuado para el navegador?Lecturas relacionadas con CommonJSAMD y CommonJS: Estándares competidores pero igualmente válidosUMD: Módulos compatibles con AMD y CommonJS para plug-insResumen
Fundamentos del namespaceVariables globales únicasEspacio entre nombres de prefijosNotación literal de objetosEspaciado de nombres anidadoExpresiones de función invocadas inmediatamenteInyección de espacios de nombresPatrones avanzados de espaciado de nombresAutomatizar el espaciado de nombres anidadoPatrón de declaración de dependenciaExtensión de objetos profundosRecomendaciónResumen
Introducción a ReactTerminología utilizadaConceptos básicosComponentes de orden superiorComponiendoProsContrasRenderizar patrón de atrezzoEstado de elevaciónLos niños como funciónProsContrasPatrón de ganchosComponentes de claseReestructuraciónComplejidadGanchosGancho estatalGancho de efectoGanchos personalizadosOrientación adicional sobre ganchosVentajas e inconvenientes de utilizar ganchosGanchos React frente a clasesImportación estáticaImportación dinámicaComponentes cargablesImportar en InteracciónImportar en VisibilidadDesdoblamiento de códigoReparto basado en rutasDivisión de paquetesPatrón PRPLPriorización de la cargaPrecarga en aplicaciones de una sola páginaPrecarga + el Hack asíncronoPrecarga en Chrome 95+Lista Virtualización¿Cómo funciona la Ventana/Virtualización?ListasRejillaMejoras en la Plataforma WebConclusionesResumen
Importancia de los patrones de renderizadoRenderizado del lado del clienteRenderizado del lado del servidorRenderizado estáticoRegeneración estática incrementalISR a la cartaResumen de la renderización estáticaStreaming SSRPerímetro SSRRenderizado híbridoHidratación progresivaArquitectura de las IslasIslas de aplicaciónVentajas e inconvenientesComponentes del servidor ReactRenderizado híbrido con RSC y el router de aplicaciones Next.jsResumen
IntroducciónAgrupar por Módulo, Función o RutaAgrupar por tipo de archivoAgrupación híbrida basada en el dominio y los componentes comunesEstructura de la aplicación para las funciones modernas de ReactReduxContenedoresGanchosComponentes estilizadosOtras buenas prácticasEstructura de la aplicación Next.jsResumen

Content preview from Aprender patrones de diseño de JavaScript, 2ª edición

Capítulo 8. Patrones MV* de JavaScript

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com

El diseño de objetos y la arquitectura de aplicaciones son los dos aspectos principales del diseño de aplicaciones. Hemos tratado los patrones relacionados con el primero en el capítulo anterior. En este capítulo, vamos a revisar tres patrones arquitectónicos fundamentales: MVC (Modelo-Vista-Controlador), MVP (Modelo-Vista-Presentador) y MVVM (Modelo-Vista-Vista-Modelo). En el pasado, estos patrones se utilizaban mucho para estructurar aplicaciones de escritorio y del lado del servidor. Ahora también se han adaptado a JavaScript.

Como la mayoría de los desarrolladores de JavaScript que utilizan actualmente estos patrones optan por utilizar diversas bibliotecas o marcos para implementar una estructura similar a MVC/MV*, compararemos en qué se diferencian estas soluciones en su interpretación de MVC en comparación con las tomas clásicas de estos patrones.

Nota

Puedes distinguir fácilmente las capas Modelo y Vista en la mayoría de los marcos modernos de diseño de interfaz de usuario basados en MVC/MVVM. Sin embargo, el tercer componente varía tanto en nombre como en función. Por tanto, el * en MV* representa la forma que adopta el tercer componente en los distintos marcos.

MVC

MVC es un patrón de diseño arquitectónico que fomenta una mejor organización de la aplicación mediante la separación de intereses. Obliga a aislar los ...