Download to read offline
![Schema
type Company {
id: Int
name:
String
description:
String
users: [User]
}
type User {
id: Int
firstName:
String
age: Int
company:
Company
}](https://image.slidesharecdn.com/bffandgraphql-200116154131/85/Bff-and-GraphQL-29-320.jpg)
Uploaded byAdrian Caetano
Bff and GraphQL
The document outlines a presentation on building effective teams and improving work methodologies through feedback cultures and technical excellence, as shared by Inácio Klassman and Guilherme Guerra. It also discusses the architecture of frontend systems using GraphQL and Backend for Frontend (BFF) to enhance data delivery and user experience, with insights from Adrian Lemes Caetano. Key points include the advantages and challenges of GraphQL, the importance of resilient BFF implementations, and practical applications of these technologies in real-world scenarios.
More Related Content
Bff and GraphQL
- 1.
- 2. Talks 1. Building GreatTeams Inácio Klassman, Coach Engineer Nesta palestra iremos compartilhar experiências reais sobre construir o Dream Team que todas as empresas buscam utilizando cultura de feedback, aprendizagem efetiva, ownership, liderar pelo exemplo, excelência técnica e como transformar o cliente. 2. Retrospectives Guilherme Guerra, Coach Engineer É uma loucura fazer as mesmas coisas e esperar resultados diferentes. Resolver problemas e entregar valor para o cliente, requer mudanças na forma que trabalhamos. 3. GraphQL & BFF - Agregação e Baixa latência o melhor dos 2 mundos Adrian Lemes Caetano, Frontend Architect Nesta talk iremos conversar sobre a importância de uma arquitetura de frontend que garanta uma entrega de dados eficaz para a construção de produtos digitais. Também falaremos de como podemos entregar valor e evitar desperdícios com o uso de GraphQL e BFF, através de nossa experiência com use cases reais.
- 3. GraphQL & BFF- Aggregation and low latency, the best of 2 worlds
- 4. Who am I? ❏Frontend architect at ilegra ❏ Graduated in Analysis and System Development at FATEC Senai ❏ Started in 2012 on IT world ❏ Experience with Arch Front (Angular, React, React Native, Vue, NodeJS, Micro-fronts, SSR, BFF, GraphQL, PWA and others) @adrianlemess
- 5. SOA Interoperability Business Value Reuse bydesign Incremental
- 6. Microservices - theHoly Graal Isolated deploy Horizontal Scalability Time to Market Agnostic technologyIsolated teams
- 7. Multi UIs ❏ Howto provide different user experience to different type of UIs? ❏ Different needs ❏ Difficult to keep cohesive domains
- 8. Business Oriented ❏ Contractsshouldn't be related with specifs UI
- 9. Security ❏ Exposes microservicesto attackers ❏ Decrease the attack surface
- 10.
- 11. BFF - BestFriend Forever Backend for Frontend
- 12.
- 13. BFF Architectural Pattern ❏Intermediate service ❏ Every frontend has it owns backend ❏ Tied coupled with a specific user experience ❏ Make easier to define and adapt API services as the UI required Frontend BackendBFF
- 14.
- 15. Different clients ==different needs ❏ First Painting ❏ Server Side Rendering ❏ Search Engine Optimization ❏ Request frequency ❏ Network payload size ❏ CPU, Memory and Battery Usage
- 16. How can wedevelop? ❏ Developed and maintained by frontend team Java/Kotlin Swift NodeJS
- 17.
- 18.
- 19. Network Data ❏ Cachedata ❏ Minimize the amount of data trafficked with the clientes Frontend BackendBFF
- 20.
- 21.
- 22. Single point offailure ❏ It should be resilient by design with proper implementation of circuit breakers, timeouts, retry etc ❏ Should be properly tested ❏ Required High Availability
- 23.
- 24. Manually data aggregation ❏We have to program the data aggregation
- 25.
- 26. What is? “GraphQL isa query language for APIs and a runtime for fulfilling those queries with your existing data.” https://graphql.org/
- 27.
- 28. GraphQL ❏ Created byfacebook team in 2012 and became open source in 2015 ❏ Query only the data we need ❏ Good fit for data aggregation ❏ Modified resources using mutations ❏ Resources are defined by schemas
- 29. Schema type Company { id:Int name: String description: String users: [User] } type User { id: Int firstName: String age: Int company: Company }
- 30.
- 31.
- 32.
- 33.
- 34. Problems about GraphQL ❏REST can do much of what GraphQL does ❏ GraphQL will make some tasks more complex ❏ It’s easier to use a web cache with REST (HTTP) than with GraphQL ❏ You could have performance issues with GraphQL queries ❏ The way GraphQL schemas work could be a problem to multiple types of UI ❏ Managing complexity
- 35. BFF x GraphQL ❏Specific Users ❏ Building solutions ❏ Very low data usage ❏ Agility ❏ Full Stack team ❏ General users ❏ Projecting capabilities ❏ Low data usage ❏ Stability
- 36.
- 37. BFF and GraphQL ServiceA Service B Service C BFF BFF Frontend Web Frontend Mobile
- 38. Our perspective ❏ Goodfit for on demand architecture ❏ Each service created may be available on GraphQL to aggregation ❏ Don’t lose latency to simple requests ❏ Aggregation when we need aggregation
- 39. Our perspective ❏ Orphanlogic stay on BFF ❏ Flexibility ❏ Services oriented only by business ❏ Services not exposed ❏ Attending multiple types of client
- 40.
Editor's Notes
- #6 Entregar valor ao negócio Interoperabilidade intrisseca, qualquer linguagem pode usar esse serviço Reuse by design e not accident mas o Mais importante é ser orientado a negócio Desenvolvimento incremental Servico com uma granularidade maior envolvendo mais de um domínio
- #7 Um sabor de SOA Falar de cada ponto Por ser menor a granularidade podemos cair em algumas armadilhas
- #13 Iniciado pela TW em
- #15 Agregação de dados e chamar multiplos endpoints Adaptar algum contrato ou modelo de dado específico pra um cliente, uma mensagem de erro adaptada Regras de negócio ficam nos serviços e Lógicas órfans apenas
- #16 Quando que o BFF torna-se necessário? Times de front não precisam depender diretamente do time de back Explicar o que e o first painting e que não e um problema do mobile porque eu ja tenho a UI ali e posso interagir com ela no momento que eu abrir o aplicativo Explicar search engine optimzation - podemos construir aplicacoes ricas e dinamicas com JavaScript, mas a estrutura dela e semantica e importante, pois os bots das Engine de busca precisam entender e interpretar nosso site pra rankear a pagina e isso e algo que no mobile não nos preocupamos
- #21 Falar de DTA produtividade Definir contratos Times trabalham em paralelo
- #28 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.
- #30 Nesse exemplo claramente o usuário não é o Julius porque ele só pode ter 1 emprego
- #31 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.
- #32 Nossas entidades
- #33 Como buscamo os dados
- #35 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.
- #36 Se formos analisar, parece que o graphQL ele é a solução ideal para tudo, parece ser mais completo que BFF. BFF Specif user entregando experiências únicas remodelando ou adaptando APIs Da autonomia ao time de frontend desenvolver soluções assertivas para cada experiência É a solução pra trafegar o menor dado possível, podemos ter um get sem nada que retorna exatamente o payload que queremos Agilidade pois o time de frontend não depende do time de backend pra certas coisas e o mock no BFF é mais fácil de alterar Habilita desenvolvimento full stack pois podemos escrever código em JS no front e no bff GraphQL GraphQL informamos quais recursos queremos disponibilizar e usa quem quer, é o oposto de fazer algo especifico pra um client GraphQL projetamos o que queremos disponibilizar através dos schemas Trafegamos apenas os dados que o usuário requisita e não precisa fazer N requests no front, porém diferente de uma simples request, tem um overhead, cada request vai ser maior porque temos que passar a query do graphql Usamos GraphQL pra recursos estáveis, queremos fornecer recursos pra serem usados e não ser orientado ao que o client necessita
- #39 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.
- #40 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.
- #41 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.
- #42 different locations in the world Network would become the bottleneck then, probably. So you’d want to minimize the amount of data you send between the nodes. GraqhQL uses json by default, which is not as optimized as a custom binary protocol. for 3rd parties They would have to use GraphQL clients which is extra learning for the them if they haven’t used it before. node-to-node communication The main advantage of GraphQL, at least for me, is that it is somewhat future-proof, such that I can change the code on the backend, and my clients (iphone app) won’t need to be updated, their queries would still work. You probably won’t need that for node-to-node communications since you control the nodes’ code versions.