Arquitectura de web components - Plain Concepts Web Day
•
1 recomendación•643 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
Similar a Arquitectura de web components - Plain Concepts Web Day
Similar a Arquitectura de web components - Plain Concepts Web Day (20)
Más de Plain Concepts
Más de Plain Concepts (20)
Último
Último (15)
Arquitectura de web components - Plain Concepts Web Day
- 1. 26.10.2017 Plain Concepts Web Day Carlos Bastos Pérez-Cuadrado Arquitectura de web components Software developer engineer
- 2. 2 9:00 – 9:45 Diseñ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 SOFTWARE ENGINEER 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 llevas de esta charla
- 6. @plainconcepts 6 Qué te llevas 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
- 8. @plainconcepts 8 ¿Qué es un 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 web components
- 11. @plainconcepts 11 Diseño me dió un mockup
- 12. @plainconcepts 12 Una ley “Todo son webcomponents”
- 13. @plainconcepts 13 Diseño: mirando el mockup
- 14. @plainconcepts 14 left menu top menu manage user 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-menu p-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 DOM level Third DOM level p-billing-appFirst DOM level Webcomponents: estructura de carpetas
- 20. 20 Cuáles son nuestros stacks
- 21. @plainconcepts 21 Angular React VueJS
- 22. 22 Arquitecturas de web components
- 23. @plainconcepts Web App 1 Web App 2 Web App N … Historia: hacemos muchos proyectos
- 24. @plainconcepts Historia de cada proyecto • Repetimos fontantería • Stacks diferentes • Estructura de proyecto diferente • Repetimos código • Reinventamos convenciones
- 25. @plainconcepts 25 Requisitos de arquitectura 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 WebComponents Core 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 WebComponents Core Services Core Componentes reutilizables: Core
- 28. @plainconcepts 28 UI Controls WebComponents Core Services Core Componentes reutilizables: ui controls UI Controls catalog Grid Combo Datepicker UploadFile …
- 29. @plainconcepts 29 UI Controls WebComponents Core Services Services Componentes reutilizables: services NSwag swagger.json ApiClients.ts
- 30. @plainconcepts 30 UI Controls WebComponents Core Services ng template Componentes reutilizables: template Configurado • Tests • Builds • Docs • Linting
- 32. 32 Coclusiones
- 33. @plainconcepts 33 Conclusiones 1. Todo son web components 2. La jerarquía “manda” 3. Muchos frameworks una filosofía
- 35. www.plainconcepts.com MADRID Paseo de la Castellana 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