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
Entorno de desarrollo
IDE: Visual Studio Code
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
Comandos básicos
Clonar un repositorio:
git clone URL (crea subcarpeta)
Descargar última versión del repositorio:
git pull origin master
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
SASS
Código fuente -> código compilado
Modularización con @import
Anidaciones
Bootstrap
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.
JavaScript
Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript
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?
Ventajas
Inconvenientes
Organización del código JavaScript
Optimización: dividir el código en varios archivos/módulos
Ventajas
Inconvenientes
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
ES6
let y const
Template literals
for ... of
Funciones
Arrow function
Clases
Propiedades y métodos
Herencia con extends y super()
Getters y setters
Métodos estáticos
Módulos
Iterables
Propiedad length
Métodos:
forEach
map
filter
reduce
find
indexOf
Encadenamiento
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
AngularJS
Formularios
Filtros
REST y Routing
Mustache para JS
Templates con x-tmpl-mustache
Recibe objetos JS
Mustache.parse() y Mustache.render()
Variables ({{ }})
Bloques (#)
Condicionales
Arrays u objetos (.)
Links