Angular 5, la evolución sigue

Si bien la nueva versión de Angular había sido planeada para ser liberada el pasado 23 de octubre de 2017; eso no sucedió, pero no te preocupes hoy se acaba de liberar el Release Candidate #7 por lo que es muy probable que en muy próximos días Angular 5 ya esté con nosotros. Finalmente tenemos versión 5.0 estable y lista para ser usada.

En este último release se han corregido algunos issues menores, es decir, ya nada crítico está siendo arreglado en estos momentos.

¿Qué esperar en la versión 5?

Optimización en los bundles

Al parecer se acabaron los tiempos donde teníamos bundles de más de 500 Kb para aplicaciones sencillas; eso nos llena de alegría, ya que una de las mayores limitantes (hasta la versión 4) era que nuestros archivos generados eran aún pesados, incluso para aplicaciones con muy pocos componentes.

Ahead Of Time Compilation por defecto para la Angular CLI

Oh sí, mi buen amigo, finalmente ya tendremos AoT desde el inicio cuando se crean proyectos que usen la CLI de Angular. Esto es definitivamente algo excelente, ya que nos olvidaremos de estar pasando flags extraños al estar creando nuestra aplicación para producción.

Mejor Desempeño para Event Listeners

Se han aplicado algunas mejoras en la forma en cómo se registran eventos, como el documentado en este pull request.

¿Progressive Web Apps con Angular? Por supuesto que sí

En la versión 2 y 4, no existían mecanismos completos y bien documentados sobre la creación de Aplicaciones Web Progresivas, ¿y qué crees? en la versión 5, el equipo detrás de este genial framework ha puesto especial énfasis en este tema que cada vez toma más relevancia en todos los frameworks modernos. Angular no se quedará atrás y por supuesto que ya se está trabajando en hacer este tipo de aplicaciones mucho más robustas usando mecanismos de caché en el browser y otras mejorar que ya platicaremos más adelante.

Componentes de Material Design Listos para Server-side Rendering

Esto quizá es de las cosas que personalmente más espero, ya que actualmente Angular está muy “joven” en cuanto server-side rendering, incluso con la adopción de Angular Universal por parte de Google, la verdad es que nos nos han brindado una forma estable y potente para este tema, que es el motivo por el que muchos desarrolladores e ingenieros de software han descartado Angular para aplicaciones donde el SEO sea vital.

Tengo mis reservas en este tema, quisiera probar si realmente estos componentes funcionarán como es debido. Esperemos que sí.

¿Qué sigue?

  • Evidentemente, ya estamos ansiosos por probar la versión estable de Angular 5, así que tan pronto como se libere, estaremos probando todo lo nuevo en el día cero.
  • Angular 6 se empezará a cocinar tan pronto como la 5 sea estable ¿qué? sí recuerda que Angular adoptó el sistema SEMVER con lo cual se ha prometido tener nuevas versiones de Angular cada 6 meses; eso quiere decir que más o menos entre marzo y abril del próximo año tendremos Angular 6…

¿Tendremos un Curso Profesional de Angular 5 en Webtraining.Zone?

Por supuesto que sí, tan pronto como tengamos versión estable, estaremos creando un proyecto completamente desde cero para que puedas aprender todo lo nuevo.

Ya tenemos fecha y hora: 18 de Noviembre 2017 en punto de las 10 AM (Hora México Centro).

Inscríbete ahora al Curso Profesional de Angular 5 con Material Design: https://webtraining.zone/cursos/curso-profesional-de-angular-5-con-material-design
Nos vemos en ese curso, mientras tanto coméntame ¿qué opinas de Angular? ¿has tenido oportunidad de explorarlo?

Tu amigo Alex Arriaga

Angular vs Vue.js ¿qué framework me conviene aprender?

Hoy por hoy la cantidad de opciones entre las que podemos elegir para crear aplicaciones de front-end ha crecido exponencialmente; todos los días hay nuevas ideas, nuevas herramientas y metodologías y con ello llega el gran reto de poder distinguir bajo que circunstancias o casos de uso una es mejor que la otra.

En este artículo te platicaré un poco de mi experiencia personal con dos de los mejores frameworks (en mi opinión) que tenemos a la mano; asimismo te dejo un video de un curso rápido que tuvimos donde comparamos ambos frameworks.

Aclaro que este artículo NO se enfoca en cuestiones de performance, sino que trata de ser un punto de vista más general.

¿Por qué no incluí a React?

Porque hasta ahora no he tenido la oportunidad de trabajar con él a nivel profesional.

Angular

Creado por Google, como evolución de AngularJS. Es un framework muy robusto para creación de Single Page Applications, provee todo lo necesario para crear aplicaciones de cualquier tamaño. La comunidad alrededor de Angular es muy dinámica por lo que todos los días se generan nuevos módulos para las versiones más recientes.

Sitio oficial: https://angular.io/

¿Te gustaría aprender Angular desde cero?

Checa este Curso Profesional de Angular que tenemos en Webtraining.Zone

Ventajas

  • Preparado para cualquier tipo de aplicaciones
  • Excelente documentación técnica
  • Un buen número de módulos creados por la comunidad
  • Sugiere muy buenas convenciones para nombrar tus archivos, componentes, módulos y servicios
  • Hace uso extensivo de un stack moderno que incluye: TypeScript y Webpack.
  • Posee una Command Line Interface: Angular CLI que permite generar código boilerplate muy rápidamente
  • Preparado para lazy loading
  • Provee un modo producción y un modo desarrollo
  • Listo para Ahead of Time Compilation
  • Angular es MUY bien pagado en el mundo front-end empresarial

Desventajas

  • Angular es un framework complejo, por lo que la curva de aprendizaje puede ser alta dependiendo de tu experiencia previa
  • Es necesario aprender TypeScript, que aunque es un super set de JavaScript, agrega nuevas cosas como por ejemplo los tipos, las interfaces, los modificadores de acceso, etc. que pueden parecerte no naturales al principio (sobretodo si vienes del mundo de JavaScript 100%)
  • Es forzoso utilizar un proceso que incluya un bundler y module loader (como Webpack o Rollup.js)

Vue.js

Creado Evan You, es considerado un framework progresivo, es decir, es un framework que puede irse haciendo tan robusto como se necesite; ya que puede ir desde la simple inclusión de éste como una biblioteca JavaScript regular que sólo crea pequeños widgets, hasta un framework muy potente para crear aplicaciones completas.

Sitio oficial: https://vuejs.org/

Ventajas

  • No necesitas aprender algo nuevo, ya que se puede usar con ES5 o incluso con ES2015 si así lo deseas.
  • Puedes usarlo directamente en tu sitio web sin necesidad de tener un complejo sistema de empaquetado (es decir, no necesita Webpack para trabajar en su formato más simple).
  • Es un framework muy ligero
  • La curva de aprendizaje es muy amigable
  • Tiene una documentación muy “digerible” (se lee y comprende muy bien)

Desventajas

  • Mantenido por un pequeño grupo de personas, lo cual podría suponer un riesgo menor ya que la comunidad alrededor de Vue.js es muy grande (no te preocupes, puedes usarlo)
  • Vue.js te da mucha libertad, lo que para un desarrollador poco experimentado puede resultar peligroso cuando se trate de aplicaciones muy grandes
  • En general he visto que el salario ofrecido para un desarrollador de Vue.js es menor al de un desarrollador de Angular

¿Qué opinas? ¿cómo te ha ido con alguno de estos frameworks? ¿qué tipo de aplicaciones has hecho? ¿crees que sea bueno tener tantas opciones para elegir?

 

El concepto de namespace en PHP

¿Te acuerdas cuando tu maestra de primaria te decía que tus libretas deberían estar bien ordenadas de acuerdo a la materia de la que trataran?

Pues bien los namespaces son una forma de organización de código que tenemos disponible en PHP; si vienes de un mundo parecido a Java seguramente recuerdas el concepto de paquete o package, que básicamente se encargaba de agrupar varias clases semántica o lógicamente relacionadas bajo un mismo folder (directorio físico o lógico).

Esa misma idea la tenemos en PHP y para usarlos sólo necesitas utilizar la palabra reservada namespace seguido del nombre que desees, por ejemplo si queremos que la clase User sea parte del espacio de nombres App, usaríamos la siguiente sintaxis.

namespace App;

class User {

}

Ventajas de los namespaces de PHP

  • Evitan colisiones entre clases; por ejemplo imagina que estás integrando dos sistemas diferentes bajo una misma aplicación pero ambos sistemas tienen una clase User. Sin usar namespaces no podrías user ambas clases en el mismo archivo PHP.
  • Capacidad de utilizar un alias cuando importas tus clases con el mismo nombre. Es decir, usando namespaces puedes definir un alias fácilmente como en el siguiente ejemplo:
namespace App;

use Webtraining\Auth\Models\User as WebtrainingUser;

class User {
    public function copyUser(WebtrainingUser $user) {
       // Some logic goes here!
    }
}

Para más información sobre aliasing/importing visita este artículo Using namespaces: Aliasing/Importing

Y aquí tienes el Namespaces overview de la documentación oficial.

Que tengas un excelente día.

Iterar campos repetibles en un Application Display Template de Liferay 7

Una de las cosas más complicadas de comprender es cómo usar los llamados repeatable fields en un Application Display Template (ADT) en Liferay 7; debido a que no disponemos de tanta documentación oficial. Por tal motivo quisiera compartir contigo un ejemplo de una ADT para el famoso Asset Publisher; comencemos:

  1. Imagina que tienes una Estructura (Structure) con un campo de tipo “Documents and Library” llamado attachment el cual ha sido configurado como repeatable=true.
  2. Ahora bien, necesitas crear un listado de todos los attachments y obtener tanto el link al documento, como su etiqueta (label).
<#if entries?has_content>
    <!-- START: item loop -->
    <div class="container">
        <div class="row">
            <#list entries as entry>
                <#assign renderer = entry.getAssetRenderer()/>
                <#assign className = renderer.getClassName() />
                <#if className == "com.liferay.journal.model.JournalArticle">
                    <#assign journalArticle = renderer.getArticle() />
                    <#assign document = saxReaderUtil.read(journalArticle.getContent()) />
                    <#assign allAttachments = document.selectNodes( "//dynamic-element[@name='attachment']") />
                    <!-- START: item html -->
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="media card-file">
                            <div class="media-body">
                                <#list allAttachments.iterator() as attachment>

                                    <#if attachment.valueOf( "dynamic-element[@name='fileLabel']")??>
                                        <#assign fileLabel = attachment.valueOf( "dynamic-element[@name='fileLabel']") />
                                        <#else>
                                            <#assign fileLabel="Download File" />
                                    </#if>

                                    <#if attachment.valueOf( "dynamic-content")??>
                                        <#assign fileLink = attachment.valueOf( "dynamic-content") />
                                        <#else>
                                            <#assign fileLink="#" />
                                    </#if>

                                    <div class="card-file__attachment">
                                        <a href="${fileLink?trim}" target="_blank">${fileLabel?trim}</a>
                                    </div>
                                </#list>
                            </div>
                        </div>
                    </div>
                    <!-- END: item html -->
                </#if>
            </#list>
        </div>
    </div>
    <!-- END: item loop -->
</#if>

Lo más importante en el código de Freemarker anterior es que estamos utilizando una query de XPath para obtener todos los nodos del XML que representa nuestro Journal Article:

<#assign allAttachments = document.selectNodes( "//dynamic-element[@name='attachment']") />

Acto seguido procedemos a iterar ese NodeList, usando la instrucción #list de Freemarker:

<#list allAttachments.iterator() as attachment>
// Do something here :)
</#list>

Tip. Si tienes dudas qué es una ADT; esta es la definición oficial de la documentación de Liferay:

The application display template (ADT) framework allows Liferay administrators to override the default display templates, removing limitations to the way your site’s content is displayed. With ADTs, you can define custom display templates used to render asset-centric applications. For example, you may want to show blog entries horizontally instead of vertically, or list your assets in the asset publisher application in different sizes.
https://dev.liferay.com/discover/portal/-/knowledge_base/6-2/using-application-display-templates

Comandos más usados de Laravel PHP Artisan

Cuando nos encontramos trabajando con Laravel una de las mejores herramientas que tenemos a nuestra disposición es el generador llamado artisan, aquí te dejamos nuestra lista de los comandos que más usamos en el día a día:

Crear una tabla

# Crear la tabla "posts"
php artisan make:migration create_posts_table --create posts 
php artisan migrate

Modificar una tabla existente

# Agregar el campo "summary" a la tabla "posts"
php artisan make:migration add_summary_to_posts_table --table="posts"

# Agregar varios campos nuevos a la tabla "users"
php artisan make:migration add_fields_to_users_table --table="users"

php artisan migrate

Generar una llave para hashing

php artisan key:generate

Crear un middleware

# Crear un middleware para verificiar si el usuario tiene una sesión
php artisan make:middleware HasUserASession

Crear un modelo

# Crear modelo Post
php artisan make:model Post

Crear un controlador

# Crear el controlador PostsController compatible con REST (resource) 
php artisan make:controller PostsController --resource

Generar código boilerplate para autenticación de usuarios

Este comando debería ejecutarse lo más pronto al iniciar tu proyecto ya que re-escribirá tus layouts y controladores de Autenticación y Usuarios

php artisan make:auth