Building a simple GraphQL client in Elm for Elm

Elm is a functional programming language for creating web applications. Elm is commonly known for its static type checking abilities and Elm architecture (out of many other amazing things) which is a simple pattern for architecting webapps.

GraphQL is a query language spec for APIs defined by Facebook. It has changed the dynamics of front-end development with an array of powerful features. One such feature is declarative data fetching where you define what you would like to fetch and server responds with the data in the same format it is requested.

In this talk, we will look at

  1. Sneak peek into Elm Type System
  2. What is GraphQL and benefits of it over other data fetching methods.
  3. Demo on how to write queries without custom DSL
  4. Writing types to make the above process little neat and fun
 
 

Outline/Structure of the Talk

  • Introduction to Elm
    • What is Elm?
    • Elm Architecture
    • Demo
    • Sneak peek into Elm Types
  • GraphQL
    • What is GraphQL?
    • Anatomy of a query
    • Sneak peek into the features and comparison with REST
  • Setting up a GraphQL server and writing our first GraphQL query in Elm
  • Bringing the data into Elm Types
  • Writing a custom DSL to make the above process smoother

Learning Outcome

By the end of the talk, you will:

  • Know Elm and be able to build web applications using it
  • Have better understanding of Elm type system and how to write your own custom DSL to query GraphQL
  • Be in a position to evaluate GraphQL and/or Elm for your next project

Target Audience

Folks who are exploring GraphQL and how it can be used with Elm

Prerequisites for Attendees

A basic understanding of elm type system would be plus - https://guide.elm-lang.org/types/

schedule Submitted 2 months ago

Public Feedback

comment Suggest improvements to the Speaker
  • Deepti Tomar
    By Deepti Tomar  ~  1 month ago
    reply Reply

    Hello Karthik,

    Thanks for your proposal! This is an interesting subject.

    In order to help the program committee to understand your presentation style, can you please upload a video of your past presentations? If you don't have one, can you record a small 1 mins trailer of your talk and share the link to the same? 

    Thanks,

    Deepti

    • Karthik Venkateswaran
      By Karthik Venkateswaran  ~  1 month ago
      reply Reply

      Thank you Deepti for taking a look at the proposal. I don't have any past presentations which is recorded. I will make it and try to send in couple of days

       

      Thanks

      Karthik

      • Karthik Venkateswaran
        By Karthik Venkateswaran  ~  1 month ago
        reply Reply

        Hello Deepti,

        Here is a sneak peek of what I would like to talk.

        https://vimeo.com/361758688

        Hope this should do it

        Regards

        Karthik

        • Karthik Venkateswaran
          By Karthik Venkateswaran  ~  3 weeks ago
          reply Reply

          Hello Deepti,

          Haven't heard from you regarding this after our call 3 weeks back. Any update on this?

          --

          Karthik

  • Saurabh Nanda
    By Saurabh Nanda  ~  1 month ago
    reply Reply

    Karthik,, would it be possible to provide a snippet of the DSL (to query GraphQL) that  you are referring to?

    • Karthik Venkateswaran
      By Karthik Venkateswaran  ~  1 month ago
      reply Reply

      Saurabh,

      Lets say we would like to make the following GraphQL Query

      nameQuery : String
      nameQuery =

          """

              query {

                  name

              }

          """

      This can be sent directly to the server and the response will be decoded appropriately with bunch of value decoders.

      A more contrived example of it using a DSL will look like below

      Lets say we have defined some types as below

      type alias Node =
      { name : String
      , query : Query
      }

      type Query = Query (List Node)

      And the query now becomes

      nameQuery : Query

      nameQuery  = Query (Node "name" (Query []))

      This will lead to the same query as above

      `

      query {
          name
      }

      `

      This can be improved alot by generating functions based on your schema which will generate the above functions, `nameQuery` for example which can be readily used in the app code.

      Hope this was useful


  • Liked Andrea Leopardi
    keyboard_arrow_down

    Andrea Leopardi - Papers We Love - Elixir Edition

    Andrea Leopardi
    Andrea Leopardi
    Core Team Member
    Elixir Lang
    schedule 3 months ago
    Sold Out!
    20 Mins
    Talk
    Beginner

    Elixir is a modern programming language built for concurrency, robustness, and maintainability. Although the Elixir team comes from “industry” backgrounds, the history of Elixir is full of cases where the team has reached for existing research in order to solve problems arising with the language. For example, we based our implementation of a code formatter on a series of papers on pretty printing and formatting code. In this talk, I’d like to go share our learnings and experiences as a bunch of industry folks getting help from academia to approach and tackle real-world problems and come up with real-world solutions.

  • Liked Mangala Kader
    keyboard_arrow_down

    Mangala Kader - Understanding the pitfalls in Erlang / Elixir and steering clear from them

    45 Mins
    Talk
    Beginner

    Erlang has been in production for more than 30 years and a highly battle-tested robust system, which is being used by everybody including Telecom systems that provides 99.99% uptime. Elixir has been built on top of Erlang overcoming the shortcomings of the language and also using meta-programming, it has opened a new paradigm of looking at the language itself. I want to show what Elixir is to the audience and minute nuances that every experienced or inexperienced developer should be aware of before jumping into the magical erlang and elixir world.