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!

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 es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
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
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend.
Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.

Workshops on related topic

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)
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.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
0 a Auth en una Hora Usando NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 a Auth en una Hora Usando NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
Requisitos previos- IDE de tu elección- Node 18 o superior