Conceptos generales
Rich Internet Applications
Single Page Applications
Responsive web design
Progressive enhancement vs Graceful degradation
Frameworks
Entorno de desarrollo
IDE: Visual Studio Code (Atom, Angular IDE...)
NodeJS y npm
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
npm init
npm install (--production)
Responsive web design
El modo dispositivo de Google Chrome
meta viewport
box-sizing
Layout fijo vs elástico
Proporciones
Versiones para móvil
Media queries
Breakpoints
Distintas maneras de incluirlas
Conflictos
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
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.
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?
¡TypeScript!
TS -> ES5 -> webpack -> bundle -> browser
TypeScript
Superconjunto de JavaScript
Transpila a ES5
Tipado
Errores en tiempo de compilación
tsc
tsconfig.json
TypeScript
let y const
Tipos básicos:
number
string
boolean
Array
any
void
Enum
Union types
TypeScript
Funciones
Arrow function
Clases
Visibilidad de los miembros
Getters y setters
Herencia
Interfaces
Objetos sin clase
Template literals
Módulos
TypeScript
for...of, forEach
map, filter, reduce
find, indexOf
knockout.js
Data binding
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
Mustache para JS
Templates con x-tmpl-mustache
Recibe objetos JS
Variables ({{ }})
Bloques (#)
Condicionales
Arrays u objetos (.)
Links