frameworks de desarrollo de aplicaciones web (ria) … · 2019-10-01 · frameworks de desarrollo...
Post on 22-May-2020
6 Views
Preview:
TRANSCRIPT
TemarioDiseño de aplicaciones responsiveSingle Page ApplicationsBootstrapKnockout.jsAngularJSMustache
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 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
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 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)
Responsive web design
El modo dispositivo de Google Chromemeta viewportLayout fijo vs elásticoProporcionesVersiones aparte para móvil
SASS
Código fuente -> código compilado Modularización con @import Anidaciones Variables Mixins
Sin argumentos Con argumentos obligatorios Con argumentos opcionales
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
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
knockout.js
Data bindingko.applyBindings(objeto, elemento HTML)
Observablesobservable(), observableArray(), computed()
Formularios
clickeventsubmitenable / disablevaluetextInputhasFocuscheckedoptionsselectedOptionsuniqueName
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
REST y Routing$httpRouting
angular-routeIncluir ngRoute como dependenciaapp.config(function($routeProvider) { $routeProvider.when("ruta", { templateURL: controller: }}ng-view
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
top related