Instalación

Introducción

Así como un electricista necesita un destornillador y un amperímetro, un desarrollador de JavaScript o Angular necesita una serie de herramientas. Algunas son opcionales; otras, absolutamente imprescindibles.

Si bien HTML, CSS y JavaScript se pueden escribir en cualquier editor de texto, un entorno de desarrollo permite una escritura más rápida, más optimizada y mejora drásticamente el trabajo de un desarrollador. Existen varios entornos (llamados IDE, de entornos de desarrollo integrados) en el mercado. A título personal, nosotros usamos el conjunto de herramientas JetBrains, pero requiere la compra de una licencia. En este libro, se utilizará el IDE de Visual Studio de Microsoft. Tiene la ventaja de ser gratuito y de disponer de varios módulos útiles para desarrollos de Angular.

Por supuesto, un navegador web es absolutamente obligatorio para ver el resultado de varias horas de trabajo en el IDE. En este libro, se utilizará Google Chrome, ya que tiene varios módulos para corregir errores de una aplicación JavaScript. Idealmente, varios navegadores diferentes le permiten probar la representación de la aplicación en diferentes contextos (consulte el capítulo Test de extremo a extremo).

Para acercarse lo más posible al trabajo de un desarrollador profesional, git permite el trabajo colaborativo...

Visual Studio Code

Visual Studio Code es un entorno de desarrollo escrito por Microsoft durante el año 2015 y completamente gratuito. De apariencia limpia, es compatible de forma nativa con HTML, CSS, TypeScript y JavaScript, lo que lo convierte en una buena opción para cualquier desarrollador web serio.

Su filosofía se basa en un enfoque modular. Desde su tienda es posible agregar los componentes que el desarrollador considere necesarios. También es posible retirarse. Es muy ligero y rápido para aplicaciones sencillas y extremadamente eficiente para aplicaciones más complejas gracias a los módulos adicionales.

git

git es un administrador de versiones descentralizado. Es la herramienta más utilizada en el mundo para gestionar un proyecto de desarrollo.

El código de la aplicación en desarrollo se almacena en un servidor remoto y en cada máquina de cada desarrollador.

Imaginen que Lena y Maïwenn, dos desarrolladores experimentados, desean desarrollar una aplicación para administrar figuras de Harry Potter y The Walking Dead. Lena crea el proyecto y «envía» el código fuente a un servidor remoto en Internet. Maïwenn «extrae» el código fuente del servidor remoto a su máquina personal. Entonces, hay tres versiones idénticas del código ubicadas en tres lugares diferentes. La fuerza de git radica en el hecho de que Lena y Maïwenn pueden trabajar, cada una por su cuenta, en el proyecto y «enviar» sus modificaciones al servidor remoto. Tan pronto como trabajan en diferentes archivos, las tres copias se actualizan. Si hay conflictos, git preguntará qué copia es la correcta.

git fue creado por Linus Torvalds, quien no es un desconocido para la comunidad mundial, ya que es el padre del kernel de Linux y el pingüino Tux.

node --version 

npm

npm es un administrador de paquetes. Enumera, instala y desinstala los paquetes y dependencias necesarios. Viene instalado con Node.js. Si el siguiente comando devuelve la versión de npm instalada, entonces la instalación se puede considerar hecha.

npm --version 

npm usa un archivo llamado package.json ubicado en la raíz del proyecto. Contiene una descripción del proyecto, los paquetes y dependencias necesarios, y la definición de algunos scripts útiles.

Antes de generar este archivo, una configuración mínima puede ser útil para no tener que repetir información innecesariamente en cada nuevo proyecto.

npm propone dos maneras de modificar su configuración.

npm config edit 

npm set init.author.name Caliendo  
npm set init.author.email caliendo@yopmail.es 
npm set init.author.url http://www.caliendo.es 

Para iniciar un nuevo proyecto de JavaScript, crear un archivo package.json es casi esencial:

npm init 

No es necesario reinventar la rueda. npm le permite instalar, en un solo comando,  paquetes desarrollados por terceros.

La página https://www.npmjs.com contiene la lista de paquetes disponibles.

chalk (https://www.npmjs.com/package/chalk) permite, por ejemplo, personalizar...

npm install -g @angular/cli 

Estructura de este libro

Este trabajo se divide en dos partes muy diferenciadas.

Los primeros siete capítulos de este libro están dedicados a JavaScript como lenguaje de programación web. Cada ejemplo o demostración se integra en una página HTML y el renderizado realizado por un navegador.

Los siguientes doce capítulos están dedicados a Angular. Cada demostración es independiente, para ilustrar un punto específico del programa. Una aplicación común desarrollada a medida que avanza el trabajo permite poner en práctica los conceptos.

Cada bloque de código tiene la ubicación del archivo en la primera línea y respeta la siguiente convención tipográfica:

<!-- C:\JavaScript\index.html -->  
<!DOCTYPE html>  
<html lang="es”>  
<head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=<device-width>, 
initial-scale=1.0">  
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>Ediciones ENI</title>  
</head>  
<body>  
   <p>Un trozo de código</p>  
</body>  
</html> 

Todos...