50
Frameworks de desarrollo de aplicaciones web (RIA) multiplataforma
Frameworks de desarrollo de aplicaciones
web (RIA) multiplataforma
TemarioDiseño de aplicaciones responsiveSingle Page ApplicationsBootstrapKnockout.jsAngularJSMustache
Conceptos generales
Conceptos generales
Rich Internet ApplicationsSingle Page ApplicationsResponsive web designFirst mobileFrameworks
¿Cómo me envía el servidor una web?
Peticiones del cliente, respuestas del servidorVarias peticiones de varios recursos, cada uno con suURLWaterfall<script>, defer y async
Entorno dedesarrollo
Entorno de desarrollo
IDE: (Atom, Angular IDE...)
y npmExtensión Extensión
Visual Studio CodeGitNodeJS
ColorZillaPage Ruler
Configuración proxy
git:git config --global http.proxyhttp://username:password@host:portgit config --global https.proxyhttp://username:password@host:port
npm:npm config set proxyhttp://username:password@host:portnpm config set https-proxyhttp://username:password@host:port
Git
Comandos básicos
Clonar un repositorio:git clone URL (crea subcarpeta)Descargar última versión del repositorio:git pull origin master
NodeJS y npm
npm
Instalar última versión después de instalar nodeJSRepositorio de módulos distribuiblesMódulos globales y módulos localesLa carpeta node_modulesEl archivo package.json:
Registro de dependenciasDependencias de desarrollo y de producciónVersiones (SEMVER)Tareas (objeto scripts)
Comandos npm
Crear el archivo package.json:npm init -yInstalar un paquete de producción:npm install paqueteInstalar un paquete de desarrollo:npm install paquete --save-devInstalar todas las dependenciasnpm installInstalar las dependencias de desarrollonpm install (--production)
Responsiveweb design
Responsive web design
El modo dispositivo de Google Chromemeta viewportLayout fijo vs elásticoProporcionesVersiones aparte para móvil
Media queries
BreakpointsMedia queries en el device mode de Chromehtml5shim y respond.js
Imágenes responsive
Imágenes de fondoLos atributos srcset y sizesEl elemento picture
SASS
SASS
Código fuente -> código compilado Modularización con @import Anidaciones Variables Mixins
Sin argumentos Con argumentos obligatorios Con argumentos opcionales
Bootstrap
Bootstrap
Cargar Bootstrap<link>npm bootstrap-sass
BreakpointsLas zonas xs, sm, md y lgLa grid ( y )
12 columnasGutter.container > .row > .col-*.col-*-offset-*
Cambiando los breakpoints, el container o los gutters
ejemplo 1 ejemplo 2
Bootstrap - clases útiles
hidden-*, visible-*, hidden, showpull-left y pull-righttext-left, text-center, text-rightlist-unstyled, list-inlineclearfiximg-responsive, img-circle, img-thumbnailtext-primary, text-success, text-info, text-warning, text-dangerbg-primary, bg-success, bg-info, bg-warning, bg-dangercenter-block
Bootstrap - formularios
.form-group
.form-control
.btn, .btn-default, .btn-primary, etc.
JavaScript
JavaScript
Interpretado, compilado y ejecutado en el navegadorCada navegador programa su propio motor de JSEstandarización: ECMAScriptLa versión ES6 o ES2015Transpiladores: Babel, TypeScript
Organización del código JavaScript
Ejemplo de uso clásico de JS: utilizar un plugin dejQuery en nuestra web, o implementar algunainteracción con el usuarioPocas 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/entenderDifícil de mantenerPoca reusabilidadDifícil encontrar código nousadoColisiones de nombres
Una sola peticiónHTTP
Organización del código JavaScript
Optimización: dividir el código en variosarchivos/módulos
Ventajas Inconvenientes
Difícil encontrar código nousado (menos difícil queantes)Colisiones de nombresMuchas peticiones HTTPEl orden importa:dependencias
Legible e inteligibleFácil de mantenerReutilizableCargamos sólo lo quenecesitamos
Organización del código JavaScript
Dependencias: es difícil asegurar el orden, y no esposible tener dependencias circulares
Organización del código JavaScript: módulos
Module loaders: ellos gestionan las dependencias ycargan los módulos (RequireJS, SystemJS)
Module bundlers: además de lo anterior, generan unsolo código encadenado y minificado (browserify,webpack)
Organización del código JavaScript: módulos
¿Puedo escribir mis módulos como yo quiera? ¿hay unestándar?¿AMD, CommonJS, UMD, ES6?¡Webpack!ES6 -> Babel -> ES5 -> webpack -> bundle -> browser
ES6
let y constTemplate literalsfor ... ofFuncionesArrow functionClases
Propiedades y métodosHerencia con extends y super()Getters y settersMétodos estáticos
Módulos
Iterables
Propiedad lengthMétodos:
forEachmapfilterreducefindindexOf
Encadenamiento
knockout.js
knockout.js
Data bindingko.applyBindings(objeto, elemento HTML)
Observablesobservable(), observableArray(), computed()
Bindings y estructuras de control
text, htmlcss, style, visibleattrforeachifwith$parent
Formularios
clickeventsubmitenable / disablevaluetextInputhasFocuscheckedoptionsselectedOptionsuniqueName
Comunicación con el servidor
jQuery $.getJSON y $.postko.toJSON
AngularJS
AngularJSData bindingNo apto para aplicaciones grandes: AngularPermite modificar el HTML
AngularJS
Aplicación mínima: módulo y controladorDirectivas
ng-appng-controllerng-bindng-repeatng-showng-ifng-model
AngularJS
Directivas propias:app.directive(() => ({ template: '<strong>test</strong>', templateUrl: 'template.html', restrict: 'AE'})
Formulariosng-modelng-clickForm nameEstados del formulario y los campos:
pristine / dirtyuntouched / touchedvalid / invalid
$submitted$error
FiltrosEn la expresiónEn la directivalowercase / uppercasedatenumberorderByfilterFiltros propios
REST y Routing$httpRouting
angular-routeIncluir ngRoute como dependenciaapp.config(function($routeProvider) { $routeProvider.when("ruta", { templateURL: controller: }}ng-view
Mustache
Mustache para JSTemplates con x-tmpl-mustacheRecibe objetos JSMustache.parse() y Mustache.render()Variables ({{ }})Bloques (#)
CondicionalesArrays u objetos (.)
Links
Documentación oficial de BootstrapDocumentación oficial de Knockout JSDocumentación oficial de AngularJSPlayground para TypeScriptConfiguración del compilador TypeScriptConfiguración de WebpackDocumentación sobre todas las API de JavaScriptJSON Server API
