En este artículo pretendemos orientar a las personas que comienzan a estudiar Javascript y a aquellas que inician el estudio de la disciplina de programación y desean acercarse a este mundo usando un lenguaje sencillo para aprender y útil en el ambiente profesional.

Comenzar con Javascript es sencillo, pero hay un largo camino por delante si se pretende llegar a exprimir todas las posibilidades del lenguaje. Javascript es uno de los lenguajes estándares de la web y por tanto ideal para muchos de los profesionales que piensan dedicarse a este medio. Pero incluso, aunque no quieras desarrollar específicamente para la web, Javascript es una excelente alternativa para hacer aplicaciones móviles o aplicaciones de escritorio.

Quizás no todos los desarrolladores necesiten llegar a un nivel avanzado de Javascript, pero sin duda un conocimiento básico será de gran ayuda en muchos momentos de su carrera profesional. En cualquier caso, completado el aprendizaje, tendrás a tu alcance un sin fin de oportunidades.

En este artículo que da inicio al Manual de Javascript queremos hacer una especie de prólogo que nos ofrezca una vista de pájaro sobre todo el ecosistema Javascript. Comenzaremos analizando el estado de Javascript en la actualidad (actualizado a 2022) y los motivos por los que merece la pena usar Javascript en general. Luego nos ocuparemos de explicar cómo se puede aprender Javascript y llegar a cualquier nivel que nos propongamos.

Javascript está en todas partes

Javascript se ha convertido en un lenguaje idóneo y muy recomendable para aprender a todos los niveles, por disponer de muchas y variadas aplicaciones, además de aportar sencillez para las personas que comienzan. Para ejecutarlo necesitamos tan solo un navegador, aunque en la actualidad Javascript ha sobrepasado el ámbito de los clientes web, para situarse en casi cualquier parte.

Javascript en la web

El entorno donde Javascript apareció en primer lugar fue la web. Su ejecución se centraba en el ámbito de un documento HTML y permitía a los desarrolladores aportar interactividad, manipular el documento o la ventana del navegador, realizar cálculos, etc. Netscape Navigator, un navegador desaparecido a día de hoy, tiene el honor de haber introducido Javascript como lenguaje, aunque hoy lo soportan todos los clientes web con los que un usuario común pueda llegar a navegar.

Usar Javascript para la web, en el entorno del navegador, también se conoce como programación del lado del cliente y es una de las actividades englobadas en el término "frontend". Hoy sigue siendo el ambiente más habitual de ejecución de Javascript, pero realmente es solo una más entre sus posibilidades.

Javascript en el backend

A ciertos desarrolladores se les ocurrió que podrían extraer el motor de ejecución de Javascript, que hasta entonces sólo se disponía dentro del ámbito del navegador, para usarlo en cualquier otro propósito fuera del cliente web. Así es como nació NodeJS, que no es más que una plataforma para la ejecución de Javascript fuera del navegador.

Con NodeJS podemos programar con Javascript aplicaciones que se ejecutan directamente sobre el sistema operativo y que son capaces de resolver cualquier tipo de problema. Con esta tecnología Javascript se convirtió en un lenguaje de programación de propósito general.

Uno de los usos más habituales de NodeJS es la programación "backend", que permite programar aplicaciones que son capaces de ejecutarse en el servidor, proporcionando acceso a bases de datos, el sistema de archivos y cualquier otro recurso del lado del servidor. Sin embargo, NodeJS es tan amplio que se puede usar para muchas otras tareas, como la automatización, optimización o despliegue de aplicaciones, entre otras operaciones.

Javascript como lenguaje para apps de dispositivos

Desde hace años también es posible usar Javascript como lenguaje para la creación de aplicaciones para dispositivos (apps para móviles, tablets, TVs...). Las aplicaciones desarrolladas se instalan desde los correspondientes app stores de los principales sistemas móviles y el usuario en principio no percibe ninguna diferencia de éstas con respecto a las aplicaciones desarrolladas con los lenguajes nativos. Pero, por el hecho de ser programadas con Javascript y HTML5, abren un nuevo campo de actuación para las personas experimentadas en el desarrollo para la web y dispensa del aprendizaje de lenguajes nativos para cada plataforma móvil.

Al principio, para ejecutar aplicaciones realizadas en Javascript y HTML5 se necesitaba de un "Web View". Básicamente la función del web view consiste en ofrecer un marco para la ejecución de la app, de modo que ésta se ejecuta dentro de un navegador, aunque el usuario no lo perciba. Esta situación tiene diversas ventajas e inconvenientes en los que no vamos a entrar, pero hoy también existe la posibilidad de usar Javascript como lenguaje de desarrollo de aplicaciones que se compilan a los lenguajes nativos, que no requieren un web view para funcionar.

Ejemplos de frameworks para el desarrollo de aplicaciones basadas en web view tenemos a Apache Cordova, Phone Gap o Ionic. Ejemplos de frameworks para desarrollo de aplicaciones nativas usando Javascript tenemos a Native Script y React Native. Todas las alternativas tienen la importante ventaja de producir apps para Android e iOS con la misma base de código, así como para otros sistemas minoritarios.

Javascript como lenguaje para aplicaciones de escritorio

Otro de los ámbitos en los que Javascript ha penetrado con fuerza es en el desarrollo de aplicaciones para ordenadores personales. Con Javascript somos capaces de crear aplicaciones avanzadas de interfaz gráfica por ventanas, capaces de usar todos los recursos de un ordenador y además ejecutarse en cualquier sistema operativo que necesitemos.

Usar Javascript para aplicaciones de escritorio es sencillo gracias a proyectos como Electron, que nos permite producir aplicaciones multiplataforma, es decir, que se podrán instalar en Windows, Mac OS X y Linux. Hay bastantes aplicaciones conocidas desarrolladas con Electron, como Atom, Visual Studio Code, Slack, Hyper, etc.

Javascript en la web

Hasta este punto hemos visto los campos principales de actuación de Javascript. Hemos podido comprobar que con este lenguaje es posible hacer prácticamente cualquier cosa que nos propongamos, ya que proporciona alternativas para casi cualquier entorno de ejecución. Ahora vamos a analizar el ecosistema "JS" en la web.

Dentro de la disciplina de desarrollo del lado del cliente (Javascript ejecutado dentro del entorno del navegador) podemos aplicarlo para desarrollar distintos tipos de proyectos, que requieren también distintos enfoques y conocimientos.

Sitios web

Cuando nos referimos aquí a sitios web queremos indicar sitios donde la parte más importante es el contenido, ya sean blogs, páginas de noticias, e incluso comercio electrónico.

Javascript en estos casos se dedica a aportar funcionalidad e interacción, permitiendo disponer de interfaces de usuario dinámicas, respuesta a acciones del usuario, validación de formularios, etc.

Single Page Applications

En los últimos años se ha popularizado la web como plataforma para aplicaciones de negocio. Aplicaciones denominadas "de gestión", que antes se ejecutaban con programas de escritorio, hoy tienen frontales web que nos permiten usarlas desde la nube, es decir desde cualquier navegador conectado a Internet y sin la necesidad de instalar un software en la máquina. En este tipo de aplicación es habitual portar mucha parte de la carga de procesamiento desde el lado del servidor, al ámbito del cliente. En este nuevo paradigma el navegador se encarga de hacer muchas más cosas que en sitios web tradicionales, como la creación del código HTML para visualizar los datos o la navegación entre pantallas o rutas de la aplicación.

En las Single Page Applications, conocidas también con sus siglas SPA, es normal que el servidor entregue solamente los datos de negocio en crudo y que el navegador haga todo el trabajo de presentar esos datos en un formato adecuado (en el navegador se produce el HTML para representar esos datos). Pero lo que más caracteriza a una SPA es que la navegación se realiza siempre dentro de la misma página y Javascript se encarga de presentar una u otra pantalla al usuario sin tener que recargar todo el conjunto de la página.

Los dos principales factores que caracterizan las SPA son los siguientes:

1. El hecho de traer del servidor los datos en crudo (más ligeros, con menor consumo de transferencia y mayor velocidad)
2. Toda la navegación se realiza dentro del mismo documento, producen aplicaciones web de una respuesta muy rápida, aportando una experiencia de uso cercana a la de una aplicación de escritorio.

Progressive Web Apps

Con un enfoque similar a las SPA tenemos las aplicaciones progresivas o Progressive Web Apps (PWA). Este tipo de aplicaciones permite el acceso a nuevas características de los navegadores para conseguir desarrollar funcionalidades que anteriormente solamente estaban disponibles en aplicaciones nativas.

Las PWA pueden desarrollarse en una misma página como las SPA, pero también pueden ser sitios web tradicionales a los que se les hayan incorporado funcionalidades como la navegación offline, la posibilidad de instalarse en el dispositivo, recibir notificaciones push y mucho más.

Librerías, frameworks y desarrollo "Vanilla Javascript" para la web

La creación de una SPA es una tarea bastante más avanzada que el desarrollo de un sitio web y para poder realizar ese trabajo es importante que el equipo de desarrollo se base en un framework Javascript, como podría ser Angular, React, VueJS, Ember o Lit, entre otros muchos ejemplos.

Para el desarrollo de sitios web generalmente sería suficiente con el uso de Javascript puro, sin necesidad de basarnos en ninguna librería adicional. Ese desarrollo de Javascript "puro" se conoce generalmente como "Vanilla Javascript".

Sin embargo, es también habitual que en el desarrollo de sitios web se usen librerías como jQuery. jQuery es un conjunto de objetos y funciones (código de utilidad general) que tiene el objetivo ayudarte a manipular la página dinámicamente, salvando las diferencias entre los distintos navegadores y permitiendo escribir un único código que se ejecuta correctamente en cualquier cliente web. Además, jQuery te ofrece muchas funciones que realmente resultan útiles para el desarrollo de muchas tareas habituales de los sitios web, que puedes usar de una manera más rápida que si trabajajes solo con Javascript.

Pero más allá de librerías y frameworks, si estamos aprendiendo nos debemos concentrar primero en dominar Javascript. Muchas personas desean ir muy rápido y se lanzan de cabeza a aprender algo como jQuery o React sin tener las bases necesarias de Javascript, lo encuentran difícil y se frustran. Es importante no empezar la casa por el tejado y no querer quemar etapas, lo que nos ayudará en el aprendizaje a todos los niveles.

APIs HTML5

Además del propio lenguaje debemos saber que hoy existen en los navegadores muchas otras tecnologías basadas en Javascript para resolver una amplia gama de necesidades.

Con la llegada de HTML5 se produjo una estandarización mayor de los navegadores, llegando a un compromiso por los fabricantes de apoyar los lenguajes de la web (HTML + CSS + Javascript) tal como dictaban sus especificaciones. Pero además produjo una corriente abundante de nuevas especificaciones para trabajar con la más variada gama de recursos del navegador, ordenador o dispositivo.

HTML5 ofrece APIs para el trabajo con una variada gama de recursos del navegador como la cámara, geolocalización, almacenamiento, dibujo bitmap o vectorial, audio, vídeo, etc. Todo lo que ofrece HTML5 está disponible en todos los navegadores y forma parte del kit de herramientas del desarrollador Javascript. Podemos usar las API HTML 5 sin necesidad de cargar ninguna librería o framework.

Web Components

La última revolución del desarrollo para la web, que ya en 2022 está totalmente extendido en los navegadores, se llama Web Components. Se basa en un nuevo API (con varias especificaciones en conjunto) encaminado a crear componentes personalizados. Los componentes personalizados o "Custom Elements" son como nuevas etiquetas del HTML que cualquier desarrollador puede crear para resolver problemas comunes o particulares de las aplicaciones.

Con los web components los desarrolladores podrán extender el HTML creando nuevos componentes capaces de hacer cualquier cosa y con avanzadas capacidades de encapsulación, para respetar su autonomía y que sean capaces de usarse en cualquier proyecto, maximizando la reutilización del código y sin la necesidad de basarse en cualquier tipo de librería o framework.

Al igual que HTML5, los Web Components forman parte de las posibilidades que ofrecen los navegadores de manera predeterminada, sin necesidad de librerías o frameworks.

Javascript como primer lenguaje

Si estás aprendiendo programación, Javascript es una apuesta excelente para comenzar. Básicamente por tres motivos principales:

• Facilidad de uso:
  No necesitamos más que un navegador para poder ejecutar Javascript. No requiere ningún tipo de compilación (proceso para crear un archivo ejecutable binario para un sistema operativo en particular) sino que es interpretado. Esto implica un flujo de trabajo más simplificado, lo que facilita los primeros pasos. Además Javascript es de tipado dinámico y su sintaxis es menos rebuscada que la de otros lenguajes y permite realizar las cosas de distintos modos, según la habilidad, preferencias o costumbres de cada programador.
• Amplias áreas de aplicación:
  Como hemos visto, Javascript dispone de usos prácticamente ilimitados. Significa que puedes usar el lenguaje prácticamente para lo que necesites. Aprendiendo un único lenguaje serás capaz de llegar a cualquier propósito que te propongas.
• Es un lenguaje abierto y estándar para web:
  En algún momento de su actividad profesional la mayoría de los desarrolladores trabajará el entorno web. Aprender programación con Javascript nos asegura que el conocimiento va a ser aplicado de manera directa en varios momentos de la carrera procesional de los estudiantes.

Estos son los motivos por los que nosotros venimos enseñando a programar con Javascript desde hace más de 15 años, tanto en DesarrolloWeb.com como en EscuelaIT.

Múltiples profesiones comienzan con Javascript

Otro de los motivos por los que merece la pena comenzar con Javascript es porque el lenguaje es uno de los pilares fundamentales para desempeñar múltiples profesiones demandadas dentro del ámbito de la web.

• Frontend developer:
  Es el profesional que se ocupa del desarrollo del lado del cliente, aunque puede tener diversas actividades además de la programación, como diseño, maquetación, desarrollo de interfaces de usuario, aplicaciones SPA del lado del cliente, etc. El conocimiento Javascript es fundamental en todas la áreas de actuación de un frontend developer.
• Backend developer:
  Como backend entendemos la programación del lado del servidor. Para backend lo cierto es que Javascript (con NodeJS) es solo una de las muchas posibilidades. Sin embargo, NodeJS ofrece muchas ventajas como su asincronía, rapidez y optimización, lo que lo hace idóneo para muchos tipos de proyectos.
• Fullstack developer:
  Fullstack developer es aquel que es capaz de trabajar tanto del lado del cliente como del lado del servidor. En realidad es una raza rara, tanto que se dice muchas veces que no existe realmente, porque requiere muchos conocimientos del desarrollador y por tanto es muy complicado, o imposible, que un único perfil los reúna todos. Sin embargo, en mi opinión es una realidad en muchos trabajos ya que hay profesionales que deben tener un conocimiento global en varias áreas (freelances autónomos son el principal ejemplo) y por tanto es una figura que realmente sí existe. Hoy, el hecho de Javascript servir tanto para la parte del cliente como para la del servidor, hace mucho más sencilla la figura del fullstack developer y facilita la vida a miles de desarrolladores, ya que les evita la fatiga mental de pasar de un lenguaje a otro constantemente.

Cómo aprender Javascript

Aprender Javascript a nivel avanzado requiere meses de estudio, pero comenzar es muy sencillo y en poco tiempo serás capaz de hacer cosas asombrosas con poco esfuerzo. En el manual de Javascript podrás conocer el lenguaje, pero para comenzar queremos darte un par de consejos.

Aprende Javascript y no un derivado

Nuestro primer consejo si estás empezando es que aprendas Javascript y no quieras comenzar por una librería o framework. Al final todos los proyectos en la web usan Javascript y todo lo que puedes hacer con una librería o framework lo puedes hacer también con Javascript, por lo que lo correcto es comenzar dominando el lenguaje, para luego plantearse nuevos objetivos a medio o largo plazo.

En resumen, no aprendas jQuery: aprende Javascript. No aprendas Angular: aprende Javascript, no aprendas React: aprende Javascript... Con una base sólida de Javascript te resultará mucho más sencillo aprender más adelante cualquier librería o framework en la que te quieras basar. Asimismo, no tendrás problemas en el futuro si te cambian de framework en un proyecto o cuando encuentres necesidades para las que esa librería no está pensada, o necesites personalizar cualquier detalle de tu aplicación.

Lo que sí debe acompañar al conocimiento y uso de Javascript son tus habilidades en todo aquello que el navegador (la plataforma web) te ofrece de manera predeterminada: HTML5 y Web Components. Todo lo que realices basándote en Javascript "Vanilla", HTML5 y Web Components tienes la certeza que se podrá usar en cualquier proyecto donde puedas llegar a trabajar, independientemente de la librería o framework que se esté usando en cada caso.

Conocimiento de la plataforma web

Nuestro segundo consejo es que, si vas a trabajar en este medio, debes tener presente cada una de las particularidades de la plataforma web. Hay mucho conocimiento general que debes adquirir y que te dará una base sobre la que asentar tus habilidades en el mundo del desarrollo para la web.

Conocimiento del medio: Debes saber qué es Internet, la Web, el protocolo HTTP, el sistema de nombres de dominio y por supuesto los lenguajes fundamentales para especificar el contenido y la forma: HTML y CSS.

Conocimiento de diseño: Aunque tu perfil pueda ser más de programador, es ideal tener una visión, al menos técnica, de las características del diseño para la web. Experiencia de usuario, usabilidad, diseño gráfico en general o accesibilidad son puntos importantes.

Conocimiento de programación: Si vas a dedicarte a la profesión de programador no solo vale con tener un conocimiento básico del código y la programación estructurada, es ideal interesarte por la programación orientada a objetos, el análisis y diseño de software, patrones de diseño, bases de datos, etc.

Conocimiento de herramientas: El profesional además deberá conocer un nutrido grupo de herramientas para el trabajo del día a día, desde el terminal de línea de comandos y administración básica de servidores, hasta la automatización de tareas, pasando por las herramientas de control de versiones (Git de preferencia) y la optimización.

Afortunadamente todos estos lenguajes, tecnologías y herramientas las puedes conocer o aprender de manera gratuita con los manuales de DesarrolloWeb.com, pero si además quieres un aprendizaje guiado y paso a paso, te recomendamos suscribirte a los cursos de EscuelaIT, donde podrás disponer del material necesario para hacerte un gran profesional del medio.