Frameworks de desarrollo de aplicaciones web (RIA) multiplataforma
Temario
- Diseño de aplicaciones responsive
- Single Page Applications
- Bootstrap
- Knockout.js
- AngularJS
- Mustache
Conceptos generales
Conceptos generales
-
Rich Internet Applications
-
Single Page Applications
-
Responsive web design
-
Progressive enhancement vs Graceful degradation
-
Frameworks
Entorno de desarrollo
Entorno de desarrollo
-
IDE: Visual Studio Code (Atom, Angular IDE...)
-
NodeJS y npm
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
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
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
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
- 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
Ventajas
Inconvenientes
- Difícil encontrar código no usado (menos difícil que antes)
- Colisiones de nombres
- Muchas peticiones HTTP
- El orden importa: dependencias
- Legible e inteligible
- Fácil de mantener
- Reutilizable
- Cargamos sólo lo que necesitamos
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
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
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
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>',
restrict: 'E'
})
Formularios
- ng-model
- ng-click
- Estados del formulario y los campos:
- pristine / dirty
- untouched / touched
- valid / invalid
Filtros
- En la expresión
- En la directiva
- lowercase / uppercase
- date
- number
- orderBy
- filter
- Filtros propios
Mustache
Mustache para JS
-
Templates con x-tmpl-mustache
-
Recibe objetos JS
-
Variables ({{ }})
-
Bloques (#)
-
Condicionales
-
Arrays u objetos (.)
-
Links
Frameworks RIA multiplataforma
By mariogl
Frameworks RIA multiplataforma
Curso Frameworks RIA multiplataforma Lleida 23-27 octubre 2017
- 1,112