Dotnet 2018 Cómo desarrollo con React
•Télécharger en tant que PPTX, PDF•
2 j'aime•262 vues
Existen automatizaciones y decisiones que ayudan a ahorrar tiempo a los desarrolladores. Tener unas reglas claras de ordenación de carpetas/ficheros reduciendo el tiempo para encontrarlas, utilizar imágenes de docker para tener todos el mismo entorno, auto-generar los servicios/proxies que se comunican con el backend, generar barrels para eliminar el acoplamiento con rutas físicas de los ficheros, utilizar meta-programación, utilizar convenciones y configuraciones que eviten escribir más código. Veremos cómo planteo determinadas automatizaciones en los proyectos en React y daremos un repaso a cómo plantear la configuración de un proyeto de tipo SPA. https://www.youtube.com/watch?v=VH6mTS2Bba4
Recommandé
Recommandé
Contenu connexe
Similaire à Dotnet 2018 Cómo desarrollo con React
Similaire à Dotnet 2018 Cómo desarrollo con React (20)
Plus de Plain Concepts
Plus de Plain Concepts (20)
Dernier
Dernier (11)
Dotnet 2018 Cómo desarrollo con React
- 3. #DotNet2018 @cbastospc Carlos Bastos Pérez-Cuadrado Arquitecto de Front End
- 4. #DotNet2018 “Cuéntame y olvido. Enséñame y recuerdo. Involúcrame y aprendo.” Benjamin Franklin. @cbastospc
- 5. #DotNet2018 @cbastospc Que (¿NO?) vamos a ver hoy Los mundos de yupi
- 6. #DotNet2018 Para cumplir con mi MISIÓN poseo estos PRINCIPIOS tengo mi ESTRATEGIA y lo consigo con TÁCTICAS @cbastospc Qué vamos a ver hoy A la hora de desarrollar con React:
- 8. #DotNet2018Misión: ganar la batalla
- 9. #DotNet2018 @cbastospc Cambian usuarios, sus necesidades, los negocios, las herramientas, las leyes, etc. Misión “En un mundo cambiante, implementar una SPA de forma rápida y segura.” Optimiza los recursos centralizados / descentralizados. Mejora la experiencia de usuario Cuanto antes lleguemos a ofrecerle lo que le aporta valor, mejor.
- 11. #DotNet2018 @cbastospc Misión: ganar la batalla Principios: Código de conducta militar
- 12. #DotNet2018 @cbastospc Principios “Quiero ofrecer la mejor solución lo más rápido posible” Eficacia: hacerlo con la calidad adecuada. Eficiencia: hacerlo con la velocidad requerida.
- 14. #DotNet2018 @cbastospc Misión: ganar la batalla Estrategia: eliminar comandante Principios: Código de conducta militar
- 15. #DotNet2018 • Producto replicable • Anatomía coherente • Granularidad y modularidad • Acepta los cambios • Detecta pronto los errores • Evita el deterioro Estrategia @cbastospc
- 17. #DotNet2018 @cbastospc Misión: ganar la batalla Estrategia: eliminar comandante Táctica: embestir con paladines Principios: Código de conducta militar
- 18. #DotNet2018 @cbastospc Táctica Infraestructura en contenedores • Dependencias auto-contenidas • Eliminar la variable “entorno” • Facilidad de on-boarding / ejecución • Encapsulación del proceso de build • Documenta el entorno Ventajas
- 19. #DotNet2018 Táctica Arquitectura de web components Descripción • React + JSX • Redux • Redux SAGA middleware @cbastospc No seamos más papistas que el papa
- 20. #DotNet2018 @cbastospc Táctica Estructura auto-organizada de proyecto • Recordar pocas reglas. • Evitar mapas mentales • Principio de la mínima sorpresa • Transferencia entre proyectos. • Guidelines + Linting “Más del 80% del tiempo lo pasamos leyendo o buscando, no modificando el código.” Descripción
- 21. #DotNet2018 @cbastospc Táctica Estructura auto-organizada de proyecto • Coherencia Reglas
- 22. #DotNet2018 Táctica Estructura auto-organizada de proyecto Todo son web components Regla @cbastospc
- 23. #DotNet2018 @cbastospc Táctica Barrels auto-generados • No dependes de rutas. • No sabes si es container. • Diccionario de componentes. Ventajas
- 24. #DotNet2018 @cbastospc Táctica UI Controls controlados App G G App G G G G • Utilizar de terceros • Encapsular en componente propio. • TUS convenciones de estructura/naming • Punto de cambios controlado • Frontera “Navegador” controlada Descripción Ventajas
- 25. #DotNet2018 @cbastospc Táctica La navaja suiza de la composición • Hijos conocidos • Tipos de hijos conocidos • Hijos desconocidos • Hijos reconocidos • Herederos 5 Técnicas
- 26. #DotNet2018 @cbastospc Técnica de Hijos conocidos
- 27. #DotNet2018 @cbastospc Técnica de Tipos de hijos conocidos
- 28. #DotNet2018 @cbastospc Técnica de Hijos desconocidos
- 29. #DotNet2018 @cbastospc Técnica de Hijos reconocidos
- 31. #DotNet2018 Táctica Cadena de mando • Mediator: negocio del estado • Observer: Entre components State Container Descripción @cbastospc
- 32. #DotNet2018 @cbastospc BillingApp TopMenu LeftMenu ManageUsers ConfigureUserFilters ShowFilteredUsers Primer nivel Segundo nivel Tercer nivel • Comunicación padre/hijo • Comunicación entre hermanos • Comunicación abuelo/nieto • Comunicación entre primos Táctica Cadena de mando Reglas
- 34. #DotNet2018 @cbastospc View State Api dispatch/subscribe Api State Estado descentralizado • Estado y presentación juntos • Propagar cambios de estado • Fragilidad View Táctica Única fuente de verdad Estado centralizado • Estado y presentación separados • Más complejidad • Mas testeable, depurable
- 35. #DotNet2018 Táctica Única fuente de verdad • Gestión de estado centralizado • Utilizo mi connector (HOC) • Reducers tipo máquina de estados • Mapa de acciones con meta-programación Descripción @cbastospc NO TODO ES ESTADO CENTRALIZADO
- 36. #DotNet2018 @cbastospc Táctica Clientes web api auto-generados • Swagger code gen script de npm • Lee swagger.json • Templates • Genera el api.js • Alias de webpack. • Tests de contrato • DRY Descripción Ventajas
- 37. #DotNet2018 @cbastospc Táctica Habla en la lengua del territorio • La interfaz es un contrato • Evita los mapas mentales. • Proyecta en el Api Client • Proyecta cerca del consumidor SAGA Reducer Container Component Select [ { id: 1, name: ‘Roberto’}, { id: 2, name: ‘Pedro’} ] [ { value: 1, text: ‘Roberto’}, { value: 2, text: ‘Pedro’} ] ¿Dónde hago los .map()? Api Client [ { id: 1, customer: ‘Roberto’}, { id: 2, customer: ‘Pedro’} ] Descripción
- 38. #DotNet2018 Táctica Testing automático Descripción • Testear las SAGAS • Testear los Reducers • Testear las Vistas @cbastospc
- 39. #DotNet2018Testear las vistas en integración. @cbastospc
- 40. #DotNet2018Testear los reducers de forma unitaria @cbastospc
- 41. #DotNet2018Testear las SAGAS con unitarios y de integración. @cbastospc
- 43. #DotNet2018 Thanks and … See you soon! Thanks also to the sponsors. Without whom this would not have been posible.
Notes de l'éditeur
- Rigidez Fragilidad Inmovilidad Viscosidad
- Todos con docker DEV : VOLUMEN PRO: BUILD MULTI-STAGE Estrategias Producto fiable, versionable y replicable
- Estrategias Estructura de proyecto intuitiva Granularidad y modularidad Separar las responsabilidades Hazlo simple, no dupliques, no adivines Controla las fronteras Detectar pronto los errores Todo probado con software
- Estrategias Estructura de proyecto intuitiva Coherencia y consecuencia
- Estrategias Evitar el deterioro
- Estrategias Evitar el deterioro: fragilidad Controla las fronteras
- Estrategias Evitar el deterioro Granularidad y modularidad Separar las responsabilidades
- Estrategias Estructura de proyecto intuitiva Granularidad y modularidad Separar las responsabilidades Hazlo simple, no dupliques, no adivines Controla las fronteras Evitar el deterioro Todo probado con software
- Estrategias Granularidad y modularidad Separar las responsabilidades Hazlo simple, no dupliques, no adivines Controla las fronteras Evitar el deterioro
- Estrategias Controla las fronteras Detectar pronto los errores OPEN API
- Estrategias Evitar el deterioro Todo probado con software
- jEST/ENZYME + Puppeteer Dos patrones: PAGE OBJECT BUILDER