Renderizado y Finalización

Curso de SolidJS

Introducción a SolidJS

Solid: Ventajas del Sistema Reactivo en Web Development

Programación orientada a objetos en Python

Creación de aplicaciones reactivas con Signals en Solid.js

Uso de CreateEffect en Solid.js para gestión de estado y SideFX

Optimización de señales derivadas con memos en SolidJS

Quiz: Introducción a SolidJS

Reactividad a profundidad

Reactividad: Principios y Aplicaciones Prácticas en Frameworks

Creación de una Librería Reactiva con JavaScript: MiniSolid

Sintaxis eficiente de signals en JavaScript

Creación de Primitiva Reactiva: Effects en Javascript

Signals derivados y su uso en aplicaciones web

Optimización con Memo en Sistemas Reactivos

Renderizado de JSX con DOM Expressions en Solid

Quiz: Reactividad a profundidad

Renderizado en Solid

Reactivo y Renderizado en SolidJS con Dark Mode

Modo Oscuro en SolidJS con Tailwind: Signals y Effects

Renderizado Condicional en SolidJS: Técnicas y Optimización

Reactividad y renderizado de listas en SolidJS

Manejo de Eventos en Elementos HTML: Agregar, Editar y Remover Items

Quiz: Renderizado en Solid

Reactividad en Listas

Optimización de renderizado de listas en SolidJS

Proxies en JavaScript: Manipulación y Seguridad Avanzada

Uso de Stores en Solid para Datos Complejos y Ergonomía Mejora

Uso de la función produce con stores en SolidJS

Quiz: Reactividad en Listas

Componentes

Encapsulado de Componentes en Solid para Mejorar Reutilización

Intercomunicación de Componentes con Props en JavaScript

Manejo de Eventos: Mejora la Interactividad en Tu Aplicación

Persistencia de Estado con Local Storage en Aplicaciones Web

Deploy de Aplicaciones Web con Netlify: Paso a Paso

Programación Reactiva con SolidJS

Quiz: Componentes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo se implementa el sistema de renderizado en Solid?

Cuando hablamos de desarrollo web moderno, la eficiencia y la simplicidad son claves. Solid es un framework que se destaca por su capacidad de manejar el renderizado de manera efectiva a través de señales (signals) y efectos. Sin embargo, al trabajar con Solid, no se trata simplemente de crear efectos basados en signals. En realidad, Solid utiliza una herramienta especializada llamada DOM Expressions para manejar el renderizado JSX. Este sistema transforma JSX en un flujo de operaciones a través del DOM, asegurando que las aplicaciones sean rápidas y reactivas.

¿Qué es DOM Expressions y cómo funciona?

DOM Expressions es una biblioteca crítica en el ecosistema de Solid. Funciona como un intermediario que permite convertir JSX a elementos reactivos que se renderizan en el DOM. Cuando trabajas en Solid y ejecutas un renderizado, Solid en realidad se basa en DOM Expressions para transformar lo que escribes en JSX en un formato que pueda ser comprendido y ejecutado por el navegador.

Al usar herramientas como Solid JS Web, que es un alias de DOM Expressions, Solid realiza lo siguiente:

Transforma JSX en representaciones eficaces para el DOM.
Maneja cambios en tiempo real usando señales, efectos y otros mecanismos para actualizar atributos y contenido de elementos HTML dinámicamente.

Al final, Solid se encarga de que el trabajo reductor del DOM se ejecute de manera eficiente sin perder la robustez característica de los frameworks modernos.

¿Por qué no es viable construir un sistema de renderizado desde cero?

Construir un sistema de renderizado desde cero en un framework como Solid es extremadamente complejo. Implica manejar transpilaciones, compilaciones y una serie de operaciones optimizadas para el rendering del DOM. Es por eso que Solid opta por integrar DOM Expressions, que ya ofrece este sistema integral de renderización para trabajar eficientemente con señales.

Desafíos principales de construir un sistema desde cero

Complejidad técnica: Crear un sistema de renderizado exige un profundo conocimiento de cómo el DOM gestiona cada interacción y actualización.
Herramientas avanzadas: Es necesario integrar herramientas de compilación y transpilación, haciendo el proceso robusto pero complejo.
Eficiencia y rapidez: Lograr un sistema que sea rápido y eficiente es crucial, especialmente alrededor de actualizaciones asíncronas y reactividad.

Con DOM Expressions, Solid logra delegar estas tareas a una solución especializada, permitiendo a los desarrolladores centrarse en la construcción de aplicaciones sin preocuparse por los intrincados detalles de renderización.

¿Cómo puedes aplicar este conocimiento en proyectos reales?

El entendimiento de los mecanismos de Solid no solo es valioso para programación en desarrollo front-end sino que ofrece una perspectiva completa de cómo estos sistemas contribuyen a la eficiencia y rapidez en interfaces de usuario.

Consejo para la práctica y desarrollo

Pon a prueba tus habilidades utilizando señales y efectos derivados aplicando esta librería de MiniSolid que has aprendido a crear. Aquí tienes un reto sencillo para comenzar:

Crea inputs reactivos: Desarrolla una aplicación sencilla con inputs para nombre, apellido, fecha de nacimiento y un enlace a Twitter.
Implementa signals y efectos: Utiliza los signals para manejar el estado de entrada y efectos para actualizar dinámicamente el DOM.

Fomentar la práctica en estos aspectos te ayudará a afrontar entrevistas técnicas con habilidad y seguridad, además de darle una base sólida a tus desarrollos futuros. Sigue explorando, aprendiendo y compartiendo tus experiencias para perfeccionar tus habilidades en el manejo de frameworks como Solid.

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Sebastian Lomas

hace 2 años

Reto

HTML

  <div id="app">
    <h1>
      Hola, soy 
      <a href="https://www.twitter.com/SebasLomasLopez" target="_blank" id="name"></a>
    </h1>
    <p>
      Actualmente tengo <span id="age"></span> años
    </p>
    <p id="more">
      Y estoy aprendiendo en platzi
    </p>
  </div>
  <script type="importmap">
    {
      "imports": {
        "solid-js": "./solid.js"
      }
    }
  </script>
  <script src="index.js" type="module"></script>

JS

createEffect(() => {
  // Obtener edad actual

  const currentDate = new Date()
  const currentDay = currentDate.getDate()
  const currentMonth = currentDate.getMonth() + 1
  const currentYear = currentDate.getFullYear()

  const birthDay = 12
  const birthMonth = 12
  const birthYear = 1998
  let birthNextYear = currentYear;

  console.table({currentDay, currentMonth, currentYear})

  let currentAge;


  // Checa si ya cumple años. 
  /*
  Si el mes y dia de actual es mayor o igual al de mi cumpleaños
  entonces el siguiente cumpleaños se celebrara el proximo año
  */
  if(currentDay >= birthDay && currentMonth >= birthMonth) {
    birthNextYear += 1
  } 

  /*
    Si el dia y mes actual son igual o mayor al dia y mes de mi cumpleaños O
    si el siguiente año de mi cumpleaños es mayor al año actual
    entones hace una simple resta.
    Si ninguna condicion es verdad, significa que todavia no cumplo año, asi que tengo la misma
    edad que cumpli mi cumpleaños pasado para eso se resta 1.
  */
  if((currentDay >= birthDay && currentMonth >= birthMonth) || birthNextYear > currentYear) {
    currentAge = currentYear - birthYear
  } else {
    currentAge = (currentYear - 1) - birthYear
  }

  document.querySelector('#age').textContent = currentAge

  console.log(currentAge)
})

Wilmer León Chávez

hace 2 años

Reto:

import { createSignal, createEffect } from "solid";

const defaultProfile = {
    name: "platzinauta",
    link: "https://twitter.com/?lang=es",
    year: new Date().getFullYear()
}

const [profile, setProfile] = createSignal(defaultProfile)


createEffect(()=> {
    console.log("form: ", profile())
    document.querySelector("#name").textContent  = profile().name 
    document.querySelector("#link").setAttribute("href", profile().link)
    const yearNumber = new Date().getFullYear() - Number(profile().year)
    document.querySelector("#year").textContent = yearNumber
})

document.querySelector("#reload").addEventListener("click", (e) => {
    e.preventDefault()
    const name = document.querySelector("#input_name").value
    const link = document.querySelector("#input_link").value
    const year = document.querySelector("#input_year").value
    if (name != "") defaultProfile.name = name
    if (link != "") defaultProfile.link = link
    if (year != "") defaultProfile.year = year
    setProfile(defaultProfile)
})