¿Qué conocimientos necesita un programador hoy en día para lidiar con WordPress y Gutenberg?

PHP ha dejado de ser el lenguaje por antonomasia en WordPress, a partir de ahora te aconsejamos que empieces a familiarizarte con JavaScript y vamos a darte todas las claves de este cambio de paradigma.

¿Por qué es importante JavaScript?

2012 fue nombrado por muchos el año de JavaScript, y casi siete años después ya es parte imprescindible del presente de la programación. WordPress y cualquier programador que quiera seguir desarrollando en esta plataforma ahora y en lo consecutivo, debería aprender este lenguaje.

Además, con el reciente lanzamiento de Gutenberg, que es la nueva interfaz de WordPress, adquiere más relevancia que nunca tener nociones de React y Redux. Pero primero vamos a comentar la última actualización de JavaScript: ES6.

¿Qué es ES6?

Si quieres estar al tanto de cómo evoluciona la programación en JavaScript debes conocer ES6, su última e importantísima actualización.

• Incluye decenas de nuevas funciones.
• El foco se ha puesto en la simplicidad y legibilidad del código.

En palabras de Dan Abramov, ingeniero de Facebook, “ES6 es una actualización crucial de JavaScript por la que estoy muy emocionado. Recomiendo aprender acerca de ES6 a quien quiera mejorar sus habilidades en JS”.

¿Qué es React y por qué es importante?

React hace que sea menos doloroso construir Interfaces de Usuario, llamativas, funcionales y adaptadas a la tendencia del “material desing”. Permite crear un código más predecible y fácil de depurar.

• Permite crear componentes individualmente y utilízalos posteriormente para dar forma a interfaces más complejas.
• Es posible desarrollar nuevas funciones en React sin tener que reescribir el código existente.

¿Cuáles son la ventajas de Redux?

Redux te ayuda a programar aplicaciones que funcionan con consistencia, en diferentes entornos (cliente, servidor y nativo) y además es fácil de comprobar.

• Las herramientas de desarrollo de Redux facilitan la detección de cuándo, dónde, cómo y por qué ha cambiado el estado de una aplicación.
• Función time-travel debugging y envío de informes de error a los servidores seleccionados.
• Funciona con cualquier capa de UI (Interfaz de Usuario).

¿Cómo es la sintaxis de JSX?

JSX es una extensión de JavaScript ideada por Facebook para integrar en React. Hace la función de pre-procesador transformando el código a lenguaje JavaScript.

Entonces ¿No se mezcla HTML en JavaScript?

Al comenzar a utilizarlo puede parecer que se mezcla código HTML en los ficheros pero no te dejes engañar. Vamos a explicarlo.

Vamos a ver cómo se crean algunos componentes básicos con React.

ClassName

Cuando queramos establecer una clase en React, deberemos hacerlo a través del comando “className” en vez de “class”. La razón es que la palabras “class” está reservada para otra función.

Ejemplo:

<div> className=”root”></div>

DangerouslySetInnerHTML

Es la forma para utilizar innerHTML dentro de React.

Ejemplo:

function addHtml() {
return {html: Hola Mundo}
function HolaMundo() {
return(
<h1 dangeroulySetInnerHTML="{addHtml()}></h1>
}

HtmlFor

Este atributo se emplea para sustituri a “for”, que se utiliza normalmente en etiquetas de tipo <label />, porque ya es una palabra reservada.

Ejemplo:

<label htmlFor=”name”Julio:</label>
<input type=”name” id=”name” />

método onChange

Permite obtener en tiempo real cualquier cambio que se realiza en un formulario, autoguardando los cambios.

selected

Se aplica a los elementos de tipo <option> para obtener el que está seleccionado en cada instante.

Style

La aplicación de estilos en React es algo curiosa. Usaremos el atributo “style” y deberemos asignarle un objeto que contiene los estilo (propiedades en formato camelCase).

Ejemplo:

const helloStyles={
color: ‘blue’,
font-size: ’20px’ //camelCase property
}

function HolaMundo {
return(
<h1 style={helloStyles}>Hola Mundo</h1
}

Value

Permite asignar valores a un elmento <textarea/> o <input />.

 

Como puedes comprobar es una sintáxis mucho más práctica. En realidad es como estar escribiendo en HTML pero en realidad es una programación en JavaScript, por eso algunos atributos tienen que nombrarse de forma distinta.

¿Qué sucede si la aplicación necesita actualizarse?

A medida que una app crece y se introducen componentes más grandes, que se traducen en eventos distintos, el uso de JSX permite acelerar el desarrollo.

¿Cómo se utiliza JSX?

Debes añadir una librería a mayores al HTML. Lo más aconsejable es echar mano de un bundler integrado en tu entorno como WebPack y que este aplique los cambios antes de publicar el código en producción.

5 herramientas completan la magia de JavaScrip:

1. NPM (Node Package Manager)

Es un gestor de paquetes que te hará la vida más sencilla a la hora de trabajar con Node.

• Gracias a él podrás acceder a cualquier librería en una sola línea de código.
• Su mayor potencial se revela en la administración de módulos, a la hora de distribuir paquetes y agregar dependencias de forma fácil.
• NPM instala los paquetes nuevos en local, pero puedes especificarle que los instale de forma global si lo prefieres.

2. WebPack

Es un empaquetador de módulos (un bundler) pero que tiene muchas más características:

• Gestionar dependencias
• Ejecutar tareas
• Convertir de unos formatos a otros
• Carga y uso de módulos de cualquier tipo.

Es una herramienta perfecta para el desarrollo de aplicaciones web con diseño modular, separando el código en módulos que posteriormente se emplea como dependencias en otros módulos. Esto es lo que mejor hace WebPack, gestionar módulos, pero también puede utilizarse para minimización y ofuscación, concatenación y carga bajo demanda.

3. Babel

Los problemas de compatibilidad entre navegadores y distintos estándares son un problema recurrente. Para solucionarlo, Babel utiliza compiladores para convertir el código JS de un estándar a una versión más antigua, es decir, más compatible.

4. PostCSS

Creada para poder operar con hojas de estilo en JavaScript. PostCSS te da la posibilidad de transformar el código CSS a JS utilizando plugins. Constituyó una de las herramientas punteras en desarrollo más sonadas de 2015.

5. ESLint

Es una herramienta de linting. Un linter es un programa que revisa el código y es capaz de detectar errores de escritura e incluso bugs. De esta forma podemos corregir con facilidad el código en JavaScript.

¿Por qué utilizar ESLint? Permite encontrar errores automáticamente sin tener que ejecutar el código.

Conclusión

Como ves ya hay todo un destacamento de herramientas dispuestas para la explosión final de JavaScript. Son muchos los que ya vaticinan el final de PHP, y es que la versatilidad y sencillez que aúna JS, ha terminado por convenrcer a gran parte de los desarrolladores.