Why Headless CMS & GraphQL are a Natural Fit [Takeshape Demo]

The first time we wrote about GraphQL, back in 2017, we described it as a shiny new tool developed by Facebook.

GraphCMS, which we presented in that article, was one of the first softwares to use it as a core feature.

It was just another drop in a sea of development tools. No biggie, right?

Not quite.

I think we can all agree that GraphQL is now integral to the modern web ecosystem.

Proof #1: the number of static site generators and headless CMSs making it a prime built-in feature has been skyrocketing in the last few months.

One of them being TakeShape.io, which I’ll explore further in a technical demo at the end of this post.

First, I want to take a look at:

  • The state of GraphQL in 2019
  • The benefits it brings to headless CMSs
  • The tools that feature GraphQL
  • An introduction to TakeShape.io

Let’s begin by wrapping our heads around the concepts behind GraphQL.

1. Getting up-to-date with GraphQL

graphql-headless-cms

You may be reading without even knowing what GraphQL really is. For clarity’s sake, it’s a query language for APIs that defines how to fetch data from one or many databases.

For a proper technical GraphQL introduction I suggest our first post on the matter.

A lot has changed since its first use case with FB mobile apps back in 2012, mostly regarding its adoption. GraphQL was open-sourced in 2015, giving it an initial burst of life for a larger number of devs. 4 years later, its rising presence in our industry is undeniable.

Proof #2 that GraphQL is an integral part of web development: its adoption by tech giants. Apart from Facebook, other major players like GitHub, Shopify, Pinterest, Paypal & Twitter all use GraphQL in some way or another.

Impressively enough, it fits directly in the adoption timeline that Lee Byron, GraphQL’s creator, had in mind a few years ago. The next step according to him? Omnipresence in web platforms. We have every reason to believe him.

Prepare to hear about GraphQL a lot in 2019. Many publications rank it as one of the most important JS trends to keep an eye on in the next few months. Npm itself says that you’ll need to learn it in 2019 & GraphQL experts are already drooling thinking about the bright future of the tech.

But… wait a second here.

Hype is one thing, but one of my colleagues said something about it that I found pretty interesting:

“The general hype around GraphQL has made us forget why it was really cool in the first place.”

It’s true that if intensive public talk can sometimes oversell something (that Birdbox movie, anyone?) it can also overshadow its initial merits.

For us, these pillars for GraphQL are:

  1. The GraphQL specification has been developed as a way to define single highly flexible API endpoints giving developers access to complete relational models.
  2. It is incredibly powerful because it gives consumers total control over how they want the requested data to be structured, as well as how deep they want to go into entity relations.

In the same vein, a GitHub engineer explains why he can’t wait for GraphQL to be “uncool” in this episode of JAMstack Radio.

What about that old GraphQL vs. REST talk?

I won’t lose myself too long here because it’s also a topic we discussed in our first GraphQL piece and the debate hasn’t really changed.

Of course, the rising GraphQL adoption is forcing us to keep this discussion going but REST APIs are still alive & well and not under any threat of extinction, for now. You can’t put them aside and say that one is the other’s predecessor because they’re simply not of the same nature. They can live together just fine in the same environment.

Still, GraphQL comes as an upgrade for certain functions that weren’t optimal with REST APIs.

2. How headless CMS are leveraging GraphQL

If you’ve paid attention in the last few months, you might have observed a lot of tools adding GraphQL as a built-in feature, or new ones breaking into the market with GraphQL as a selling point.

This list includes:

  • Gatsby (SSG) - The popular React-powered static site generator leverages GraphQL to fetch data from multiple sources.
  • Gridsome (SSG) - The Vue.js equivalent to Gatsby, also featuring GraphQL.
  • GraphCMS - The name says it all. It was probably the first headless CMS to put GraphQL forward.
  • Strapi - This neat Node.js headless CMS lets you use REST or GraphQL APIs.
  • Unite CMS - Still in beta, this new headless CMS is built on Symfony 4 & GraphQL.
  • CannerCMS - An open-source API-driven headless CMS.
  • TakeShape - More on this new headless CMS down below.

In this post, I want to focus solely on the headless CMSs in this list. More precisely, how GraphQL is making them better and worthy of your attention.

graphql-attention

There are 4 main advantages that I think it’s important to highlight:

→ Better API to retrieve data: The main premise of GraphQL is to offer the capacity for devs to chose exactly what they need from the database and receive that data in a predictable way. Not only that, but you can fetch many resources in a single request. Say goodbye to over bloated server/database requests.

→ Possibility to insert data from external applications: Isn’t it what APIs have always been used for? Sure, but once again GraphQL makes this process more structured and organized. One great thing that headless CMSs enable is modular development. So, when scaling an app you’ll need to plug some external functionalities and GraphQL assures that you’ll only get what you really need from each of them.

→ Great performances: Smaller, more efficient requests to databases and external apps will no doubt be beneficial for your system’s performance.

→ Easy delivery to multiple channels: GraphQL is embracing modern trends. With the rise of mobile, wearable technologies & IoT it’s becoming important to develop APIs that can easily serve multiple channels.

It’s time to move from theory to practice, with TakeShape.io as our guinea pig.

3. What is TakeShape.io?

headles-cms-graphql-takeshape

TakeShape is a new JAMstack-oriented tool that combines the functionalities of a headless CMS, GraphQL API and static site generator.

It’s only a few months old since it was officially launched in September 2018. It caught our attention thanks to their JAMstack-related content and we’ve been eager to try it ever since.

It was built with the premise that “content management shouldn’t be hard”. TakeShape was crafted with developers in mind, giving them a frictionless framework to create projects on. But content crafters won’t be left in the dark, thanks to an intuitive interface and the necessary features to manage content efficiently.

It fully embraces the latest modern development trends, making the best of the built-in GraphQL API and even offering its own static site generator. But, don’t worry, as with every good headless CMS, you can also attach to it the frontend tech of your choice.

The founders also seem to be all-around good guys from the small discussion we’ve had with them prior to building this demo, so I’m really happy to finally dive into it!

#graphql

What is GEEK

Buddha Community

Why Headless CMS & GraphQL are a Natural Fit [Takeshape Demo]

Why Headless CMS & GraphQL are a Natural Fit [Takeshape Demo]

The first time we wrote about GraphQL, back in 2017, we described it as a shiny new tool developed by Facebook.

GraphCMS, which we presented in that article, was one of the first softwares to use it as a core feature.

It was just another drop in a sea of development tools. No biggie, right?

Not quite.

I think we can all agree that GraphQL is now integral to the modern web ecosystem.

Proof #1: the number of static site generators and headless CMSs making it a prime built-in feature has been skyrocketing in the last few months.

One of them being TakeShape.io, which I’ll explore further in a technical demo at the end of this post.

First, I want to take a look at:

  • The state of GraphQL in 2019
  • The benefits it brings to headless CMSs
  • The tools that feature GraphQL
  • An introduction to TakeShape.io

Let’s begin by wrapping our heads around the concepts behind GraphQL.

1. Getting up-to-date with GraphQL

graphql-headless-cms

You may be reading without even knowing what GraphQL really is. For clarity’s sake, it’s a query language for APIs that defines how to fetch data from one or many databases.

For a proper technical GraphQL introduction I suggest our first post on the matter.

A lot has changed since its first use case with FB mobile apps back in 2012, mostly regarding its adoption. GraphQL was open-sourced in 2015, giving it an initial burst of life for a larger number of devs. 4 years later, its rising presence in our industry is undeniable.

Proof #2 that GraphQL is an integral part of web development: its adoption by tech giants. Apart from Facebook, other major players like GitHub, Shopify, Pinterest, Paypal & Twitter all use GraphQL in some way or another.

Impressively enough, it fits directly in the adoption timeline that Lee Byron, GraphQL’s creator, had in mind a few years ago. The next step according to him? Omnipresence in web platforms. We have every reason to believe him.

Prepare to hear about GraphQL a lot in 2019. Many publications rank it as one of the most important JS trends to keep an eye on in the next few months. Npm itself says that you’ll need to learn it in 2019 & GraphQL experts are already drooling thinking about the bright future of the tech.

But… wait a second here.

Hype is one thing, but one of my colleagues said something about it that I found pretty interesting:

“The general hype around GraphQL has made us forget why it was really cool in the first place.”

It’s true that if intensive public talk can sometimes oversell something (that Birdbox movie, anyone?) it can also overshadow its initial merits.

For us, these pillars for GraphQL are:

  1. The GraphQL specification has been developed as a way to define single highly flexible API endpoints giving developers access to complete relational models.
  2. It is incredibly powerful because it gives consumers total control over how they want the requested data to be structured, as well as how deep they want to go into entity relations.

In the same vein, a GitHub engineer explains why he can’t wait for GraphQL to be “uncool” in this episode of JAMstack Radio.

What about that old GraphQL vs. REST talk?

I won’t lose myself too long here because it’s also a topic we discussed in our first GraphQL piece and the debate hasn’t really changed.

Of course, the rising GraphQL adoption is forcing us to keep this discussion going but REST APIs are still alive & well and not under any threat of extinction, for now. You can’t put them aside and say that one is the other’s predecessor because they’re simply not of the same nature. They can live together just fine in the same environment.

Still, GraphQL comes as an upgrade for certain functions that weren’t optimal with REST APIs.

2. How headless CMS are leveraging GraphQL

If you’ve paid attention in the last few months, you might have observed a lot of tools adding GraphQL as a built-in feature, or new ones breaking into the market with GraphQL as a selling point.

This list includes:

  • Gatsby (SSG) - The popular React-powered static site generator leverages GraphQL to fetch data from multiple sources.
  • Gridsome (SSG) - The Vue.js equivalent to Gatsby, also featuring GraphQL.
  • GraphCMS - The name says it all. It was probably the first headless CMS to put GraphQL forward.
  • Strapi - This neat Node.js headless CMS lets you use REST or GraphQL APIs.
  • Unite CMS - Still in beta, this new headless CMS is built on Symfony 4 & GraphQL.
  • CannerCMS - An open-source API-driven headless CMS.
  • TakeShape - More on this new headless CMS down below.

In this post, I want to focus solely on the headless CMSs in this list. More precisely, how GraphQL is making them better and worthy of your attention.

graphql-attention

There are 4 main advantages that I think it’s important to highlight:

→ Better API to retrieve data: The main premise of GraphQL is to offer the capacity for devs to chose exactly what they need from the database and receive that data in a predictable way. Not only that, but you can fetch many resources in a single request. Say goodbye to over bloated server/database requests.

→ Possibility to insert data from external applications: Isn’t it what APIs have always been used for? Sure, but once again GraphQL makes this process more structured and organized. One great thing that headless CMSs enable is modular development. So, when scaling an app you’ll need to plug some external functionalities and GraphQL assures that you’ll only get what you really need from each of them.

→ Great performances: Smaller, more efficient requests to databases and external apps will no doubt be beneficial for your system’s performance.

→ Easy delivery to multiple channels: GraphQL is embracing modern trends. With the rise of mobile, wearable technologies & IoT it’s becoming important to develop APIs that can easily serve multiple channels.

It’s time to move from theory to practice, with TakeShape.io as our guinea pig.

3. What is TakeShape.io?

headles-cms-graphql-takeshape

TakeShape is a new JAMstack-oriented tool that combines the functionalities of a headless CMS, GraphQL API and static site generator.

It’s only a few months old since it was officially launched in September 2018. It caught our attention thanks to their JAMstack-related content and we’ve been eager to try it ever since.

It was built with the premise that “content management shouldn’t be hard”. TakeShape was crafted with developers in mind, giving them a frictionless framework to create projects on. But content crafters won’t be left in the dark, thanks to an intuitive interface and the necessary features to manage content efficiently.

It fully embraces the latest modern development trends, making the best of the built-in GraphQL API and even offering its own static site generator. But, don’t worry, as with every good headless CMS, you can also attach to it the frontend tech of your choice.

The founders also seem to be all-around good guys from the small discussion we’ve had with them prior to building this demo, so I’m really happy to finally dive into it!

#graphql

Aarna Davis

Aarna Davis

1622794592

Comparative Analysis of Top 10 Famous CMS Platforms in 2021

Comparing Top 10 Popular CMS platforms for website development such as WordPress, Wix, Drupal 8.1, Joomla 3.5 to choose the best.

Read this blog here:
https://www.intercoolstudio.com/a-comparative-analysis-of-top-10-popular-cms-platforms/

#hirecmsdevelopers
#HireCMSprogrammers
#bestcmsfordevelopers
#HireCMSdevelopersIndia
#HireCMSprogrammersIndia
#DedicatedCMSdevelopers

#hire cms developers #hire cms programmers #best cms for developers #hire cms developers india #hire cms programmers india #dedicated cms developers

Introduction to GraphQL

TL;DR

  • GraphQL is a modern query language and a runtime for APIs, widely seen as a successor to REST APIs.
  • GraphQL is built around the concept of “get exactly what you asked for”, without any under fetching or over fetching of data.
  • GraphQL makes it easier to aggregate data from multiple sources, and uses a type system to describe data rather than multiple endpoints.
  • The GraphQL Landscape shows an aggregated GraphQL adoption table covering over 116k stars, a market cap of $4.7 trillion, and a funding of over $9 billion.
  • The team at Honeypot filmed a documentary on the history and emergence of GraphQL that can be viewed on YouTube.

What is GraphQL?

Quite simply put, GraphQL is a query language for APIs and a runtime for fulfilling those queries with existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQL supports reading, writing (mutating), and subscribing to changes to data (realtime updates – most commonly implemented using WebHooks). GraphQL servers are available for multiple languages, including Haskell, JavaScript, Perl, Python, Ruby, Java, C++, C#, Scala, Go, Erlang, PHP, and R.

The attraction for GraphQL is primarily based on the concept of asking for what you need, and receiving just that - nothing more, nothing less. When sending queries to your API, GraphQL returns a very predictable result, without any over fetching or under fetching, ensuring that apps using GraphQL are fast, stable, and scalable.

To visualise how this would look, let’s use the GraphCMS website as an example (disclaimer, I work there) and take a look at the posts on the GraphCMS Academy by running a query asking for just the titles of articles.

The query would look similar to this:

{
  academyPosts {
    title
  }
}

From here we can infer that we’re just asking for the title of Academy posts, and nothing else. Therefore, the results returned would be:

{
  "data": {
    "academyPosts": [
      {
        "title": "Headless Mobile Content Management System (Mobile CMS)"
      },
      {
        "title": "What is Content as a Service (Caas)"
      },
      {
        "title": "Headless CMS and SEO Best Practices"
      },
      {
        "title": "What Is A Headless CMS?"
      },
      {
        "title": "Understanding Digital Experience Platforms (DXP) and Headless CMS"
      },
      {
        "title": "Understanding the Content Mesh and how a Headless CMS fits in."
      },
      {
        "title": "The Era of Application Content"
      },
      {
        "title": "Best Practices for Headless Content Modelling"
      },
      {
        "title": "Choosing the best Headless CMS"
      },
      {
        "title": "What is GraphQL?"
      },
      {
        "title": "Choosing a Headless CMS for Content Creators"
      },
      {
        "title": "Selecting a Headless CMS - a Checklist"
      },
      {
        "title": "What is a DXP (Digital Experience Platform)?"
      },
      {
        "title": "What is the JAMStack?"
      }
    ]
  }
}

On such a simple request its easy to highlight how the payload would be minimal. However, GraphQL queries access not just the fields of a single resource, but also follow references between them. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data in a single request - making apps quick even on slow mobile network connections.

To visualise this, let’s try a more complex request where we want to see a list of blog posts on GraphCMS, but rather than just the postTitle, also get the authors these posts are related to, the slugs of the posts, and the categories these blog posts fall under.

#graphql #headless-cms #api #rest-api #e-commerce #graphql-api #backend #database

Marcelle  Smith

Marcelle Smith

1597061580

Introduction to API-First CMS with Directus' Open Source, Headless CMS

“Off with their heads!”

The frontend developers’ call to arms echoed throughout the realm. All across the Internet lands, monolithic, traditional CMS shivered.

Seriously though, we’re finally going to discuss API-first CMS—aka decoupled/headless CMS—on the blog.

From GitHub forks to email inquiries, we’ve noticed an increasing interest in “going headless” in general, but also for e-commerce purpose. So today, we’re going to:

  1. Discuss the whatwhy and when of API-first CMS.
  2. Show how to code a transactional web app with content managed in Directus, an open source headless CMS.

More specifically, I’ll explain how to build a lookbook using a full JAMstack: Metalsmith, Vue.js, Snipcart, and Directus. I’ll even throw in an open source code repo & live demo. :)

First, let’s try to understand how API-first CMS can add value to your workflow.

“API” still sound like a kind of beer to you? Read this smooth primer first.

What is an API-first, headless CMS? Why use one?

Like traditional content management systems, API-first CMS let users manage content through a web UI. So how do they differ?

API-first CMS allow developers to decouple content management from content rendering. A coupled CMS, like WordPress, takes care of both: content is stored in a backend database AND rendered in frontend templates using HTML/CSS. So the “head” that’s missing from a headless CMS is actually that final “presentation layer”:

Unlike a traditional CMS, an API-first CMS exposes its content data via a consumable API.

Your headless CMS isn’t concerned about how you choose to display content. It pushes raw content (e.g. JSON or XML) for you to fetch and display anywhere: mobile app, static site, web app, desktop app, IoT device… or all of these at once!

api-first-cms-headless-architecture

Headless CMS architecture

So why have they become popular? Why are companies like the NY Times, Lenovo, Spotify, Nike, Apple, Microsoft & New Relic using them?

Because the web has evolved! Frontend tooling & frameworks have exploded. Traditional CMS have become limited in how they display content and are prone to many security exploitsCross-platform content management has become essential to many projects. Static site generators have resurfaced, opening a content management gap API-first CMS could fill, saving non-technical folks from editing Markdown files.

We have many tools and channels to build digital experiences today.

With headless CMS, content can seamlessly follow different forms, not be limited by one.

API-first CMS: Benefits

  • Organizations save time & money: reduction of overhead for cross-platform content management.
  • Developers get more freedom: ditching CMS templates makes for authentic UX. Fewer worries about backend scalability and maintenance.
  • Content is future-proof: reduced impact of migrations & re-designs since content is decoupled from frontend.
  • In some cases, more performance: content is pre-baked and ready to be served.

API-first CMS make for a clear separation of concerns which enhances developer productivity. They foster a technology-agnostic approach to development that resonates with our own product’s values. If you’re interested, we have an in-depth tutorial on decoupling data with Vue.js in the frontend.

Drawbacks

Most potential drawbacks (supporting user permissions, multi-languages, etc.) have already been solved. Still, a few potential issues worth mentioning:

  • Might be overkill for a simple website project.
  • Might not provide responsive UI for on-the-go content management.
  • Might not support website tree architecture for content navigation.
  • Might be expensive for client budget.

#api #cms #api-first #headless cms #open -source

Meryem Rai

Meryem Rai

1626713387

Fitness App Development: How to Create a Best Fitness App?

There’s a large body of research about the necessity of fitness to have great outcomes for mental health, cardiovascular health, longevity, etc. The rise of sedentary lifestyles makes it vital for people to add fitness routines to their daily schedules. Thus, fitness videos and apps have become popular making fitness accessible. Especially during the 2020-21 pandemic, sports and fitness studios were able to reach clients only through fitness apps. As a fitness instructor, creating a fitness streaming app development gives you credibility, direct connection to clients, and independence. Read on to find out how you can build a fitness app.

Why create the best fitness app?

Technology is evolving at a fast pace. After internet speeds picked up, video streaming websites leveraged it; also smartphones and tablets became ubiquitous, allowing everyone to watch videos on the go. Finally, since 2014, wearables became popular purchases and interest in fitness apps shot up.

Online fitness platform gyms have successfully combined the offline and online experience. VPlayed fitness app building service offers core features for this. It is scalable and easy to integrate while carrying your brand name.

Engaging services to be provided by fitness apps
Fitness apps have more features than ever and you should consider adding the following to yours:

Diet plan

This feature tracks the food consumed by the user, the nutritional breakup, and may also suggest complete meals based on preferences. There can also be a water intake tracker.

Activity tracking

This feature is crucial especially when the app can integrate with wearables. They use smartphone features to calculate distance traveled, steps taken, heart rate, and even the timings and duration of the activity, throughout the day.

Top Key features in online fitness App
After seeing the top functions users appreciate, it’s time to see what a fitness app’s features should be.

Personal Account

Users should be able to log in especially if you need to collect user data to make the app experience more personalized.

Third-Party Device Connectivity

Users will want their wearables and other devices like tablets and smartwatches to be connected, requiring IoT hybrid solutions.

User Activity Tracking

Since fitness apps are expected to track users’ progress over time, the activity-tracking feature is crucial. The data can be gathered globally, i.e over a period or locally, i.e from session to session.

How to monetize your fitness app?

There are a few different ways to monetize your fitness video content . Choose one based on the number of users and the potential for scalability.

Subscription-based Video on Demand
SVOD platform in this model people sign up for packages that give them access to some or all of the app content for a fixed period. The more features you offer, the more you can earn from this option.

Pay Per View

This option is useful for live-streaming fitness classes to new users who want to test the app. You may also combine it with SVOD.

Advertisement-based Video on Demand

Here your app content is available in exchange for viewers watching ads. This option works out well if you have enough users and infrequent uploads.

Coupons & Promotions

Having coupons and promotions in addition to one or more of the above monetization options helps attract new users or gets old users to sign up for more features.

Conclusion

Many top fitness experts have established trademark routines and launched fitness streaming platforms to control their revenue streams. Choosing a white-label fitness app development solution saves the trouble of hiring multiple teams and gives you all the fitness app documentation. Options like VPlayed give you good tech support as well, freeing you to focus on making unique content.

#fitness app #fitness app development #how to create fitness app #fitness streaming #online fitness platform