JSFoo Chennai 2020

JSFoo Chennai 2020

On component architecture, performance, security for front-end, and emerging trends

Saibaba

@nightraiser

GraphQL for front-end engineering

Submitted Mar 3, 2020

GraphQL is “A query language for your api ” built with three basic design principles

  1. Define your data
  2. Ask for what you what
  3. Get predictable results
    It was built by Facebook to tackle specific scenarios but the standard itself has grown to a level of maturity that it was open sourced and then gained its popularity among the community

toGraphQL is a hands-on workshop aims to explore the process of adding graphql to an existing REST implementation.

Outline

Hands-on kicks off with a presentation of basics of GraphQL followed by showcasing a project built using MERN stack. As the session progresses we would implement graphql both on front-end and backend to make the system compatible with graphql.

###Workshop Anatomy

  1. Presentation covering - (Duration : 30 mins)
    What is GraphQL ?
    Design Principles
    Why should I give it a thought ?
    Who is already using it ?
    restAPI.toGraphQL()

  2. Hands on

Cloning the sample repos and running the applications - (Duration: 20 mins)
Run through exisiting implementation of an Ecommerce site sample built using React and Node JS - (Duration: 30 mins)

Implement queries of GraphQL on Backend - (Duration: 25 mins)
Integrate GraphQL on Backend - (Duration: 15 mins)
Integrate GraphQL on UI - (Duration: 30 mins)
Use Queries on UI - (Duration: 30 mins)

Implement mutations on Backend - (Duration: 30 mins)
Use implementations on UI - (Duration: 30 mins)
Some tips and tricks (Optional) - (Duration: 25 mins)

###TakeAways of Workshops

  • Understanding of GraphQL
  • Thinking apis in GQL way
  • Implement GraphQL in an exisiting application using the existing REST apis
  • Bootstrap a application using GraphQL

###Reference Links

https://graphql.org/
https://www.apollographql.com/docs/apollo-server/
https://www.apollographql.com/docs/react/api/react-hooks/

Requirements

  1. Laptops with latest Node and npm installed.
  2. Code editor
  3. Browser

Speaker bio

I am a fullstack developer. I have been working on Javascript technologies from past 3 years. Mainly on react, react native and node js. I love code, poetry and poetic code What makes code poetic to me is the sheer simplicity, which make the code more readable, relatable.

Slides

https://docs.google.com/presentation/d/1T2A_lNisasla_1LWgQZ3zrd5CJcEM6iuwGeGrAs3h54/edit?usp=sharing

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more