944 063 154

Blog

Etiqueta: JavaScript

Symfony 4.0: “su mejor versión”

Publicado enDesarrollo web en diciembre 13, 2017 10:00 am

Symfony, el framework más completo para el desarrollo de todo tipo de aplicaciones web, lanza “la mejor versión de su historia”: el symfony 4.0. El proyecto fue lanzado hace más de 12 años para la creación de aplicaciones de Sensio programadas en PHP. Tras ser liberado bajo una licencia open source, presenta ahora su versión 4.0 gracias a la colaboración de la comunidad.

Symfony 4.0

Symfony 4.0 es el resultado de la modernización y adaptación del framework a las nuevas necesidades. Eso sí, manteniendo los conceptos de Symfony pero con una implementación mucho mejor. Algunas ‘ideas Symfony’ tradicionales se han sustituido por ideas más acordes con los estándares de la industria del software. Todo ello ha dado como resultado una versión que ofrece mejores resultados con menos trabajo. La versión 4.0 requiere de un menor aprendizaje al ser mucho más intuitivo y las configuraciones son más sencillas. Así, las horas de programación de la aplicación se reducen para que el tiempo que antes dedicabas a Symfony ahora puedas emplearlo en otras tareas.

Entre las principales novedades que trae Symfony 4.0 destacan tres que simplifican la generación de código en el desarrollo de una aplicación y la automatización de algunas de las tareas habituales durante la programación con Symfony.

Symfony Flex

La nueva forma de instalar y gestionar componentes en aplicaciones desarrolladas con Symfony. Esta herramienta hace que instalar o eliminar dependencias sea mucho más sencillo. Con Symfony 4.0 no será necesario buscar en GitHub cómo instalar bundles, componentes, librerías o cómo activarlas en el kernel de la aplicación. El plugin Symfony Flex se encarga de automatizar ese tipo de tareas a la hora de programar aplicaciones con Symfony.

Symfony Flex permite instalar y configurar componentes automáticamente a través de recetas. El propio plugin ofrecerá la opción de ejecutar esa configuración automática si detecta una receta en el componente que se quiere instalar. Además, se ha creado un nuevo archivo que evita la aplicación de una misma receta más de una vez. También se han eliminado los archivos Makefile y se han sustituido por Symfony Console. Además de que con Symfony 4.0 los bundles se registran de forma automática.

Symfony Make Bundle

Este bundle sustituye a un popular SensioGeneratorBundle. Un bundle que se estaba quedando obsoleto. El nuevo SymfonyMakerBundle se encarga de crear el código inicial (boilerplate code) necesario para la consola, los controladores o los formularios. De esta manera, eliminar el código inicial de la aplicación es más fácil que generarlo. Así, el código nuevo que tengas que crear se hará con un bundle más moderno, más sencillo y, sobre todo, mucho más ligero.

SymfonyMakerBundle deja atrás el uso del prefijo generate para implementar makers. Por el momento solo están disponibles algunos comandos simples. Aunque Symfony irá añadiendo nuevos incluyendo makers interactivos.

Aún más sencillo

Para hacer que la programación de aplicaciones con Symfony sea más sencilla e intuitiva, los directorios se simplifican. Con Symfony 4.0 todos serán de primer nivel y no existirán jerarquías entre ellos al adoptar una estructura plana.

Además, el tamaño de las aplicaciones se reducirá considerablemente. A partir de ahora sólo se instalarán las dependencias necesarias para poder desarrollar la aplicación. Así se evita tener que instalar todos los bundles y componentes de Symfony. Esto supondrá una reducción del 70% del código y de los archivos que requiere una aplicación desarrollada con Symfony 3. La versión 4.0 facilita el desarrollo de todo tipo de aplicaciones, desde microservicios a backends para aplicaciones en JavaScript, mediante el uso de un micro-kernel.

Al mismo tiempo que se publicaba Symfony 4.0 salía una versión anterior del framework: Symfony 3.4. Una versión que cuenta con las mismas funcionalidades de la rama 3.x pero que es imprescindible para poder actualizar tus aplicaciones a Symfony 4.0. Symfony 3.4 ha sido lanzada en versión LTS por lo que tendrá soporte hasta noviembre de 2021.

HTML templates con JQuery

Publicado enDesarrollo web

Es muy habitual que cuando nos iniciamos en el mundo de la programación, nos acostumbremos a hacerlo siguiendo un determinado patrón. En estos casos, cuando nos toca trabajar con otro lenguaje diferente nos sentimos raros. Por ejemplo, si estás habituado a programar en MVC, tener que realizar tareas en otro código puede resultarte incómodo. Pero, además tener que utilizar un código con el que no estás familiarizado puede tener consecuencias en el propio proyecto. Esto puede llevarnos, por ejemplo, a hardcodear el código HTML de una aplicación. Una práctica demasiado común cuando no se conoce bien el código que que, además nada cómodo, dará como resultado un código poco limpio.

En determinados lenguajes de programación es más difícil encontrarse con código hard-codeado o sucio. Por ejemplo, si sueles utilizar JavaScript, estarás mal acostumbrado a ver código limpio. Algo similar al siguiente script:

var html = "
<li class='" + class + "'>" +
           "<input type='text' id='"+ id +"' /></li>
";

Aunque el código en sí no es del todo incorrecto; cuando tenemos que realizar cambios en nuestra aplicación, algo bastante común en nuestro día a día, necesitaremos separar ese código HTML. De esta forma, además de evitar volvernos locos, estaremos haciendo que el código sea más mantenible. Asimismo, será más sencillo cuando queramos dinamizar el código HTML desde JavaScript.

Escribiendo código HTML desde JavaScript

Una soluciónpara limpiar y ordenar nuestro código HTML consiste en escribir el HTML que vamos a reutilizar desde JavaScript. En el proceso, deberemos seguir una serie de patrones que sustituiremos más adelante por los valores que más nos interesen. Para ello, podemos recurrir a diferentes herramientas, como la biblioteca multiplataforma JQuery de JavaScript. En este caso, si quisiéramos hacer una lista, deberíamos rellenar un elemento como el siguiente <ul>. Es decir, deberíamos recurrir a algo parecido al script que mostramos a continuación:




&lt;ul id="list"&gt;&lt;/ul&gt;



Una vez hayamos indicado en el código HTML que los elementos que introduciremos a continuación forman parte de una lista; deberíamos colocar justo antes de terminar el body el siguiente bloque de código HTML:




&lt;div id="bloque_lista" style="display:none"&gt;

  

&lt;li class="|class|"&gt;
    &lt;input type=”text” id=”input|row_id|” /&gt;
  &lt;/li&gt;



&lt;/div&gt;



Para rellenar la lista con los elementos que necesitamos listar, bastaría con sustituir los patrones |class| y |row_id| por los valores que necesitemos. En cada uno de ellos iremos especificando los elementos que compondrán nuestra lista.


function&nbsp;addItemToList() {

   var&nbsp;list     = $('#list');
   var class    = "rosa";
   var template = $('#bloque_lista').html();

   template = template.replace(/|class|/gi, class)

   for(var id=1;id&lt;11;id++){

     list.append(template.replace(/|row_id|/gi, id));

   }

}

Recurriendo a este tipo de prácticas, nuestro código HTML estará mucho más ordenado. Así, las modificaciones se podrán realizar de una forma más fácil y rápida; tanto si somos nosotros quienes tenemos que hacerlas, como si es alguien que no está acostumbrado a nuestro código. Porque peor que trabajar con un código que no conoces es no poder hacerlo porque está tan desordenado que es tarea imposible.