![Page 1: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/1.jpg)
Independência no Front-End com GraphQL
e Redux
@cmilfont @yuriadams
![Page 2: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/2.jpg)
No mundo Front-End (Web e Mobile) precisamos reescrever tudo a cada
2 anos.
Em um mercado que o produto vive mais que a tecnologia
![Page 3: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/3.jpg)
![Page 4: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/4.jpg)
MVP CVC 2.0Com o propósito de construir um protótipo de venda de pacotes turísticosNosso produto deverá ajudar clientesEm resolver o problema de encontrar resultados com informações completas e facilidade de customizar o pacote.Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o filtro de busca até o checkout e compra.E saberemos se nosso produto funciona quando aumentarmos a conversão do caminho entre o resultado/detalhe e melhoria em números da página de detalhe do pacote.
![Page 5: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/5.jpg)
2004 -
2007
2010
2011
2013 -
2016Dojo, Yui,
Sencha (Ext.js)
Backbone, Angular 1, Knockout
Ember
React.js, Vue.js, Angular 2*
JS Frontend Libs, frameworks, Toolkits, etc over the years
![Page 6: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/6.jpg)
![Page 7: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/7.jpg)
![Page 8: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/8.jpg)
![Page 9: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/9.jpg)
![Page 10: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/10.jpg)
![Page 11: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/11.jpg)
O que temos hoje
![Page 12: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/12.jpg)
Trygve Reenskaug em 1979https://medium.com/@milfont/os-m%C3%BAsculos-do-javascript-be2b721851b7
![Page 13: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/13.jpg)
HTTP (1990) e HTML (1993~) Um protocolo de mensagem de texto com
linguagem de marcação baseado em árvores pra formatar esse texto
![Page 14: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/14.jpg)
1995“PHP é um framework de CGI” Lerdorf, Rasmus
![Page 15: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/15.jpg)
Monolithic Architecture
Browser
Database
HTML CSS Javascript
Service 1
DATA ACCESS
Service 2 Service N
![Page 16: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/16.jpg)
MVC model 2
![Page 17: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/17.jpg)
Frontend + Backend
Database
Javascript
Service NBackendFrontend
![Page 18: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/18.jpg)
MVVM
https://medium.com/@milfont/jsx-a-resposta-do-react-pra-resolver-definitivamente-um-problema-99f572316eb5
![Page 19: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/19.jpg)
![Page 20: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/20.jpg)
Qual a problematica do Rest
![Page 21: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/21.jpg)
REST● Resource● URL● Verb HTTP
POST /destinations HTTP/1.1Host: localhost:3000Content-Type: application/json
{ "image_url" : "https://example.org/pic.png"}
GET /destinations HTTP/1.1Host: localhost:3000Content-Type: application/json
> { "image_url" : "https://example.org/pic.png", "lat" : "9.54", "lng" : "14.7", "name" : "Cancún",}
![Page 22: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/22.jpg)
![Page 23: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/23.jpg)
Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html
![Page 24: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/24.jpg)
Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html
![Page 25: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/25.jpg)
Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html
![Page 26: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/26.jpg)
API Backend
API Externa
![Page 27: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/27.jpg)
![Page 28: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/28.jpg)
![Page 29: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/29.jpg)
GraphQL● Declarative data fetching specification● Query Language● Provide a common interface between the client and the server ● Is NOT a Protocol● Is NOT a data interchange format● Hierarchical● Strongly-typed● Not Language specific● Compatible with any backend
![Page 30: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/30.jpg)
![Page 31: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/31.jpg)
![Page 32: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/32.jpg)
![Page 33: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/33.jpg)
![Page 34: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/34.jpg)
![Page 35: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/35.jpg)
Custom Types - const GraphQLJSON = require('graphql-type-json');
mapping JSON retornado do serviço com a definição no schema
![Page 36: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/36.jpg)
![Page 37: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/37.jpg)
![Page 38: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/38.jpg)
![Page 39: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/39.jpg)
https://www.infoq.com/br/presentations/transformando-um-front-end-legado-em-uma-react-spa
![Page 40: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/40.jpg)
![Page 41: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/41.jpg)
![Page 42: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/42.jpg)
![Page 43: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/43.jpg)
![Page 44: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/44.jpg)
![Page 45: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/45.jpg)
![Page 46: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/46.jpg)
![Page 47: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/47.jpg)
dispatch
![Page 48: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/48.jpg)
![Page 49: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/49.jpg)
![Page 50: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/50.jpg)
estado atual
novo estado
![Page 51: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/51.jpg)
![Page 52: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/52.jpg)
https://vuedeux.com/
![Page 53: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/53.jpg)
https://medium.com/@brianrudloff/how-to-bind-veux-with-redux-15c567667fb3
![Page 54: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/54.jpg)
![Page 55: Independência no Front-End com GraphQL e Redux · facilidade de customizar o pacote. Oferecendo um serviço de detalhamento geográfico dos produtos associados ao pacote desde o](https://reader035.vdocument.in/reader035/viewer/2022070920/5fb8e640718df419cb0ad608/html5/thumbnails/55.jpg)
Obrigado!Perguntas?