Comandos básicos

• Clonar un repositorio:
  
      git clone URL
   

• Descargar última versión del repositorio:
  
      git pull origin master

Configuración proxy

git config --global http.proxy http://username:password@host:port

git config --global https.proxy http://username:password@host:port

npm

• Instalar última versión después de instalar nodeJS
  (configurar proxy si es necesario)

• Repositorio de módulos distribuibles

• Módulos globales y módulos locales

• La carpeta node_modules

• El archivo package.json:

  • Registro de dependencias

  • Dependencias de desarrollo y de producción

  • Versiones (SEMVER)

  • Tareas (objeto scripts)

Comandos npm

• Crear el archivo package.json:
      npm init -y

• Instalar un paquete de producción:
      npm install paquete

• Instalar un paquete de desarrollo:
      npm install paquete --save-dev

• Instalar todas las dependencias
      npm install

• Instalar las dependencias de desarrollo
      npm install [--production]

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

Bootstrap

• Cargar Bootstrap

  • <link>

  • npm bootstrap

• Breakpoints

• Las zonas xs, sm, md y lg

• La grid ( ejemplo 1 y ejemplo 2)

  • 12 columnas

  • Gutter

  • .container > .row > .col-*

  • .col-*-offset-*

Bootstrap - clases útiles

• hidden-*, visible-*, hide, show

• pull-left y pull-right

• text-left, text-center, text-right

• list-unstyled, list-inline

• clearfix

• img-responsive, img-circle, img-thumbnail

• text-primary, text-success, text-info, text-warning, text-danger

• bg-primary, bg-success, bg-info, bg-warning, bg-danger

• center-block

Bootstrap - formularios

• .form-group

• .form-control

• .btn, .btn-default, .btn-primary, etc.

Organización del código JavaScript

• Ejemplo de uso clásico de JS: utilizar un plugin de jQuery en nuestra web, o implementar alguna interacción con el usuario

• Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

• Programar toda la UI de una página

• ¿2000 líneas en un solo archivo?

• Difícil de leer/entender
• Difícil de mantener
• Poca reusabilidad
• Difícil encontrar código no usado
• Colisiones de nombres

• Una sola petición HTTP

Organización del código JavaScript

• Optimización: dividir el código en varios archivos/módulos

• Difícil encontrar código no usado (menos difícil que antes)
• Colisiones de nombres
• Muchas peticiones HTTP
• El orden importa: dependencias

Organización del código JavaScript

• Dependencias: es difícil asegurar el orden, y no es posible tener dependencias circulares

Organización del código JavaScript: módulos

• Module loaders: ellos gestionan las dependencias y cargan los módulos (RequireJS, SystemJS)

• Module bundlers: además de lo anterior, generan un solo código encadenado y minificado (browserify, webpack)

Organización del código JavaScript: módulos

• ¿Puedo escribir mis módulos como yo quiera? ¿hay un estándar?

• ¿AMD, CommonJS, UMD, ES6?

• ¡Webpack!

• TS -> ES5 -> webpack -> bundle -> browser =

TypeScript

• Superconjunto de JavaScript

• Transpila a ES5

• Tipado

• Errores en tiempo de compilación

• tsc

• tsconfig.json

TypeScript

• Tipos básicos:

  • number

  • string

  • boolean

  • Array

  • any

  • void

• Enum

• Union types

TypeScript

• Funciones

  • Sin flexibilidad en el número de parámetros

  • Parámetros opcionales

• Clases

  • Propiedades fuera del constructor

  • Visibilidad de los miembros

    • Modificador readonly

  • Propiedades estáticas

  • Interfaces

TypeScript

• Decoradores (@)

Primeros pasos

• ng new --minimal para generar la app

• ng serve -o para verla en el navegador

• Entornos dev, hmr y prod

• Componentes, templates, módulos

• El módulo iniciador y el componente iniciador

• Archivos de configuración

Esqueleto de una pieza en Angular

• clase =>

• => clase exportada =>

• => clase exportada y decorada =>

• => dependencias

Examinando un componente

• Metadata

  • selector

  • template / templateUrl

  • styles / styleUrls

Examinando un template

• Custom elements

• Data binding

• Interpolation

• Property binding

• Class & style binding

• Event binding

• Two-way binding

Examinando un template

• Directivas de atributo

  • ngClass

  • ngStyle

• Directivas estructurales

  • ngIf

  • ngFor

  • ngSwitch

• Pipes

  • @Pipe, PipeTransform