DEV Community: Slicknode

Announcing Slicknode Open-Source: GraphQL Framework + Headless CMS

Ivo Meißner — Wed, 13 Oct 2021 15:59:51 +0000

I have big news to share: I am releasing Slicknode, the GraphQL application framework + headless CMS, as Open-Source-Software!

This gives developers and digital agencies a free, more efficient, and open way for building custom digital solutions that usually require the budget for custom software development or enterprise licenses.

Watch how Slicknode makes web developers a lot more productive in this 3 min demo

Why Slicknode?

The web has evolved significantly in the last 15 years. We now have AI-powered content delivered to users across the globe, real-time communication with video, VR, and countless SaaS providers that offer functionality for every use-case imaginable. Sadly, a lot of these capabilities are not as accessible to developers as they could be. The development of such solutions happens in silos, in separate companies doing redundant work. Using and combining multiple of those functionalities requires significant integration effort and deep knowledge of the integrated system. Extending a 3rd party SaaS offering is very hard or impossible. You almost always have to create a custom backend to create something innovative. Unfortunate for countless businesses, people, and organizations that could benefit tremendously from such solutions, this is out of budget in a lot of cases.

Projects either settle for sub-optimal compromises or spend way more than they would like on a custom backend. You could circumvent the development process by using one of the page builders that come with a tempting price tag but have severe limitations and hard vendor lock-in.

Those barriers inhibit innovation. We see the result of that all over the internet: Boring websites that all look the same and do the same thing. People then spend the majority of their time on the websites of tech giants instead of on the websites of their local stores, communities, and people they see in real life.

Let's fix this with open-source software! I want to help developers create an internet where the best ideas win, not the biggest budgets. I want to enable every developer to create innovative solutions that can compete at the highest levels. But to accomplish this, we need a new approach for how we build digital solutions.

Headless Functionality

We need to free the functionality from the silos of corporations and make them easily accessible to anyone, ready to use, extend and combine. We need to decouple the functionality from the presentation layer. It gives us the flexibility we need to use any frontend framework and create solutions for any device. Headless CMSes have done this successfully in recent years, but they are mostly still limited to content. If we want to combine the functionality of multiple services, we still have to do the integration manually in the frontend, which adds complexity (error + loading states, handling authentication, etc.).

Slicknode eliminates this integration effort by applying the headless concept to any functionality you could imagine. The workflow becomes extremely simple with a modular architecture: You compose your custom backend with existing modules, 3rd party APIs, and your internal services into a unified data graph.

Need certain functionality in your project?
Just install the module - Done!

What if there is no module available for what I need?
Simply create a new one in minutes using the flexible building blocks that Slicknode provides and share it with the web developer community.

This dramatically reduces the amount of knowledge you need to build complex solutions. For example, you don't have to be a Shopify developer anymore to add eCommerce functionality to your website. You can simply install an existing module or embed an API with minimal effort.

Slicknode brings the power of all the APIs in the world right into your user interfaces. You can mix and match functionality from multiple service providers, extend their functionality with ease, and build solutions on top of the GraphQL API. You can enjoy the freedom to use any tools, programming languages, and frameworks you know and love without giving up control.

The Vision

The purpose of Slicknode is to provide a platform that empowers developers to build better solutions in less time. In 10 years, I want to look at the web and think: "There is no way I could have built those solutions with the tools from 10 years ago!"

I want Slicknode to be the platform where developers can share ideas and solutions to existing and future problems. A collaborative and welcome community where we can help each other build the next generation of the internet.

I invite all web developers to become a part of this. Share Slicknode far and wide, invite your friends and co-workers and start building great digital solutions. Let's make this the best, most friendly, and welcoming Open-Source community that empowers developers worldwide!

Where Do I Start?

The best place to start is the quickstart guide and the Github repository. Create your first project in minutes and start hacking. I will also be publishing more and more examples in the Slicknode YouTube channel and on Twitter.

I'm looking forward to working with all of you and making the world a better place through collaboration and open-source software!

Best,
Ivo Meißner
Creator of Slicknode

How To Build A Media Library With Just 25 Lines of Code - Using GraphQL and Slicknode

Ivo Meißner — Thu, 15 Apr 2021 12:17:42 +0000

Our friends from AXOLIST recently asked us to build a custom media library for their Amazon Content Tool. They wanted to give their users the possibility to upload, manage and update images for their products that they sell on the Amazon marketplace. (Those product images that you see when you shop on Amazon.com)

Background: AXOLIST is a SaaS tool for agencies that help brands sell products on the Amazon marketplace, optimize the content of their product listings for users, search rankings, and ensure compliance.

Now let's see how we added this feature to their Slicknode backend with just a few lines of code.

Requirements

To enable this type of functionality, we had to create a solution with the following requirements:

Since AXOLIST is a SaaS tool, every customer needs to have their own independent media library that can only be accessed by users that are members of that customer account.
Images need to be organized in a hierarchical folder structure to make it easy to manage large product portfolios.
Images will be displayed in multiple resolutions: Thumbnails for the listview, and a high-resolution image for a zoomed-in view.
Users should get a visual warning when they upload an image that has a resolution that is too low for the Amazon marketplace.
Folders can be dragged and dropped into other folders to quickly (re-)organize the media items in an account.
Images can be searched within each folder.
Folders should have unique names within a subfolder.
Soft-delete functionality should allow admins to restore a folder that might have been accidentally deleted.

Creating this from scratch requires a significant amount of time for building API routes, data models, migrations, image processing, authorization, etc. With Slicknode, this becomes a task that is done in 5 minutes. Let's take a look!

Implementation

First, we create the media module using the Slicknode CLI:

slicknode module create media

Then we add the data model to the schema.graphql file:

type Media_Directory implements Node
@index(fields: ["account", "parent", "name"], unique: true)
{
  id: ID!
  account: Account_Account!
  parent: Media_Directory
  name: String!

  children: [Media_Directory!]! @relation(
    path: "Media_Directory=parent.Media_Directory"
  )

  """Date when the directory was deleted, for soft delete"""
  deletedAt: DateTime
}

type Media_Asset implements Node
@index(fields: ["directory", "name"], unique: true)
{
  id: ID!

  name: String!
  directory: Media_Directory!
  account: Account_Account!

  image: Image!
}

With this data model, Slicknode automatically generates the GraphQL API, database tables, and business logic that we need to build our media library. We have the tenant separation to give each account its own media library. The built-in image module of Slicknode takes care of image upload, storage, and thumbnail generation. With the composite unique index, we can ensure that the folder names are unique within each folder and with the relations directive, we create the hierarchic folder structure that scales easily.

To secure the assets and make them only accessible for users of the account, we add a permission query for the directory type.

query DirectoryPermission1($user_id: ID!) {
  scope(role: AUTHENTICATED, operations: [CREATE, UPDATE, READ])
  node(filter: {
    deletedAt: {isNull: true}
    account: {
      users: {
        node: {
          id: { eq: $user_id }
        }
      }
    }
  })
}

We use the permission query to enable multi-tenancy and only allow users of an account to see their own directories. We can also use the same permission query to hide directories that have the deletedAt value set. The filters will automatically be applied by the Slicknode query engine across the entire GraphQL API.

That's it. This is all we have to do to build the backend for our media library. Give it a try for your next project.

Slicknode Content HUB: Headless CMS powered by GraphQL

Ivo Meißner — Mon, 02 Nov 2020 18:04:06 +0000

We have some exciting news to share: After months of hard work, we just launched the new Slicknode that will allow you to build digital experiences with Slicknode better and faster than ever before. The improvements are so profound that they enable an entirely new class of digital solutions that you can build with Slicknode and pretty much change what kind of product Slicknode is.

Here are just a few of the highlights:

Global GraphQL CDN: Content via the Slicknode API will now be delivered via a global content delivery network that allows you to publish your content to millions of users while at the same time dramatically reducing the latency and response times for API requests around the globe. (In some cases < 20 ms)
Internationalization: Slicknode now supports localization of your content as a first-class feature that is fully integrated into the query engine, API, and content editing interface. Create digital solutions for global audiences and enter new markets faster.
Content Preview: There are now two stages for content in your projects, one for editing and previewing drafts and one for the published version. That way, you can make changes and updates to your content without affecting the published version, like agile software development but for content.
Content Workflows: You can set up custom publishing workflows for your content and collaboratively create content with your team. For example, you can start with a draft version and then move it through your workflow: review > translation > legal > published.
Union Types: Slicknode added support for union types. With union types, you can now create extremely flexible content models. For example, you can create a modular page builder that can be used by content editors to create dynamic landing pages without involving IT.
Array Fields: We added support for sortable array fields. While you previously had to create one-to-many and many-to-many fields via a relation, you can now create sortable array fields in which the objects can be sorted via drag and drop in the content editor. This enables a lot of new use-cases, especially in combination with union types.
New Console: The complete layout and design of the console were updated to improve the editing experience and to support all the new content editing features.

Slicknode now has all the building blocks that you need to create a central hub for all your content. And all those features are 100% backward compatible and are immediately available for all existing projects.

Check out the documentation for more details about the features and how to add them to your existing projects.

New Website

To do the major product release justice, we relaunched a new version of our own website, which is now powered by Slicknode itself. This allows us to publish more content faster and keep the website up to date. We now have a modular content builder for building pages and creating an interactive experience to learn about our product.

If you want to build a similar website for your own company, check out our...

Next.js Starter Kit

We created a Next.js starter kit that you can use to quickly set up a website with Slicknode, Next.js, static site generation, etc. in a few seconds.

Check it out on Github

Updated Pricing

With the release of the new Slicknode Content HUB, we also updated and simplified our pricing model. We now have a "Free forever" plan for development, small websites, or experiments, and you can save money by paying annually. Check out the pricing page for details.

Future Direction

This launch marks a significant milestone in the history of Slicknode: When we first started building Slicknode, we set out to create a solution that automates the repetitive work that is still required to create high-quality custom software solutions. We created a general-purpose backend that is up and running in seconds without developers having to worry about setting up infrastructure, databases, running migrations, etc.

Having such a general-purpose solution allowed us to gather valuable feedback from customers for a wide variety of use-cases and see for which solutions they considered Slicknode. We want to thank all of our customers and users for their valuable ideas and feedback, which helps us make the best decisions about how to improve our platform.

The one thing that stands out is that most customers are using Slicknode for content-centric applications. It just made sense to focus most of our efforts on adding essential functionality for managing and distributing content, like adding a global CDN, localization support, and custom content workflows. Since Slicknode was initially built for highly complex applications that go way beyond what you would usually use a CMS for, you now have a platform that has a lot more functionality out of the box than a lot of other content management systems on the market today.

We will continue to improve Slicknode for content management use-cases and would love to hear your feedback and ideas (Join us in our Slack channel).

How To Merge + Extend GraphQL APIs: Slicknode Remote Modules

Ivo Meißner — Fri, 19 Jun 2020 13:52:17 +0000

Slicknode already offers a significant amount of functionality out of the box to build rich applications, however, the reality is that in most organizations and projects there are plenty of IT systems that you want to integrate or extend, both from inside and outside of the organization.

By using those systems, you don't have to reinvent the wheel, however, you still have to spend a significant amount of time with API integrations. For example: Managing credentials for multiple environments, finding documentation, wrapping / transforming the APIs to work within the context of your application, error handling, etc.

We wanted to eliminate this integration effort, which is why we created Slicknode Remote Modules.

Introducing Remote Modules

Remote Modules allow you to merge entire GraphQL APIs into your Slicknode GraphQL APIs with just a few lines of configuration.

The use-cases for this are endless, here are just a few ideas:

Add the Slicknode CMS as the content layer to your core product GraphQL API.
Add your Shopify or Magento eCommerce store to the Slicknode GraphQL API and create landing pages or entire communities for better customer engagement and conversions.
Add customer account information to internal user profile pages.
Integrate payment providers.
etc.

All you have to do is create a module that points to the remote GraphQL API. Slicknode automatically merges the APIs into one unified data graph, taking care of naming conflicts, data fetching logic, and schema generation.

With the merged GraphQL APIs, you can then load data from multiple data sources with a single GraphQL query. This dramatically simplifies the frontend implementation as you only need to configure one GraphQL client. You also have all the data right where you need it: In your UI components.

Extending GraphQL APIs

With the merged schemas in a Slicknode project, it is then possible to create relationships between objects of completely independent systems. This makes creating custom digital experiences on top of existing systems incredibly easy, fast, and fun.

For example: Let's assume you have an eCommerce system where you manage all your products, inventory, pricing, etc.

You then want to create a microsite where you publish rich user testimonials with videos, images, reviews, etc. while at the same time showing the current pricing and product information from the eCommerce system.

With Slicknode, you can simply extend the types of your eCommerce store using the same data modeling tools that you use for internal types: One-to-one, many-to-many, one-to-many relations, etc. Slicknode automatically provisions the database tables, handles authorization, and creates the corresponding resolvers with the data fetching logic.

Here is what a schema for an extension of the Product type could look like:

extend type Product {
  reviews: [Review!]! @relation(
    path: "Product.sku=sku.Review"
  )
}

type Review implements Node {
  id: ID!
  sku: String!
  author: User
  image: Image
  rating: Float
  text: String! @input(type: MARKDOWN)
}

With the relation directive, we can freely connect types of independent systems. Slicknode automatically creates a Relay compatible relation with pagination, filters, sorting and high-performance data fetching logic. In contrast to other schema stitching solutions, Slicknode optimizes the data resolution automatically and fetches all the data of connected types in a single database query.

Check out the documentation to learn how to add other GraphQL APIs to your Slicknode projects.

How to Build GraphQL APIs that Scale, Serverless, in Minutes!

Ivo Meißner — Mon, 27 Apr 2020 21:21:43 +0000

Building high-quality GraphQL APIs is harder than one might think. Building GraphQL APIs that scale is even harder. The flexibility and power of GraphQL comes with its own unique challenges and problems as we have learned the hard way. When we set out to build Slicknode, we wanted to create a platform for building digital solutions in minutes instead of months.

We are finally here!
It has been months in the making and we are so excited to share the results with the world:

We got rid of all our servers and we are running 100% serverless! You can now build advanced GraphQL applications in minutes and never have to worry about scalability and backend infrastructure again.
You just define your data model, add the modules, and 3rd party APIs that you need, and Slicknode automatically launches a production-ready GraphQL API, powered by AWS Lambda and AWS Aurora Serverless.
Learn more...

What's new?

In addition to the massive improvements that come with the infrastructure upgrade, we are also shipping some major new features that enable a whole host of new use-cases and make it even easier to build complex applications and extend Slicknode. We will cover those features in detail
in upcoming blog posts.

Here are a few highlights:

Shareable GraphQL APIs: You can now deploy a GraphQL API directly from a git repository. Just clone it to your local machine and run slicknode deploy. (see an example) Collaborate with the open-source community on a shared backend that can easily be customized (Multi-tenant SaaS-foundation, eCommerce starter, etc.) This is also great for writing frontend tutorials or for creating demo backends.
Remote Modules: Add your existing GraphQL APIs or APIs from 3rd party providers to your Slicknode project with 4 lines of configuration. Want to add your Salesforce data, the Github API, a Magento store, your existing Wordpress blog, etc. to your Graph? Done in 2 minutes. Mode details
Apollo Federation Support: Slicknode now has support for Apollo Federation. If you are using an Apollo Federation architecture in your project, you can add the entire functionality of Slicknode as a microservice to your graph just by installing the module.
Always-On Development Environments: Create development environments in seconds without hassle. The development instances are now always on and don't go to sleep after inactivity any more. More details

Learn about all the features

Why the Relaunch?

Since we launched the first version of Slicknode, a lot has happened. People have used Slicknode to build all kinds of applications, multi-tenant SaaS products, content management infrastructure, small personal projects, and mission-critical business applications. We have also open sourced some components of the Slicknode platform, some of which have been downloaded millions of times and are used in thousands of GraphQL APIs around the globe.

With feedback from countless current and potential customers, we were able to identify two
main issues that led us to make this major upgrade:

Entry-Level Pricing: We wanted to make it free and as easy as possible to get started with Slicknode. The new serverless platform now only incurs cost when it is used and scales automatically. This is a game-changer and we were able to dramatically reduce the entry-level pricing while also offering free development instances.
Dedicated Infrastructure: Enterprise level customers with mission-critical applications need an option to deploy their applications on dedicated infrastructure in their own VPC. We can now offer the option to create an entire dedicated cluster per customer with custom limits, on a custom domain with individual configuration. Need to host thousands of GraphQL APIs for a SaaS-product at a reasonable cost? No problem.

This relaunch also dramatically improves the scalability and reliability
of our platform. All the components that power the customer APIs are managed AWS services and scale on demand: AWS Lambda, AWS Aurora Serverless, AWS API Gateway, etc.
Even on the lowest tier, we can now offer an API with no single point of failure, multiple availability zones, automatic failover, and redundant data replication.

We need your Feedback

With the major infrastructure upgrade shipped, we now have more time to focus on new features and improvements.

That's where we need your feedback. We want to know...

What projects do you plan to build with Slicknode?
What features are you missing?
How can we take the Slicknode platform to the next level?

Your feedback will shape what Slicknode is going to look like...

Join our community on Slack or try the new platform.