Desarrollo modermo de aplicaciones web
-
Upload
roberto-sanz-ciriano -
Category
Software
-
view
119 -
download
1
Transcript of Desarrollo modermo de aplicaciones web
Presentacin de PowerPoint
Desarrollo moderno de aplicaciones web@[email protected]@pronet-ise.com
ElmBACKBONE.JSPolymerVue.jsNode jsTypeScriptJavaScriptAngularJSWebPackReactiveXReactBrowserifyBabelRequireJSD3.jsnpmHow it feels to learn JavaScript in 2016
Lo mejor es que empecemos por los principios
Simple Page Application (SPA)
VentajasMayor usabilidadEl estado de mantiene en clienteLa aplicacin completa podra estar cacheada en cliente Se podra convertir en una aplicacin escritorio/mvil hbrida RetosCarga inicial ms lentaMantener historial de navegacinSEOMantener a raya el consumo de memoriaEvitar colisiones de mbitoCarga perezosaNota: No todo tiene que ser SPA
Formulario SPA con jQuery
Esto de capturar tanto evento no se si escala bien. Cuando vaya creciendo me va a costar encontrar las cosas
Model-View-ViewModel (MVVM)
Separacin entre la visualizacin y el comportamiento Los cambios en la forma de representar la informacin no implicarn reescribir lgicaEs ms fcil coordinar el trabajo con los diseadores Cdigo ms declarativo que se puede seguir ms fcilmente Facilita la extraccin de partes reutilizables
MVVM de andar por casa
Est mejor pero sigue acoplado, y si cambia la forma de comunicarme con el servidor?
Y con esto, cmo implementar las pruebas unitarias?
Inyectando dependencias
Esto est empezando a crecer, hay que ordenar mejor el cdigo y delimitar los mbitos de los objetos
Mdulos
Organizar el cdigo Delimitar el mbito de los objetos, variables, tipos, para evitar colisiones Gestionar las dependencias Formatos:ES 5AMDCommonJsES 6 / TypeScript
Esto es un mdulo (luego veremos ms)
Uff, cuanto echo de menos las ayudas del editor, la orientacin a clases, la comprobacin de tipos,
Lenguajes La versin de JavaScript que soportan los navegadores (ES5) se queda corta NecesidadesCdigo ms legible y mantenibleEscribir menos cdigoAyudas de las herramientasComprobacin temprana de erroresAutocompletadoDocumentacin en lneaOpciones: ES5 (ES2015)ES6TypeScriptDartCoffeScript
TypeScript No es un lenguaje nuevo sino un superconjunto de JavaScript + tipado (opcional) Programacin orientada a clases, herencia, interfaces (visibilidad publica por defecto)Definicin de tipos (http://definitelytyped.org/)Hay tipos definidos para casi todas las libreras Se distribuyen como paquetes npm, como el resto dependencias (despus de pasar por 2 herramientas diferentes) Otras ventajas de TSDeteccin temprana de erroresAuto completado en editor de cdigoElegir versin de ES, sistema de mdulos, Proyecto OpenSource de Microsoft Est evolucionando muy rpido
Como molara tener esto!https://github.com/Microsoft/TypeScript/issues/6508
Refactorizando con TypeScript
Ahora hay demasiados archivos por lo que tardar mucho en conexiones lentas.
Parece que HTTP2 lo soluciona pero, no se yo
Bundles Empaquetar los archivos de cdigo para su uso optimo en produccin Juntar varios archivos para reducir el nmero de peticiones que se realizan al servidor (importante mantener el orden que marcan las dependencias) Minificar para reducir el tamao de los archivos Ofuscar el cdigo Optimizacin del resultado incluyendo solo las dependencias necesarias
WebPack
Resolucin avanzada de dependencias entre mdulos (npm) Trabaja con multitud de tipos de archivos Personalizable mediante plugins Muy configurable y flexible Servidor/middleware para desarrollo que actualiza el contenido del navegador automticamente
Ha llegado el momento de dejar esto bonito pero a mi esto del diseo
Gua de diseo de UI Base sobre la que empezar a construir los interfaces de usuario Componentes bien definidos y estructurados Layout y posicionamiento (sistema de grid) Diseo responsive Configurable y adaptable (Sass, Less)
Bootstrap
https://startbootstrap.com/template-overviews/sb-admin-2/
https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0http://getbootstrap.com/examples/theme/
Material design
Nuestro formulario con Bootstrap
Que pereza la cantidad de HTML que hay que escribir, y muy repetitivo todo.
Y si lo encapsulamos de alguna manera?
Componentes
Encapsular complejidad Independientes y Testeables Reutilizables Sustituibles
Nuestro formulario usando componentes
Quietoorrr, que me parece que estoy reinventando la rueda!
Seguro que entre tantos frameworks JavaScript hay alguno que sirva para todo esto
Angular 1.x SPA y enrutado en cliente Patrn MV* y sistema de plantillas Modularidad Inyeccin de dependencias Elementos HTML personalizados (directivas/componentes) Preparado para testing Alternativas: Durandal, VueJs, Aurelia, Backbone,
Angular 2 Es un framework totalmente nuevo Ms rpido, mejor estructurado y preparado para aplicaciones grandes Usa la modularidad de ES6 y dice adis a los scopes Inyeccin de dependencias ms avanzada Orientado a componentes y alineado con WebComponents y Polymer Compilacin en servidor (soluciona los problemas de SEO) Qu pasa con angular 1?No va a desaparecer tan rpido, incluso va a seguir evolucionadoLa migracin no es trivial, aunque podrn convivir los dos en la misma aplicacin
Y que pasa con .NET?
.NET 4 & .NET Core Sigue siendo una pieza clave porque es donde reside la lgica de negocio, acceso a datos, seguridad, Hay que integrarlo con esta forma de trabajar (.NET Core ya lo est haciendo) Entonces, nos pasamos a .NET Core?Mola muchoOpen SourceMulti plataformaModularMs rpidoOjo cuidadoLas herramientas siguen en beta (pronto vuelve msbuild y el csproj)Incompatibilidades con libreras antiguas (se soluciona con .net standard 2.0) EntityFramework Core soporta menos bases de datos y todava le faltan algunas funcionalidades
Creo que an me quedan muchas cosas por aprender y mejorar
Esto no acaba ms que empezar Gestores de paquetes (npm, bower, nuget, ) Gestores de tareas (gulp, npm, grunt) Testing automtico (unitario/e2e) Nuevos patrones de desarrollo de UI (Redux) Programacin reactiva Comunicacin en tiempo real (websockets, signalr)
Menudo tostn
Practicamos un poco?https://goo.gl/QXvi5e