Struggling to understand the purpose of Slice Machine

I have been using prismic for roughly 18 months now, and I am really struggling on finding the reason to use Slice Machine. Can someone explain the advantages of it over just making a slice in Prismic itself? I still can't figure out any advantages. We have been making slices like always - make the slice in the content type in prismic, make a component file for the slice. We have been able to do a lot of dynamic values (background color, alignment, side of text or side of image etc...), and it has all worked perfectly.

We use Nuxt, and in our site our components directory is as follows:

components
--SlicesBlock.vue
--slices
----SliceA.vue
----SliceB.vue
----etc...

And it has always been fine. Is Slice Machine just a workflow tool, or is it something that is going to be required in the future? It seems like a lot of unnecessary steps when the standard way works just fine.

Thanks

Hey @rob.kristie,

Welcome to the Prismic community, and thanks for posting this question!

To answer your last question:

Is Slice Machine just a workflow tool, or is it something that is going to be required in the future?

Slice Machine is a workflow tool. You will always be able to use Prismic without Slice Machine. It's good to hear that you've got a development workflow that you're happy with!

Personally, I still don't always use Slice Machine for projects. Sometimes I like coding my own SliceBlock because it gives me peace of mind to know exactly what is happening in my project. Or I might do so if I don't need a component-based layout.

Now, to answer your first question,

I am really struggling on finding the reason to use Slice Machine. Can someone explain the advantages of it over just making a slice in Prismic itself?

Slice Machine offers a few benefits:

Quick Setup

Slice Machine takes care of your Slice Block and your basic content queries. If you model your content mostly or entirely with Slices, then you can bootstrap a project very quickly with Slice Machine. The steps are as follows:

  1. Create your app: npx create-nuxt-app my-new-app && cd my-new-app
  2. Add Slice Machine: prismic sm --setup . This creates a Prismic repo and adds it to your config.
  3. You now have a repo with basic content models and a default Slice Library available in Prismic, so you can start creating content.
  4. Add the <SliceZone> component to a page, like ~/pages/index.vue , with the UID for the document you just created in Prismic. You now have Prismic content in your project.
  5. Run prismic sm --create-slice . You have now created a new Slice template in your project.
  6. Add and run storybook (for development): prismic sm --add-storybook , then npm run storybook . (This powers Slice Machine in the next step.)
  7. Run prismic sm --develop . This will start a Slice Machine environment, where you can model your Slices.
  8. Model a Slice, and then push it to Prismic.
  9. Open the file for your new Slice (at ~/slices/NewSlice/index.vue ) and template the content. You can preview your Slice in Storybook, which will render the Slice with mock data which was generated when you created your Slice.
  10. Go back to Prismic and add the Slice to your content. It's now ready for your editors to use and publish.

When you add a new Slice, you don't need to worry about creating a file and a folder structure, adding the props to the file, and importing and adding the Slice to your Slice Block. prismic sm --create-slice does all of that for you.

The SliceZone also takes care of your API query for you. You can add the SliceZone to a page and pass a UID (a string or a URL param), and you don't have to worry about writing a query and passing the result to a Slice Block.

Single Source of Truth for Content Model

Without Slice Machine, you create a content model in the Custom Type in Prismic and then create a component that matches that model in Nuxt. There's a gap between the model and the component, which the developer must bridge (and maintain).

With Slice Machine, you manage the content model within your codebase. Slice Machine edits a model in your code base and pushes that model to Prismic. So you don't have to switch back and forth between Prismic and your code editor as you're developing. It places responsibility for the content model firmly in the domain of the developer.

Slice Libraries

Slice Machine comes with a default library, but that's just a hint at its inherent extensibility. We've already held one Slice Contest, and received tons of fantastic entries. With Slice Machine, anyone can create a library of Slices to use in projects. If you often use the same components in new projects, you can create a Slice library to add to your new Slice Machine projects. Slice Machine will push all of those Slices to Prismic, so you're ready to start creating content right out of the box.

This last part was already doable with the themes, but Slice Libraries really streamline things. Eventually, we'll have a showcase of Slice Libraries. You could find a nice image gallery slice that you like, NPM install it in your project, and push it to Prismic — and your content creators could be using it in their content in moments.

Graphical Representation

Finally, Slice Machine offers a graphical representation of Slices for both developers and content creators. Developers can see a preview of their Slices in development with Storybook, plus a screenshot preview in Slice Machine.

And, when you push your Slice to Prismic, Slice Machine sends the screenshot to Prismic and includes it in the content editor, so your creators can see a previews of the available Slices as they're building pages.


:peanuts: In a nutshell, Slice Machine realizes the vision of component-based development with a CMS:

  • Page layouts can be mostly or completely built with components.
  • Components are self-contained. (Because they are pushed from the codebase to Prismic, they don't depend on a content model in Prismic.)
  • Components can be easily reused across projects, with very quick setup.

I say all of this to explain the design and intent of Slice Machine for you and anyone else who might be interested. However, there is certainly no obligation to use Slice Machine. Prismic will always perform excellently as an API-based CMS. Personally, I will always use it that way for projects that don't necessarily require component-based layouts.

Please let me know if you have any more questions about Slice Machine, or if anything I said didn't make sense :slight_smile:

Best,
Sam

1 Like

This issue has been closed due to inactivity. Flag to reopen.