Learn full-stack web development using fastn in a week
Learn Now
Domain Components
Create domain-driven documentation for structured data and versatility
Nandhini Devi
posted on:
November 24, 2023

Are you someone who often grapples with the repetition of content? Struggling to maintain a consistent design across various pages or sections on websites? Or perhaps you're tired of copy-pasting content and the inconsistencies in design that follow?

Let's dive into a relatable scenario: Imagine you want to showcase customer testimonials on your website. Each testimonial needs a name, title, image, and quote, neatly arranged within the page layout, adhering to the page's color scheme and typography.
One way to create such testimonials is by first creating a record for all the necessary values of a testimonial, such as the name, designation, quote, and image.
-- record testimonial-data: 
caption title:
body body:
string designation:
ftd.image-src src:

-- testimonial-data list testimonials: 

-- testimonial-data: Nancy Bayers
designation: Co-Founder
src: $fastn-assets.files.images.blog.testimonial-1.jpeg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint

-- testimonial-data: Daniya Jacob
designation: Co-Founder
src: $fastn-assets.files.images.blog.testimonial-2.jpeg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint

-- end: testimonials 
Lang:
ftd
Following that, you'd define the testimonial and individual testimonial card components, which will look like:
-- component testimonials: 
optional caption title:
optional body body:
testimonial list testimonials:

[...]

-- display-testimonial-card: $obj.title 
$loop$: $testimonials.testimonials as $obj
designation: $obj.designation
src: $obj.src

$obj.body

[...]

-- end: testimonials 

-- component display-testimonial-card: 
caption title:
string designation:
body body:
ftd.image-src src:

[...]

-- end: display-testimonial-card 
Lang:
ftd
Now imagine you want to use this testimonial component in all your marketing pages. Duplicating the entire code becomes tedious because modifying one value turns into an avalanche of updates across all the pages. And the biggest challenge here lies in maintaining consistency across these testimonials.

The Solution: Domain driven documentation in fastn

With components created at domain level, you are keeping all the attributes of that content component neatly packed together in one place.

For instance, you can create the above testimonial component within a separate file in your project. Then, whenever you need the testimonial component, you simply invoke it on the required page. Below is how you invoke the testimonial component.
-- testimonials:
testimonials: $testimonials
Lang:
ftd
Testimonials
Hear from our customers
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Nancy Bayers
Co-Founder
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Daniya Jacob
Co-Founder

This approach ensures that each testimonial instance retains a consistent layout and content format, eliminating the hassle of managing individual testimonial sections across multiple pages.

When updating the testimonial content, you can focus solely on adjusting the information without affecting the design. Furthermore, if you decide to modify the design, making changes at the component level will seamlessly propagate across all instances.

For instance, if you wish to enlarge the image size from 120 to 160 pixels, you can easily achieve this by making a simple adjustment in the code.
-- ftd.image:
src: $display-testimonial-card.src
width.fixed.px: 160 
height.fixed.px: 160 
Lang:
ftd
Testimonials
Hear from our customers
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Nancy Bayers
Co-Founder
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Daniya Jacob
Co-Founder
Want to add a new testimonial? Just extend the code:
-- testimonial-data: Nancy Bayers
designation: Co-Founder
src: $fastn-assets.files.images.blog.testimonial-1.jpeg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint

-- testimonial: Daniya Jacob
designation: Co-Founder
src: $fastn-assets.files.images.blog.testimonial-2.jpeg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint

-- testimonial: Kavya Dominic 
designation: Owner
src: $fastn-assets.files.images.blog.testimonial-3.jpeg

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint

-- end: testimonials
Lang:
ftd
Testimonials
Hear from our customers
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Nancy Bayers
Co-Founder
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Daniya Jacob
Co-Founder
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint
Kavya Dominic
Owner

Benefits of Domain Components

Structured Data

Each domain component contains structured data pertinent to its specific domain. This organized approach ensures that essential details (name, position, quotes, etc.) are consistently maintained for every instance of that component.

Separation of Content and Presentation

Creating domain components separates content from their visual presentation. This bifurcation allows for autonomous updates or modifications to either the content or the design without impacting the other, facilitating design evolution while preserving data integrity.

Versatile Data Utilization

The structured data within these components can be readily transformed into other formats like JSON. This versatility allows for easy extraction and utilization of the data for various purposes beyond the immediate rendering on a web page.

With fastn's domain components, you can easily streamline content creation and maintain design coherence. Embrace fastn to master the art of website creation!

In addition to domain-driven documentation, another valuable technique for swift webpage creation is creating a content-library.ftd for storing all recurring content components.

Master web development with fastn

Read other blogs

Read docs
Copyright © 2023 - fastn.com