After breaking down [Angular and its versions](https://graphqleditor.com/blog/angular-overview/) it's time to do a deeper dive into the inner workings of the framework, namely directives. They are the main advantage of working with Angular and should help anyone working with the framework by providing useful, reusable solutions to both experienced users and those just starting out. Before we get into the particulars let’s look at what they actually are.

## What exactly are Directives?

Directives are basically functions that are executed when the compiler finds them. Their role is to enhance the capabilities of HTML by attaching custom behaviors to the DOM. Since version 2.0 Angular has three types of directives:

* structural directives,
* attribute directives,
* components,

Angular provides you with a number of built-in directives, but you can also create your own or use custom ones made by others.

## Structural

Structural directives are responsible for HTML layout. They change the structure of the DOM by adding, removing, or manipulating elements. Structural directives are easily recognizable as they contain an asterisk prefix before their name. The most popular built-in structural directives are:

* **NgIf**: allows conditional rendering of template parts, it will show or hide an HTML element on your Angular HTML template based on the fulfillment of the defined condition
* **NgFor**: a repeater directive which outputs a list of elements by iterating over an array, it helps build data presentation lists and tables in the HTML templates.
* **NgSwitch**: works just like JavaScritpt’s switch statement ie. displays one or more DOM elements based on a predefined condition.

![Structural directive example in Angular](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/structural-directive.webp)

##### Source: [angular.io](https://angular.io/docs)

## Attribute

Attribute directives are responsible for listening to and modifying the behavior of other HTML elements, attributes, properties, and components in the DOM structure. The name comes from the fact they are applied to elements as if they were HTML attributes. The most popular built-in attribute directives are:

* **NgClass**: dynamically sets CSS classes for a DOM element, this can be used in a variety of ways to change styles and hide or show content.
* **NgStyle**: sets many inline styles simultaneously and dynamically based on the state of the component, useful for dynamically changing the appearance of elements.
* **NgModel**: Angular’s solution to the two-way data binding problem, binds the value of HTML controls to application data.

![Attribute directive example in Angular](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/attribute-directive.webp)

##### Source: [angular.io](https://angular.io/docs)

## Components

Components are actually directives with templates, as they are the main point of working with Angular you could say an Angular application is a tree of components. Components entail behavior (what to do with data and how to respond to user interactions) and a template (how the data is rendered). While this may sound simple it supports basic as well as advanced interactions and is essential in reducing the time and effort it takes to create an app.

* **Angular Components (formerly Angular Material)**: the official component package made by the team behind Angular itself. It’s a set of tools for creating tailor-made components using common interaction patterns according to the Angular team’s best practices. It also ensures design consistency and seamless user experience across various operating systems (Windows, macOS, iOS, Android, Chrome OS)
* **NGX-Bootstrap**: all core Bootstrap components powered by Angular including alerts, buttons, pagination, progress bar and interactive elements like dropdown menus, custom tooltips and others. You don’t need to use original JS components, just use Bootstrap’s markup and CSS. Built with adaptability in mind the aim here is to provide a performance boost for both mobile and desktop apps whether you are starting from scratch or planning to integrate it into existing work.
* **PrimeNG**: probably the most complete UI suite for Angular with over 80 components aimed at helping UI designers speed up the development process. Includes input components (AutoComplete, Calendar, KeyFilter) panel components (TabView, Toolbar, ScrollPanel) advanced components (Galleria, Drag and Drop, Progress Bar, Captcha) and many many others. To put it short, if you’re creating UI this is the way to go.
* **NGX Admin**: a front-end admin dashboard based on Angular 9+ and Nebular with Eva Design System support. Contains components like charts, tables, maps, forms, editors, responsive layout, high resolution and others. Ensures consistency across all devices from desktop to mobile. Additionally offers 4 visual themes to choose from (light, dark, corporate and cosmic) comes with 2 dashboards, IoT and e-commerce, and over 40 pages to choose from. Little wonder it's so popular with almost 22000 stars on GitHub.

![Example of Angular component which is also a directive](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/component.webp)

##### Source: [angular.io](https://angular.io/docs)

All of those are updated fairly often, along with Angular itself, so if you’re looking for some features that aren't mentioned here, check out the planned roadmaps, maybe they’ll get added soon. Obviously there's also tons of other libraries you can find on GitHub or you can always create your own or tailor those already made to your needs. The key here is finding what will fit your workflow and what you find actually helpful. It might take a while to find the right fit for you, but most of those working with Angular will assure you it's worth it.

Angular directives - the most-used units in Angular

Jamstack is a new architectural approach with the core principle of pre-rendering aiming to make web applications to:

* run faster,
* be more secure,
* be easier to scale.

All that achieved with the use of many modern tools to bring productivity to the maximum. Sounds interesting right? This approach is gaining a lot of popularity which makes a market for new tooling supporting the Jamstack approach. RedwoodsJS is one of the new shining stars, its team believes that JAMstack is a huge leap forward in web development and they are doing their best to make it even more pleasant to work with.

## RedwoodJS

Redwood is an open-source project initiated by **Tom Preston-Werner, the co-founder of GitHub & creator of Jekyll** - one of the first static site generators. So what is Redwood?

> *Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to your backend running on AWS Lambdas around the world, all deployable with just a git push—that's Redwood.*

RedwoodJS is a highly opinionated, full-stack, serverless web application framework that aims to make building and deploying JAMstack apps as easy as possible.

## The stack

RedwoodJS uses some of the most popular cutting-edge technologies and by giving up the freedom of choosing your tech stack, you are gaining a significant reduction of the level of complexity of setting up all services to make your infrastructure work as intended:

* **Frontend** - this part is covered by React supported by Apollo and it has a lot of code generators involved which let you create everything i.e. routes, pages, cells (even with already pre-configured tests) out of the box.
* **Backend** - it's becoming difficult to talk about cutting-edge technologies without putting GraphQL into the equation. Redwood uses Prisma for its GraphQL backend, enabling quick creation of backends with graphical interfaces.
* **Deployment** - Redwood's development team has support for several deployment targets on their roadmap with a top-priority to make deployment strategies in a way that makes it easy for additional targets to be added, as well as to make it easy to adjust to user's own deployment strategy. Right now it offers out of the box deployment to Netlify and Vercel, with AWS and Google Cloud Run high on their road map.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/redwood-structure-1730835308951.webp)

##### Source: [redwoodjs.com](https://redwoodjs.com/)

## Concepts & features

Redwood features a lot of new interesting concepts as well as brings a breath of fresh air to well-known ones. One of the most interesting ones are definitely:

* **Cells** - they are one of the signature modes of abstraction in Redwood. Cells represent a declarative approach to data fetching which creates space (by providing conventions around data fetching) in between the request and the response which Redwood can utilize to perform its optimizations. All of this without writing a line of imperative code.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/cells-1730835320666.webp)Source: [redwoodjs.com](https://redwoodjs.com/)

* **Redwood Router** - Redwood features its own router that took inspiration from React Router, Ruby on Rails and Reach Router. It brings some awesome innovation to this crucial part of your app.

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

##### Source: [redwoodjs.com](https://redwoodjs.com/)

If you interested in more detailed information about Redwood's concepts and its implementation make sure to visit [the official docs](https://redwoodjs.com/docs/introduction).

## Not a 1.0 version

RedwoodJS software has not reached a stable version 1.0 yet.
Its team put Redwood in the later stages of the "make it work" phase in the "make it work; make it right; make it fast" paradigm. Although this makes it not suitable for production use, Redwood is a concept that is definitely worth following.

RedwoodJS - bring full-stack to your JAMstack

After writing a bit [about Vue](https://graphqleditor.com/blog/vue-overview/) and [its web components](https://graphqleditor.com/blog/vue-webcomponents/) I think it's only fair to take a look at its main competitors and their web components as well. Of these, two popular frameworks stand out: Facebook's React and Google’s Angular. For now I’ll focus on Angular and don't worry, React will get it's time to shine in a later piece. Let’s start with a bit of a background on Angular’s direct predecessor, AngularJS.

## AngularJS

Angular started out in 2010 as AngularJS, a JavaScript based frontend framework maintained by Google. It extends HTML vocabulary and helps developers quickly build web applications. AngularJS’s main focus was on single-page applications, apps which interact with the user by dynamically rewriting the web page with new data, instead of the usual approach of reloading the entire page from the server. While still popular and widely used, for example by the likes of Paypal, Netflix and Snapchat, AngularJS is getting phased out next year. Covid related issues have forced a six month extension of the long term support phase, but it will only last until december 31st 2021 and everyone is expected to migrate to Angular.

![Image presenting the Basics of AngularJS](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/angularjs.webp)

##### Source: [angularjs.org](https://angularjs.org/)

## Angular 2+

Angular dropped the ‘JS’ with the release of version 2, currently its on version 11. Each version signals a major update, comes out every 6 months and gets 6 months of active support followed by 12 months of long term support. The main disadvantage of Angular is that it's considered to have a much steeper learning curve than React or Vue. The biggest obstacle here is learning TypeScript and RxJS, but consistent updates also mean you’ll need to keep up with new things added. The payout though is probably worth it, as Angular is a complex tool with a lot of useful features:

* **Consistency:** Angular benefits from having Google’s support which means consistent updates, long-term support and a seamless updating process. Code maintainability makes moving up to a new version as simple as writing one command and Angular and all related packages are updated at the same time,
* **Modularity:** Angular’s modular nature makes it easy to divide code into modules called buckets, reusable chunks of code which can reduce both the time and effort needed for development. The community is also a great help here and provides a variety of those ready for use,
* **TypeScript:** Angular uses TypeScript a superscript for JavaScript, this ensures higher security and provides additional features (primitives, interfaces, enums etc.) However it is an additional language to learn which contributes to the steep learning curve of the framework,
* **Declarative UI:** Angular uses HTML for creating templates. It’s a declarative language used because of its scalability, innate intuitiveness and being less complex than JavaScript. This means you won't have to invest a lot of time in program flows and planning what loads first, all you need to do is map out what is needed and the framework will do the rest.

![Angular is cross-platfrom, fast & very performant](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/fast.webp)

##### Source: [angular.io](https://angular.io/)

## Turning it up to 11

As mentioned above the team behind Angular aims to release a major version every six months. The current version is Angular 11 released on November 12th and it brings a bunch of new features and improvements. Let's look at a few of those:

* **Operation byelog:** With 11s release the team has triaged and resolved their (quite sizable) backlog and fixed a ton of issues. The major news is the commitment to triage all new issues within two weeks,
* **Performance and TypeScript 4.0 support:** Angular 11 is significantly faster, NGCC (the Angular compatibility compiler) is now two to four times faster. The new release also brings TypeScript 4.0 support which means additional features and faster compilation times,
* **Experimental Webpack 5 support:** Webpack 5 was released recently with some major changes so the support is opt-in and experimental, by default Angular 11 still uses Webpack 4 and will soon probably support both,
* **Automatic Inlining of Fonts:** A quality of life improvement, the Angular CLI will now automatically download and inline fonts that are being used or linked to in the application.

Along with the updates Angular also maintains a really detailed roadmap for features in progress of being implemented and those planned on being implemented in the future. If the features described here didn't convince you or you’re simply looking at what’s next for Angular head on over there and check it out. As previously with Vue, next time we’ll take a look at directives, which are basically Angular’s version of web components, so stay tuned and see you next time.

Angular - a short overview

The most important part of any web or mobile app is the content it provides. Exchanging data is a fundamental feature of any modern app. What distinguishes a great app from a mediocre one is the quality of accessing & presenting the data. Using API is the most popular way of setting up a communication system between external systems. Building a great API is a complicated process. Fortunately, there are many tools to help us out. One of them is a library called Searchkit.

## Searched focused API made easy

[Searchkit](https://github.com/searchkit/searchkit) is a tool allowing you can quickly build a search experience using predefined GraphQL resolvers and React components. Built on the top of Apollo GraphQL, React & Elasticsearch, Searchkit makes building a high-quality API a lot easier. The library provides GraphQL resolvers dedicated to handling the most common use cases you could think of when using filtering oriented API beginning with basic operations such as simple querying, ending on more tricky ones such as efficient facet filtering or pagination.

Features:

* **Designed for Search UI** - Searchkit's resolvers combined with the power of Elasticsearch & Apollo GraphQL makes it easy to build your search-focused API.
* **Client-oriented** - many APIs end up being completely out of touch with the client's actual needs. Searchkit is listened to the needs of the client-side making it super easy to integrate with your web or mobile app.
* **Efficient Search** - the library makes the faceted search easy by providing numerous ways of filtering. Text, numbers, dates? They got you covered.
* **Highly Customisable** - Searchkit is easily customizable and doesn't make you bound with Elasticsearch, if you prefer to fetch information from different sources you can write your own resolvers. GraphQL makes it super easy to customize the API with your own data without interacting with Searchkit's core.

## Out the box React Components

The makers of the Searchikit are motivated by the idea of providing a great search experience for all users, even those not fluent in Elasticsearch & React. For this group of users Searchkit offers an out of the box solution that provides UI components flawlessly working with Searchkit's API. If you are looking for a search solution for your project Searchkit delivers a great search experience in no time by leveraging Elastic's EUI React components.

```ts
yarn add @searchkit/client @searchkit/elastic-ui @elastic/eui
```

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

##### Source: [searchkit.co](https://www.searchkit.co/)

To get more in-depth information on how to start building your API with Searchkit make sure to visit its [official documentation](https://www.searchkit.co/docs/getting-started/with-react) and [GitHub page](https://github.com/searchkit/searchkit). Have fun!

Searchkit - Search UI with GraphQL, React and Elasticsearch

[In my previous blog post I outlined what Vue is](https://graphqleditor.com/blog/vue-overview/) and went through a bit of its history and versions one through three and their key features. Like I mentioned there **Web Components have long been a key part of Vue and they are a powerful feature** that deserves a bit more than a brief mention. If you’re not familiar with Vue or you just want to read about it head on here, if not let’s get right into Web Components and what they’re all about.

## The basics

Web Components are a set of features that let you create new custom, reusable, encapsulated HTML tags for use in web pages and apps. They are supported by every major browser and are backwards compatible through Javascript-based custom libraries. Basically they can be used with any JavaScript library or framework that works with HTML. To be precise Web Components consist of three technologies which work together:

* **Custom Elements** - HTML elements with custom behaviours, templates and tag names made with a set of JavaScript APIs,
* **Shadow DOM** - a ‘*DOM within a DOM*’ it’s its own isolated DOM tree with its own elements and styles completely separate from the original DOM. This allows encapsulation and componentization natively on the web platform without having to rely on iframes,
* **HTML Templates** - a tool for holding HTML which is not to be rendered when a page is loaded but instead can be instantiated when called upon.

## What’s that got to do with Vue?

Now with that brief outline of the general functionality of Web Components behind us, let's focus on where Vue comes in. As mentioned previously the new features in Vue 3 are a major help here when it comes to components. The Composition API offers more flexibility as code can now be organized as functions, each dealing with a specific feature. It also makes extracting and reusing logic between components much easier. Teleport allows specifying template HTML that can be sent to another part of the DOM or even outside the scope of the app. Which is useful if one component has some HTML that has to get rendered in an alternative location for example if it's run on a widget or a small part of the webpage. Additionally Vue has long provided the ability to package SFCs or single file components as a Web Component, which basically lets you create and use your own custom HTML tags.

![Teleport in Vuejs](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/teleport-vue-1730850579479.webp)

##### Source: [Vuejs.org](https://vuejs.org/guide/built-ins/teleport.html)

## You’re not on your own

All this makes Vue a very straightforward and easily customizable tool for developers wanting to work with Web Components. As I mentioned you can quite easily start working on your own components or you can hop on GitHub and check out some of those made by the community. Let’s take a look at that:

* **Vuetify** - a UI framework built on top of Vue.js lets you create clean, semantic, reusable UI components and works with Vue’s Server Side Rendering (SSR). It provides over 80 Vue components which makes for a pretty nice base for creating apps with way less effort.
* **Vue Material** - a scalable library made exactly in accordance with the Google Material Design specs. Contains over 56 components useful for making complex app shells and will help make apps that can fit on every screen with support for all modern Web Browsers.
* **Quasar** - a full-fledged framework that supports features like minification and caching. Additionally it provides components for your framework, over 80 of them in fact. It also provides support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app & Browser Extension) and has tight integration with its own CLI. Quasar is fairly extensive and has in-depth documentation and robust end-to-end implementation.
* **Buefy** - lightweight UI component library based on Vue and Bulma (a CSS framework) Simply put Buefy provides a JavaScript layer for interfaces created with Bulma CSS. If you’re looking to build apps with a simple and intuitive interface this tool will help you hit the ground running.
* **iView** - a Vue.js 2.0 based library which provides a number of high quality UI components and widgets. It also has its own CLI tool, iView-cli, which has a visual tool for component scaffolding and an offline version of the documentation. If you’re into neat and elegant design this is the way to go.

![Vue Web Components libraries](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/vue-libs-1730850585697.webp)

## Which to choose?

That’s a lot of components right? The idea is to help get your project off the ground as quickly and easily as possible by providing you with a base of useful components. This way you can start working on your app right away without spending time on making your own components. Not that there's anything wrong with that, you can add our own components and Vue is a great help with that. Bear in mind most of these tools are geared towards a certain type of app, so you’ll have to check out which one fits your needs best. There’s plenty to choose from on GitHub, you can use them, join one of the communities behind those mentioned above and improve it or even create your own libraries to help others. The possibilities here are almost limitless.

Vue - introduction to Web Components

Vue has definitely been making rounds in the dev community as of late. According to recent surveys, like the 2020 Stack Overflow Survey, it's now the 7th most popular frontend Javascript framework. If you’re familiar with building web applications chances are you’ve already heard about it quite a bit. If you haven’t or you’re just curious to hear more, look no further. I'll try to provide a brief and hopefully at least a bit helpful summary here.

## Vue 1

Development of Vue.js started all the way back in 2013 with the first versions coming out in 2014 and the production ready 1.0 version coming out in October of 2015. The first big break came when the Laravel community picked it over React and its popularity has been steadily growing ever since. The big advantages highlighted since the 1.0 release were:

- **Simplicity** - especially in comparison to React, most devs agreed Vue is a lot easier to get into
- **Reactivity** - models are JavaScript objects, when you modify them the view updates automatically
- **Stability** - from version 0.1 to 1.0 Vue had maintained 100% test coverage and GitHub issues were resolved on average in 13 hours

And finally, the components. Especially handy for structuring more complex interfaces, they’re custom elements that get assigned specified behavior by the Vue.js compiler. Additionally they’re reusable, modular and can fit inside other components to form a tree representing your UI. Components have been one of the most powerful features of Vue since 1.0 so I’ll go into more detail on them next week.

## Vue 2

In the following year Vue cracked the top 30 all-time ranking on GitHub and 1 million downloads on NPM. The next step was the release of Vue 2.0 in September 2016. Aside from the usual bug fixes, updates to documentation and API design, the new version focused on further improving Vue.js’s strengths.

- **Performance** - the rendering layer overhaul improved initial rendering speed and memory consumption by up to 2-4 times making Vue 2 one of the fastest frameworks available and significantly faster than React or Angular.

- **Render functions** - aside from optimization 2.0 also gave the users a bit more flexibility, by default templates are compiled into Virtual DOM render functions, but users who prefer it can directly author render functions in JavaScript and there's even an optional plugin for JSX.

- **Server Side Rendering** - SSR support with component level caching and client-side hydration provides another boost to performance and allows for extremely fast rendering.

- **Component updates** - several key components like vueify, vuex and vue-router also received improvements.

## Vue 3

As I mentioned previously Vue has been steadily growing more popular every year, now it has over 1.3 million users worldwide. This year could take it even further since the much anticipated Vue 3.0 was finally released on September 18th. Once again the focus is to build on its strengths as creator Evan You outlined Vue 3 is faster, smaller, more maintainable and easier to target native. Let’s take a look at the highlights:

- **Another boost to performance** - a rewritten virtual DOM and compiler-informed fast paths make Vue 3 even faster than the previous version. Looking at the numbers it's up to 55% faster, 41% lighter and uses up to 54% less memory than Vue 2.

- **A completely new API** - the biggest change this time is the new Composition API which provides an alternative syntax for writing large scale applications and enables logic composition and reuse similar to React Hooks. It's also compatible with Vue 2.x via a special plugin and has utility libraries that work for both Vue 2 and 3.

- **Teleporting components** - Teleport is Vue’s version of React’s Portal, as the name suggests it teleports an object from one place to another. To be precise it allows you to define a component in one place and render it in a different position in the DOM tree or even outside the scope of the app.

- **Multi-root components support** - this feature allows declaring any number of root elements on single-file components. Now there's no need for special plugins, the new Fragments API handles multiple root elements by itself.

Alongside the release there's already some planned next steps for the final months of 2020 such as IE11 support and migration. For now it looks like Vue’s future is looking up and it might overtake the likes of Angular and React in the next few years. Even if it won't, that's still damn impressive for something, which as its creator stated, started out as just a side project to help him with his own work.

## The whole story

It's almost unimaginable that Vue, which began as a side project of a Google developer, now shares the podium with top JS frameworks like React & Angular! Make sure to check out this inspiring Vue.js documentary by Honeypot:

https://www.youtube.com/watch?v=OrxmtDw4pVI


VUE - a short overview

GraphQL’s astounding growth is attracting more and more developers each year, according to the State of JavaScript 2019 report, it's used by 39% of devs, with another 51% wanting to learn it. The most commonly named obstacle is that GraphQL requires building and maintaining your own backend. That’s why a number of GraphQL tools attempt to either help you with that or even do it for you.

## GraphQL & Dgraph

One of those tools is Dgraph, which I mentioned in part three of my overview of GraphQL tools and libraries. It's the highest rated graph database on GitHub and has over a million pulls on Docker. I highlighted some of its advantages like horizontal scalability and ACID transactions, but obviously nothing is perfect and it had some drawbacks. It used its own query language, GraphQL +-, which as the name suggests, had some bits of GraphQL and didn't have some others. For example, it didn't work with GraphQL GUIs like [GraphiQL](/graphql-playground) or the Apollo React client.

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

##### Source: [dgraph.io/slash-graphql](https://dgraph.io/docs/graphql)

## Slash GraphQL enters the scene

Now the creators of Dgraph have launched Slash GraphQL, the first GraphQL-native database backend-as-a-service. Well, that was a bit of a word salad, let’s try and make it a bit less convoluted. To put it simpler, Slash GraphQL is a fully managed GraphQL backend service powered by Dgraph. Let’s take a look what that means:

* **It's GraphQL native** - unlike other tools which run on top of another non-native database, Slash GraphQL has a GraphQL native database, which greatly impacts performance and scaling by handling GraphQL traversals, joins, and retrievals in the most optimal way possible.
* **It's compatible** - another plus of it being native is that it takes full advantage of GraphQL. No more problems with React or GUIs, Slash GraphQL works with everything in the GraphQL ecosystem, you can even create your own instance with GraphQL.
* **It's really fast and simple** - remember that obstacle I mentioned before? With Slash GraphQL it’s as simple as specifying the schema and pressing the deploy button. That’s how quickly and easily it will provide you with a production-ready backend for your app.

## A different approach

The main draw here is the native GraphQL database. Other tools set up a GraphQL layer on top of an existing database which acts as a bottleneck in terms of performance, and scalability and creates compatibility issues. On top of that users need to make sure to set their tables correctly according to the underlying database before they begin working on a schema, which creates unnecessary hassle. Then with every change to the schema they have to again make changes to the underlying table, which depending on the structure can be quite complicated and time-consuming, ie. even more hassle. With Slash GraphQL you avoid all of that, all you need to work on is the schema and it will create backend for you with a simple click of a button.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/slash-vs-1730835658393.webp)

##### Source: [dgraph.io/slash-graphql](https://dgraph.io/docs/graphql)

## The game-changer?

Looking at GraphQL’s rising popularity it's hard not to see Slash GraphQL might be a game-changer for the GraphQL ecosystem and will be gaining popularity alongside it. As mentioned previously, it practically eliminates what most said is the biggest obstacle in getting into GraphQL, building and maintaining the backend. Simplifying the process really changes the learning curve, you don't need to write backend, know resolver patterns, or think about the tables and the database. All you need to know is GraphQL and you can get right to building your app. Looking at that 51% of devs who want to learn GraphQL, there's plenty of people who’ll do just that. Will Slash revolutionize the world of GraphQL? We need to wait a bit more to see.

Slash GraphQL - a fully managed GraphQL backend service

We've just launched **GraphQL Editor 3.0** and I must say it's nothing like a year ago as we released it. When we started our vision was to provide an alternative way of designing a GraphQL schema, but what we ended up with is a lot more.

This is the biggest release from the beginning of GraphQL Editor. It introduces many new features as well as improvements to the interface, all to provide our users with the fastest and easiest way to build & manage your GraphQL schema and could not have been done without 20 000+ developers using our tool and the valuable feedback they provide!

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

## What’s new

### 📝 Editor

The main feature of our tools is facilitating building and managing a GraphQL schema. The latest release introduced a completely reworked hierarchy view and new *Organizer Mode*, allowing for even faster creation and navigation through the schema.

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

### 🌌 Faker

Faker is one of our users' most-loved features. In this version, we believe we have improved it a lot by allowing you to specify faker values from faker.js as well as to specify an array of values to choose a random value from that array. Oh and it all comes in a new nice dark theme!

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

### 📚 JAMStack

The new version of the GraphQL Editor allows you to export JAMStack sites & bundles. The JAMStack way is becoming more & more popular and we want to facilitate our user this new way to build websites and apps.

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

### ⚙️ Automatically generated documentation

Being able to auto-generate documentation of a GraphQL schema is such an improvement for every developer that we have decided that this feature should be available for every project.

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

We have also improved:

* **Live collaboration** 👨‍💻👩‍💻 - now you can invite an unlimited number of viewers to every team at any time,
* **GraphQL Editor guide** 📑 - we released a full guide to learn how to unleash the full potential of the GraphQL Editor in your projects.

So basically this is what we have been working on last year. We are really excited to finally be able to ship it to production. We would love to hear what you think so please make sure to try a new version yourself:

**Check out the new editor 👉** [GraphQL Editor](https://graphqleditor.com/)

**Find us on Product Hunt 👉** [Product Hunt Page](https://www.producthunt.com/products/graphql-editor#graphql-editor-3-0)

That's all for this release but we are not slowing down as a matter of fact we are already thinking about the next one. Our team is dedicated to improving the GraphQL ecosystem and we want to do that by open-sourcing part of our project that might be useful for other developers. The next big thing we are working on is an open-source Serverless GraphQL Backend which we hope to have ready for the next big release! Stay tuned!

GraphQL Editor 3.0 - new release

It took a while, but nevertheless, here it finally is - **GraphQL Tools & Libraries Part 3**. If you missed it here’s a [link to part one](https://graphqleditor.com/blog/graphql-tools-part1/) & [part two](https://graphqleditor.com/blog/graphql-tools-part2/) of GraphQL tools & libraries. Now let’s dig in.

## Graphene Python

Graphene Python is a library for building GraphQL APIs with Python. It’s declared goal is to provide a simple and extendable API to make devs lives easier. While fast and easy to use it’s also versatile and data-agnostic. Graphene offers:

* Integrations with different frameworks like Django, SQLAlchemy, and Google App Engine,
* Instantly ready to use, will work out of the box with your current stack
* Built-in Relay support,
* Supports every kind of data source, SQL, NoSQL, custom Python objects, and others.

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

##### Source: [graphene-python.org](https://graphene-python.org/)

## Firecamp

Unlike many tools and libraries that aim to help here and there, Firecamp is a larger tool packed with features that aim to be a swiss army knife for API development. They describe it as a campsite for developers to test and enhance their work. It serves both as a multi-purpose dev tool and as a platform to test HTTPs, WebSocket, and GraphQl endpoints. Among noteworthy Firecamp features we will find:

* visual components that make everything look more transparent and professional
* introspection viewer which lets you review schema
* code snippet generator for over 10 different languages
* automatically managed query history for previous query requests

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

##### Source: Firecamp

## Dgraph

Dgraph prides itself on being the only native GraphQL Database with a graph backend. It has some pretty ambitious goals as its description states:

> *Dgraph's goal is to provide Google production-level scale and throughput, with low enough latency to be serving real-time user queries, over terabytes of structured data.*

Looking at it, the main advantages here is that it’s scalable and distributed while the biggest feature is ACID transactions. To put it short, it's a set of properties a database system maintains during transaction execution that guarantees data validity in spite of errors, power outages, and other problems.

* shared and distributed architecture
* GraphQL inspired language
* distributed ACID transactions

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

##### Source: [dgraph.io](https://dgraph.io/)

## [GraphQL Zeus](/docs/zeus)

Zeus is a clever GraphQL fetching tool with type-safe requests and responses. The key feature here is that it provides autocompletion for strongly typed queries for Javascript or TypeScript but not limited to that!

* query autocompletion for strongly typed queries,
* supports mapped types,
* JS/TS support (Browser, NodeJS, and React Native),
* simpler approach to GraphQL parsing using the graphql-js library and parsing AST to simpler types.

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

##### Source: [[graphql-zeus](/docs/zeus)](https://github.com/graphql-editor/graphql-zeus)

## AWS AppSync

AWS AppSync is a powerful application development service that adds additional functionality on top of GraphQL. The key selling point here is that it reduces the amount of code you need to write and accelerates development by abstracting part of the backend.

* **Automatic code generation** - available via AppSync management console or the AWS Amplify CLI, it lets you use automatically generated schemas and resolvers minimizing the amount of coding you have to do manually.
* **Pipeline Resolvers** - each resolver consists of a Before and After mapping template with a list of functions and each function has request and response mapping templates that manage interactions with the data source. This means you can stack different functions to perform more complex resolver operations.
* **AWS CloudFormation** - automate your work by managing your AWS stack and resources via templates. Simply define the resources you need in a JSON or YAML file, deploy the service via the CloudFormation console and AWS will generate and make the resources ready for use as specified.

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

##### Source: [aws.amazon.com/appsync](https://aws.amazon.com/appsync/)

Well, that’s it for part three. As you can see GraphQL is very flexible and using it can be made even more advantageous with the right tools. Some of those are small tools and libraries that will provide a few quality of life improvements, some are larger tools and services that will completely change the way you work with GraphQL. It’s obviously up to you to choose what works best for you and I sincerely hope I helped with that at least a little bit.

GraphQL tools & libraries - Part 3

GraphQL is a query language for APIs that describes how to ask & fetch the data from the server to the client which of course requires setting up a server. Below you will find a list of the most popular GraphgQL server implementations. There’s quite a few of them so we’re not going to get through the lot of them in one go.

## Express GraphQL

It is said that [Express GraphQL](https://github.com/graphql/express-graphql) is the simplest way to run a GraphQL API server. Express is a popular web application framework for Node.js allowing you to create a GraphQL server with any HTTP web framework supporting connect styled middleware including [Express](https://expressjs.com/), [Restify](http://restify.com/) and, of course, [Connect](https://github.com/senchalabs/connect). Getting started is as easy as installing some additional dependencies in form of `npm install express express-graphql graphql --save`

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

##### Source: [graphql.org](https://graphql.org/graphql-js/running-an-express-graphql-server/)

## Apollo GraphQL Server

[Apollo GraphQL Server](https://github.com/apollographql/apollo-server) is an open-source GraphQL server compatible with any GraphQL client and it's an easy way to build a production-ready, self-documenting GraphQL API that can use data from any source. Apollo Server can be used as a stand-alone GraphQL server, a plugin to your application's Node.js middleware, or as a gateway for a federated data graph. Apollo GraphQL Server offers:

* **easy setup** - client-side can start fetching data instantly,
* **incremental adoption** - elastic approach to adding new features, you can add them easily later on when you decide they're needed,
* **universality** - compatibility with any data source, multiple
  build tools and GraphQL clients,
* **production-ready** - tested across various enterprise-grade projects.

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

##### Source: [apollographql.com](https://github.com/apollographql/apollo-server)

## Hot Chocolate

Hot Chocolate is a GraphQL server you can use to create GraphQL endpoints, merge schemas, etc. Hot Chocolate is a part of a .NET based [ChilliCream GraphQL Platform](https://github.com/ChilliCream/graphql-platform) that can help you build a GraphQL layer over your existing and new infrastructure. It provides pre-built templates that let you start in seconds, supporting both ASP.Net Core as well as ASP.Net Framework out of the box.

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

##### Source: [github.com/ChilliCream/graphql-platform](https://github.com/ChilliCream/graphql-platform)

## Hasura GraphQL Engine

[Hasura GraphQL Engine](https://github.com/hasura/graphql-engine) is a GraphQL server that gives you realtime GraphQL APIs over Postgres, making easy building your new Postgress-backed GraphQL app or adding a GraphQL layer for your existing Postgres bases app. Hasura GraphQL Engine offers built-in filtering, pagination, merging remote schemas along with many other useful features. All that keeping high-performance & footprint at the lowest possible rate.

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

##### Source: [github.com/hasura](https://github.com/hasura/graphql-engine)

## API PLATFORM

[API Platform](https://github.com/api-platform/api-platform) is a set of tools that combined build a modern framework for building REST and GraphQL APIs including GraphQL Server. The server solution is located in the API Platform Core Library which is built on top of Symfony 4 (PHP) microframework and the Doctrine ORM. API Platform Core Library is a highly flexible solution allowing you to build fully-featured GraphQL API in minutes.

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

##### Source: [api-platform.com](https://api-platform.com/)

## Parse Server GraphQL API

In addition to the traditional REST API, Parse Server automatically generates a GraphQL API basing on a given schema. [Parse Server GraphQL API](https://docs.parseplatform.org/graphql/guide/) follows Relay specification along with the latest industry standards which makes it a perfect choice for modern projects requiring the highest-scalability.

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

##### Source: [docs.parseplatform.org/graphql/guide](https://docs.parseplatform.org/graphql/guide/)

That’s it for the first look at GraphQL servers. So if I missed your favorite one, just mention it in the comments and stay tuned for the next parts!

Most popular GraphQL servers

Downloading, modifying, uploading, in general exchanging data is fundamental for modern apps. Using API (defined set of rules how apps can communicate with each other) is the most popular way of setting up a communication system between external systems.

> *What makes a good API?*

First of all, it needs to be easily understandable and legible for all its potential users. A decent API should have well-documented examples and do not leave any room for guessing. There is a solution that comes in handy if you want to create a solid API, it's a tool called [the API Platform](https://api-platform.com/).

## API Platform

API Platform is a set of tools that combined build a next-generation REST and GraphQL framework to build modern API. The server API Platform is built on top of enterprise-proven solutions:

* **Server-side** - Symfony 4 microframework and the Doctrine ORM.
* **Client-side** - we have an option to choose between ReactJS & Vue.js for the web and React Native for mobile.
* **Development & deployment environments** - Docker, Kubernetes, and Helm.

All that powers the modules responsible for API creation, schema generation, admin panel & client generation:

* **API Platform Core Library** - a highly flexibly, stacked with cool features core library allowing you to build fully-featured REST or GraphQL API in minutes.
* **The Schema Generator** - a CLI tool that instantly generates a PHP data model from the Schema.org vocabulary allowing ORM to create corresponding tables.
* **API Platform Admin** - a tool to automatically adds a React-based admin interface to your API, all that without writing a single line of code.
* **API Platform Client Generator** - the fastest way to scaffold fully-featured web apps (powered by React or Vue.js) or native mobile apps (based on React Native).

![API Platform layers](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/api-flow.webp)

###### Source: [api-platform.com](https://api-platform.com/)

Platform API looks very promising as an all-in-one solution for modern projects and it's worth taking a closer look. The wide range of microservices offered by API Platform might come in handy for many developers. I'm pretty sure that deeper dive into all its features and using what best it has to offer like data validation, pagination, hypermedia or GraphQL support, and many more can result in a significant productivity boost!

API PLATFORM - a framework to build modern API


GraphQL started being developed internally at Facebook back in 2012, before being publicly released as open-source in 2015. **GraphQL is a query language for APIs**, its main advantage is allowing clients to query exactly for the type of data that is required. The definitions of all the data clients can query through the service are stored in GraphQL schema. Each field in the schema is attached to a function, called a resolver, which gets called to produce the values when a query is executed.

GraphQL is language-agnostic which makes it fairly easy to be adopted across different technologies, one of its successful implementations is done in Rust, by a library called Juniper.

## Code- first, fast & type-safe GraphQL Servers in Rust

**[Juniper](https://github.com/graphql-rust/juniper)** is a code-first approach that allows you to write **type-safe and super fast GraphQL servers in Rust**, keeping declaring and resolving GraphQL schemas as easy as possible.

GraphQL query language is fully supported, including interfaces, unions, schema introspection, validations, as well as some basic Rust crates integrations allowing you to use popular Rust types as `uuid`, `url`, `chrono`, or `bson` out of the box.

As previously mentioned **Juniper is a code-first library**, if you prefer the schema-first approach you can use [juniper-from-schema](https://github.com/davidpdrsn/juniper-from-schema) to **auto-generate resolvers** for your GraphQL schema.

Although Juniper does not provide a built-in web server functionality it comes with building blocks to make integration with your servers as seamless as possible, as well as optionally providing pre-built integration for popular Rust web frameworks like:

- Actix,
- Hyper,
- Iron,
- Rocket,
- Warp.

## Example of Juniper integration for Actix

Below you can find a sample Juniper integration with the **Actix web framework**. The servers run on `127.0.0.1:8080` and has built-in [GraphiQL](/graphql-playground) for easier testing. Star it with:

```ts
cd examples/juniper
cargo run (or ``cargo watch -x run``)
```

Simple query example:
![Query and its result example](/query_result.webp)

Simple mutation example with its result:
![Mutation and its result example](/mutation_result.webp)

If you are looking for more advanced usage examples make sure to visit juniper-advancedexample repo.

##### Source: github.com/actix/examples


Blog