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.
This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.
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.
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.
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.
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
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
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend. Nivel de la masterclass: Intermedio
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.
- 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
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.
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.
Comments