Blocksweb vs React Bricks: A Comprehensive Comparison

// Blocksweb - Performance optimized by default
import { BlocksRenderer } from '@blocksweb/react';

function HomePage() {
  // Automatic code splitting, lazy loading, and optimization
  return (
    <BlocksRenderer 
      pageId="homepage"
      optimizations={{
        lazyLoad: true,
        codesplitting: true,
        imageOptimization: true
      }}
    />
  );
}

// Full TypeScript integration
interface BlogPostProps {
  title: string;
  excerpt: string;
  publishDate: Date;
  author: Author;
  tags: readonly string[];
}

export const BlogPost: IBlockswebComponent<BlogPostProps> = (props) => {
  // Full IDE support, auto-completion, and type checking
  return (
    <article>
      <h1>{props.title}</h1>
      <p className="excerpt">{props.excerpt}</p>
      <AuthorCard author={props.author} />
      <TagList tags={props.tags} />
    </article>
  );
};

// Schema with full type validation
BlogPost.schema = {
  displayName: "Blog Post",
  fields: [
    { name: "title", type: "text", required: true, maxLength: 100 },
    { name: "excerpt", type: "richtext", required: true },
    { name: "publishDate", type: "date", defaultValue: () => new Date() },
    { name: "author", type: "reference", collection: "authors" },
    { name: "tags", type: "array", itemType: "text" }
  ]
} as const; // Full type inference

// Advanced component composition
export const PageSection: IBlockswebComponent<{
  layout: 'single' | 'two-column' | 'three-column';
  children: ComponentInstance[];
}> = ({ layout, children }) => {
  return (
    <section className={`page-section page-section--${layout}`}>
      <ComponentRenderer components={children} />
    </section>
  );
};

// Unlimited nesting depth
export const NestedLayout: IBlockswebComponent = () => (
  <PageSection layout="two-column">
    <ContentBlock>
      <TextBlock />
      <ImageBlock />
    </ContentBlock>
    <SidebarBlock>
      <NewsletterSignup />
      <RelatedPosts />
    </SidebarBlock>
  </PageSection>
);