Un Nuevo Tipo de Abstracción

Rate this content
Bookmark

Los desarrolladores a menudo ven 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 pierde 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 que ver con dónde las implementamos.

FAQ

Una abstracción en programación se refiere a la creación de niveles de complejidad adicionales sobre un concepto de bajo nivel, como una API o un lenguaje de programación, para facilitar su uso, aumentar la seguridad, y mejorar la productividad sin necesidad de crear un nuevo lenguaje o biblioteca completa.

Las abstracciones se utilizan para simplificar el manejo de conceptos de bajo nivel, reducir la posibilidad de errores, y aumentar la productividad al añadir funciones auxiliares que facilitan el trabajo dentro de un lenguaje o API específicos.

Usar muchas abstracciones puede incrementar el tamaño del código final del proyecto, potencialmente añadiendo funciones y código innecesarios que pueden llevar a un mayor consumo de recursos y reducir la eficiencia.

Elegir la abstracción correcta puede determinar dónde y cómo se ejecutará el código, afectando la capacidad de funcionar en diversas plataformas como navegadores, Node, o dispositivos nativos sin la necesidad de configurar sistemas de compilación complejos.

Una 'salida de emergencia' en una abstracción se refiere a la capacidad de revertir a un nivel inferior de abstracción si es necesario, como poder descender de Python a C, lo que permite mayor flexibilidad y control sobre el rendimiento y el manejo del código.

Al desarrollar código multiplataforma, es crucial considerar las funcionalidades disponibles en cada plataforma, las limitaciones de las API en cada contexto, y la cantidad de trabajo necesario para adaptar el código a cada plataforma específica.

Mike Hartington
Mike Hartington
8 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Las abstracciones simplifican el trabajo con conceptos de bajo nivel como las API o los lenguajes, permitiendo a los desarrolladores construir sobre ellas y agregar funciones auxiliares. Sin embargo, hay compensaciones, como el aumento del tamaño del código. Las abstracciones operan en un espectro, con diferentes entornos de ejecución como Node, Dino y el navegador en los extremos opuestos. El código que se ejecuta en Dino probablemente también se pueda ejecutar en el navegador, y el código que se ejecuta en Node también se puede ejecutar en el navegador.

Available in English: A New Kind of Abstraction

1. Introducción a las Abstracciones

Short description:

Hola. Soy Mike Hardington, un defensor del desarrollador en Ioniq. Hoy quiero hablar sobre abstracciones. Las abstracciones simplifican el trabajo con conceptos de bajo nivel como APIs o lenguajes. Los desarrolladores a menudo construyen sobre ellas para agregar funciones auxiliares. Algunas personas construyen abstracciones adicionales con más características y seguridad. Sin embargo, existen compensaciones, como el aumento del tamaño del código. Las abstracciones también pueden proporcionar una salida de emergencia, permitiéndote descender a un nivel inferior si es necesario. Las abstracciones operan en un espectro, y es probable que te hayas encontrado con ellas más veces de las que crees.

hablar sobre abstracciones hoy. Ahora, típicamente, cuando las personas hablan de abstracciones, normalmente se refieren a este primer tipo. Donde tenemos un concepto de bajo nivel, ya sea una API o un lenguaje en sí. Y trabajar con ello puede ser engorroso o llevar a muchos posibles errores. En forma de errores del usuario o código que es muy frágil y fácil de romper. Ahora, para facilitar el trabajo con este lenguaje o esta API, lo que los desarrolladores a menudo hacen es construir algo encima de él que te permita trabajar de manera segura dentro de ese tiempo de ejecución o dentro de ese lenguaje. Y ser un poco más productivo. No estamos necesariamente creando un nuevo lenguaje o una nueva biblioteca completa. Solo estamos agregando algunas funciones auxiliares. Podemos pensar en esto como un concepto de utilidades. Ahora, aunque la mayoría de las personas encuentran esto muy útil, algunas personas deciden que esto no es suficiente. Quieren más. Y así construyen otra abstracción encima de eso. Esta incluye más características, más seguridad, tal vez nuevos conceptos que abstraen los conceptos de nivel inferior, y así sucesivamente. Tenemos todo un concepto de jerarquía donde hay una abstracción que está n grados alejada del nivel inferior, ya sea un grado por encima, uno, dos grados, o incluso cinco. Ahora, con las abstracciones también hay algunas compensaciones. También tenemos que pensar en el impacto en el tamaño general. Cuanto más abstracto estés de un objetivo dado, es probable que también aumentes la salida de código final. Podrías estar incluyendo más funciones y más código en tu proyecto al usar la abstracción incorrecta y aumentar el tamaño de tu proyecto rápidamente. Algo que también vale la pena considerar es si la abstracción también te brinda una salida de emergencia. Ahora, lenguajes como Python y Lua están construidos sobre C. Abstraen muchos de los aspectos internos que C ofrece, pero también te brindan un gancho de salida para que, si necesitas descender a C, puedas hacerlo. Puedes pensar en otras bibliotecas en la web que también ofrecen una salida de emergencia similar. Pueden construir sobre algo como Canvas y abstraer mucha de la complejidad que tiene Canvas, pero si necesitas por razones de rendimiento, puedes simplemente salir de eso y entrar en la capa nativa de Canvas. Estos son los tipos tradicionales de abstracciones con los que creo que la mayoría de las personas están familiarizadas. Las abstracciones también operan en otro vector. También se pueden pensar como un espectro, y esto es algo que una vez que te das cuenta de cómo se relaciona con el código

2. Pensando en las Abstracciones de Espectro

Short description:

Cuando pensamos en las abstracciones de espectro, consideramos dónde se ejecutará nuestro código. Tradicionalmente, pensábamos en Node o en el navegador, pero ahora tenemos tiempos de ejecución como Dino. Cada uno tiene sus compensaciones. El código que se ejecuta en Node o Dino está en los extremos opuestos del espectro. Son tan diferentes que el código puede no ejecutarse en ambos sin un esfuerzo adicional. Sin embargo, si el código se ejecuta en Dino, es probable que se ejecute en el navegador, y si se ejecuta en Node, también puede ejecutarse en el navegador. Estos son los espectros con los que tratamos.

con los que trabajas, verás que has lidiado con esto más veces de las que crees. Cuando pensamos en las abstracciones de espectro, puedes pensar en el código que escribes y dónde se ejecutará ese código. El ejemplo tradicional es si este código se ejecutará en Node o en el navegador, pero ahora se puede actualizar a si este código se ejecutará en Node, el navegador, o tiempos de ejecución como Dino. Todos estos tienen diferentes compensaciones, y cuando pensamos en el código que se ejecuta en Node o en el código que se ejecuta en Dino, están en los extremos opuestos del espectro. Son tan diferentes entre sí que sin tener que trabajar mucho para asegurarse de que ese código, sin tener que trabajar mucho y configurar sistemas de compilación complejos, es posible que no pueda ejecutarse en uno u otro. Si tienes código que puede ejecutarse en Dino, es probable que puedas encontrar una forma de hacerlo funcionar en el navegador, y si tienes código que se ejecuta en Node, puedes encontrar una forma de hacerlo funcionar en el navegador también. Estos son los tipos de espectros con los que tratamos. Uno con el que estoy más familiarizado es la idea de poder hacer desarrollo cross-platform , si tu código puede ejecutarse en el navegador, pero también en este dispositivo nativo. Ahora, si comienzas en el sitio web, podrás hacer que ese código se ejecute en el dispositivo nativo, pero a menudo puedes encontrar problemas donde las funciones no existen en el contexto nativo debido a limitaciones en una vista web o simplemente porque las API no están disponibles en general. Por otro lado, si comienzas en el lado nativo, ahora tienes que hacer mucho trabajo para hacer que ese código que se ejecuta bien en el dispositivo nativo funcione en la web. No siempre funciona de la misma manera. Es mucho más fácil pasar de la web a nativo que pasar de nativo a la web en mi opinión. Este tipo de espectro de desarrollo multiplataforma es algo con lo que tratamos mucho en Ionic, y es algo que realmente nos impulsa hacia adelante, poder tener ese punto dulce en el que puedo escribir mi código que sabe cómo ejecutarse en el web y cómo ejecutarse en nativo muy bien. Es algo que nos impulsa y nos empuja hacia adelante. Así que a medida que comienzas a escribir tu código y a crear nuevos proyectos y eliges tus bibliotecas y las herramientas que funcionarán mejor para ti, pregúntate si este código podrá ejecutarse en las diversas plataformas que deseas admitir. Podría ser JavaScript un día o JavaScript en tu terminal, Node. Podría ser tu dispositivo nativo o podría ser un nuevo conjunto de dispositivos que aún no se han inventado. Mantén en mente la abstracción no solo cuánto de un tamaño de código ofrece esta abstracción, sino dónde se ejecuta este código y cuánto trabajo voy a necesitar para hacerlo funcionar en esa plataforma. 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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
Rust es un nuevo lenguaje para escribir código de alto rendimiento, que puede ser compilado a WebAssembly, y ejecutado dentro del navegador. En esta charla se te guiará sobre cómo puedes integrar Rust, dentro de una aplicación Vue, de una manera que es sencilla y fácil. Con ejemplos de cómo interactuar con Rust desde JavaScript, y algunas de las trampas a tener en cuenta.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
El creador de Vue js da una actualización sobre las nuevas características de la tecnología.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa.

Tabla de contenidos
- Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos.
- Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar.
- Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido.
Nivel del masterclass

NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos.
Una Mirada Diferente a la Performance Web
Vue.js London Live 2021Vue.js London Live 2021
72 min
Una Mirada Diferente a la Performance Web
Workshop
Abhijeet Prasad
Abhijeet Prasad
Resolver los problemas de rendimiento en el front-end puede ser difícil, pero identificar dónde tienes problemas de rendimiento en primer lugar puede ser aún más difícil. En este masterclass, Abhijeet Prasad, ingeniero de software en Sentry.io, profundiza en la investigación de UX, las APIs de rendimiento del navegador y las herramientas de desarrollo para ayudarte a comprender las razones por las que tus aplicaciones Vue pueden ser lentas. Te ayudará a responder preguntas como "¿Qué significa tener un sitio web rápido?" y "¿Cómo sé si mi problema de rendimiento es realmente un problema?". Al recorrer diferentes aplicaciones de ejemplo, podrás aprender cómo utilizar y aprovechar los vitales web principales, las APIs de tiempo de navegación y el seguimiento distribuido para comprender mejor tus problemas de rendimiento.