Exploring trees 🌳
& graphs 🌌

from the world of front-end development

 

Speaker: Young Bae / younggratia@gmail.com

Table of Contents

  • Self Introduction
  • Why this topic?
  • HTML DOM
  • GraphQL API
  • Data Visuazliation

Hello!

Why this topic?

Image Source: WallpaperVortex

source: https://en.wikipedia.org/wiki/Tree_(data_structure)

source: https://en.wikipedia.org/wiki/Graph_theory

HTML DOM

source: https://web.dev/articles/critical-rendering-path/constructing-the-object-model

GraphQL API

{
  viewer {
    followers(first: 10) {
      nodes {
        login
        followers(first: 10) {
          nodes {
            login
          }
        }
      }
    }
  }
}

source: https://docs.github.com/en/rest/about-the-rest-api/comparing-githubs-rest-api-and-graphql-api?apiVersion=2022-11-28

Think of your GraphQL schema as an expressive shared language for your team and your users. To build a good schema, examine the everyday language you use to describe your business.

source: https://graphql.org/learn/thinking-in-graphs/

On the client, this creates a pattern similar to Object-Oriented Programming: types that reference other types.

source: https://graphql.org/learn/thinking-in-graphs/

Data Visualization

source: https://observablehq.com/@d3/gallery

source: https://observablehq.com/@d3/gallery

There are four key reasons behind its popularity:

* Intuitive * Fast * Scalable * Insightful

source: https://cambridge-intelligence.com/graph-visualization-software/

Summary

  • Finding the trees and graphs in the FE world is a fun activity.
  • The real fun starts when you connect the concepts you learn from the textbooks.

Thank you 👋

Made with Slides.com