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?