Cómo me gusta escribir JavaScript

Rate this content
Bookmark

Me encanta escribir JavaScript. Se siente ligero, sin restricciones y flexible, todas cualidades que impulsan la creatividad y me invitan a practicar nuevas e interesantes técnicas. Con el tiempo, he desarrollado muchos patrones y principios que me ayudan en mi día a día. En esta charla, te mostraré algunos de ellos y luego veremos cómo los aplico dentro del propio código de AlpineJS. ¡Va a ser un buen momento!

This talk has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

Caleb Porzio es el creador de un framework de JavaScript llamado Alpine JS.

Alpine JS es un framework de JavaScript que permite agregar funcionalidades como escuchadores de clic directamente a los botones mediante atributos en el HTML.

Caleb Porzio utiliza varias técnicas de refactorización, como extraer código en funciones, utilizar cláusulas de guardia para simplificar condiciones y diseñar por pensamiento deseoso para escribir el código que desea tener.

En su framework, Caleb Porzio utiliza una técnica que involucra escuchar mutaciones en los atributos HTML y, de ser necesario, eliminar los escuchadores de eventos asociados a estos atributos.

No, cuando Caleb Porzio comenzó con AlpineJS, no era un desarrollador de JavaScript experto.

Caleb Porzio menciona que eval() es una función sucia que no se recomienda usar, pero la utiliza en su charla para demostrar cómo evaluar cadenas como código JavaScript.

Caleb Porzio aborda la adición de nuevas funcionalidades mediante la refactorización del código para hacerlo más mantenible y permitir la integración fácil de nuevas directivas o funcionalidades.

Un observador de mutación es una API de JavaScript que permite observar y reaccionar a cambios en el DOM, como la adición o eliminación de atributos, sin necesidad de recargar la página.

Caleb Porzio recomienda comenzar la refactorización desde el principio, identificando el primer elemento que no parece perfecto y avanzar desde allí, simplificando y organizando el código progresivamente.

Un 'Dom Walker' es un script que recorre cada elemento de la página web, permitiendo buscar y inicializar atributos específicos como 'clic de llama' en el contexto del framework desarrollado por Caleb.

Caleb Porzio
Caleb Porzio
26 min
05 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Caleb Porzio presenta Alpine JS, un framework de JavaScript, y demuestra el proceso de crear una versión rudimentaria de AlpineJS y refactorizarla. La charla cubre temas como la creación de un Dom Walker, la evaluación de expresiones, el uso de observadores de mutación y la refactorización del código. También se discuten técnicas como la inversión de condicionales, el uso de callbacks y el currying de parámetros. La charla enfatiza la importancia de la abstracción, la extracción de manejadores y un enfoque declarativo en el desarrollo de software.
Available in English: How I Like to Write JavaScript

1. Introducción a Alpine JS

Short description:

Hola, mi nombre es Caleb Porzio. He creado un framework de JavaScript llamado Alpine JS. Vamos a crear una versión sencilla de AlpineJS, hacer un desastre y luego refactorizarlo utilizando técnicas de Alpine.

Hola, mi nombre es Caleb Porzio. He creado un framework de JavaScript llamado Alpine JS. Y cuando comencé con AlpineJS, no era un desarrollador de JavaScript experto, pero han pasado algunos años. He reescrito la base de código varias veces y ahora tengo muchas opiniones que creo que me ayudan a crear bases de código más mantenibles en las que realmente quiero trabajar.

Así que hoy vamos a crear esta pequeña versión sencilla de AlpineJS y básicamente vamos a hacer un desastre en el proceso, luego lo corregiremos y lo refactorizaremos utilizando algunas de las técnicas que he utilizado en Alpine. Así que vamos a hacerlo.

2. Creando el Dom Walker y Manejando Flame Click

Short description:

Aquí hay un botón en una página con una etiqueta de script vacía. Vamos a crear un pequeño espacio de juego. En lugar de usar el clic de exón de Alpine, usaremos el clic de llama y escribiremos JavaScript dentro de él. Creemos un script de Dom Walker para buscar atributos de clic de llama e inicializarlos. Comprobaremos si un elemento tiene el atributo de clic de llama y obtendremos su contenido.

Aquí hay un botón en una página con una etiqueta de script vacía. Este será nuestro pequeño espacio de juego. Y el framework que vamos a escribir es, no sé si has visto Alpine, pero con Alpine, puedes agregar cosas como escuchadores de clic directamente a los botones agregando atributos directamente en el HTML, como clic de exón. Bueno, en lugar de eso, vamos a hacer clic de llama y luego podemos escribir cualquier JavaScript aquí dentro. Así que escribamos algo como muy caliente.

De acuerdo. Y ahora, si cargamos esto en el navegador, no va a pasar nada. Tenemos este botón con clic de alerta. Muy caliente, lo hacemos clic y no pasa nada porque no hemos escrito ningún JavaScript para él. Así que hagámoslo. Lo primero que haría es crear un pequeño Dom Walker, un pequeño script que recorrerá cada elemento de la página y nos dará la oportunidad de buscar cosas como clic de llama e inicializarlas realmente. Así que escribamos un Dom Walker. Y con la magia de los fragmentos, no tienes que sentarte aquí y verme escribir un pequeño Dom Walker. Aquí está el script del Walker. Y este es el punto donde tenemos esta pequeña variable llamada L. Que en cada iteración de este bucle while simplemente recorrerá el siguiente nodo. Así que solo imprimamos L en la consola, actualicemos la página y asegurémonos de que funcione. Si miramos la consola, aquí está. Tenemos el botón, haz clic en mí. Ahora tenemos tres botones en la página. Actualicemos, hagamos que sean tres. Y recorrerá los tres. Si tuviéramos un botón anidado dentro de un div, también recorrería ese div. Y luego el botón dentro de él. Bien, genial. Tenemos nuestro pequeño Dom Walker. Ahora en esta parte, podemos hacer cosas con cada elemento. Y en nuestro caso, queremos verificar la existencia de este atributo de clic de llama diremos si L tiene el atributo clic de llama, entonces dejemos que la expresión sea igual a L.getAttribute(clic de llama). Esto obtendrá el contenido de ese atributo. De acuerdo.

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
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.
Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

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
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.