Un Nuevo Tipo de Abstracción

This ad is not shown to multipass and full ticket holders
React Advanced
React Advanced 2025
November 27 - 1, 2025
London, UK & Online
We will be diving deep
Learn More
In partnership with Focus Reactive
Upcoming event
React Advanced 2025
React Advanced 2025
November 27 - 1, 2025. London, UK & Online
Learn more
Bookmark
Rate this content

Los desarrolladores a menudo consideran las abstracciones como "cuanto más cerca del metal, mejor", lo que significa que a medida que las abstracciones se alejan del nivel más bajo posible, más se sacrifica en términos de rendimiento y características. Pero las abstracciones también funcionan como un espectro. Veremos cómo podemos ajustar nuestra visión de las abstracciones y qué ejemplos podemos usar para comprender mejor que las abstracciones tienen menos que ver con la programación y más con el lugar donde las implementamos.

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

Una abstracción, según Mike Huggington, es una construcción sobre una entidad de menor nivel, como una API o biblioteca, que facilita el desarrollo al proporcionar una capa que simplifica la interacción con dicha entidad.

Las abstracciones evolucionan al construirse sobre entidades de bajo nivel, donde se simplifican y se eliminan métodos poco usados para hacerlas más accesibles y fáciles de entender, permitiendo así una mejor productividad y facilitando la creación de nuevas funcionalidades.

El uso de abstracciones en programación permite manejar la complejidad al ocultar detalles de bajo nivel, facilita la reutilización de código, y puede proporcionar 'salidas de emergencia' hacia niveles más bajos cuando es necesario, como importar módulos de C en Python.

El objetivo de ejecución, como el navegador o el servidor, influye en la elección de abstracciones al determinar dónde va a vivir el código y cómo se comportará en diferentes entornos, afectando la portabilidad y la eficacia del código en esos contextos.

Considerar las abstracciones como un espectro significa entender que pueden variar desde muy alto nivel hasta muy bajo nivel, y que es importante evaluar dónde se sitúan en relación a la proximidad con la plataforma o tecnología base y su adecuación al entorno de ejecución deseado.

Evaluar la portabilidad de las abstracciones es crucial para asegurar que el código pueda operar efectivamente en diferentes plataformas y dispositivos, y para anticipar futuros escenarios donde el código pueda necesitar adaptarse a nuevas tecnologías o entornos.

Mike Hartington
Mike Hartington
7 min
22 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Las abstracciones en el desarrollo de software se construyen sobre otras cosas y proporcionan utilidad o facilitan el desarrollo. Pueden ser de bajo nivel o de alto nivel, y cuanto más pequeña sea la abstracción, más cerca estará del nivel inferior. Las abstracciones pueden operar en diferentes entornos y su nivel determina cómo funciona y se aborda el código. Es importante evaluar las abstracciones utilizadas, su portabilidad y su distancia del nivel inferior.
Available in English: A New Kind of Abstraction

1. Introducción a las Abstracciones

Short description:

Tomemos un descanso de los temas técnicos y hablemos de ideas y abstracciones. Una abstracción se construye sobre otra cosa, como una biblioteca o API de bajo nivel. Proporciona utilidad o una biblioteca que facilita el desarrollo. Las abstracciones pueden ser de bajo nivel o de alto nivel, y cuanto más pequeña sea la abstracción, más cerca estará del nivel inferior. También pueden proporcionar salidas de emergencia hacia el nivel inferior, como importar módulos de C en Python o devolver objetos JavaScript válidos en bibliotecas de JavaScript.

Hola a todos. Soy Mike Huggington. Ya hemos tenido un día completo de muchos temas técnicos. Hagamos un descanso de eso y hablemos de ideas y abstracciones.

Como alguien que proviene de un campo no técnico, me enseñaron que una abstracción es algo que se construye sobre otra cosa. El ejemplo más simple es tener esta biblioteca de bajo nivel o esta API de bajo nivel, y simplemente tener todas estas implementaciones aproximadas de cómo hacer las cosas. Esto podría ser ensamblador. Esto podría ser C para usted. Esto podría ser una API DOM sin procesar.

Bueno, las personas se reúnen y se dan cuenta de que eso no va a ser muy productivo. Se quedarán atrapados teniendo que mantener los matices de una API de bajo nivel. Así que siguen adelante y crean una abstracción. Se construyen sobre ella. Proporcionan alguna utilidad o alguna biblioteca que puede sentarse encima de la API y facilitarte el desarrollo. Luego, más adelante, las personas se dan cuenta de que ese es un punto de partida bastante bueno. Vamos a seguir adelante y hacer algo más. Vamos a hacer esto un poco más fácil. Vamos a eliminar este método porque no se usa muy a menudo. Hay muchas trampas en eso. Te vamos a dar algo que sea más simple, más fácil de entender y te permita construir lo que quieras.

Estamos en este nivel de abstracciones, donde las vemos como muy, muy de bajo nivel o muy de alto nivel, y el espectro de muy alto nivel a bajo nivel, y este enfoque jerárquico es cómo las miramos típicamente. Ahora, con este enfoque jerárquico, también tenemos que considerar que lo que está en el nivel alto también puede incluir más código, ya sea en tiempo de ejecución o simplemente como una biblioteca. Puede incluir un conjunto de características limitado pero aún manejar casos extremos. Entonces, cuanto más pequeña sea la abstracción, más cerca estará del nivel inferior, tal vez, tal vez no. Además, la abstracción también puede proporcionar salidas de emergencia hacia el nivel inferior. Un ejemplo perfecto, no en JavaScript, pero en Python, puedes importar módulos de C. Puedes escribir algo de C, importarlo en tu programa y tener acceso cuando necesites esa salida de emergencia. Lua ofrece lo mismo. Puede haber bibliotecas de JavaScript que, en lugar de devolver su propio objeto personalizado, devuelven un objeto JavaScript válido, ya sea una fecha o algo más. Estas son las formas en que me enseñaron a pensar en las abstracciones y a medida que ha pasado el tiempo, me he dado cuenta de que hay otra forma.

2. Comprensión de las Abstracciones de Código y su Impacto

Short description:

Debemos considerar dónde vivirá nuestro código y su objetivo de ejecución. Las abstracciones pueden operar en diferentes entornos, como el navegador, el servidor o las Funciones en la Nube. El nivel de abstracción determina cómo opera y se aborda el código. Es importante entender que las abstracciones no son inherentemente mejores o peores, sino que ofrecen diferentes opciones y consideraciones. Como desarrolladores, debemos evaluar las abstracciones que utilizamos, su portabilidad y qué tan alejadas están del nivel inferior.

Podríamos pensar en ellas como un espectro. No se trata solo de cuán alejados estamos de esa API de bajo nivel en la que estamos operando, sino dónde va a vivir este código. ¿Cuál es su objetivo de ejecución? ¿Será el navegador, el servidor? ¿Vamos a utilizar Funciones en la Nube? Un ejemplo perfecto es Node, Deno y el navegador. ¿Este código va a funcionar tanto en el navegador como en Node? Tal vez. ¿Va a funcionar en Node y Deno? Probablemente no. Cómo opera ese código y cómo se aborda es simplemente otro nivel de abstracción.

Si usamos una biblioteca que funciona muy bien en el navegador, es probable que pueda ejecutarse en Deno, pero no lo sabemos. Entonces, ¿qué tan alejada está del objetivo? Uno con el que estoy muy familiarizado es la idea de la plataforma cruzada. Tenemos por un lado la web y por otro lado lo nativo. Ahora, dependiendo de dónde estés, de dónde se encuentre tu equipo, podrías elegir abstracciones que están a un grado de distancia del nativo puro o podrías elegir abstracciones que están a un grado de distancia de la web pura. No importa si son mejores o peores. Míralas como extremos opuestos del espectro.

Esto es algo en lo que pensamos a diario en Ionic, donde creemos que nuestras abstracciones se encuentran justo en el medio. Te brindamos acceso a la web, pero también te brindamos acceso a lo nativo. ¿Es eso un punto intermedio? ¿Es mejor? ¿Es peor? La respuesta depende de ti, pero es simplemente una forma diferente de ver qué es ese código. No necesariamente es mejor o peor. Simplemente te dará opciones. Comprender que el código y las abstracciones se tratan menos del impacto en el rendimiento, del nivel real alejado del nivel inferior. Se trata realmente de tu código, del tamaño del rendimiento y de dónde va a vivir. Podríamos tener código que funcione en todos nuestros dispositivos en este momento, pero en unos años, ¿podrá funcionar allí? ¿Habrá más plataformas donde este código no pueda ejecutarse porque está utilizando la abstracción incorrecta? Como equipo, evalúa qué abstracciones estás utilizando, cuál es su portabilidad y también qué tan alejadas están del nivel inferior. Sin descartar la jerarquía. Solo digo, evalúa más en el espectro. Y con eso, gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
React Summit 2023React Summit 2023
151 min
Diseñando Pruebas Efectivas con la Biblioteca de Pruebas de React
Top Content
Featured Workshop
Josh Justice
Josh Justice
La Biblioteca de Pruebas de React es un gran marco para las pruebas de componentes de React porque responde muchas preguntas por ti, por lo que no necesitas preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Todavía hay muchas preguntas que tienes que resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir vs pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una cierta línea de código que es difícil de probar? ¿Y qué se supone que debes hacer con esa persistente advertencia de act()?
En esta masterclass de tres horas, presentaremos la Biblioteca de Pruebas de React junto con un modelo mental de cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada bit de lógica, si debes o no simular dependencias, y ayudará a mejorar el diseño de tus componentes. Te irás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Tabla de contenidos- Los diferentes tipos de pruebas de aplicaciones de React, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos DOM para verificar e interactuar con ellos- El valor de los mocks y por qué no deben evitarse- Los desafíos con la asincronía en las pruebas de RTL y cómo manejarlos
Requisitos previos- Familiaridad con la construcción de aplicaciones con React- Experiencia básica escribiendo pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas ninguna experiencia con la Biblioteca de Pruebas de React- Configuración de la máquina: Node LTS, Yarn
IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.