Elixir Brasil - Absinthe - Graphql + Phoenix + Elixir

Transcript

1. @anapbastos ANA BASTOS github.com/anabastos anabastos.me Software Developer na Quanto
2. GRAPHQL & ABSINTHE Construindo API's flexíveis e escaláveis com
3. GRAPHQL
4. QUERY LANGUAGE
5. NOVO STANDARD DE APIs
6. DATA FETCHING DECLARATIVO
8. “What you want is what you get”
9. GRAPHQL desenvolvida em 2012 no FACEBOOK
10. OPEN SOURCE em 2015
11. JAVASCRIPT PYTHON RUBY CLOJURE PHP JAVA C# GO SCALA ERLANG ELIXIR
13. Songs Followers 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum
14. HTTP GET users/123 Songs Followers 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum
15. HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/posts RESPONSE posts { { id: .. music: {..}, replies: {..}, likes: {..}, shares: {..}, … }, ... } Jovelli How I Feel
16. HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123 RESPONSE a { name: .., accountName: .., nickname: Ana Luiza, email: {..}, bio: Lorem Ipsum avatar: {..}, birthday: .., city: .., location: {..} ... }
17. HTTP GET users/123/followers RESPONSE followers { { name: .., accountName: .., Nickname: Vilmar, email: {..}, avantar: .. … }, ... } Songs 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum Followers
18. Followers 1.239 Jovelli How I Feel
19. TRATAMENTO DE DADOS
20. OVERFETCHING
21. UNDERFETCHING
22. ENDPOINTS ENDPOINTS ENDPOINTS
23. HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} ] } BODY { userName avatar bio followers(first: 3) { avatar } posts { artist name }
24. DECLARATIVO
25. • Construir e enviar request • Receber e parcear resposta do servidor • Salvar dados • Mostrar dados na UI • Descreve os dados necessários pra UI • Mostra dados na UI REST
26. ELIXIR x GRAPHQL
28. • CORRETO • FACIL DE USAR • IDIOMATICO • CONCORRENTE • PERFORMATICO • ORIENTADO A COMUNIDADES
29. PHOENIX
30. {:absinthe_ecto, "~> 0.1.0"}, {:absinthe_plug, "~> 1.4.0"}, {:absinthe, "~> 1.4.0"}, HEX
31. DECLARATIVO REATIVO REAL-TIME
32. CARGOSENSE
33. 2 anos de existencia 1 ½ em produção
34. GET POST PUT DELETE PATCH HEAD TRACE OPTIONS
35. POST endpoint graphql/ BODY(JSON) { query: “...”, operationName: “...”, variables: {“...”: “...”} }
36. pipeline :api do plug :accepts, ["json"] end scope "/" do pipe_through :api forward "/graphql", Absinthe.Plug, schema: AppWeb.Schema forward "/graphiql", Absinthe.Plug.GraphiQL, schema: AppWeb.Schema, interface: :simple, context: %{pubsub: MusicWeb.Endpoint} end
37. CLIENT SERVER GRAPHQL DATA RESOLVE BODY JSON { query: {..} variables:{..} } { data: {..} errors:{..} }
38. BACK-END FRONT-END
39. FORTEMENTE TIPADO
40. FUNCÃO DO ULTIMO TIPO QUE RETORNA OUTRO TIPO
41. UMA FIELD PODE PRODUZIR OUTRA SELECAO DE FIELDS
42. ROOT TYPE TRACK ARTIST ALBUM USER STRING NUMBER
43. TYPES object :track do field :id, :id field :title, :string field :artist, :artist field :album, :album field :producer, :integer field :duration, :integer end object :artist do field :id, :id field :name, :string field :albums, list_of(:album) field :tracks, list_of(:tracks) end
44. CUSTOM SCALA TYPES
45. @desc """ The lowercase string scalar """ scalar :lowstring do serialize &to_string/1 parse &parse_lowercase/1 end
46. mutation { user(userName: "name", password: “123”) { id publishedAt } } object :artist do field :id, :id field :name, :string field :username, :lowstring end
47. GRAFOS
48. “EDGES”
49. SCHEMAS
50. “SCHEMAS DRIVEN”
51. SCHEMAS DESCREVEM OS GRAFOS
52. DESCREVEM O CONTRATO ENTRE O FRONT E O BACK
53. schema "artists" do field :name, :string has_many :albums, Album has_many :tracks, Track timestamps end schema "albums" do field :title, :string field :release_date, Ecto.Date belongs_to :artist, Artist many_to_many :genres, Genre, join_through: "albums_genres" has_many :tracks, Track timestamps end
54. O RELACIONAMENTO ENTRE OS DADOS
55. schema "artists" do field :name, :string has_many :albums, Album has_many :tracks, Track timestamps end schema "albums" do field :title, :string field :release_date, Ecto.Date belongs_to :artist, Artist many_to_many :genres, Genre, join_through: "albums_genres" has_many :tracks, Track timestamps end
56. TYPE CHECK EM TEMPO DE COMPILACÃO
57. snake_case X camelCase
58. SCHEMAS DEPRECATION
59. query do field :old_item, :item, deprecate: true field :another_old_item, :item, deprecate: "still too old" end
60. config.exs config :absinthe, adapter: Absinthe.Adapter.TheAdapterName
61. RESOLVER FUNCTIONS
62. QUERY
63. RESPONSE [ { ‘name’: “ABBA”, }, { ‘name’: “Amy Winehouse” , }, { ‘name’: “Ana Carolina” , } ] CORPO { artists { name } }
64. HIERARQUICO
65. RESPONSE { name: “Charlie Brown Jr.” albums: { { title: “Preço Curto Prazo Longo”, release_year: 1999 tracks { { title: “União” }, .. } } } REQUEST { artists { name albums { title tracks { title } } } }
66. ARGUMENTOS
67. RESPONSE { ‘title’: “I will survive” , ‘duration’: 3000, } CORPO { tracks(id: 123422){ title duration } }
68. RESPONSE { name: “Carolina de Oliveira Lourenço”, Bio: “Cantora e Compositora Brasileira” age: 24 } REQUEST { artist(name: “MC Carol”) { name bio age } }
69. FILTER
70. RESPONSE [{...},{...},{...},{...},{...} ,{...},{...},{...},{...},{...}] REQUEST user { followers( first: 10, orderBy: { field: CREATED_AT, direction: DESC }){ name } }
71. PAGINATION
72. RESPONSE [{...},{...},{...},{...},{...} ,{...},{...},{...},{...},{...}] REQUEST user { followers( first: 10, offset: 10){ name totalCount } }
73. posts(first:2 offset:2) posts(first:2 after:$postId) posts(first:2 after:$postCursor)
74. ALIAS
75. RESPONSE { popMusics { { name: ‘Swish Swish’ }, { name: ‘PokerFace’ }, ... } } REQUEST { popMusics: musics(genre: Pop){ name } }
76. VARIAVEIS
77. RESPONSE { user { name: “Ana” } } REQUEST query getUserNameById( $userId: String) { user(id: $userId): { name } } VARIABLE { userId: ‘21312321’ }
78. DIRETIVAS
79. @include
80. REQUEST query UserWithFotos( $withPhotos = Boolean) { user { name, age, photos @include(if: $withPhotos) } } VARIABLE { ‘withPhotos’: true }
81. @skip
82. REQUEST query UserWithFotos( $noPhotos = Boolean) { user { name, age, photos @skip(if: $noPhotos) } } VARIABLE { ‘noPhotos’: false }
83. ESTAO PRA VIR...
84. @defer { user { posts { author { name } comments @defer { author { name } } message } } }
85. @stream { user { posts @stream { author { name } comments @defer { author { name } } message } } }
86. @live { user { posts @live { author { name } comments @defer { author { name } } message } } }
87. REAL TIME
88. MUTATION
89. delete edit create
90. REQUEST mutation deletePost($postId: String) { deletePost(post: $postId){ content } } VARIABLE { content { .. } }
91. RESPONSE { ‘createPost’ { ‘id’: “123” ‘content’: { ... } } } REQUEST mutation createPost($post: Post) { createPost(content: $post){ id content } } VARIABLE { content { ... } }
92. SUBSCRIPTION
93. RESPONSE { ‘createPost’ { ‘content’: { ... } } } REQUEST subscription createPost($post: Post) { createPost(content: $post){ content } } VARIABLE { content { ... } }
94. MODELAGEM
95. “EDGES”
96. user { _id name } post { userId content liked { _id name } }
97. USER POST Ponto final?
98. USER POST user { _id name post { userId content liked { _id name } }
99. USER POST POST POST USER USER POST POST POST O único limite p/ percorrer um grafo são os próprios dados
100. user { _id name post { userId content liked { _id name post { liked { name } } } }
101. SECURITY
102. • TIMEOUT • ANALISANDO O AST DA QUERY • COMPLEXITY ANALYSIS
103. USER POST POST POST USER USER POST POST POST Maximum depth: 3
104. CACHING
105. CLIENTS
106. PERFORMANCE
107. DATALOADER
108. {:dataloader, "~> 1.0.0"} object :author do @desc "Author of the post" field :posts, list_of(:post), resolve: dataloader(Blog) end
109. GRAPHiQL
110. SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO
111. QUANDO USAR?
112. • DIFERENTES CLIENTES: Há a necessidade de criar várias versões de dados diferentes para múltiplos clientes. • PREPARAR DADOS: Há muito esforço do server preparar os dados e do cliente para parsea-los. • LINKAR DADOS: Quando os dados mudam com muita frequência e precisam estar linkados sempre.
113. howtographql.com/ (Basic / Elixir) graphql.org/learn/ github.com/chentsulin/awesome-g raphql
114. graphql-elixir graphql-erlang
115. #absinthe-graphql graphql-weekly.com
116. OBRIGADA :) speakerdeck.com/anabastos
117. DÚVIDAS? saq@anabastos.me speakerdeck.com/anabastos