independência no front-end com graphql e redux · facilidade de customizar o pacote. oferecendo um...
TRANSCRIPT
Independência no Front-End com GraphQL
e Redux
@cmilfont @yuriadams
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
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.
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
O que temos hoje
Trygve Reenskaug em 1979https://medium.com/@milfont/os-m%C3%BAsculos-do-javascript-be2b721851b7
HTTP (1990) e HTML (1993~) Um protocolo de mensagem de texto com
linguagem de marcação baseado em árvores pra formatar esse texto
1995“PHP é um framework de CGI” Lerdorf, Rasmus
Monolithic Architecture
Browser
Database
HTML CSS Javascript
Service 1
DATA ACCESS
Service 2 Service N
MVC model 2
Frontend + Backend
Database
Javascript
Service NBackendFrontend
MVVM
https://medium.com/@milfont/jsx-a-resposta-do-react-pra-resolver-definitivamente-um-problema-99f572316eb5
Qual a problematica do Rest
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",}
Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html
Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html
Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html
API Backend
API Externa
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
Custom Types - const GraphQLJSON = require('graphql-type-json');
mapping JSON retornado do serviço com a definição no schema
https://www.infoq.com/br/presentations/transformando-um-front-end-legado-em-uma-react-spa
dispatch
estado atual
novo estado
https://vuedeux.com/
https://medium.com/@brianrudloff/how-to-bind-veux-with-redux-15c567667fb3
Obrigado!Perguntas?