![]() ![]() With Slice Machine, we provide you with a CLI that will help you throughout the process of building website sections and significantly improve your workflow. You start by creating the component file, define the model schema, add markup and JS to the component, add more props to the model, add markup and JS, and so on and so on. Slice Machine CLI a workflow to iterate on defining page sectionsīuilding a page section is an iterative approach. But before you can see the true value of the tool it is worth taking a look at that first part that we mentioned: defining and building page sections. SliceZone is the part of Slice Machine that separates it from anything that we’ve ever used before. Just drop the SliceZone component anywhere in your page code and you’re ready to go. This means that you don't have to query anything manually. The other cool thing about the SliceZone is that it is linked to a page Document in Prismic. The SliceZone will automatically mirror these Slices by calling the corresponding components in your frontend code. This way, all that you have to do is use the visual editor Prismic interface to define your Slices. ![]() SliceZone is a component that you drop into your page and it will take care of calling the necessary components and provide them with their content props to build the page. You will have to duplicate a lot of code, rebuild your website, and deploy it each time you need to edit or re- arrange these sections. Of course, you could hard-code it and simply call the necessary components into your page. Either way, the question is the same: how can you combine these components to build actual pages? So imagine that you've already built your set of sections, or maybe you're using our default library. That’s where the cool stuff really begins. building and deploying page sections (components)īut let’s start by focusing on the second part: combining components into pages.There are two parts in building webpages with components. In its most basic form, Slice Machine is an open-source CLI and a component library. Slice Machine - Build website sections and combine them into pages And that’s why we’ve partnered with Netlify and Nuxt to bring Slice Machine to life. Slices are one of our coolest features and a big reason why so many people are choosing to use Prismic.īut we wanted to find a way to take Slices to the next level and to allow developers to adopt a totally component-based approach to how they build websites and create pages. Slices also give non-technical people a visual interface that allows them to easily build and fill content and create pages simply by combining sections. Each Slice represents the JSON model (content) for a given component. With Slices you can break your page content into JSON components that correspond to your frontend components. We took our first step on that journey when we created our Slices feature. The problem is, API-based CMS’s have created a gap between the components and the data that they require and we wanted to bridge that gap. Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. There’s every chance that you’ve made it this far without knowing what Prismic is. Much like Prismic, we want Slice Machine to be suitable for just about any stack, and we’ve already started working on supporting other React and Vue frameworks (including Gatsby and Next). To offer you real value right out of the box (as if you needed more) we’ve teamed up with Sara Soueidan to bring you a high-quality default library that focuses on accessibility and responsiveness. The project currently runs on Prismic, Nuxt, and Netlify, and ships with a default library of customizable components. ![]() So this isn’t the standard component library that you may have seen in the past, it truly is a tool that will allow you to improve your component workflow, from building the individual components, to combining them into actual pages. We know that even technical terms can sometimes be interchangeable and unclear, so when we refer to components for this project we are thinking about page sections (macro components) like carousels, FAQ sections, hero sections, CTA, etc. That popularity made us think about how we could take the feature to the next level and develop a tool to improve component workflow and management-and that’s where Slice Machine was born. Our Slices feature, which encourages our users to visualize sections of their pages as components, has been one of our most popular features. At Prismic, we've been experimenting a lot with building websites with components. ![]()
0 Comments
Leave a Reply. |