Objetivos

  • Al finalizar la unidad serás consciente de la ubicuidad, flexibilidad y potencia de javascript, un lenguaje conocido especialmente por haber conquistado el mundo del desarrollo web, pero con el que puedes desarrollar cualquier tipo de aplicación; de escritorio, móvil, servidores o herramientas de sistema.
  • También tendrás conocimiento de los frameworks javascript más conocidos para cada tipo de aplicación.
  • Por último sabrás como instalar y usar las tres herramientas que se necesitan para realizar el curso: el editor de textos Microsoft Visual Studio Code, una interfaz de comando y un navegador web.

Videos de la unidad

A lo largo de la unidad se irán presentando diferentes videos. Aquí te ofrecemos la lista de reproducción con todos los videos de la unidad, para que los tengas más a mano.

La explosión de Javascript

Javascript es un lenguaje de programación que vió la luz con el nacimiento de la web. Su propósito inicial fue dotar de mayor dinamismo a los aburridos y estáticos documentos HTML.

Con el tiempo el lenguaje fue evolucionando hasta el punto de que muchas páginas web se han convertido en auténticas aplicaciones que, utilizando el HTML y las CSS’s  como mecanismo para la construcción de la interfaz gráfica de usuario, se ejecutan en el entorno del navegador.

Es un hecho que necesita poca justificación la enorme proliferación que estas aplicaciones han tenido en los últimos años. Pensemos por ejemplo en los clientes de correo electrónico de Google o Microsoft y en las herramientas ofimáticas que estas mismas empresas ofrecen en la web.

Actualmente encontramos aplicaciones web para cualquier tipo de actividad: capturas de vídeo, confección de diagramas, gestión de clientes, entornos de aprendizaje, procesadores de texto, hojas de cálculo, y un largo etcétera. Incluso muchas de estas aplicaciones están desplazando a sus homólogas aplicaciones de escritorio (Aplicaciones web, es un artículo que escribí en el que cuento qué son estos tipos de aplicaciones).

Para el desarrollo de las aplicaciones y servicios web del lado del servidor son varios los lenguajes de programación que compiten entre sí. Java, Python, PHP y javascript (con Node.js) son posiblemente los que gocen de más popularidad.

Observa que javascript también se puede usar para desarrollar aplicaciones del lado del servidor con node.js, lo que hace posible el uso de un único lenguaje de programación tanto en la parte cliente como en la parte del servidor. Otro motivo más para aprender javascript a fondo.

En el lado del cliente sin embargo, a pesar de que desde los inicios de la web se han propuesto varias tecnologías como Adobe Flash o los applets de Java, podemos decir con toda seguridad que javascript ha desplazado completamente a sus competidores y se ha quedado como dueño absoluto del mundo de las aplicaciones del lado del cliente.

Todos los navegadores web incluyen por defecto un entorno de ejecución de javascript y, aunque siguen existiendo algunas diferencias entre las implementaciones que hace cada navegador, lo más común es que cualquier aplicación javascript se ejecuta en cualquier navegador web.

Por eso, en los últimos años han aparecido multitud de frameworks para desarrollar aplicaciones web del lado del cliente con javascript. Estos frameworks son herramientas que agilizan, reducen los tiempos de desarrollo y mejoran la calidad y mantenibilidad de las aplicaciones. Los ejemplos más sobresalientes son Angular, Vue.js, React.js o Embers.js.

Pero es que ahí no termina la cosa. Resulta que javascript ha suscitado tanto interés y ha sufrido un desarrollo tan intenso a lo largo de todos estos años, que actualmente se está utilizando más allá de la web dando lugar a la aparición de frameworks para el desarrollo de aplicaciones en otros dominios distintos, llegando a cubrir todo el espectro de aplicaciones conocidas :

Resumiendo, javascript ha pasado de ser un sencillo lenguaje para “adornar” documentos HTML a un potentísimo y ubicuo lenguaje, con un inmenso arsenal de herramientas y frameworks con el que podemos construir cualquier tipo de aplicación, provocando en los desarrolladores un interés creciente por aprender todo lo relacionado con él.

¿Por qué este curso?

Imaginemos las siguientes situaciones. En todas ellas se supone que somos programadores con amplia experiencia en uno o varios lenguajes de programación pero con poca o ninguna experiencia en javascript.

Situación 1: Nos encargan el desarrollo de una aplicación web de una complejidad considerable que debe ejecutarse en el navegador y tenemos que hacerlo, como no, con javascript. Hemos oído que tal o cual framework  nos promete desarrollar aplicaciones de una calidad y mantenibilidad excelentes. Entusiasmados por la noticia nos hacemos dos o tres  tutoriales que encontramos por la web y terminamos fascinados con sus encantos. Así que sin pensarlo dos veces nos ponemos a utilizarlo para desarrollar la aplicación.

Situación 2: Por exigencia del proyecto tenemos que utilizar el framework tal o cual.

Situación 3: Nos encargan el mantenimiento correctivo y evolutivo de una aplicación web que ha sido escrita en javascript por un equipo de programadores expertos en el lenguaje. Independientemente de que use o no algún framework, se ha utilizado javascript de manera avanzada.

Todos esto casos son típicos en los que muchos programadores caemos en la «trampa del javascript». Yo también caí. Nos zambullimos de lleno en el trabajo y no pasa mucho tiempo hasta que nos topamos con los primeros problemas de concepto. Y es que aunque se trata de un lenguaje extremadamente sencillo de aprender superficialmente, es a la vez bastante duro de roer cuando nos proponemos dominarlo, incluso para programadores expertos en otros lenguajes.

En efecto, cualquier programador medianamente experimentado obtendrá sus primeros frutos en javascript en muy poco tiempo. Incluso las personas que comienzan a programar pueden usar javascript como primer lenguaje y les resultará realmente sencillo. Pero a medida que profundizamos en su uso, es habitual que nos encontremos con ciertas características exóticas y extrañas que nos llevan a maldecir al lenguaje una y otra vez cuando algo no nos sale o no nos cuadra. Estas situaciones desesperantes son especialmente comunes cuando nos proponemos aprender algún frameworks como Angular, React, Ionic o Node.js,  con la idea de mejorar nuestra productividad.

La razón principal de esta situación es una falsa sensación de control de javascript, que es más pronunciada incluso cuando no es el primer lenguaje que se ha aprendido. Y es que, debido en parte a lo parecido que es la sintaxis de javascript con la de C, C++, Java, PHP y otros lenguajes, y en parte a la idea de que javascript es un lenguaje menor que sirve para adornar páginas web, el usuario de javascript no es consciente de lo diferente y peculiar que es en realidad este lenguaje.

El tratamiento e importancia del concepto de función, la orientación a objetos basada en prototipos (no en clases), la existencia del bucle de eventos que forma parte del entorno de ejecución para la programación asíncrona dirigida por eventos, los timers, el curioso comportamiento del parámetro this, son solo algunos de los aspectos mal comprendidos o incluso desconocidos de este lenguaje y cuya revelación nos proponemos ofrecerte en este curso.

Y esa es precisamente la intención de este curso: mostrarte esos rincones “misteriosos” de javascript cuyo desconocimiento te pueden trabar en el aprendizaje de un framework o en el desarrollo de aplicaciones profesionales. Y por otro lado mostrar que ese “misterio” es sencillamente causado por una percepción errónea del lenguaje javascript. Cuando tomamos consciencia de la peculiaridad del lenguaje y de la necesidad de estudiarlo más a fondo para controlarlo, los misterios se convierten en revelaciones y evidencias y comenzamos a tomar el gusto a este fascinante lenguaje.

¿Qué aprenderás en este curso?

El nombre del curso lo dice todo: las «claves para dominar javascript». Algo fundamental si quieres sacar todo el provecho posible de sus potentes y, habitualmente desconocidas, características.

En esta misma unidad te mostraremos cómo instalar las herramientas básicas para emprender la aventura.

La unidad 2 está dedicada a la pieza más básica que todo experto en javascript debe conocer con bastante detalle: el concepto de entorno de ejecución: La «máquina» que dota de vida al código. Veremos que gracias a la existencia de entornos de ejecución integrados tanto en el navegador web como en el sistema operativo, podemos desarrollar aplicaciones para los dos ámbitos. Aprovechamos aquí para hacer una introducción muy completa de node.js, ya que se utiliza extensamente para realizar ciertas tareas de construcción en todos los frameworks que hemos mencionado.

En la unidad 3 haremos un largo viaje en el que descubrirás cada rincón del mundo de las funciones. Esta unidad es de especial importancia pues un conocimiento riguroso de la manera en que se conciben las funciones en javascript es la primera clave para dominar el lenguaje.

En la unidad 4 profundizaremos en la manera en que javascript trata a los objetos y, por tanto, como hacer programación orientada a objetos al estilo de javascript; con prototipos. Veremos que es muy distinto a como se hace en la mayoría de lenguajes que utilizan clases.

La unidad 5 está dedicada a las nuevas características que se han introducido en el lenguaje a partir de la versión ES6, también conocida como javascript 2015. Entre otras cosas descubriremos que podemos hacer programación orientada a objetos con clases, aunque ello no significa que se haya sustituido este estilo por el de prototipos; sólo se trata de un convenio sintáctico o «syntactic sugar» como se conoce en el mundo de la programación.

La unidad 6 introduce typescript; un nuevo lenguaje que extiende a javascript con la posibilidad de anotar explícitamente los tipos de las variables y que exige una sintáxis más estricta. La razón de esta unidad es que algunos frameworks, como Angular, recomiendan que se utilice typescript en lugar de javascript para desarrollar las aplicaciones.

Y por último en la unidad 7 exploraremos la que probablemente sea la clave más dura de roer de todas: la programación asíncrona dirigida por eventos (asynchronous event driven). Absolutamente imprescindible pues tanto los entornos de ejecución de javascript incorporados en el navegador web como los que trabajan sobre el sistema operativo, están diseñados según el patrón «reactor» basado en el concepto de ejecución en un solo hilo con bucle de eventos y  entrada y salida no bloqueante. No se puede dominar javascript sin comprender lo suficiente este patrón.

Frameworks Javascript

Con el fin de mostrarte un panorama general del universo javascript, en esta sección repasaremos los frameworks javascript más populares indicando el dominio de aplicación para el que se han diseñado. Cuando finalices el curso podrás emprender sin frustraciones el aprendizaje de cualquiera de ellos.

Angular

Probablemente sea el framework más popular y demandado para el desarrollo de aplicaciones web y móviles. Detrás de este proyecto se encuentra la marca Google y un prestigioso equipo de desarrolladores.

Está basado en componentes y una de las características más peculiares es que permite utilizar typescript como lenguaje para el desarrollo. Typescript es un superconjunto de javascript que ofrece la posibilidad de anotar los tipos de las variables y exige una sintaxis más estricta. Typescript es una de los rincones “misteriosos” que visitaremos en este curso.

React.js

Otro framework javascript para el desarrollo de aplicaciones web y móviles de gran popularidad. En este caso mantenido por Facebook. También está basado en componentes y adopta un estilo de programación declarativo a la hora de definir los elementos de la interfaz de usuario.

Ember.js

Otro más para el desarrollo de aplicaciones web. Detrás de ember.js hay varias compañías que apoyan el proyecto pues lo usan en algunas de sus aplicaciones. Microsoft, yahoo y linkedin son algunas de las más conocidas.

Cordova

La intención de este framework es la construcción de aplicaciones móviles nativas para las principales plataformas móviles: android, ios y windows phone, a partir de un mismo código javascript + HTML + CSS.

Por aplicación nativa entendemos las que se ejecutan directamente sobre el sistema operativo del móvil y se pueden instalar desde los marketplaces de la plataforma correspondiente (google play, apple store o windows store). Es decir, aunque se desarrollan con javascript no precisan  del navegador web del móvil para ser ejecutadas y están instaladas localmente en el móvil como cualquier otra aplicación.

Las claves de este framework son, por un lado el uso del componente WebView que ofrecen todas estas plataformas móviles para poder ejecutar aplicaciones javascript, y por otro facilitar librerías de funciones javascript que actúan como pasarelas a las funciones nativas de cada plataforma, de manera que el programador puede utilizar los recursos del móvil, como la cámara, la agenda o el micrófono, desde estas funciones javascript y no tiene por que tener grandes conocimientos sobre los frameworks de desarrollo nativo de cada plataforma móvil.

Ionic

Este es probablemente el framework javascript para el desarrollo de aplicaciones móviles nativas más popular. En pocas palabras podemos decir que es una combinación de Cordova con Angular. Con Angular se desarrolla la aplicación javascript y con Cordova se construye la aplicación nativa a partir del código javascript.

Node.js

En honor a la verdad node.js no es estrictamente un framework javascript. Es una plataforma o entorno de ejecución de javascript que se caracteriza por que cambia radicalmente el dominio clásico para el que javascript se diseñó. Pasamos de las aplicaciones que se ejecutan en el navegador web (o en un componente WebView, lo cual viene a ser lo mismo a grandes rasgos) a aplicaciones que se ejecutan directamente sobre el sistema operativo.

El campo de aplicación más difundido de node.js es el de las herramientas de sistemas que se ejecutan en una interfaz de comandos y el de la construcción de  servidores, especialmente servidores web.

Node.js es otro de los rincones “misteriosos” que visitamos en este curso, ya que todos los frameworks que estamos presentando utilizan herramientas de asistencia al desarrollo y de construcción de proyectos realizadas con node.js.

Electron

Y con este framework javascript entramos en el terreno que nos faltaba aún; el de las aplicaciones de escritorio, es decir, las aplicaciones con interfaz gráfica de usuario que se ejecutan directamente sobre el sistema operativo. Vamos, las aplicaciones de toda la vida.

Electron combina node.js para escribir el código que necesita comunicarse más “íntimamente” con el sistema operativo, fundamentalmente el uso de funciones de entrada y salida, y el navegador Chromium para la construcción y  gestión de la interfaz gráfica.

Las aplicaciones desarrolladas con electron se pueden empaquetar en ficheros instalables para los principales sistemas operativos: MacOS, Windows y Linux. El truco consiste en incorporar dentro de la propia aplicación un entorno de ejecución Node.js y un navegador Chromium.

Como nota curiosa: el editor de texto que proponemos en este curso para escribir código, Microsoft Visual Studio Code, está íntegramente desarrollado con electron.

NW.js

Otro framework javascript para desarrollar aplicaciones de escritorio. Es muy parecido a electron en el sentido de que utiliza también node.js para las llamadas al sistema y Chromium para la gestión de la interfaz gráfica de usuario.

Como ves hay de todo en el universo javascript. Adquirir el nivel suficiente de conocimientos de javascript te abre las puertas para desarrollar aplicaciones que se ejecutan sobre todo tipo de plataforma; el navegador, los sistemas operativos de ordenadores de escritorio o servidores y los sistemas operativos de plataformas móviles.

No cabe duda de que aprender javascript es una buena inversión para cualquier persona que pretenda desarrollar software. Con un buen conocimiento de este lenguaje y de sus entornos de ejecución, que es lo que pretendemos que obtengas con este curso, te podrás enfrentar al aprendizaje de cualquiera de estos frameworks con la confianza necesaria para no frustrarte y disminuir considerablemente la inevitable curva de aprendizaje.

Qué necesitamos para realizar el curso

Necesitarás un editor de texto, una terminal o interfaz de comandos y un navegador web con herramientas de desarrollo.

Un editor de texto

Para escribir código en cualquier lenguaje de programación sólo necesitamos un editor de texto plano, es decir sin formato. Alguno de los editores de texto  más conocidos son:

Notepad

El que viene con todas las versiones de Windows. Un editor muy sencillo, demasiado sencillo de hecho.

Notepad++

Probablemente el editor de texto más reconocido en el mundo Windows. Se trata de un editor muy avanzado que permite, entre otras cosas, seleccionar el lenguaje de programación que se quiere emplear para hacer un coloreado del código según la sintaxis del lenguaje (syntax highlighting), autocompletado de código y mantener varios documentos abiertos en varias pestañas. Características muy útiles en la tarea de programar.

Vi/Vim

Es el editor de texto por excelencia en el mundo UNIX/Linux. Es uno de los más antiguos pero que no sólo no ha perdido la excelencia, sino que se hace más potente y robusto con los años. No se necesita ratón para controlarlo, ya que está pensado para ser ejecutado en una terminal (interfaz de comando). Se maneja usando dos modos, el de inserción y el de comando, y aunque esta es una de las características insufla potencia a este editor, también suele ser la barrera que hace desistir a muchos usuarios de usarlo. Dispone de una cantidad ingente de plugins con los que se puede hacer cualquier cosa. No recomendado para principiantes.

Nano

Se trata de un editor propio del mundo Linux aunque con algunas triquiñuelas se puede hacer funcionar en Windows (esas mismas triquiñuelas sirven para hacer lo mismo con vim). También se maneja exclusivamente con el teclado, pero no utiliza el doble modo del editor vim por lo que suele ser más fácil de manejar. También puede configurarse para hacer cosas útiles en la programación como el coloreado de código según la sintaxis del lenguaje.

Atom

Es un editor de texto multiplataforma (funciona en todos los sistemas operativos) diseñado especialmente para programar. Tiene un aspecto moderno y visualmente muy atractivo y dispone de una gran cantidad de plugins para tunearlo como más nos convenga.

Microsoft Visual Studio Code

Un editor moderno y especialmente diseñado para programar. Es el que recomendamos para la realización de este curso. Puedes descargarte este potente editor para el sistema operativo que utilices desde su página web https://code.visualstudio.com. Es gratuito y de fuentes abiertas. Es decir, el código fuente está disponible para cualquier persona que quiera obtenerlo para estudiarlo, modificarlo o sencillamente echarle un vistazo. Si sientes curiosidad por ver este código puedes verlo aquí. La instalación, por otro lado, es inmediata, no hay nada relevante que comentar.

Y la lista sigue. Cualquiera de ellos es suficiente para escribir cualquier aplicación que se nos pueda ocurrir en cualquier lenguaje que nos apetezca utilizar.

Entornos de desarrollo integrados (IDE)

Además de la escritura de código, la construcción de aplicaciones implica más tareas:

Compilación

En algunos casos hay que compilar el código para transformarlo en el lenguaje que la máquina o el intérprete del entorno de ejecución entiende.

Servidor de desarrollo

En el caso de las aplicaciones web se necesita un servidor web de desarrollo para servir la aplicación.

Gestión de dependencias

Hay que gestionar y enlazar correctamente las librerías dependientes.

Control de versiones

Es conveniente utilizar algún sistema de control de versiones, especialmente si se trabaja en equipo.

Herramientas de construcción

Hay que construir un paquete instalable o desplegable para la distribución de la aplicación o para su despliegue en un servidor de producción.

Entorno de ejecución

Se necesita un entorno de ejecución adecuado para probar la aplicación.

Herramientas de depuración

A veces ayuda ejecutar  el programa paso a paso mediante un depurador.

y algunas otras cosas que, dependiendo del lenguaje de programación serán más o menos necesaria.

Por lo que además de disponer de un editor de texto, hay que controlar un número de herramientas adicionales que será mayor o menor dependiendo fundamentalmente del lenguaje de programación y de la pericia del programador. Es lo que se conoce como cadena de herramientas o toolchain.

Por eso es muy típico en el mundo de la programación el uso de entornos de desarrollo integrados (IDE, Integrated Development Environment), herramientas que reúnen en una misma aplicación todo el toolchain necesario para el desarrollo y construcción de aplicaciones. Eclipse y Netbeans son dos de los IDE’s de código abierto (y gratuitos) más conocidos y potentes y completamente válidos para la programación en javascript y typescript (un poco más adelante explicamos qué es esto del typescript).

Sin embargo el uso de estos entornos es, en nuestra opinión, desaconsejado para el aprendizaje. Son dos las razones que nos llevan a esta conclusión. La primera es que para ser realmente productivo hay que realizar un esfuerzo nada despreciable en configurarlo para el lenguaje y framework que vayamos a utilizar. La segunda es que en el supuesto de que lo tengamos ya bien configurado (porque alguien lo haya hecho por nosotros, por ejemplo), mucha de las tareas se hacen como “por arte de magia” y el programador desconoce qué es lo que está pasando por debajo.

Así que nuestra recomendación para seguir el curso es utilizar un sencillo editor de texto, el que más te guste, para escribir el código. Cuando trabajes en un proyecto concreto y conozcas a fondo las herramientas que precisar puedes probar a configurar a tu gusto uno de estos entornos integrados y, posiblemente, seas más productivo.

Pero, en cuanto a editor de texto para programar con Angular, tenemos nuestra preferencia: Microsoft Visual Studio Code.

Microsoft Visual Studio Code

En el siguiente vídeo hacemos un repaso general a las principales características de este potente editor que podemos usar para escribir código en cualquier lenguaje de programación pero que está especialmente diseñado para javascript y typescript.

Una interfaz de comandos

La interfaz de comando o línea de comando es una aplicación desprovista de elementos gráficos interactivos, como botones, menús, deslizadores, que proporcionan los sistemas operativos y mediante la que se ejecutan aplicaciones cuyo control se hace exclusivamente con el teclado.

La interfaz de comando es una aplicación omnipresente para el administrador de sistemas, especialmente en los sistemas operativos basados en UNIX. Pero también es una buena compañera para el desarrollador de aplicaciones. Casi todos los lenguajes y plataformas de programación y muchas herramientas de desarrollo de fuentes abiertas (open source) hacen un uso bastante intensivo de la interfaz de comando. A estas aplicaciones se les conoce como aplicaciones CLI (Command Line Interface), en contraposición a las aplicaciones GUI (Graphical User Interface)

En el caso de javascript necesitaremos la interfaz de comandos cuando hagamos uso de Node.js, es decir, prácticamente siempre que usemos un framework, pues todos ellos incorporan herramientas basadas en Node.js.

Es verdad que existen entornos de desarrollo integrados (IDE) que ofrecen estas herramientas a través de la interfaz gráfica de usuario, pero siempre se trata de una capa gráfica que oculta lo que realmente están haciendo: invocar a los comandos del sistema a los que se accede directamente con la interfaz de comando. El uso de estas herramientas gráficas no beneficia en absoluto la comprensión de la herramienta original. De hecho más bien suponen una traba.

Por eso lo ideal es usar la interfaz de comandos cuando la herramienta ha sido diseñada para ejecutarse como comando (CLI), y solo una vez que la comprendamos bien, si nos parece, entonces usar el acceso que pueda ofrecer el entorno de desarrollo integrado.Además, por otra parte, casi siempre el uso de la interfaz gráfica que ofrecen los IDE’s exige una configuración previa de la misma, y ello sólo se puede hacer sin caer en la desesperación si se tiene un conocimiento suficiente de la herramienta CLI que está por debajo.

No es necesario ser un experto en el uso de la interfaz de comandos, aunque obviamente cuanto mejor se controle mejor, y siempre será útil en el trabajo de un desarrollador  «pro». No obstante, consideramos que es importante saber qué es, y saber usarla a un nivel básico para  moverte sin problemas por el árbol de directorios y lanzar los comandos que requieran tus herramietas de desarrollo.
Los sistemas operativos Linux y MacOS cuentan con una potente interfaz de comando. Sin embargo la que ofrece  Windows por defecto, denominada “símbolo del sistema”, aunque válida para usar los ejecutables node y npm, es muy tosca. Por eso si usas Windows te recomendamos instalar una interfaz de comando más potente. Una buena alternativa es la que viene con el programa git. Aunque no lo uses, te sugerimos instalarlo simplemente para que uses su interfaz de comando cuando trabajes con Angular. Otra posibilidad, como veremos en la última sección de esta unidad, es usar la terminal que viene incorporada en el editor de texto avanzado Microsoft Visual Studio Code.
Si te interesa aprender más sobre la interfaz de comado de tipo bash shell te recomendamos esta guía confeccionada por «the linux documentation project». También te recomendamos el libro: «En el principio fue la línea de comando«. Al ser de licencia libre, puedes descargartelo gratuitamente.  En este libro el autor presenta su teoría acerca de como la interfaz gráfica de usuario a pesar de imponerse sobre la interfaz de comandos, no resulta tan potente como esta última.

Las herramientas de desarrollo del navegador web

El navegador web es una herramienta que no necesita ninguna presentación. Cuando lees estás páginas estás usando uno, probablemente Chrome, Firefox, Safari, Internet Explorer o alguno basado en cualquiera de los anteriores. No obstante, al desarrollador javascript, más allá de comprobar como va quedando la aplicación que está desarrollando, el navegador le sirve para obtener información muy útil sobre el funcionamiento de la aplicación gracias a sus herramientas de desarrollo.

Para seguir el curso puedes utilizar el navegador web que más te guste, siempre que ofrezca herramientas para el desarrollo. Cualquiera de los mencionados anteriormente vale. No obstante te recomendamos Chrome pues es el que hemos utilizado para la confección del curso. Si usas Chrome, puedes acceder a las herramientas de desarrollo desde el menú principal -> Más herramientas -> Herramientas para desarrolladores.

Conviene, de hecho, que utilices varios navegadores web, ya que cuando desarrolles aplicaciones reales debes asegurarte de que funciona correctamente, al menos, en los navegadores más populares.
Existen algunas herramientas on line como https://www.browserling.com/ que facilitan las pruebas de aplicaciones jasvascript en distintos browsers.

Resumen de las herramientas de desarrollo de Chrome.

Elements

Con esta herramienta puedes explorar y modificar «in situ» todo lo relativo al DOM (Document Object Model) y las hojas de estilo aplicadas (CSS), es decir la representación jerárquica en forma de árbol que el entorno de ejecución de javascript hace del documento HTML. Es una herramienta imprescindible para adquirir un conocimiento claro de como se renderiza («pinta») la interfaz gráfica de tu aplicación.

Network

Permite visualizar y explorar en tiempo real las peticiones HTTP que la aplicación realiza. Muchas aplicaciones obtienen los datos de servicios web. Por eso es una herramienta que usaremos cuando tengamos que depurar algún problema relacionado con la actividad de red.

La consola

Es una de las herramientas de depuración que más usaremos a lo largo del curso. Al tratarse de un intérprete de javascript interactivo con acceso a todos los objetos de nuestra aplicación, nos ofrece una cómoda manera de probar ideas y hacer comprobaciones sobre nuestro código, algo de mucho valor cuando estamos aprendiendo o desarrollando una aplicación.

Performance

Cuando los problemas que tenemos son de rendimiento, esta es la herramienta de desarrollo que nos ayudará a comprenderlos, diagnosticarlos y resolverlos. Una característica muy interesante es que permite emular la ejecución del programa en CPU’s más lentas que las de la computadora donde se ejecuta el navegador, lo que resulta muy útil cuando trabajamos en aplicaciones que se ejecutarán sobre plataformas móviles, cuyas CPU’s suelen ser más lentas que la de nuestra computadora.

Sources.

Con esta herramienta exploraremos las fuentes del programa que se haya cargado en el navegador, tanto los documentos HTML como el código javascript. Esta pestaña incorpora un depurador con el que podemos estudiar como funciona un programa paso a paso gracias a la posibilidad de parar su ejecución en el punto que nos interese y seguir, a partir de ahí, controlando manualmente dicha ejecución. Además en todo momento podremos visualizar el contenido de las variables del programa. Junto con la consola es, en mi opinión, la herramienta de desarrollo más útil, especialmente para el aprendizaje y para los momentos en los que el código se vuelve rebelde y no ahí manera de saber cómo se comporta.

Application

La utilidad más usada es el acceso a los datos persistente de la aplicación que pueden estar ubicados en los objetos localstorage, sessionstorage, bases de datos web, cookies y en la caché. También podemos explorar desde aquí los services workers de la aplicación si esta los utiliza.

Memory

Desde aquí podemos grabar una sesión de uso de la aplicación y obtener una imagen de como queda la memoria de la máquina virtual de javascript.

Security

Esta pestaña nos ofrece un informe acerca de la seguridad en el sentido de transporte de red. Es decir, muestra qué contenidos de la aplicación han sido servidos mediante protocolos de red seguros (SSL, TSL), qué certificado se ha utilizado, si este está validado por alguna autoridad certificadora o no, etcétera.

En los vídeos siguientes hacemos un repaso somero de estas herramientas. A medida que nos vayan haciendo falta a lo largo del curso se irán explicando con más detalle.

Herramientas de desarrollo del navagador web (I): Elements y Network

 

Herramientas de desarrollo del navegador web (II): Console, Performance y Sources
Herramientas de desarrollo del navegador web (y III): Application, Memory y Security

Qué hemos aprendido

  • Javascript es un potente lenguaje de programación con el que podemos construir cualquier tipo de aplicación: web, móvil, servidores, herramientas de sistemas y de escritorio. Literalmente: está en todos lados.
  • Javascript es un lenguaje fácil de aprender superficialmente, pero en lo más profundo, allí donde realmente se encuentra su potencia, difiere bastante de otros lenguajes populares como Java o Python. Sólo conociendo sus características claves se puede llegar a dominar y usar sin frustración a un nivel avanzado como el que se requiere, por ejemplo, cuando se usa un framework.
  • Para cada tipo de aplicación existen varios frameworks que gozan de mucha popularidad y con los que puedes agilizar y mejorar la calidad y la mantenibilidad de tus aplicaciones.
  • Microsoft Visual Studio Code es un editor de texto especialmente diseñado para el desarrollo de aplicaciones javascript.
  • La interfaz de comandos es una aplicación desprovista de elementos gráficos interactivos que ofrecen todos los sistemas operativos y que resulta muy útil en el mundo del desarrollo de software y de la administración de sistemas.
  • Los navegadores web disponen de unas herramientas de desarrollo que nos ayudarán mucho tanto en el aprendizaje de javascript como en el desarrollo de aplicaciones.