Presentacin de PowerPoint

Desarrollo moderno de aplicaciones web@rscirianorsciriano@gmail.comroberto@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