 La primera charla a cargo de Jepser Bernadino, que se llama Style Components, porque es CSS en Javascript. Jepser es el fronet de engineer and WordPress expert en Typhoon, una empresa en Barcelona, y aunque también ha trabajado en agencias como SACHI en Sachi y BDO. Éste glit en el equipo responsable de las propiedades públicas y creó un plugin que permite las compras en línea para Centroamérica y una aplicación que convierte tus playlists de Spotify a YouTube. Ahí es, los dejo con dépsito. Gracias. Yo soy Gito. Soy CSS2 por venir. Como he representado mi nombre es Jepser Bernadino. Soy fronet developer y me mude hace aproximadamente dos años a Barcelona para trabajar en un aspecto llamado Typhoon. Lo que hacemos es data collection. Es un formulario como Google Forms o Gravity Forms, simplemente diferente. Pero parte de mi trabajo es WordPress y hace aproximadamente seis años empecé en todo este día. Entre las contribuciones que he tenido es el plan que ya mencionaron que habilita las compras en Centroamérica. Es un plugin de Google Forms y Google Forms. También soy encargado del plugin de Typhoon para poder impulsar formularios dentro de nuestros sitios de WordPress. Y por último, tuve la oportunidad de crear el primer artículo conversacional del mundo y está montado sobre WordPress. ¿Qué es un artículo conversacional? Pues es básicamente un chatbot embebido en contexto con el contenido de un artículo. Y el vamos a hablar de estado como es. A pesar de que no está relacionado directamente con WordPress, vemos como la comunidad va cada vez aproximándose a un uso más continuo de WordPress Headless. Es decir, con el API. Y como desarrolladores, tenemos la libertad de utilizar cualquier tecnología que queramos en la parte del frente. Entonces, para entender un poco el problema podemos ir unos años atrás y ver cuando la web solamente era HTML. No había forma de crear estilos y era digamos un documento mutando a Google. Luego CSS se creó aproximadamente en 1996 y no está mal y nos añadió la habilidad de poder crear estilos. Con CSS1 podríamos ya manipular los márgenes, los pardings, los bordes, el tamaño de fuente en nuestros sitios web. Y conforme la WordPress avanzando, nuevas tecnologías fueron incursionadas, fueron creciendo. Como lesbizas, los llamados crepes usadores. Para los que no está familiarizado de todo con estas tecnologías, porque vinieron un poco, son poco nuevos. Tenemos como ejemplo este archivo en la izquierda. Donde tenemos un elemento de lista, luego tenemos y sus estilos. Tenemos los estilos de un elemento de lista que tiene una clase de lista. Luego queremos estilar un elemento, un anchor, dentro de la lista. Y por último queremos estilar cuando ponemos el mouse encima de esta lista. El problema es que hasta aquí no hay ningún problema. Y es porque el archivo es pequeño, pero que si tenemos una aplicación más complicada. Se vuelve muy repetitivo estar escribiendo li.list y bla bla bla. Y así con muchos más selectores. Con SaaS, por el otro lado, tenemos una forma de estilo un poco más semántica para el desarrollador. Donde podemos añadir estilos, conforme lo vamos a utilizar. En este caso, li, dentro de li, de un list y así. Conforme se van desarrollando las tecnologías. También existían feds desarrollándose también la parte de los estilos. Luego de core procesadores llamamos los post-procesadores. Y este es PostCS, que es una colección de plugins que vamos añadiendo para poder una. Estas son las principales tareas de PostCS. Agregar opciones futuras, como variables de CSS. En su caso, cuando fue su tiempo, no utilizar prefixes como WebKit, como mouse. Sino que automáticamente esto lo hacía por nosotros. Y además, el itin de CSS. A diferencia de JavaScript o PHP o Java, cuando el compilador de CSS no entiende alguna regla, no termina la ejecución. Simplemente, ignorar la línea. A diferencia de JavaScript, por ejemplo, que si no entiende la línea, simplemente para la ejecución. Entonces, el itin de CSS es un poco distinto. Lo que nos ayuda es poder evitar que esa línea que escribimos mal, verla antes de la ejecución, antes cuando estamos escribiendo. También hay técnicas como inside out, pero outside in. Donde, como estilo de programación, o estilo de CSS. Agregamos primero las posiciones absolutas, luego displays, luego plugins, margins y por último los colores. Para no recordar todo esto, los envían al itin de CSS y pos.css era el que me olvidé todo esto. Hasta el momento, vamos hablando un poco de propios procesadores, pero seguimos teniendo unos problemas que vamos a ver en este par de slides. Conforme la web estaba evolucionando, se crean nuevas técnicas y nuevos frameworks para poder solventar esos problemas. Se crearon single page applications, se crearon progressive apps y un sinfín de nuevas formas de crear aplicaciones. Y CSS modules se creó como fenómeno de ellas. Fenómeno que el problema que resolvía era que en aplicaciones muy grandes teníamos muchos estilos que se repetían. Y llamamos a una característica de CSS que tiene global scoping. Eso quiere decir que si yo defino una regla, sea cual sea, en un archivo, a lo haré de juntarlo. Este simplemente puede leerlo cualquier parte de la aplicación. Aparte de ello, cuando creamos aplicaciones, ya vimos las tecnologías. Y cuando creamos aplicaciones, también necesitábamos mantener un orden cuando programamos. Para que nuestro amigo programador no se enojara a nosotros, al menos si con ella. Y se crearon técnicas como esta, hay muchas más, que es block element modifier o bend. Los que no están familiarizados con bend, lo que hacía básicamente era que nosotros creamos un bloque, en este caso, Hercules Hero y con un doble underscore poníamos el elemento. En este caso, un botón. Entonces yo podría hacer scope o podría generar en donde solo este estilo iba a ser aplicado. Por otro lado, block element. Por otro lado, también teníamos elementos y modificadores. No sé si alguna vez ha pasado que tienen un botón y quieren ponerlo activo. Normalmente lo que se nos ocurre es creamos otra clasa activa. Así puedo aplicárselo cualquier elemento. Y esta clasa activa realmente necesita un contexto. Porque no es lo mismo tener un botón activo que un li activo o una ventana activa. Entonces se crearon modificadores de los elementos. En este caso, podemos ver que yo quiero describir un estado activo y un estado deshabilitado. Como vemos en el lado derecho. Entonces, para todo esto de CSS, para completar más las cosas, vinieron dos amigos. React y View. Que son dos frameworks que han tomado mucho revuelvo. Que nos ayudan a poder escribir interfaces de usuario. Por medio de Just. Alguien utilizaba React y aquí View. Sí, algunos. Voy a tratar de ser lento para los que no. Para así explicarles paso a paso por qué estamos resolviendo un problema. Hay una primicia en estas librerías que es que en estado de una aplicación describe la aplicación en ese momento. Es decir, yo leyendo un estado puedo entender qué hace la aplicación, en qué está viviendo la aplicación. Veamos este ejemplo. Un estado, en este caso es un tutorialist. Tenemos una propiedad que se llama items. Y en este caso está vacía. Entonces, yo podría en mi interfaz describir la aplicación de esta manera. No hay ninguna. Sin embargo, yo al escribir impresionadamente agrego un item. Entonces, al agregar el item, lo podemos describir en el estado y por ende la aplicación reaccionaría de esta manera. Canarias de todas formas. Siguiente, y bueno, nuestro item tiene un nombre, quiere decir, lipografin. Y si está completado o no. En este caso no. Y la aplicación se le hace. Yo agrego otro elemento y se agregan el estado. Y en este caso es este modo. Y por alguna razón, ahora lo tengo completado. Entonces mi aplicación debería reaccionar de esa manera. Yo sé que si está completado debería mostrarse distinto. Así no está completado. Tal vez por la contraste no se mira muy bien, pero este tiene un crisito. Y yo lo puedo escribir de esta manera. Podría ser rojo o azul, pero la aplicación no le importa. Cuando vamos creando aplicaciones más y más complejas, las clases que nosotros generamos con los archivos se pueden ser más complicados que leer y debatir. Y es ahí donde empiezan a surgir tecnologías que se van basando en JavaScript porque es más poderoso que CSS que podían resolver el problema. Como por ejemplo, JSS. En JSS nosotros definíamos un estilo de esta manera. Un motor que tenía un color y un tamaño de fuente. Y él transpilaba esto y luego lo convertía en algo que ella era CSS de verdad. Sin embargo, para este punto, cuando yo estaba en esto, decía, ¿si es CSS? ¿Por qué no se escribe con CSS? Y de alguna manera tenía que aprender cómo escribir esto. Es muy simple en este momento, pero cuando necesitamos, o el beneficio de utilizarlos, JSS, JSS, es porque este resolvía problemas como global scoping, problemas como naming, pero tendría que aprender a escribirlo, saberlas en taxis. Y entonces se perdía un poco el sentido de CSS y como esta alegría, hay muchas más. ¡Lianguid Styles de Airbnb! Glamours, Radium, Aphrodite y hay un montón. Use el link este para que lo puedan leer después. Y entonces, no nos quiera morir. Vamos a ver cinco cosas que para mí Estad Compones resuelve que hasta el momento otra librería no lo hacía. El primero, que ya lo habíamos hablado. ¿Por qué escribimos estilos sin tener en cuenta que los estilos ya se resuelven con CSS? ¿Estad Compones como tal? Para mí, sí es como CSS. Lo primero que hacemos es, como toda librería, instalarla, sí. Para los que no les gusta el Airbnb, podemos utilizar Jarn y luego lo agregamos a donde queramos utilizarlo. Y aquí es interesante, aquí se pone para mí el primer check que era CSS, ¿podría escribirlo como CSS? Y vemos cómo podemos definir una constancia, en este caso here, y vemos el principio, que es style, que es lo que exportamos de nuestra librería. Y segundo, vemos como, después del punto de un div, donde el div representa el elemento que vamos a mostrar al cliente. Este puede ser un span, puede ser un li, un wl, básicamente cualquier elemento del don. Seguido de estas dos posturas de disinvertidas, que al principio cuando las vi, dije, ¿qué es esto? ¿Será algo de estas compones? ¿O qué será? Y simplemente es una nueva forma de definir funciones, el ES6, y se llama template literacy. Esto puede leer más, pero esto va a ser la más. Entonces, luego del template literacy, ya tengo algo que es CSS. En este caso, de como display flex, with 100%, maximum 900 px, y un margin. Esto es súper familiar. Y después de esto, bueno, ya tenemos un componente, un componente de RIA, que se escribe como CSS y tiene sus estilos. El primer problema que yo veía, resuelto. Segundo, entonces, el nombramiento, cuando creamos aplicaciones grandes, todo se empieza a crear una aplicación y se vuelve más compleja, más compleja, más compleja. Al menos, en mi caso, me quedaba sin nombres. Por ejemplo, se podría llamar hero, y luego tenía un hero de hombro, hero de los, hero 3, o tenía un lista, lista on style, lista, bla, bla, bla. Y me empezaba a quedar con nombres que se me ocurrieran en un momento y que realmente no describían o se me olvidaba que ya existían y lo sobreescribían. Y estará la lógica. Entonces, yo creaba un componente, pero un estilo, y luego la creé una clase. Y con esto, tengo un botón estilado. 5 minutos. Bueno, voy a ir rápido. Bueno, y esta manera de la escribiría. Si no empí, bueno, y luego quedaba con muchos, muchos más estilos que un momento dado me confundía de poder crearlos. Por el contrario, están los componentes. El mismo estilo es el componente. Entonces, yo defino hero, como vimos anteriormente, y la forma de agregarlo a mi aplicación es simplemente hero. Y este ya tiene todos los estilos. Nos eliminamos la parte de las clases. Y tenemos el mismo resultado. Scooby, hablábamos de que hay mutaciones en el CSS donde, dependiendo, si este archivo fue agregado primero o este archivo fuera primero, yo no sé cómo termino. Si termino con un elemento centrado, con un 100%, bueno, esto no tiene mucho sentido, porque sí tiene 100%. O un elemento que tiene 90% de ancho y otro marge. Y esto me hace que, dependiendo del compilador que tenga, va a tener un resultado indeterminístico. Entonces, si pongo hero, al final, no sé con cuál me creo. Con esto el componente es diferente. Nosotros tenemos una forma de definir explícitamente cómo queremos que nuestro elemento base, que en este caso hero, se modifique. Entonces, con el Scooby, nos quitamos las mutaciones, los resultados indeterminísticos. Todas las modificaciones son explícitas y nos preocupamos menos de los nombres. Testing. De moda bastante, de hecho no es de moda, pero es bastante importante. Es complicado poder testear interfaces. Normalmente se hace por medio de regresión test de dos browsers, pero muy cargado y muy costoso de tiempo. Muy cargado, muy costoso de crear. Por el contrario, con estos, esta componente genera, por medio del contenido, una clase aleatoria. Un string aleatoria. Que, si nosotros cambiamos, por ejemplo, de un blanco a negro, el string cambia. Y de esta manera podemos hacer snapshot tests que nos dicen dónde cambiar el código y si tiene side effects. Y la reactivity. Que es lo más importante para mí. La forma como nosotros, es que llegamos un cambio en interface, usando ven, que si alguien era propiedad activa, yo le iba a agregar una clase botanáctil y este iba a cambiarte color. Y lo agregaba acá. Sin embargo, todavía tenía esta separación. En cambio, con estado componente lo que me compones, yo puedo definir en el mismo estilo base, cómo mi componente va a apuntar. Es decir, hago una interpolación que se hace por medio del signo de doler y llaves, y esta es una función normal. Donde recibe props y si es activo, le pongo papá y aví. Y si no, le pongo blanco. Y la única manera de hacerlo de esta forma. La forma fácil de aplicarlo es esa manera. Entonces nuestro componente queda así. Para este momento, cuando yo estaba en esto, para mí este componente estaba así. Y además, pero no sé si tengo dos minutos, existen librerías como Polish que es un similar a toda la librería, todas las utilidades que tenían SAS como tal. Todas las funciones están incluidas en Polish básicamente. Además, nosotros cuando definimos el elemento definíamos cómo se iba a renderizar. Pero muchas veces necesitamos cambiar el tipo de elemento. Y esto lo hacemos por medio de width of point. Fácilmente. En uno de los proyectos que estábamos en la empresa teníamos los mismos elementos y simplemente necesitábamos saber modificar de una forma fácil los colores. Y esto se hace con cosas tan complicadas como estas. Se hace con cinco linees de código. Para los que están publicizados por React existe también un Team Provider como Riddos para poder aplicar todos estos estilos. Media Queries se escribe como sé si es. Al final los Media Queries se escriben normalmente entonces no hay nada que aprender en este caso. Server Sign Rendering ¿Por qué es importante? Porque normalmente las aplicaciones hechas en React o en JavaScript tienen el problema que se renderizaban en el cliente. Entonces en un navegador cuando hubo un browser un lgp.int iba, sólo miraba un tan bella JavaScript y un elemento que no tenía nada. Con estas componentes cinco linees de código y yo ya tengo service a rendering aplicado. Esto ayuda al crítico al CSS. ¿Qué es crítico al CSS? Imaginemos que tenemos el appop default y todo lo demás no es tan importante para el cliente. Entonces podríamos definir cuál es nuestro crítico al CSS para poder mostrar los estilos que nos importan primero y luego cargar los siguientes. Eliminamos el folk. No sé si miran aquí algo raro. Cuando cargan primero cargan sin estilos luego cargan parte de los estilos y luego ya se miran bien. Esto no da nada más que la experiencia de usuario, pero en el caso de nuestro equipo era primordial y así usando estas componentes y creando el service a rendering nos permitía evitar este tipo de comportamientos. Para los que tienen aplicaciones ya con React también pueden utilizar una forma muy fácil. Simplemente envuelven el componente que ya tiene con estado y aplican los estilos y ya. Espero que todo sea muy bien y perdón que tuve que quitar rápido tiempo. Si tenemos 5 minutos para pregunta 5 minutos tu pregunta ¿Alguna pregunta? ¿Cómo se llevan los style components con el trabajo en equipo? Y me refiero en el sentido de que cuando te bajas con SAS al final tienes distintos archivos para distintas cosas, poder dividirlo de una forma muy fácil pero en este caso pues como lo díamos. Bueno, estado components al final es como ya lo hice son componentes que nos sirven para envolver cierto estilo. En nuestro caso nosotros en los proyectos tenemos un componente normalmente podría ser GEDER y dentro de GEDER tenemos un archivo index que tiene la lógica del componente y aparte tenemos otro archivo que llamamos estado components donde tenemos listado los estilos por ejemplo una y hace que va a ser con click va a llevar a algún lugar un li que hace como se va a haber un bole, entonces lo digno de esa manera y bueno alguien puede trabajar en la lógica alguien puede trabajar en los estilos y así es como lo diríamos no sé si respondí tu pregunta en el centro ¿Una pregunta? ¿Alguien pide para poder utilizar estado components? Espero que les haya servido. Existe más librerías como estado components hay una que se llama EMOTION que es un poco más nueva y al parecer es más rapida no estoy diciendo que esta es la mejor solución pero soluciones como estas o librerías como estas no salieran a bueno han resolvido muchos de los problemas que encontramos dentro de la empresa muchas gracias