Conceptos generales

• Rich Internet Applications

• Single Page Applications

• Responsive web design

• First mobile

• Frameworks

¿Cómo me envía el servidor una web?

• Peticiones del cliente, respuestas del servidor

• Varias peticiones de varios recursos, cada uno con su URL

• Waterfall

• <script>, defer y async

Entorno de desarrollo

• IDE: Visual Studio Code

• Git

• NodeJS y npm

• Extensión ColorZilla

• Extensión Page Ruler

Configuración proxy

• git:

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

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

• npm:

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

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

npm

• Instalar última versión después de instalar nodeJS

• 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)

Responsive web design

• El modo dispositivo de Google Chrome

• meta viewport

• Layout fijo vs elástico

• Proporciones

• Versiones aparte para móvil

Media queries

• Breakpoints

• Media queries en el device mode de Chrome

• html5shim y respond.js

Imágenes responsive

• Imágenes de fondo

• Los atributos srcset y sizes

• El elemento picture

Bootstrap

• Cargar Bootstrap

  • <link>

  • npm bootstrap-sass

• Breakpoints

• Las zonas xs, sm, md y lg

• La grid (ejemplo 1 y ejemplo 2)

  • 12 columnas

  • Gutter

  • .container > .row > .col-*

  • .col-*-offset-*

• Cambiando los breakpoints, el container o los gutters

Bootstrap - clases útiles

• hidden-*, visible-*, hidden, 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!

• ES6 -> Babel -> ES5 -> webpack -> bundle -> browser

knockout.js

• Data binding

  • ko.applyBindings(objeto, elemento HTML)

• Observables

• observable(), observableArray(), computed()

Bindings y estructuras de control

• text, html

• css, style, visible

• attr

• foreach

• if

• with

• $parent

Formularios

• click

• event

• submit

• enable / disable

• value

• textInput

• hasFocus

• checked

• options

• selectedOptions

• uniqueName

Comunicación con el servidor

• jQuery $.getJSON y $.post

• ko.toJSON

AngularJS

• Data binding

• No apto para aplicaciones grandes: Angular

• Permite modificar el HTML

AngularJS

• Aplicación mínima: módulo y controlador
• Directivas
  • ng-app
  • ng-controller
  • ng-bind
  • ng-repeat
  • ng-show
  • ng-if
  • ng-model

AngularJS

• Directivas propias:
  app.directive(() => ({
      template: '<strong>test</strong>',
      templateUrl: 'template.html',
      restrict: 'AE'
  })

Formularios

• ng-model
• ng-click
• Form name
• Estados del formulario y los campos:
  • pristine / dirty
  • untouched / touched
  • valid / invalid
• $submitted
• $error

Filtros

• En la expresión
• En la directiva
• lowercase / uppercase
• date
• number
• orderBy
• filter
• Filtros propios

REST y Routing

• $http
• Routing
  • angular-route
  • Incluir ngRoute como dependencia
  • app.config(function($routeProvider) {
        $routeProvider.when("ruta", {
             templateURL:
             controller:
        }
    }
  • ng-view