Hola mundo OOP con ECMAScript 6 (ES6)

Hoy te explico cómo ejecutar un sencillo hola mundo orientado a objetos (OOP) con ES6.

Hola mundo OOP con ECMAScript 6 (ES6)

Recuerda: ECMAScript y JavaScript son la misma cosa, no te dejes liar por los nombres. ECMAScript 6 (ES6) es el nombre de la especificación más reciente de este lenguaje de programación, digamos que JavaScript es el nombre popular y ECMAScript el oficial.

¿Sabías que JavaScript tiene casi 20 años? El objetivo de la nueva versión es facilitar la vida a los desarrolladores de librerías y apps complejas, así como facilitar el desarrollo frontend de aplicaciones web SPA (single-page application).

Mira esta tabla de compatibilidades, las versiones recientes de Mozilla, Chrome y otros navegadores modernos ya soportan ES6.

Características de la nueva versión

ES6 viene con un montón de novedades y mejoras: ahora soporta constantes, clases, viene de fábrica con nuevos métodos, incorpora las así llamadas Promises para gestionar las tareas asíncronas, etc.

Ahora no explicaré todas y cada una de ellas, si quieres aprender más sobre ES6 lee estos recursos:

De momento no hace falta que te leas todo eso, tómalo con calma. Puedes empezar con un sencillo “Hola mundo” como el que comparto hoy contigo.

Ejemplo de clase OOP en ECMAScript 6

Personalmente, una de las cosas que más me gustan de ES6 es que por fin puedes programar cómodamente bajo el paradigma de la orientación a objetos. En ES5 también puedes crear tus clases de objetos, pero es bastante más lioso.

La nueva sintaxis JavaScript de alto nivel se parece a la de lenguajes como PHP, C++, Java o Python. Creo que esta novedad facilitará el desarrollo de las aplicaciones SPA porque invita amablemente a concebir los elementos de la GUI en términos de objetos.

También abre las puertas a los desarrolladores de otros lenguajes.

Mira este hola mundo en ES6:

Transpilando el código ES6 a ES5

Los navegadores antiguos no entienden ES6, pero no pasa nada, podemos transpilar nuestras apps a ES5 para que funcionen sin ningún problema. Babel es un compilador online que hace esto, solo hay que ir a la pestaña Try it out y pegar nuestro código JavaScript ES6 en la parte izquierda de la pantalla.

Transpilando el código ES6 a ES5

También puedes instalar Babel en tu entorno Node.js local con este comando:

Y compilar el código así:

Cómo ejecutar JavaScript en la consola de Firefox

Ok, ya para terminar vamos a ejecutar nuestro “Hola mundo” en Firefox.

Nos vamos a las herramientas para desarrolladores

Figura 1. Nos vamos a las herramientas para desarrolladores

Clicamos en Web Console

Figura 2. Clicamos en Web Console

Activamos la pestaña JS

Figura 3. Activamos la pestaña JS

Abrimos el Scratchpad

Figura 4. Abrimos el Scratchpad (clicamos en el icono del cuaderno)

Pegamos nuestro código

Figura 5. Pegamos nuestro código en el JavaScript Scratchpad

Clicamos en el botón Run

Figura 6. Clicamos en el botón Run y voilà!

Si lo deseas, también puedes probar este ejemplo creando un sencillo código HTML5 y enlazando tu JavaScript así:

O más fácil todavía, pruébalo en la consola de JS Bin.

Esto es todo por hoy, gracias por haber leído este post. ¿Me dejas algún comentario? 😀 Espero que pronto te animes a escribir tus primeras apps JavaScript en ES6.