O documento discute a independência no front-end usando GraphQL e Redux. Ele descreve como as tecnologias front-end precisam ser atualizadas frequentemente e como GraphQL e Redux podem ajudar a resolver problemas como reescrever código e manter a independência entre front-end e back-end.

1. Independência no
Front-End com GraphQL
e Redux
@cmilfont @yuriadams

2. 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

4. MVP CVC 2.0
Com o propósito de construir um protótipo de venda de pacotes turísticos
Nosso produto deverá ajudar clientes
Em 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.

5. 2004
-
2007
2010
2011
2013
-
2016
Dojo, Yui,
Sencha (Ext.js)
Backbone,
Angular 1,
Knockout
Ember
React.js, Vue.js,
Angular 2*

11. O que temos hoje

12. Trygve Reenskaug em 1979
https://medium.com/@milfont/os-m%C3%BAsculos-do-javascript-be2b721851b7

13. HTTP (1990) e HTML (1993~)
Um protocolo de mensagem de texto com
linguagem de marcação baseado em árvores pra
formatar esse texto

14. 1995
“PHP é um framework de CGI” Lerdorf, Rasmus

15. Monolithic Architecture
Browser
Database
HTML CSS Javascript
Service 1
DATA ACCESS
Service 2 Service N

16. MVC model 2

17. Frontend + Backend
Database
Javascript
Service NBackendFrontend

18. MVVM
https://medium.com/@milfont/jsx-a-resposta-do-react-pra-resolver-definitivamente-um-problema-99f572316eb5

20. Qual a problematica do
Rest

21. REST
● Resource
● URL
● Verb HTTP
POST /destinations HTTP/1.1
Host: localhost:3000
Content-Type: application/json
{
"image_url" : "https://example.org/pic.png"
}
GET /destinations HTTP/1.1
Host: localhost:3000
Content-Type: application/json
> {
"image_url" :
"https://example.org/pic.png",
"lat" : "9.54",
"lng" : "14.7",
"name" : "Cancún",
}

23. Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html

24. Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html

25. Backend for frontend
http://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html

26. API Backend
API
Externa

29. 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

35. Custom Types - const
GraphQLJSON =
require('graphql-type-js
on');
mapping JSON
retornado do serviço
com a definição no
schema

39. https://www.infoq.com/br/presentations/transformando-um-front-end-legado-em-uma-react-sp
a

47. dispatch

50. estado atual
novo estado

52. https://vuedeux.com/

53. https://medium.com/@brianrudloff/how-to-bind-veux-with-redux-15c567667fb3

55. Obrigado!
Perguntas?