Subido porPlain Concepts
Arquitectura de web components - Plain Concepts Web Day
El documento presenta el programa de un evento sobre arquitectura de componentes web. La jornada incluye sesiones sobre diseño web, arquitectura de componentes front-end con TypeScript y Angular, autenticación, integración front-end y back-end, pruebas, y herramientas de desarrollo como VSTS, GIT y despliegue continuo.
Más contenido relacionado
La actualidad más candente
Similar a Arquitectura de web components - Plain Concepts Web Day
Arquitectura de web components - Plain Concepts Web Day
- 1. 26.10.2017 Plain Concepts Web Day CarlosBastos Pérez-Cuadrado Arquitectura de web components Software developer engineer
- 2. 2 9:00 – 9:45Diseño Web 9:50 - 10:35 Arquitectura de componentes Front. Typescript y Angular 10:40 - 11:25 Autenticación. Configuración del inyector de depencias y controladores 11:25 - 11:45 Break 11:45 - 12:30 Integración de Front con Back. Nswag: cómo generar los typing 12:35 - 13:20 Estrategias de testing. Buenas prácticas. 13:25 – 14:10 VSTS, ALM, GIT, Integración continua y deployment Plain Concepts Web Day
- 3. Carlos Bastos @plainconcepts 3 @cbastospc SOFTWAREENGINEER SOFTWARE FREAK en Plain Concepts
- 4. Qué veremos 4 1. Quéte llevas de esta charla 2. Conceptos básicos 3. Cómo pensamos en web components 4. Cuáles son nuestros stacks 5. Arquitecturas de web components 6. Conclusiones
- 5. 5 Qué te llevasde esta charla
- 6. @plainconcepts 6 Qué tellevas de esta charla 1. Nuestra vision sobre el frontend de aplicaciones web 2. Qué stacks tecnológicos usamos en Plain Concepts 3. Qué hacemos para reutilizar components entre proyectos 4. Las tripas de cómo trabajamos en el frontend
- 7.
- 8. @plainconcepts 8 ¿Qué esun web component? Representación (HTML) Estilos (CSS) Comportamiento (JavaScript) + +
- 9. @plainconcepts 9 <html> <head> …</head> <body> … </body> </html> html head body … … … … … ¿Cómo es el DOM? Jerárquico
- 10. 10 Cómo pensamos en webcomponents
- 11. @plainconcepts 11 Diseño medió un mockup
- 12. @plainconcepts 12 Una ley “Todoson webcomponents”
- 13. @plainconcepts 13 Diseño: mirandoel mockup
- 14. @plainconcepts 14 left menu top menu manageuser info configure user filters show filtered users billingapp Diseño: el frontender detecta web components
- 15. @plainconcepts < p- billing-app> </p-billing-app> <p- top-menu></p-top-menu> < p- left-menu></p-left-menu> < p- manage-user-info> </p-manage-user-info> < p- configure-user-filters></p-configure-user-filters> < p- show-filtered-users></p-show-filtered-users > p-* p-billing-app p-top-menu p-left-menu p-manage-user-info p-configure-user-filters p-show-filtered-users Web Components: jerarquía y prefijo
- 16. @plainconcepts 16 p-billing-app p-top-menu p-left-menup-manage-user-info p-configure-user-filters p-show-filtered-users First level Second level Third level Web Components: comunicación Observer Mediator Callbacks Promises
- 17. 17 (M) Model (V) View (VM)ViewModel M V VM M V VM M V VM M V VM M V VM WC 1 WC 1.1 WC 1.2 WC 1.1.1 WC 1.2.1 WC 1.2.2 Web Components: Patterns view
- 18. @plainconcepts 18 p-configure-user-filters p-manage-user-info p-top-menu p-left menu components p-show-filtered-users components Second DOMlevel Third DOM level p-billing-appFirst DOM level Webcomponents: estructura de carpetas
- 19.
- 20. 20 Cuáles son nuestrosstacks
- 21.
- 22. 22 Arquitecturas de webcomponents
- 23. @plainconcepts Web App 1Web App 2 Web App N … Historia: hacemos muchos proyectos
- 24. @plainconcepts Historia de cadaproyecto • Repetimos fontantería • Stacks diferentes • Estructura de proyecto diferente • Repetimos código • Reinventamos convenciones
- 25. @plainconcepts 25 Requisitos dearquitectura y ecosistema • Web Components • Ordenación jerárquica • Convenciones centralizadas • Reglas de comunicación: • Estado centralizado • Estado descentralizado • DRY : Don’t repeat yourself • Un único anillo (filosofía) para gobernarlos a todos (los stacks)
- 26. @plainconcepts 26 UI Controls WebComponentsCore Services Web App 1 Web App 2 Web App N … Nuestra solución: arquitectura y ecosistema
- 27. @plainconcepts 27 Storage Traces Exceptions Autenticación Autorización Localización Http UI Controls WebComponentsCore Services Core Componentes reutilizables: Core
- 28. @plainconcepts 28 UI Controls WebComponentsCore Services Core Componentes reutilizables: ui controls UI Controls catalog Grid Combo Datepicker UploadFile …
- 29. @plainconcepts 29 UI Controls WebComponentsCore Services Services Componentes reutilizables: services NSwag swagger.json ApiClients.ts
- 30. @plainconcepts 30 UI Controls WebComponentsCore Services ng template Componentes reutilizables: template Configurado • Tests • Builds • Docs • Linting
- 31.
- 32.
- 33. @plainconcepts 33 Conclusiones 1. Todoson web components 2. La jerarquía “manda” 3. Muchos frameworks una filosofía
- 34.
- 35. www.plainconcepts.com MADRID Paseo de laCastellana 163, 10º 28046 Madrid. España T. (+34) 91 5346 836 BILBAO Calle Ledesma 10-bis 3º 48001 Bilbao. España T. (+34) 94 6073 371 BARCELONA Carrer Compte d’Urgell 240 4º 1A 08036 Barcelona. España T. (+34) 93 7978 566 SEVILLA Avenida de la innovación s/n Edificio Renta Sevilla, 3º A 41020 Sevilla. España DUBAI Dubai Internet City. Building 1 73030 Dubai. EAU T. (+971) 4 551 6653 LONDON Impact Hub Kings Cross 24B York Way, N1 9AB London. UK SEATTLE 1511, Third Ave Seattle WA 98101. USA T. (+1) 206 708 1285