Presentamos LiveStyle: CSS Live Reload mejor, más potente y más inteligente

 

 

 

  • Patrones de diseño para interfaces de IA, con Vitaly Friedman
  • SmashingConf Nueva York 2024

  • Índice
    1. Un estado de herramientas de edición en vivo
    2. Cómo funciona LiveStyle
    3. Instalación
    4. Usando estilo vivo
    5. Nuevos flujos de trabajo
      1. Modo simple
      2. Modo de vista múltiple
      3. Modo multisitio
      4. Modo diseñador
    6. Entre bastidores
      1. Cómo LiveStyle parchea CSS
      2. Actuación
      3. Optimización de JavaScript
    7. Planes futuros
      1. Otras lecturas

    Las herramientas para la edición de CSS en vivo no son nuevas en estos días. Entonces, ¿por qué alguien necesitaría crear otra herramienta e incluso llamarla “editor CSS en vivo de nueva generación”? En este artículo, Sergey Chikuyonok desea presentar a Emmet LiveStyle. Este complemento adopta un enfoque completamente diferente a la hora de actualizar CSS. A diferencia de otros editores en vivo, no simplemente reemplaza un archivo CSS completo en un navegador o editor, sino que asigna cambios de un archivo CSS a otro.

     

    *En el pasado, presentamos algunas herramientas y bibliotecas interesantes: PrefixFree , Foundation , Sisyphus.js , GuideGuide , Gridpak , JS Bin y CSSComb . Todos ellos han sido desarrollados y publicados por miembros activos de la comunidad de diseño web como proyectos de código abierto. ¡Hoy presentamos LiveStyle , un complemento para la edición CSS bidireccional (editor ↔ navegador) en vivo de nueva generación! — Ed.*

    Las herramientas para la edición de CSS en vivo no son nuevas en estos días. Es posible que ya esté familiarizado con herramientas como LiveReload, CodeKit y Brackets . Entonces, ¿por qué alguien necesitaría crear otra herramienta e incluso llamarla “editor CSS en vivo de nueva generación”?

    La herramienta que me gustaría presentarles hoy es Emmet LiveStyle . Este complemento adopta un enfoque completamente diferente a la hora de actualizar CSS. A diferencia de otros editores en vivo, no simplemente reemplaza un archivo CSS completo en un navegador o editor, sino que asigna cambios de un archivo CSS a otro.

    Para comprender mejor cómo funciona LiveStyle, primero echemos un vistazo al estado actual de las herramientas de edición en vivo.

    Un estado de herramientas de edición en vivo

    La mayoría de las herramientas de recarga/edición en vivo funcionan de una manera bastante simple: buscan archivos CSS en una carpeta especial y actualizan el navegador web una vez que se ha cambiado algo. Por lo tanto, los usuarios deben editar el archivo CSS y guardarlo antes de poder obtener una vista previa de los cambios. No es exactamente una actualización "en vivo", pero esta simplicidad tiene sus propios beneficios. Puede utilizar estas herramientas junto con preprocesadores para que su página web se actualice automáticamente cada vez que guarde su archivo LESS o SASS.

    Hace aproximadamente un año, apareció una nueva generación de herramientas de edición en vivo. Editores como Brackets y WebStorm se integran directamente con los navegadores web (más específicamente, con Google Chrome) y le permiten ver las actualizaciones al instante, por ejemplo, sin guardar un archivo. Envían el contenido del archivo actualizado al navegador cada vez que cambias algo. Pero para poder utilizar la edición en vivo, requieren el uso de un servidor web especial integrado para asignar correctamente sus archivos locales con las URL del navegador.

    Recuperar los cambios de DevTools en su archivo CSS no es tan popular. Hay algunas herramientas como Tin.cr que le permiten guardar los cambios de DevTools en el archivo (el equipo de desarrollo de Chrome presentó recientemente Chrome Workspaces para este mismo propósito).

    En resumen, para utilizar estas herramientas para un desarrollo verdaderamente en vivo (entregar actualizaciones del editor al navegador y viceversa), debe:

     

    • Utilice los mismos archivos CSS en su editor de texto y navegador web.
    • Mantenga sus archivos en un sistema de archivos local.
    • En algunos casos, utilice un servidor web de herramientas especiales.

    Todas estas herramientas funcionan bien una vez que has comenzado el desarrollo de tu proyecto, pero ¿qué sucede cuando tu sitio web entra en producción? ¿Qué pasa si concatenas y minimizas tu código CSS para obtener un mejor rendimiento y UX? La mayoría de estas herramientas se vuelven prácticamente inútiles:

    • No puede usar el servidor web de herramientas porque necesita usar uno propio para backend/CMS.
    • No puede recuperar los cambios de DevTools en su archivo ya que el CSS (concatenado y minimizado) dentro del navegador no es el mismo que su código fuente.
    • En algunos proyectos grandes, no puede usar un sistema de archivos local; sus archivos pueden estar en su zona de pruebas privada en el servidor de desarrollo.

    Entonces no tienes muchas opciones ahora, ¿verdad? Si me preguntas, hay dos cosas que se deben eliminar:

    1. Cualquier middleware entre el navegador y el editor. El editor debería poder comunicarse con el navegador directamente, sin utilizar ningún archivo o servidor web.
    2. Intercambio completo de contenido CSS. El navegador o editor debe recibir sólo las secciones actualizadas, no la fuente completa.

    Para resolver estos problemas, se creó LiveStyle. A diferencia de otras herramientas, no trabaja directamente con archivos ni los reemplaza en el navegador o editor. Mapea los cambios de una fuente a otra.

    Cómo funciona LiveStyle

    Imagina que estás editando un archivo CSS y te pregunto: "¿Qué acabas de cambiar?"

    Tu respuesta podría ser: “En la línea 2, reemplacé los caracteres del 12 al 16 con la palabra red”. Pero estoy bastante seguro de que su respuesta terminará siendo: "En el bodyselector, cambié el backgroundvalor de la propiedad a red". En otras palabras, en lugar de describir cómo se cambiaron los bytes dentro del archivo de texto, describiría cómo se cambió la estructura del archivo CSS .

    Pero la cuestión es que si pasas esta misma información a otro desarrollador, es decir, “en body, cambia backgroundel valor a red”, él puede realizar los mismos cambios en su propio archivo CSS y obtener el mismo resultado.

    Así es exactamente como funciona LiveStyle. Cada vez que actualiza una fuente CSS, realiza comparaciones estructurales con el estado anterior y crea un parche especial que describe cómo se cambió la estructura CSS. Luego, este parche se transmite a todos los clientes y se aplica a la fuente CSS asociada.

    Este enfoque le brinda los siguientes beneficios:

    • Puede asociar dos fuentes CSS completamente diferentes para la edición en vivo. Por ejemplo, puede tomar una fuente CSS minimizada y concatenada en un navegador, asociarla con uno de los módulos CSS fuente en un editor y usarlos para una edición en vivo totalmente bidireccional.
    • No es necesario que guarde sus archivos en un sistema de archivos local. Simplemente puede abrirlo directamente desde el FTP, su elegante soporte de red o lo que sea. Si un editor de texto puede abrir un archivo, también puede usarlo para editarlo en vivo.
    • ¡Incluso puedes crear archivos nuevos sin título y usarlos para editarlos en vivo de inmediato!
    • No necesita un servidor web especial, ni un fragmento de código ni un observador de archivos, todo funciona en el editor y el navegador.

    Aquí hay un vídeo de demostración que muestra cómo funciona este enfoque en la vida real:

     

    En el vídeo de arriba, utilicé la página principal de Facebook para demostrar el poder de LiveStyle. No hay duda de que es uno de los sitios web más grandes y complejos del planeta y no tengo acceso ni al servidor de Facebook ni a su fuente CSS. Pero solo necesito unos pocos clics para iniciar la edición de CSS en vivo. ¡Imagínese lo fácil que es para usted hacer lo mismo con su propio sitio web!

    Instalación

    Actualmente, LiveStyle funciona en Google Chrome, WebKit Nightly (para edición en vivo de aplicaciones iOS) y Sublime Text. El proceso de instalación es bastante sencillo:

    1. Instale el complemento "LiveStyle" desde Package Control en Sublime Text.
    2. Instale la extensión para Google Chrome .

    La extensión WebKit se puede instalar directamente desde Sublime Text, simplemente seleccione ToolsInstall LiveStyle for WebKit extensionelemento del menú o ejecute el LiveStyle: Install WebKit extensioncomando desde la paleta de comandos.

    ¡Eso es todo! Ahora puedes empezar a utilizar LiveStyle para modificar tus sitios web. Si tiene algún problema con la instalación de LiveStyle o necesita más ayuda, consulte la guía de instalación oficial .

    Usando estilo vivo

    Para comenzar con la edición de CSS en vivo, simplemente siga estos cuatro sencillos pasos:

    1. Inicie Sublime Text y abra un archivo CSS o cree uno nuevo.
    2. Inicie su navegador Chrome y vaya a la página que desea editar.
    3. Abra DevTools, vaya al panel LiveStyle y marque la opción Habilitar LiveStyle para la página actual .
    4. Una vez habilitado, verá una lista de hojas de estilo externas a la izquierda y una lista de archivos del editor a la derecha. Simplemente elija el archivo del editor que debería estar asociado con el navegador y ¡listo!

    Tenga en cuenta que la lista de archivos del editor se actualiza automáticamente cada vez que crea, abre o cierra archivos dentro del editor.

    Importante : debe mantener DevTools abierto durante su sesión de edición en vivo y para cada ventana (en modo de vista múltiple). No es necesario que esté en el panel LiveStyle todo el tiempo, pero DevTools debe permanecer abierto, de lo contrario no se aplicarán las actualizaciones entrantes.

    Nuevos flujos de trabajo

    El concepto de parcheo CSS de LiveStyles presenta una serie de flujos de trabajo que puede utilizar en su proceso de desarrollo: Mejores Opiniones y reviews

    Modo simple

    Este es un modo básico de edición en vivo uno a uno. Simplemente asocie cualquier archivo CSS externo en el navegador y el editor, y comience a editar. Todos los cambios de su editor se reflejarán automáticamente en el navegador y sus actualizaciones de DevTools se reflejarán en el editor.

     

    Si el archivo de su navegador es lo suficientemente grande, las actualizaciones del editor pueden tardar algún tiempo en aplicarse. Si desea acelerar las cosas o no tiene hojas de estilo externas en su página, puede crear una nueva hoja de estilo presionando el Add filebotón y usándola para actualizaciones en vivo.

    Modo de vista múltiple

    El modo de vista múltiple es ideal para modificar diseños web responsivos. Abra varias ventanas de la misma página y cambie su tamaño para sus puntos de interrupción RWD. DevTools debe estar abierto para cada ventana ; de lo contrario, no aplicará ninguna actualización.

    En modo multivista:

    • Todas las actualizaciones del editor se aplicarán a todas las ventanas.
    • Todas las actualizaciones de DevTools se aplicarán al editor y a todas las demás ventanas con la misma página.
    • Todas las actualizaciones del panel LiveStyle (como las asociaciones de archivos) se aplicarán automáticamente a todas las demás ventanas con la misma página.

    Modo multisitio

    Este modo es útil si su proyecto web tiene diferentes versiones de sitios web móviles y de escritorio, pero comparte la misma base de código CSS.

    Al igual que en el "modo de vista múltiple", debe abrir algunas ventanas con las versiones de su sitio web y asociar los archivos CSS de su navegador en el panel LiveStyle con el mismo archivo del editor . LiveStyle utilizará este archivo del editor como referencia para parchear los archivos de su navegador con actualizaciones entrantes, incluso desde DevTools.

    Modo diseñador

    Este modo es para diseñadores que trabajan en proyectos grandes y no tienen acceso directo a las fuentes CSS. (¡Tenga en cuenta que este es un modo experimental y está sujeto a cambios!)

    Imagine que detecta un error en su sitio web de producción. En lugar de pedirle al desarrollador que dedique algún tiempo a solucionar estos problemas, puede solucionarlos usted mismo y enviarle un parche al desarrollador para que pueda aplicarlo más tarde a la fuente original.

    Todas las actualizaciones de LiveStyle se registran en el "Historial de parches", disponible en el panel LiveStyle DevTools. Se crea automáticamente una nueva entrada en el historial de parches cada vez que abre o actualiza una página web. Haga clic en la entrada emergente "Historial de parches" para aplicar parches grabados y haga clic en el icono rojo a la derecha para descargarlo.

    Entonces, todo lo que tienes que hacer es modificar el diseño en DevTools y descargar la entrada más reciente del historial de parches. Puede enviar el parche descargado al desarrollador para que pueda aplicarlo a la fuente CSS original.

    Tenga en cuenta que en este modo no necesita ninguna extensión de Sublime Text ; solo necesitas la extensión DevTools.

    Entre bastidores

    Estoy bastante seguro de que cualquiera que tenga conocimientos de tecnología estará interesado en cómo funciona LiveStyle y qué lecciones aprendí de este proyecto.

    Cómo LiveStyle parchea CSS

    Cuando editas estilos en DevTools, ves que las propiedades en los selectores se modifican en consecuencia: los selectores existentes se actualizan y los ausentes se crean; incluso los selectores CSS completos se crean automáticamente (y realmente espero que esto sea lo único que veas).

     

    ¿Pero notaste que no hay ningún paso de configuración de formato CSS? No tuvo que abrir ningún archivo de preferencias para especificar que no necesita espacio después de dos puntos y que todas sus propiedades deben escribirse en líneas simples.

    Esto se debe a que LiveStyle intenta adaptarse lo más posible a su estilo de codificación. Siempre que necesita insertar algo en el documento, analiza su estilo de codificación personal y crea automáticamente reglas de formato para usted.

    Esto también es posible gracias al cssEditTreecomponente original de Emmets. Este módulo proporciona una interfaz similar a DOM para modificaciones de CSS, por ejemplo rule.value('background', 'red'), rule.add('padding', '10px'), pero también realiza un seguimiento de las posiciones de los tokens CSS y hereda reglas de formato para propiedades recién creadas. De hecho, puedes crear una extensión Emmet y reutilizar este módulo para automatizar tus tareas de modificación de CSS (por ejemplo, como en la acción Actualizar tamaño de imagen ).

    Actuación

    Como se describió anteriormente, LiveStyle no simplemente intercambia contenido CSS, sino que analiza CSS en un árbol, lo compara con su estado anterior y genera un parche especial. Por otro lado, también tiene que analizar CSS, localizar el lugar adecuado para parchear, analizar su estilo de codificación y luego crear una fuente CSS parcheada. Y todo debe hacerse después de cada pulsación de tecla, lo que significa que LiveStyle debe ser rápido, increíblemente rápido .

    Tuve que usar algunos trucos avanzados para que esto fuera posible; Tuve que optimizar para Garbage Collector, optimizar para JIT, optimizar la integración de funciones e incluso la programación de subprocesos múltiples.

    Optimización de JavaScript

    LiveStyle está escrito completamente en JavaScript. Gracias a Google DevOps, tenemos un brillante motor JavaScript V8 (que impulsa Chrome y PyV8, utilizado para ejecutar JS en Sublime Text) y DevTools para depurar el rendimiento de JS.

    V8 puede ejecutar JavaScript muy rápido, pero no es una caja mágica. Tenemos que obedecer algunas reglas para que funcione de esa manera.

    Lo primero que necesitamos para poder iniciar la optimización es un producto que funcione, cubierto por pruebas unitarias. “La optimización prematura es la raíz de todos los males”, ya sabes.

    Una vez que tengamos nuestro producto en funcionamiento, comience a usar Profiler para determinar las partes lentas de su código. Chrome y Firefox tienen increíbles perfiles integrados y muchos tutoriales sobre cómo usarlos, por lo que esto no debería ser un problema.

    Entre otras cosas, el gran aumento del rendimiento se logró reemplazando los iteradores de matriz por Array.forEachbucles simples en partes críticas del rendimiento. Esta técnica se llama “ Inlining ”. Los bucles simples son mucho más rápidos que las implementaciones nativas Array.forEachy algunas bibliotecas como Lo-Dash utilizan la misma técnica para ejecutarse más rápido. A pesar de que he usado mucho Lo-Dash en LiveStyle, usé bucles simples en partes críticas para el rendimiento, ya que cada llamada a función tiene su propia pequeña penalización en el rendimiento.

     

    Una vez que se optimizaron todas las partes, el proceso más lento fue la recolección de basura (GC). GC es un proceso de eliminación de datos innecesarios de la memoria. En JavaScript, no tenemos acceso directo al recolector de basura, por lo que no podemos, por ejemplo, retrasar su ejecución y volver a llamarlo explícitamente más tarde. Lo único que podemos hacer aquí es evitar producir tanta basura.

    Considere el siguiente ejemplo:

    function getSize(obj) { return { width: obj.left - obj.right, height: obj.bottom - obj.top };}var size = getSize(parent);child.style.width = size.width;child.style.height = size.height;

    En este ejemplo, utilizamos la getSize()función como método de utilidad para calcular el ancho y el alto del objeto dado. Si bien este ejemplo es bastante simple, en realidad produce mucha basura; Si llamamos al getSize()método, digamos, 10.000 veces, generará 10.000 objetos que no son necesarios para la ejecución posterior del programa, por lo que deben ser recopilados por el GC.

    Una mejor implementación de la getSize()función podría verse así:

    var _size = {};function getSize(obj) { _size.width = obj.left - obj.right; _size.height = obj.bottom - obj.top; return _size;}

    En este ejemplo, incluso si la getSize()función se llama 100.000 veces, solo se creará un objeto en la memoria, lo que reduce en gran medida las llamadas a GC.

    Logré un gran aumento de rendimiento con todas estas manipulaciones y aún no era el final. Ahora podemos hacer que nuestra aplicación se ejecute aún más rápido con la ayuda del compilador justo a tiempo (JIT).

    Dado que LiveStyle analiza CSS, crea muchos objetos simbólicos a los que el parcheador debe acceder con mucha frecuencia. Analicé mi código y vi que estos objetos token se modifican durante el tiempo de ejecución; por ejemplo, se agregaron nuevas propiedades a algunos de estos objetos.

    El optimizador JIT de V8 tiene la característica llamada "Clase oculta", un ensamblaje especial que optimiza el acceso a propiedades de objetos similares. Y cada vez que agregamos una nueva propiedad a un objeto existente, rompemos esta optimización.

    Entonces hice mi optimización general: reescribí parte del motor de LiveStyle para que los objetos simbólicos pudieran crearse automáticamente con todas las propiedades requeridas de antemano y que estos objetos puedan reutilizarse en diferentes partes de la aplicación, lo que reduce la recolección de basura en general.

    Aproximadamente la mitad de este enorme aumento de rendimiento se logró optimizando JS para los componentes internos del V8. Para demostrar cuánto se optimizó el aumento de rendimiento de LiveStyle, aquí hay algunos números de mi MacBook Air:

    • Creando un parche a partir de una fuente CSS de 15 Kb:18 ms
    • Aplicando parche en fuente CSS de 584 Kb:212 ms

    Bastante bien, diría yo, suponiendo que la mayoría de las herramientas de recarga en vivo necesitan un tiempo de espera de 1 segundo antes de recargar el navegador después de que se haya modificado un archivo CSS.

    Planes futuros

    Durante los primeros días de prueba beta pública, LiveStyle demostró que su algoritmo de parcheo es bastante estable y sólido. No ha habido informes de CSS roto o resultados no válidos. De hecho, LiveStyle ayudó a algunas personas a encontrar errores en su CSS. Y todavía queda mucho trabajo por hacer: admitir más navegadores y editores y, por supuesto, agregar soporte para preprocesadores.

    En el vídeo de demostración anterior, vio cómo se realiza la edición SCSS bidireccional en vivo. Los cambios del editor en SCSS se reflejan instantáneamente en el CSS del navegador, y los cambios del navegador en CSS simple se envían instantáneamente a los lugares correctos de SCSS. Pero esto es sólo un experimento que demuestra lo poderoso que puede ser LiveStyle. Para uso en el mundo real, básicamente requiere que se escriba un nuevo procesador SCSS.

    Así que espero que LiveStyle te resulte útil y corras la voz. Si el apoyo de la comunidad es lo suficientemente fuerte, haré todo lo posible para encontrar financiación para un mayor desarrollo. LiveStyle actualmente es gratuito durante la prueba beta pública, pero estará disponible por una pequeña tarifa después de su lanzamiento oficial.

    Si tiene algún problema con LiveStyle o tiene alguna sugerencia, no dude en crear un ticket en el repositorio de complementos . ¡Gracias!

    Otras lecturas

    • Escribir JavaScript rápido y con memoria eficiente
    • Consejos de rendimiento para JavaScript en V8
    • Usando trabajadores web
    • Sube de nivel tus habilidades CSS con el selector :has()

    (il, señor)Explora más en

    • Codificación
    • Herramientas
    • Flujo de trabajo
    • CSS
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Presentamos LiveStyle: CSS Live Reload mejor, más potente y más inteligente

    Presentamos LiveStyle: CSS Live Reload mejor, más potente y más inteligente

    Un estado de herramientas de edición en vivoCómo funciona LiveStyleInstalaciónUsando estilo vivoNuevos flujos de trabajoEntre bastidoresPlanes futurosPatron

    programar

    es

    https://pseint.es/static/images/programar-presentamos-livestyle-css-live-reload-mejor-820-0.jpg

    2024-05-20

     

    Presentamos LiveStyle: CSS Live Reload mejor, más potente y más inteligente
    Presentamos LiveStyle: CSS Live Reload mejor, más potente y más inteligente

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences