I've decided to create a list of top resources to learn for two modern and trending technologies after checking results of [The stage of Javascript 2018 Survey](https://2018.stateofjs.com). The survey was completed by 20k users. React is, of course, the most popular among front end frameworks.

![react](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/react-popularity.webp)

GraphQL is the top wanted to learn technology.

![graphql](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/graphql-1732202384090.webp)

## Clients

* [Apollo GraphQL ](https://github.com/apollographql/apollo-client): A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

![apollo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/apollo.webp)

* [Relay Modern](https://relay.dev/): A JavaScript framework for building data-driven React applications

![replay](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/relay.webp)

* [AppSync](https://github.com/awslabs/aws-mobile-appsync-sdk-js): JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native

![appsync](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/appsync.webp)

* [FormidableLabs - urql](https://github.com/urql-graphql/urql): A highly customizable and versatile GraphQL client for React

![urql](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/urql.webp)

* [Graphql.js](https://github.com/f/graphql.js):A Simple and Isomorphic GraphQL Client for JavaScripy

![graphQljs](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/graphqljs.webp)

## Tutorials

* React
  * [A complete React with GraphQL Tutorial](https://www.robinwieruch.de/react-with-graphql-tutorial/)
  * [A complete React with Apollo and GraphQL Tutorial](https://www.robinwieruch.de/react-graphql-apollo-tutorial/)
  * [React + Apollo Tutorial](https://www.howtographql.com/react-apollo/0-introduction/)
  * [React + Relay Tutorial](https://www.howtographql.com/react-relay/0-introduction/)

[https://www.youtube.com/watch?v=XeALXh37WeU](https://www.youtube.com/watch?v=XeALXh37WeU)

[https://www.youtube.com/watch?v=gF-peiFjG0o](https://www.youtube.com/watch?v=gF-peiFjG0o)

[https://www.youtube.com/watch?v=7giZGFDGnkc](https://www.youtube.com/watch?v=7giZGFDGnkc)

[https://www.youtube.com/watch?v=kXH2dbnHYA0](https://www.youtube.com/watch?v=kXH2dbnHYA0)

* React Native
  * [Code an App With GraphQL, React Native, and AWS AppSync: The API](https://code.tutsplus.com/code-an-app-with-graphql-and-react-native--cms-30511t)
  * [Code an App With GraphQL, React Native and AWS AppSync: The App](https://code.tutsplus.com/code-an-app-with-graphql-react-native-and-aws-appsync-the-app--cms-30569t)
  * [Building Chatty](https://medium.com/react-native-training/building-chatty-a-whatsapp-clone-with-react-native-and-apollo-part-1-setup-68a02f7e11): A WhatsApp clone with React Native and Apollo

[https://www.youtube.com/watch?v=33qP1QMmjv8](https://www.youtube.com/watch?v=33qP1QMmjv8)

[https://www.youtube.com/watch?v=nyE6shIRzxM](https://www.youtube.com/watch?v=nyE6shIRzxM)

## Developer Tools

* [[[GraphQL Playground](/graphql-playground)](/graphql-playground)](https://github.com/graphql/graphql-playground): Powerful [GraphQL IDE](/graphql ide) built on top of [GraphiQL](/graphql-playground)

![GraphQL Playground](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/graphql-playground.webp)

* [[GraphiQL](/graphql-playground) Online](https://cloud.hasura.io/public/graphiql): An online version of [GraphiQL](/graphql-playground) with a configurable endpoint and headers.
* [GraphQL Editor](https://graphqleditor.com): a visual graphql editor that allows you to visualize graphql schema and create fake backend out of schema.![GraphQL Editor](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/editor-vold.webp)
* [apollo-tooling](https://github.com/apollographql/apollo-tooling): Tooling for development and production Apollo workflows
* [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator): GraphQL code generator with flexible support for custom templates

![gcg](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/gcg.webp)

* [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql): Check your GraphQL query strings against a schema.

![eslint](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/eslint.webp)

* Apollo Client Developer Tools: Chrome extension for Apollo Client developer tools

![apollo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/apollo-chrome.webp)

* [Relay DevTools](https://chrome.google.com/webstore/detail/relay-devtools/oppikflppfjfdpjimpdadhelffjpciba): A Chrome Extension that creates a Relay tab in the developer tools interface for debugging apps in Chrome

![replay](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/relay-chrome.webp)

* [Relay Devtools Electron](https://www.npmjs.com/package/relay-devtools): Standalone Relay DevTools App for debugging Relay outside Chrome

Best resources to learn React & GraphQL

[The State of JavaScript](https://stateofjs.com/) is a survey created and maintained by [Sacha Greif](https://twitter.com/sachagreif), [Raphael Benitte](https://twitter.com/benitteraphael) & [Michael Rambeau](https://twitter.com/michaelrambeau). The survey collects data from over **20,000 developers**, who are asked questions regarding front-end frameworks, libraries and the part that interests us the most ... the Data Layer which of course includes the [GraphQL](https://graphql.org/) and its derivatives such as Apollo or Relay.

#### Data layers report

The data layer regroups all the technologies used to transmit and manage data. It's a vast category where many approaches compete to make a tricky problem more approachable. The users were asked about their experience and knowledge of such technologies as [Redux](https://redux.js.org/), [Apollo](https://www.apollographql.com/), [MobX](https://mobx.js.org/), [Relay](https://relay.dev/) & [GraphQL](https://graphqleditor.com). Let's take a look at the responses from last year (2018) surveys:

#### GraphQL's popularity

As you can see on a chart below (hopefully), only 7.1% of the respondent has never heard of GraphQL (comparing to 36.% in 2016, and 17.9% in 2017). The 62.5% declare that they would like to learn the GraphQL, **20.4% used it and would use again** (which is a double growth comparing to 2017), and only 1.3% have already given it a try, but would not use it again.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/pop-1730840624708.webp)Source: [stateofjs.com](https://2018.stateofjs.com)

#### Most like aspects of GraphQL

The developers who declared that they *“used it and would use again”*, when asked about the most liked aspects of GraphQL picked the below top3:

* elegant programming style & patterns
* growing popularity
* powerful tooling (i.e. [GraphQL Editor](https://graphqleditor.com/))

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/likedfor-1730840635419.webp)

##### Source: [stateofjs.com](https://2018.stateofjs.com)

#### Most disliked aspects of GraphQL

The developers who declared that they *“used it and would not use again”*, when asked about the most disliked aspects of GraphQL picked:

* high complexity
* clumsy programming style,
* hard learning curve

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/disliked-1730840648077.webp)Source: [stateofjs.com](https://2018.stateofjs.com)

#### GraphQL Usage

The survey showed that **20.3% of respondents have used GraphQL** and would do it again for future projects. Below map represent the distribution of users enjoying [GraphQL](https://graphql.org/). Countries with the highest ratio are shown in red, those where it's lower are displayed in blue. Countries with less than 20 respondents were omitted.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/map-1730840662702.webp)

##### Source: [stateofjs.com](https://2018.stateofjs.com)

#### The summary

After analyzing over **20 000 surveys** the authors have put them into a quadrant chart where have four groups:

| Recommendation | Tech                                                                                                                                                                                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Adopt**      | [Redux](https://redux.js.org/) - it has very high usage & satisfaction rates, which makes it a safe technology to adopt.                                                                                                                                                  |
| **Assess**     | [GraphQL](https://graphql.org/), [Apollo](https://www.apollographql.com/), [MobX](https://mobx.js.org/) - they have high satisfaction, but still relatively low usage rate. These are the technologies worth following as they soon might transform into the big players. |
| **Avoid**      | [Relay](https://relay.dev/) - low usage, combined with low satisfaction makes Relay a technology to avoid (at least right now).                                                                                                                                           |
| **Analyze**    | NONE - high usage despite low satisfaction if being used you should consider reassessment.                                                                                                                                                                                |

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/summary-1730840697678.webp)

##### Source: [stateofjs.com](https://2018.stateofjs.com)

The State of GraphQL

In this short read, I will try to break down for you the concept of GraphQL fragments. What are the fragments in GraphQL and how you can benefit from using them?

### GraphQL Fragments

In [GraphQL](https://graphql.org/) you sometimes need to query for the same fields in multiple queries. This requires defining these fields over again which can lead to tiny, but very annoying errors.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/twitter-1730750708476.webp)

That's why GraphQL includes reusable units called fragments. Fragments let you construct reusable pieces of query logic (an equivalent to UI component of a [design system](https://graphqleditor.com/blog/Design-System/)). The small part of a query makes, ready to be used where needed, makes our work is way more effective, and possibly lower odds of making a simple typo.

Let's say we have a `user` type containing some standard fields like:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1-1730750729245.webp)

We can use the `fragment` to represent a set of specific fields i.e. *online contact details*:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2-1730750741285.webp)
so when querying for online details we can **referer to the fragment instead of querying for all fields separately**:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/3-1730750755339.webp)

Less typing, cleaner code, easier life :)

### The benefits of using fragments

GraphQL fragments allow you to reuse parts of your queries and provide such qualities as:

* **consistency** - higher confidence that you’re always working on the right fields i.e when running mutations you know you update the right data.
* **better code organization** - fragments improve the structure & reusability of GraphQL code, which is very handy in terms of team collaboration
* **improved communication with GraphQL server** - querying for fragments isolates a component from any unwanted data.

Sounds good right? So if you are wondering if its worth using GraphQL fragments the answers is simple - YES!

GraphQL Fragments and the benefits of using them

In this short read, I will try to break down for you the concept of GraphQL fragments. What are the fragments in GraphQL and how you can benefit from using them?

### GraphQL Fragments

In [GraphQL](https://graphql.org/) you sometimes need to query for the same fields in multiple queries. This requires defining these fields over again which can lead to tiny, but very annoying errors.

[![David Walsh Twitter](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/twitter.webp)](https://twitter.com/davidwalshblog/status/1118526853948612608)

That's why GraphQL includes reusable units called fragments. Fragments let you construct reusable pieces of query logic (an equivalent to UI component of a [design system](https://graphqleditor.com/blog/Design-System/)). The small part of a query makes, ready to be used where needed, makes our work is way more effective, and possibly lower odds of making a simple typo.

Let's say we have a `user` type containing some standard fields like:

![user](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1-1732204494904.webp)

We can use the `fragment` to represent a set of specific fields i.e. *online contact details*:

![details](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2-1732204498088.webp)
so when querying for online details we can **referer to the fragment instead of querying for all fields separately**:

![getUsers](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/3-1732204500549.webp)

Less typing, cleaner code, easier life :)

### The benefits of using fragments

GraphQL fragments allow you to reuse parts of your queries and provide such qualities as:

* **consistency** - higher confidence that you’re always working on the right fields i.e when running mutations you know you update the right data.
* **better code organization** - fragments improve the structure & reusability of GraphQL code, which is very handy in terms of team collaboration
* **improved communication with GraphQL server** - querying for fragments isolates a component from any unwanted data.

Sounds good right? So if you are wondering if its worth using GraphQL fragments the answers is simple - YES!

This post is a summary of the best python libraries for GraphQL. Python in recent years is starting to be on the list of top programming language. GraphQL is emerging but very promising query language and execution engine tied to any backend service.

Python is one of the most popular languages used in data science, machine learning and AI systems. GraphQL was introduced by Facebook as an alternative to REST and it's popular of flexibility on handling complex systems.

### Ariadne

Ariadne is a Python library for implementing GraphQL servers using schema-first approach.

Ariadne is a Python library for implementing GraphQL servers.

* Schema-first: Ariadne enables Python developers to use schema-first approach to the API implementation. This is the leading approach used by the GraphQL community and supported by dozens of frontend and backend developer tools, examples, and learning resources. Ariadne makes all of this immediately available to your and other members of your team.
* Simple: Ariadne offers small, consistent and easy to memorize API that lets developers focus on business problems, not the boilerplate.
* Open: Ariadne was designed to be modular and open for customization. If you are missing or unhappy with something, extend or easily swap with your own.
  Documentation is available here.

Features:

* Simple, quick to learn and easy to memorize API.
* Compatibility with GraphQL.js version 14.0.2.
* Queries, mutations and input types.
* Asynchronous resolvers and query execution.
* Subscriptions.
* Custom scalars and enums.
* Unions and interfaces.
* Defining schema using SDL strings.
* Loading schema from .graphql files.
* WSGI middleware for implementing GraphQL in existing sites.
* Opt-in automatic resolvers mapping between camelCase and snake\_case.
* Build-in simple synchronous dev server for quick GraphQL experimentation and [GraphQL Playground](/graphql-playground).
* Support for Apollo GraphQL extension for Visual Studio Code.
* GraphQL syntax validation via gql() helper function. Also provides colorization if Apollo GraphQL extension is installed.

### Installation

```bash
pip install ariadne
```

### Quickstart

The following example creates an API defining Person type and single query field people returning a list of two persons. It also starts a local dev server with [GraphQL Playground](/graphql-playground) available on the [http://127.0.0.1:8000](http://127.0.0.1:8000) address. Start by installing uvicorn, an ASGI server we will use to serve the API:

Start by installing uvicorn, an ASGI server we will use to serve the API:

```bash
pip install uvicorn
```

Then create an example.py file for your example application:

```python
from ariadne import ObjectType, QueryType, gql, make_executable_schema
from ariadne.asgi import GraphQL

# Define types using Schema Definition Language (https://graphql.org/learn/schema/)
# Wrapping string in gql function provides validation and better error traceback
type_defs = gql("""
    type Query {
        people: [Person!]!
    }

    type Person {
        firstName: String
        lastName: String
        age: Int
        fullName: String
    }
""")

# Map resolver functions to Query fields using QueryType
query = QueryType()

# Resolvers are simple python functions
@query.field("people")
def resolve_people(*_):
    return [
        {"firstName": "John", "lastName": "Doe", "age": 21},
        {"firstName": "Bob", "lastName": "Boberson", "age": 24},
    ]


# Map resolver functions to custom type fields using ObjectType
person = ObjectType("Person")

@person.field("fullName")
def resolve_person_fullname(person, *_):
    return "%s %s" % (person["firstName"], person["lastName"])

# Create executable GraphQL schema
schema = make_executable_schema(type_defs, [query, person])

# Create an ASGI app using the schema, running in debug mode
app = GraphQL(schema, debug=True)
```

### Strawberry

Strawberry is a new GraphQL library for Python 3, inspired by dataclasses. An initial version of Strawberry has been released on GitHub. Strawberry was created by @patrick91 who is also an organizer of @pyconit. It was originally announced during Python Pizza Berlin.

![strawberry](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/strawberry-1730846692693.webp)
[https://strawberry.rocks/](https://strawberry.rocks/)

### Installation

```bash
pip install strawberry-graphql
```

### Getting Started

Create a file called app.py with the following code:

```python
import strawberry


@strawberry.type
class User:
    name: str
    age: int


@strawberry.type
class Query:
    @strawberry.field
    def user(self, info) -> User:
        return User(name="Patrick", age=100)


schema = strawberry.Schema(query=Query)
```

This will create a GraphQL schema defining a User type and a single query field user that will return a hard-coded user.

To run the debug server run the following command:

```bash
strawberry run server app
```

Open the debug server by clicking on the following link: [http://0.0.0.0:8000/graphql](http://0.0.0.0:8000/graphql)

This will open a [GraphQL playground](/graphql-playground) where you can test the API.

### Graphene

Graphene is a Python library for building GraphQL schemas/types fast and easily.

* Easy to use: Graphene helps you use GraphQL in Python without effort.
* Relay: Graphene has builtin support for Relay.
* Data agnostic: Graphene supports any kind of data source: SQL (Django, SQLAlchemy), NoSQL, custom Python objects, etc. We believe that by providing a complete API you could plug Graphene anywhere your data lives and make your data available through GraphQL.

### Integrations

Graphene has multiple integrations with different frameworks:

* Django - graphene-django
* SQLAlchemy - graphene-sqlalchemy
* Google App Engine - graphene-gae
* Peewee - In progress (Tracking Issue)

Also, Graphene is fully compatible with the GraphQL spec, working seamlessly with all GraphQL clients, such as Relay, Apollo and gql.

### Installation

For instaling graphene, just run this command in your shell

```bash
pip install "graphene>=2.0"
```

### Examples

```python
Here is one example for you to get started:

class Query(graphene.ObjectType):
    hello = graphene.String(description='A typical hello world')

    def resolve_hello(self, info):
        return 'World'

schema = graphene.Schema(query=Query)
```

Then Querying graphene.Schema is as simple as:

```python
query = '''
    query SayHello {
      hello
    }
'''
result = schema.execute(query)
```

 Top 3 python libraries for graphql 

One of the things that differentiate an average developer from a good one is the constant urge for learning and adopting new tools that can simplify one's life. Here is a list of five developer tools that can facilitate your life :)

### [CloudCraft](https://cloudcraft.co/)

**CloudCraft** is a fancy tool allowing you to design your cloud architecture in no time. This tool allows you to build a smart **AWS diagram** and calculate the cost of the services. Isn't that cool?
[![Visualize you cloud architecture](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/cloudcraft.webp)](https://cloudcraft.co/)

### [BundlePhobia](https://bundlephobia.com)

> #### **bundle phobia**/ˈbʌnd(ə)l fəʊbɪə/an irrational fear of possible consequences of adding new npm package to your bundle.

If you live in a constant fear that adding a npm package to your project will destroy it, this is a tool for you. **BundlePhobia** lets you understand the performance cost of `npm install`ing any package before actually adding it to your project.

[![No more dangerous bundles](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/bundlephobia.webp)](https://bundlephobia.com)

### [GraphQL Editor](https://graphqleditor.com/)

GraphQL is a query language for APIs, it shows types of data provided by the server and then the client can fetch exactly what it needs in one call rather than making multiple REST API calls. The schema is a crucial part of any GraphQL project and **GraphQL Editor** makes building or understanding existing GraphQL schema a lot easier as you can plan it by linking visual nodes. Features like loading schema from URL/file or a fake backend data can speed up the prototyping of your app by a lot!

[![GraphQL Schema that can be turned into a production-ready backend](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/gqle.webp)](https://graphqleditor.com/)

### [Amplify Framework](https://aws-amplify.github.io/)

Want to build a cloud base app? This is the only tool you need! **Amplify Framework by AWS** is a library for building fully-featured apps! The framework allows you to easily connect micro-services for:

* *API*
* *Analytics*
* *Authentication*
* *Notifications*
* *Storage*

and many more with just a few lines of code! The Amplify also offers a vast range of beautiful out-of-the-box **UI components** ready to take your app to the next level!

[![Library for building your fancy cloud-powered apps](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/amplify.webp)](https://aws-amplify.github.io/)

### Flare

*Flare* is a powerful design and animation tool, which allows designers and developers to easily add high-quality animation to their apps and games. With Flare you can create:

* *sophisticated interactions*
* *animated icons*
* *onboarding screens*
* *game characters*

These are real design assets that run in your app - they don't need to be recreated in code! This makes future modifications super easy!

[![Super cool animations](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/flare.webp)](https://www.2dimensions.com/about-flare)

5 Developer Tools you need to check out!

Looking for a way of improving your design-development workflow? You need a design system! Why? Because it will help you work better, much faster & will take your team collaboration to the next level!

Design system is a very popular concept, arousing a lot of emotions and interest recently ... even the government of United States of America has one they call [U.S. Web Design System](https://designsystem.digital.gov/).

![it's all about design](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/designhtml.webp)

### What's Design System

A design system is a collection of reusable graphical components, design standards, style guides, which define **a common visual language** for product teams. It accelerates the design process and bridges the gap between teams involved in building a final product by having clear graphics standards, that makes assembling websites from components super easy. So basically the design system is a rulebook for graphical and development teams which we can breakdown like that:

* **Design System** – the complete set of design standards along with principles, patterns & code components to achieve them,
* **Pattern Library** – a subclass of a design system which defines allowed design patterns,
* **Style guide** – a subclass showing how products should look, containing use cases for UI patterns, typography etc.

![Design System](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/design-system.webp)

Source: [Zack Rutherford for Studio by UXPin](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/)

### The benefits

Design systems provide consistency in designing new elements of your company or product visual identification. Design system creates straightforward and beautiful experiences for end-user as well as product team makes collaboration a lot easier for:

* **designers** as they can breakdown the design-process into smaller parts, easier to work on, manage, change than the whole webpage,
* **developers** so they clear vision of how to build required components to maintain the unified styles,
* **product owners/managers** as component-based approach makes requesting development teams for additional page elements a super easy process

### Examples

You have all probably heard about the famous [Material Design](https://m3.material.io/) by Google:

[![Material Design](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/material.webp)](https://m3.material.io/)

but that's not the only one you can draw inspiration from as big companies like IBM, Audi or Atlassian make their design system publicly available. Here you can take a look at a couple of them:

[Carbon React Components by IBM](https://react.carbondesignsystem.com/?path=/docs/getting-started-welcome--welcome)

[![Carbon React Components by IBM](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ibm.webp)](https://react.carbondesignsystem.com/?path=/docs/getting-started-welcome--welcome)

[Zendesk Garden](https://garden.zendesk.com/)

[![Zendesk Garden](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/zendesk.webp)](https://garden.zendesk.com/)

[Atlassian Design System](https://atlassian.design/)

[![Atlasian](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/atlasian.webp)](https://atlassian.design/)

[Polaris by Shopify](https://polaris.shopify.com/)

[![Polaris](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/polaris.webp)](https://polaris.shopify.com/)

### Looking for more?

Make sure to visit [https://designsystemsrepo.com/design-systems/](https://designsystemsrepo.com/design-systems/) for more samples & inspirations!

What is Design System and why you need one?

A **GraphQL Java Cheat Sheet** to help you understand what is what in GraphQL Java world. You might find it useful if you:

> - Want to learn GraphQL Java
> - Feel confused by all the Java GraphQL libraries
> - Want to try GraphQL Java in your project, but not sure how to start

### Gradle or Maven?

[Gradle](https://gradle.org/) and [Maven](https://maven.apache.org/) are the most popular build automation tools.
Which one you should choose? I can not provide you an answer to that question as this decision is to a large extent up to you and it depends on variables like your project's size or how much customization it needs. The tools like [Spring](https://spring.io/) and the constantly increasing amount of integration make it's quite a personal decision. As both approaches have their strengths and weaknesses, I hope this short summary can help you choose the right one for your project.

|                                             |                   Gradle                    |                          Maven                           |
| ------------------------------------------- | :-----------------------------------------: | :------------------------------------------------------: |
| _builds approach_                           |    based on a graph of task dependencies    |       based on a fixed and linear model of phases        |
| _dynamic and transitive dependencies_       |                   **yes**                   |                         **yes**                          |
| _artifact repositories_                     |                   JCenter                   |                      Maven Central                       |
| _private company repository_                |                   **yes**                   |                         **yes**                          |
| _custom rules, resolving version conflicts_ |                   **yes**                   |                            no                            |
| _advance task orderings_                    |                   **yes**                   |                            no                            |
| _administering build infrastructure_        | uses wrappers that accept auto provisioning | require an extension to support self-provisioning builds |

To sum up, Gradle is much more powerful than Maven, but in many cases, you won't need to use its fancy features. If you are working on a small project you should consider Maven, if it's a big enterprise application Gradle seems to be the right choice. In the end, it's your personal choice.

### Libraries

There are a couple of GraphQL Java related libraries. The only library that is strictly required is a `graphql-java` which is the GraphQL implementation itself, but there are many others that you might find useful:

- **[graphql-java](https://github.com/graphql-java/graphql-java)**: The alpha and omega of any project, the GraphQL Java implementation itself.

- **[graphql-java-tools](https://github.com/graphql-java-kickstart/graphql-java-tools)**: The library that allows you to use the GraphQL schema language to [build your GraphQL schema](https://graphqleditor.com/). It's inspired by [Apollo's graphql-tools](https://github.com/ardatan/graphql-tools), it parses the given GraphQL schema and allows you to bring your own object to fill in the implementations.

- **[graphql-spring-boot](https://github.com/graphql-java-kickstart/graphql-spring-boot)**: A lib that contains various Spring Boot starters to enable GraphQL related services and features.

- **[graphql-java-servlet](https://github.com/graphql-java-kickstart/graphql-java-servlet)**: The implementation of GraphQL Java Servlet including support for popular libraries like [Relay.js](https://github.com/facebook/relay), [Apollo](https://github.com/apollographql), and [OSGi](https://www.osgi.org/) out of the box; wraps the Java implementation of GraphQL provided by GraphQL Java.

- **[graphql-java-annotations](https://github.com/Enigmatis/graphql-java-annotations)**: The library that offers an annotations-based syntax for GraphQL schema definition.

### DEV.TO GraphQL Java articles

- [First impressions with GraphQL in Java](https://dev.to/committedsw/first-impressions-with-graphql-in-java-5c82) by [@committedsw](https://dev.to/committedsw)
- [Notes from experimenting with GraphQL and Kotlin](https://dev.to/baens/notes-from-experimenting-with-graphql-and-kotlin-k8) by [@baens](https://dev.to/baens)
- [Getting Started with GraphQL Java](https://dev.to/tomekponiat/getting-started-with-graphql-java-13j1) by [@tomekponiat](https://dev.to/tomekponiat)
- [How to Build GraphQL Services in Java with Spring Boot](https://dev.to/sambenskin/howto-build-graphql-services-in-java-with-spring-boot---part-1-38b2) by [@sambenskin](https://dev.to/sambenskin)

### Tutorials and other resources

- [Gradel Tutorials and Guides](https://gradle.org/guides/)
- [Maven in 5 Minutes](https://maven.apache.org/guides/getting-started/maven-in-five-minutes.html)
- [How to get your GraphQL Java server up and running in no time](https://www.freecodecamp.org/news/graphql-java-development-stack-in-production-21f402c4c37a)
- [graphql-java Tutorial](https://www.howtographql.com/graphql-java/0-introduction/)
- [Migratiing Builds From Apache Maven](https://docs.gradle.org/current/userguide/migrating_from_maven.html)

### Video tutorials:

**Spring Boot with GraphQL Query Example - Tech Primers**

https://www.youtube.com/watch?v=zX2I7-aIldE

**Building a GraphQL Server with Kotlin and graphql-java - Michael Hunger**

https://www.youtube.com/watch?v=3-yyEaQfm9c

**Developing and maintaining a Java GraphQL back-end - Bojan Tomic**

https://www.youtube.com/watch?v=1zIHHi2MaQE


GraphQL Java Cheat Sheet


A **GraphQL Java Cheat Sheet** to help you understand what is what in GraphQL Java world. You might find it useful if you:

> - Want to learn GraphQL Java
> - Feel confused by all the Java GraphQL libraries
> - Want to try GraphQL Java in your project, but not sure how to start

### Gradle or Maven?

[Gradle](https://gradle.org/) and [Maven](https://maven.apache.org/) are the most popular build automation tools.
Which one you should choose? I can not provide you an answer to that question as this decision is to a large extent up to you and it depends on variables like your project's size or how much customization it needs. The tools like [Spring](https://spring.io/) and the constantly increasing amount of integration make it's quite a personal decision. As both approaches have their strengths and weaknesses, I hope this short summary can help you choose the right one for your project.

|                                             |                   Gradle                    |                          Maven                           |
| ------------------------------------------- | :-----------------------------------------: | :------------------------------------------------------: |
| _builds approach_                           |    based on a graph of task dependencies    |       based on a fixed and linear model of phases        |
| _dynamic and transitive dependencies_       |                   **yes**                   |                         **yes**                          |
| _artifact repositories_                     |                   JCenter                   |                      Maven Central                       |
| _private company repository_                |                   **yes**                   |                         **yes**                          |
| _custom rules, resolving version conflicts_ |                   **yes**                   |                            no                            |
| _advance task orderings_                    |                   **yes**                   |                            no                            |
| _administering build infrastructure_        | uses wrappers that accept auto provisioning | require an extension to support self-provisioning builds |

To sum up, Gradle is much more powerful than Maven, but in many cases, you won't need to use its fancy features. If you are working on a small project you should consider Maven, if it's a big enterprise application Gradle seems to be the right choice. In the end, it's your personal choice.

### Libraries

There are a couple of GraphQL Java related libraries. The only library that is strictly required is a `graphql-java` which is the GraphQL implementation itself, but there are many others that you might find useful:

- **[graphql-java](https://github.com/graphql-java/graphql-java)**: The alpha and omega of any project, the GraphQL Java implementation itself.

- **[graphql-java-tools](https://github.com/graphql-java-kickstart/graphql-java-tools)**: The library that allows you to use the GraphQL schema language to [build your GraphQL schema](https://graphqleditor.com/). It's inspired by [Apollo's graphql-tools](https://github.com/ardatan/graphql-tools), it parses the given GraphQL schema and allows you to bring your own object to fill in the implementations.

- **[graphql-spring-boot](https://github.com/graphql-java-kickstart/graphql-spring-boot)**: A lib that contains various Spring Boot starters to enable GraphQL related services and features.

- **[graphql-java-servlet](https://github.com/graphql-java-kickstart/graphql-java-servlet)**: The implementation of GraphQL Java Servlet including support for popular libraries like [Relay.js](https://github.com/facebook/relay), [Apollo](https://github.com/apollographql), and [OSGi](https://www.osgi.org/) out of the box; wraps the Java implementation of GraphQL provided by GraphQL Java.

- **[graphql-java-annotations](https://github.com/Enigmatis/graphql-java-annotations)**: The library that offers an annotations-based syntax for GraphQL schema definition.

### DEV.TO GraphQL Java articles

- [First impressions with GraphQL in Java](https://dev.to/committedsw/first-impressions-with-graphql-in-java-5c82) by [@committedsw](https://dev.to/committedsw)
- [Notes from experimenting with GraphQL and Kotlin](https://dev.to/baens/notes-from-experimenting-with-graphql-and-kotlin-k8) by [@baens](https://dev.to/baens)
- [Getting Started with GraphQL Java](https://dev.to/tomekponiat/getting-started-with-graphql-java-13j1) by [@tomekponiat](https://dev.to/tomekponiat)
- [How to Build GraphQL Services in Java with Spring Boot](https://dev.to/sambenskin/howto-build-graphql-services-in-java-with-spring-boot---part-1-38b2) by [@sambenskin](https://dev.to/sambenskin)

### Tutorials and other resources

- [Gradel Tutorials and Guides](https://gradle.org/guides/)
- [Maven in 5 Minutes](https://maven.apache.org/guides/getting-started/maven-in-five-minutes.html)
- [How to get your GraphQL Java server up and running in no time](https://www.freecodecamp.org/news/graphql-java-development-stack-in-production-21f402c4c37a)
- [graphql-java Tutorial](https://www.howtographql.com/graphql-java/0-introduction/)
- [Migratiing Builds From Apache Maven](https://docs.gradle.org/current/userguide/migrating_from_maven.html)

### Video tutorials:

**Spring Boot with GraphQL Query Example - Tech Primers**

https://www.youtube.com/watch?v=zX2I7-aIldE

**Building a GraphQL Server with Kotlin and graphql-java - Michael Hunger**

https://www.youtube.com/watch?v=3-yyEaQfm9c

**Developing and maintaining a Java GraphQL back-end - Bojan Tomic**

https://www.youtube.com/watch?v=1zIHHi2MaQE


One of the best things about GraphQL is that it can be implemented in any language. Today let’s take a look at Java server implementation for GraphQL. Let’s use Maven and assume that we already have set up the project structure. What next?

### Dependencies

To run GraphQL in your Java project you only need one library which is  [GraphQL Java](https://github.com/graphql-java/graphql-java) implementation. However, there are a couple of libs you might find useful when using GraphQL Java:

* [Spring Boot](https://github.com/graphql-java/graphql-java-spring) - GraphQL Java Spring and Spring Boot integration that will handle any HTTP related tasks, expose the GraphQL service on the `/graphql` endpoint of your app and accept `POST` requests containing your GraphQL payload.
* [GraphQL Java Tools](https://github.com/graphql-java-kickstart/graphql-java-tools) - this library allows you to use the GraphQL SDL to build your graphql-java schema.
* [GraphQL Java Servlet](https://github.com/graphql-java-kickstart/graphql-java-servlet) - implementation of GraphQL Java Servlet including support for libraries like Relay.js, Apollo etc. and wraps the Java implementation of GraphQL provided by GraphQL Java.

So add dependencies you need to Project Object Model file (pom.xml):
![Add GraphQL Java dependency](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/dependencies.webp)

### Define the schema

GraphQL Schema is the centerpiece of any GraphQL implementation so we definitely need one before going any further. To make it easier to understand the operation that a server can perform GraphQL defined a universal schema syntax know as SDL (Schema Definition Language).

The SDL defines the elements of your project like:

* **`type`** (the most basic GraphQL schema components):
  ![[GraphQL Type](/docs/what-is-graphql/)](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/type.webp)
* **`query`** (asking the server for the data)
  ![GraphQL Query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/query.webp)
* **`mutation`** (manipulating the data):
  ![GraphQL Mutation](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/mutation.webp)

The fastest way to define your schema is to use [GraphQL Editor](https://graphqleditor.com/). It allows you to define your schema traditionally (code) or shape it from visual nodes.

### Server

There plenty of servlet containers to choose from, both open source and commercial,  so just pick the one you feel comfortable with. Let's use Jetty for our example and   implement it via a [Maven Plugins](https://maven.apache.org/pom.html#Plugins):
![Jetty](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/jetty.webp)

And you are almost there, the next steps are:

* adding some more basic server configurations like right Java version or servlet specification
* creating **`GraphQLEndpoint`** class for exposing your API
* defining resolvers

If you want to read more details about GraphQL Java implementation to take a look at Bojan's tutorial regarding setting up [GraphQL Java](https://www.howtographql.com/graphql-java/1-getting-started/) server on [https://www.howtographql.com/](https://www.howtographql.com/)

Getting started with GraphQL Java

This year will for sure bring new ideas to the web development as well as cultivate some well-known ones. To provide you with an insight into what is going to happen this year, these are the trends that will continue to dominate the development of the network.

### Progressive Web Apps

Progressive Web Apps (PWA) is a new approach to building applications by combing the best features of the web with the top qualities of mobile apps. PWA has no entry barrier as no install is required. From the very launch in a browser, PWA slowly builds a “relationship” with its user over time by providing features like blazingly fast loading time (even on low-performing networks), communicating relevant information with push notifications or as simple things as easier access by the home-screen icon.

The key advantages of Progressive Web App are:

* **Progressive & responsive** - *works the same for every user, regardless of browser choice or device*
* **Connectivity independent** - *designed to work offline or on a low-performing network connection.*
* **Engageable & shareable** - *users can add apps to their home screen (by-passes app stores) & share easily via URL.*

![PWA](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/pwa.webp)

###### Source: [Google Developers](https://developers.google.com/web/progressive-web-apps/)

### Low-code development solutions

LCDPs are visual-based design system which means that the amount of coding is often reduced to zero and that of most of it is replaced by a draw/drag-and-drop system. The rising demand for automation and innovation in many different industries requires:

* *Faster development process*,
* *Easier deployment*,
* *Cost reduction*.

This allows building apps faster (shorter time-to-market) and is expected to push the low-code development trend into its highest high in the next couple of years, which would make tools like [Fuse Open](https://fuseopen.com/) (*mobile apps*), [BuildBox](https://signup.buildbox.com/) (*mobile games*), [Airtable](https://www.airtable.com/platform) (*spreadsheet-database*) or [GraphQL Editor](https://graphqleditor.com/) (*GraphQL schema design*) observe the rise of popularity.

![Low-code GraphQL Editor](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/edytor.webp)

### Cybersecurity

> *We no longer go online, we live online.*

It's a truth hard to swallow but we are ruled by the Internet. It took control of our lives. We work, learn, shop & spend our free time online. More and more aspects of our lives are becoming digitalized so no wonder that our security online has become one of the most (if not the most) important issue. Since we are more tend to upload our confidential data like credit cards, IDs and other to the web, it makes data breaches & cyber threats becoming more frightening than ever before. As recent history has shown, no one is safe. In 2018 we had some major data breaches including Starwood-Marriot (500 million users data), Quora (100 million) and 2019 started with shocking information that since 2012 Facebook has not properly secured the passwords of as many as 600 million users. These passwords were stored in plain text and able to be accessed by more than 20,000 of Facebook’s employees.

![Data Breaches](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/breaches.webp)

###### Source: [Avast Blog](https://blog.avast.com/biggest-data-breaches)

With that in mind, companies need to improve their security system to protect their (and their users) private data. Cybercriminals won’t stop to look for vulnerabilities and new solutions are necessary to battle new cybersecurity challenges.

Top 3 Development trends of 2019

## Introduction

It's hard to choose what to learn when you're starting your journey as a frontend developer. There're plenty of sources, courses, tutorials or frameworks to choose from. You might get confused starting researching all above. One practical approach is a craftsman road where you learn the process by tools. I've created a list of top tools for junior frontend developer and explained why you should use them. Follow me to get more tutorials!

## GitHub

GitHub is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its other features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. Github is also a great community where you find and collaborate a lot of open source projects.

![github](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/github-1730852708581.webp)

## Chrome Dev Tools

It's a set of developer tools built into the Chrome browser. With DevTools you can access the internals of any web application, see how it performs on different screen sizes and change any page. You can edit pages real-time and diagnose problems quickly. It ultimately helps you build better websites and faster. Additional network tools can help you optimise your loading flows while a timeline gives you a knowledge of what the browser is doing at the moment.

![chrome](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/chrome-1730852686840.webp)

## React Developer Tools

React is a popular javascript framework among web development last years.  However, Google Chrome Developer tools cannot examine the Dom as React Components. Don’t be confused; there is a Chrome Extension called React Developer Tools that allows you to get into the nitty-gritty of how data is passed through components.

![react](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/reactdev-1730852726225.webp)

## Pixel Perfect

This chrome extension helps develop your websites with per-pixel sharpness! It's for web developers and markup designers. PerfectPixel allows developers to put a half-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison among them.

![pixel](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/pixel-1730852719890.webp)

## Visual Code Editor

Visual Studio Code is the number one code editor for building and debugging modern web and cloud applications. It’s very customizable, has built-in git, massive list of integrations, powerful autocomplete and debugging features. It’s a powerful multilanguage IDE, super fast and simple. Also, free an open source.

![vsc](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/vsc-1730852738085.webp)

## Codepen

Codepen it’s amazing web-based and community-driven code editor. You can see right away results of code. It’s a magic place for designers and front end developers where people are sharing and commenting on their front end skills.  It’s a great source of inspiration for new ideas and ways to code.  The editor is used for: prototyping new ideas, instant bug testing, sending clients things to look at, evaluating potential hires and finding inspiration. 

![codepen](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/codepen-1730852692205.webp)

## GraphQL and GraphQL Editor

GraphQL is a query language for APIs. It's very trendy nowadays and recognised by leading tech organisations. GraphQL Editor makes understanding GraphQL schema a lot easier. Plan it out by linking visual blocks and our editor will transform them into a code! Create fake backend out of GraphQL, and you could power up your application.

![GraphQL Editor](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/editor-1730852697723.webp)

## Npm

It's a package manager for JS. It helps to find packages of reusable code and compile them in new ways. It has over 470,000 free code packages in the database to be used by you. This web dev tool is a command-line utility for interacting with a repository that aids in the package. It also has team features with your private namespace.

![npm](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/npm-1730852714063.webp)

## Webpack

It's a bundler for javascript and friends which packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, CoffeeScript, LESS, ... and your custom stuff.

![webpack](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/webpack-1730852748645.webp)

## Figma

Figma is a design app but very trendy and good to collaborate with designers. Every Figma file has Code Mode where a developer can inspect design files. When designer share view-only files with the developer, he will have access to Code Mode where they can examine, comment, and export without having full edit access to the files.

![figma](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/figma-1730852702822.webp)

## Web.dev

Every web project needs proper feedback and testing. With this tool, you can check how your website performs according to modern standards. You can measure things: performance, PWA status, accessibility or SEO. Also, you can practice skills: like load speed, network resilience or data security. Check how your website performs over time, and keep track as you learn on your schedule.

![web.dev](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/webdev-1730852743154.webp)

## Terminal

A terminal is a text-based interface you can type your commands in. A shell takes these commands and tells the operating system to execute them. Getting familiar with tools like Git from the terminal gives you more power and flexibility over GUI. In the end, a GUI is a graphical shell in front of a command-line tool. Being “closer to the metal”, it can also help you to get out of trouble in case a GUI is stuck or messed up. It's an essential productivity tool in a developer's arsenal.

![terminal](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/terminal-1730852732478.webp)

## Others

* Caniuse.com - are you worried about browser compatibility for some cutting edge ideas? Try this site and see if you can use it.
* StackOverflow - that site doesn't need explanation ;)
* TinyPNG- Advanced lossy compression for PNG images
* Compressor.io - another image compression tool
* Notion.so -  recording notes, specs, product owner feedback and planning.
* Postman - when working with REST APIs.