Cómo y por qué aprender programación con Javascript

  • Por
Enfoque correcto para comenzar a estudiar programación, con Javascript como primer lenguaje. Cómo enfocar el aprendizaje de Javascript y la profesión frontend en general.

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

Comenzar 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.

Comenzaremos analizando el estado de Javascript en la actualidad (2017) 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 para aprender, 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 apareció Javascript en primer lugar fue la web. Su ejecución se centraba en el ámbito de una página web 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 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. 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 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. 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 nativas, 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, 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

El campo de actuación de Javascript es muy amplio, proporcionando alternativas para casi cualquier entorno de ejecución. Sin embargo, si queremos empezar a aprender Javascript el lugar más adecuado es la web.

Dentro de la disciplina de desarrollo del lado del cliente (Javascript ejecutado dentro del entorno del navegador) podemos encontrar 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, 1) el hecho de traer del servidor los datos en crudo (más ligeros) y 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.

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 Polymer.

Nota: React y Polymer se consideran más librerías, pero con una serie de añadidos, que ellos mismos proporcionan en muchos casos, ofrecen tantas prestaciones como los que encontramos en un framework. Por si alguien no lo sabe todavía, una librería es un conjunto de funciones, o clases y objetos, que nos permite realizar un abanico de tareas habituales para el desarrollo de ciertas necesidades de aplicaciones. Un framework se distingue principalmente de una librería porque, además de proveer código para resolver problemas comunes, ofrece una arquitectura que los desarrolladores deben seguir para producir las aplicaciones y asegurarse una mejor calidad del código y mayor facilidad de mantenimiento. Dicho de otro modo, el framework además de ofrecer utilidades diversas, te marca un estilo y flujo de trabajo a la hora de desarrollar aplicaciones.

Para el desarrollo de sitios web sería suficiente generalmente 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".

Nota: Debe quedar claro que "Vanilla" no es ninguna marca comercial o ningún sabor de Javascript más allá que el del propio lenguaje. Es como una broma para indicar que con Javascript (y nada más) se pueden resolver todas las cosas que te ofrecen librerías y frameworks ya hechas.

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, 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.

Nota: Con respecto a jQuery es conveniente mencionar que hay una corriente de desarrolladores que advierten que usar jQuery no es absolutamente necesario en la mayoría de los casos. Usar jQuery no está mal, pero muchas personas lo implementan para resolver necesidades que un poco de Javascript "Vanilla" es capaz de realizar. A veces se carga jQuery de manera predeterminada, quizás por comodidad, por dejarse llevar o simplemente por desconocimiento del propio lenguaje Javascript, y sin embargo se usan muy pocas de sus funciones. Hay librerías más especializadas para resolver todas y cada una de las cosas que una librería generalista como jQuery ofrece y que ocupan mucho menos peso para la descarga y tiempo de procesamiento para los navegadores.

Pero más allá de librerías y frameworks debemos saber que hoy, además del propio lenguaje, existen en los navegadores muchas otras tecnologías basadas en Javascript para resolver una amplia gama de necesidades.

APIs HTML5

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 elementos 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, sin necesidad de usar ninguna librería o framework.

Web Components

La próxima revolución del desarrollo para Internet, que todavía en mitad de 2017 no ha terminado de explotar se llama Web Components. Se basa en un nuevo API (con varias especificaciones en conjunto) encaminado a crear componentes. Los componentes 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 las capacidades de 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, aunque su soporte en este preciso instante no es tan universal.

Nota: En los próximos meses se espera que todos los navegadores den soporte a Web Components V1 y podamos usarlo sin ninguna restricción. Mientras tanto existen un Polyfill que permite ampliar el soporte a Web Components a navegadores que aún no lo dispone. Los polyfill son literalmente "rellenadores de huecos", que permiten suplir las carencias de navegadores antiguos con respecto a los estándares. En las APIs HTML5 ya se comenzaron a usar intensivamente para permitir usar características nuevas de los lenguajes de la web en clientes antiguos o poco actualizados.

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 10 años y por los que en 2017 universidades del prestigio de Stanford han abandonado su curso de introducción a la programación con Java en favor de Javascript.

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.
Nota: La especialización también está presente en estas profesiones. Es verdaderamente asombroso ver cómo se desarrollan los perfiles en el mundo de la web y cómo año tras año se van generando nuevas profesiones especializadas. A lo que antes llamábamos frontend, a secas, hoy podemos subdividirlo en decenas de perfiles o profesiones determinados como "frontend engineer", "frontend web designer", "CSS architect", "mobile frontend developer", "frontend devops"...

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 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, cuando quieras hacer cosas para las que esa librería no está pensada o quieras 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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir