Svelte: framework ligero para de­sa­rro­llar apli­ca­cio­nes web rápidas

Durante mucho tiempo, el lenguaje de pro­gra­ma­ción Ja­va­S­cri­pt ha sido im­pre­s­ci­n­di­ble para crear contenido web atractivo, pero ser capaz de uti­li­zar­lo implica dominarlo a fondo, cosa para que no todos los de­sa­rro­lla­do­res tienen tiempo. Sin embargo, ac­tua­l­me­n­te existen los llamados fra­me­wo­r­ks o entornos de trabajo, que pro­po­r­cio­nan a los de­sa­rro­lla­do­res un marco en el que incluso las funciones Ja­va­S­cri­pt más complejas pueden eje­cu­tar­se au­to­má­ti­ca­me­n­te y que reduce co­n­si­de­ra­ble­me­n­te las tareas de pro­gra­ma­ción. En co­n­tra­pa­r­ti­da, la mayoría de los fra­me­wo­r­ks suelen so­bre­ca­r­gar mucho el navegador. Frente a ello, Svelte para JS propone un enfoque ra­di­ca­l­me­n­te nuevo.

Svelte (o SvelteJS) es un framework para de­sa­rro­llar apli­ca­cio­nes Ja­va­S­cri­pt. Pro­po­r­cio­na el marco básico para la apli­ca­ción a de­sa­rro­llar, así como funciones im­po­r­ta­n­tes y re­cu­rre­n­tes en forma de bi­blio­te­cas in­te­gra­das au­to­má­ti­ca­me­n­te. El framework define las po­si­bi­li­da­des básicas de la apli­ca­ción es­ta­ble­cie­n­do un marco concreto y también influye en el proceso de de­sa­rro­llo de manera decisiva. Fa­mi­lia­ri­zar­se con los fra­me­wo­r­ks diseñados para programar apli­ca­cio­nes web no lleva mucho tiempo, por lo que estos entornos son fáciles de usar.

Svelte es una he­rra­mie­n­ta ideal para programar apli­ca­cio­nes web rápidas y, en sus fu­n­da­me­n­tos, se parece a otros fra­me­wo­r­ks para Ja­va­s­cri­pt, como Angular, Vue, Ractive o React. Al igual que todos ellos, Svelte se basa en Ja­va­S­cri­pt y permite diseñar in­te­r­fa­ces de usuario in­ter­ac­ti­vas. Sin embargo, el código generado es mucho más ágil que con los fra­me­wo­r­ks tra­di­cio­na­les.

La in­no­va­ción fu­n­da­me­n­tal de SvelteJS es que permite convertir un código de framework complejo en Ja­va­S­cri­pt simple y op­ti­mi­za­do. La mayoría de los fra­me­wo­r­ks previos dejan al navegador la tarea de in­te­r­pre­tar y mostrar la apli­ca­ción en Ja­va­S­cri­pt, por lo que el proceso se ralentiza. En cambio, Svelte compila la apli­ca­ción en código Ja­va­S­cri­pt ya durante el de­sa­rro­llo. Uno de los objetivos de los creadores de Svelte era brindar a los de­sa­rro­lla­do­res la po­si­bi­li­dad de compilar el código más ágil e in­te­li­ge­n­te posible sin tener que so­bre­ca­r­gar­lo por utilizar el framework.

Siempre se da el mismo problema con los fra­me­wo­r­ks co­n­ve­n­cio­na­les: en lugar de si­m­pli­fi­car el código Ja­va­S­cri­pt para que se ejecute rá­pi­da­me­n­te en el navegador, éste se expande y hace que Ja­va­S­cri­pt in­te­r­pre­te todas las funciones del marco, a menudo también las que no se utilizan. Como resultado, incluso el código de apli­ca­cio­nes re­la­ti­va­me­n­te sencillas se acaba inflando, por lo que estas consumen muchos datos y re­n­di­mie­n­to al eje­cu­tar­las. Podría decirse que los fra­me­wo­r­ks tra­di­cio­na­les ayudan a es­tru­c­tu­rar las ideas, pero no el código. El problema suele ser que se centran en la ejecución en el navegador y descuidan el llamado Vanilla Ja­va­S­cri­pt, o la forma pura del código. Esta es la principal di­fe­re­n­cia que presenta Svelte. Ex­ce­p­tua­n­do algunos comandos básicos, que pueden apre­n­de­r­se muy rá­pi­da­me­n­te, Svelte utiliza HTML, CSS y Ja­va­S­cri­pt puros.

Durante el proceso de creación, los co­m­po­ne­n­tes de la apli­ca­ción se compilan en módulos Ja­va­S­cri­pt in­de­pe­n­die­n­tes. El de­sa­rro­lla­dor puede comprobar la es­ta­bi­li­dad y la ejecución del programa compilado en cualquier momento en una ventana de vista previa. La ventaja de este pro­ce­di­mie­n­to es que el script final resulta ex­tre­ma­da­me­n­te ligero y rápido. En Svelte no se infla el código, algo que di­fí­ci­l­me­n­te puede evitarse en los fra­me­wo­r­ks tra­di­cio­na­les. El resultado es un re­n­di­mie­n­to hasta diez veces más rápido en co­m­pa­ra­ción, por ejemplo, con React, que siempre ha sido muy popular.

Svelte para JS (Ja­va­S­cri­pt) consta de varios co­m­po­ne­n­tes. Su encanto especial radica en que el de­sa­rro­lla­dor apenas tiene que preo­cu­par­se por los elementos en CSS, que suelen ser molestos y propensos a errores. Basta con definir etiquetas HTML o XML sencillas y dejar que SvelteJS las in­te­r­pre­te. SvelteJS crea los co­m­po­ne­n­tes de la apli­ca­ción por sí mismo. El código HTML se escribe en la ventana in­ter­ac­ti­va REPL (del inglés read-eval-print loop, o bucle de lectura-eva­lua­ción-impresión) en el navegador. La in­te­r­pre­ta­ción de Ja­va­S­cri­pt se realiza de forma inmediata y au­to­má­ti­ca. Asimismo, la es­ta­bi­li­dad del código puede co­m­pro­bar­se de inmediato.

Con su enfoque ex­tre­ma­da­me­n­te si­m­pli­fi­ca­do, Svelte permite extender un gran abanico de apli­ca­cio­nes web. Mientras que con React prá­c­ti­ca­me­n­te todo el script debe de­te­r­mi­nar­se desde el principio, Svelte permite añadir ex­te­n­sio­nes po­s­te­rio­r­me­n­te sin ningún problema y sin poner en riesgo la es­ta­bi­li­dad y el re­n­di­mie­n­to de la apli­ca­ción. De esta manera, Svelte resulta una he­rra­mie­n­ta ideal tanto para de­sa­rro­llar apli­ca­cio­nes nuevas como para aumentar el re­n­di­mie­n­to de las es­tru­c­tu­ras exi­s­te­n­tes. Los de­sa­rro­lla­do­res de SvelteJS se dirigen sobre todo a los pri­n­ci­pia­n­tes en pro­gra­ma­ción de apli­ca­cio­nes y ofrecen kits de in­tro­du­c­ción con los que se pueden lograr re­su­l­ta­dos muy rá­pi­da­me­n­te. Ob­via­me­n­te, el uso de SvelteJS también requiere tener ciertos co­no­ci­mie­n­tos previos, es­pe­cia­l­me­n­te de CSS y Ja­va­S­cri­pt. En todo caso, la es­tru­c­tu­ra ligera del framework Svelte facilita a las personas sin ex­pe­rie­n­cia abrirse camino en el ámbito de la pro­gra­ma­ción.

Para ejecutar SvelteJS lo­ca­l­me­n­te en tu propio sistema, debes instalar Node.js. Cuando lo tengas, podrás instalar SvelteJS desde el re­po­si­to­rio de GitHub.

El entorno SvelteJS se ejecuta en un servidor web local, en "http://localhost:5000". La página de prueba en línea de Svelte supone una buena in­tro­du­c­ción a SvelteJS y no requiere instalar el paquete del programa. Ofrece scripts de muestra para todos los co­m­po­ne­n­tes más im­po­r­ta­n­tes, que se pueden modificar y probar de forma in­ter­ac­ti­va uti­li­za­n­do la ventana REPL original. Por lo tanto, te permite tantear SvelteJS y hacerte una idea de si el framework puede ser adecuado para im­ple­me­n­tar tu apli­ca­ción y de qué manera.

Con su volumen de datos ex­tre­ma­da­me­n­te reducido, SvelteJS permite de­sa­rro­llar apli­ca­cio­nes más potentes y rápidas que los fra­me­wo­r­ks tra­di­cio­na­les. Sin embargo, Svelte todavía no está su­fi­cie­n­te­me­n­te de­sa­rro­lla­do y su comunidad aún es pequeña. SvelteJS promete un mejor acceso, un apre­n­di­za­je más fácil y re­su­l­ta­dos más rápidos. Hasta ahora, estas promesas parecen haberse cumplido. Si Svelte demuestra ser más eficaz que Vue, Ractive o React, pronto los su­s­ti­tui­rá y se co­n­ve­r­ti­rá en el nuevo estándar universal para el de­sa­rro­llo de apli­ca­cio­nes web móviles.