Excited to share our latest technical deep dive on building flexible, data-aware components in Catalyst: 💥 Flexible Components in Catalyst with <Stream> 💥written by Chris Nanninga, Lead Enterprise Training Engineer at Commerce. Chris breaks down the <Stream> component pattern - a thoughtful abstraction that transforms how developers work with React's <Suspense>. By handling fallbacks internally and supporting both synchronous and asynchronous data, <Stream> enables truly reusable components that work seamlessly in server and client contexts alike. Whether you're optimizing for Next.js's Partial Prerendering or just want cleaner component architecture, this pattern delivers on both fronts. Check out the full article where we walk through real examples and design principles 👇 https://lnkd.in/g3rcayG3 #ReactJS #NextJS #Catalyst #Stream #Suspense
How to Build Flexible Components in Catalyst with <Stream>
More Relevant Posts
-
📣 Front-Commerce 3.17 is here! Bringing key updates to dependencies, pricing features, payment extensibility, and overall stability. 📣 1️⃣ Dependencies & Node 24 Support: Over 50 dependencies updated across 27 packages, including Storybook 10, Tailwind CSS 4, TypeScript 5.9, and react-intl 7. Fully supports Node 24, minimum version now Node 20.19.0. 2️⃣ Tier Prices: Merchants can configure volume-based pricing for products in Gezy and the default theme, enabling dynamic discounts for bulk purchases. 3️⃣ Payment Extensibility: Add additional data to payment methods without overriding theme files. All existing payment extensions are fully compatible. 4️⃣ Stability & Bug Fixes: Multiple fixes across theme and Gezy (wishlist updates, cart behavior, stock handling, product options) plus experimental in-memory caching for faster dynamic routes. This release strengthens Front-Commerce’s ecosystem with enhanced developer experience, improved reliability, and more powerful commerce features. 🔗 Find out more: https://lnkd.in/eUcUbMWg
To view or add a comment, sign in
-
-
Day 33/100: Event Handling 101 The secret to a fast e-commerce API? Fire and Forget. OrderService emits the event. Multiple listeners (Email, Analytics, Cart) catch it asynchronously. Failure in a listener doesn't break the main transaction. Decoupling logic = Scalable code. #NestJS #BackendDev #100DaysOfCode #NodeJS
To view or add a comment, sign in
-
LinkedIn Day 92: Still Building E-Commerce with Domain-Driven Design. Day 92 of my coding journey, and today I dove deeper into Domain-Driven Design (DDD) architecture! What I Built: Implementing a scalable e-commerce backend using DDD principles, separating concerns into distinct bounded contexts: Cart, Order, and Product domains. Key Learnings: Bounded Contexts, Each domain (Cart/Order/Product) operates independently with clear boundaries | Application Layer, Commands and queries orchestrate business logic | Domain Layer: Pure business rules | framework-agnostic | Infrastructure Layer | Technical implementations (JPA, repositories) | Presentation Layer | REST APIs and DTOs Why DDD Over Layered Architecture? Better code organization by business capability Easier to scale and extract microservices Team autonomy per domain Business logic stays in the domain, not scattered across services. Tech Stack: #Java #SpringBoot #DDD #Maven #IntelliJ #PostgreSQL #Lombok Today's challenge: Understanding how DDD enables better maintainability and team collaboration compared to traditional layered architectures. What architectural pattern do you prefer for complex applications? Drop your thoughts below! #100DaysOfCode #SoftwareEngineering #BackendDevelopment #CleanArchitecture #DomainDrivenDesign #SoftwareArchitecture #CodingJourney #TechCommunity #LearningInPublic #DeveloperLife
To view or add a comment, sign in
-
-
Just refactored my Next.js e-commerce project with Clean Architecture. What is Clean Architecture? A design pattern that separates code by business features (products, cart, auth) instead of technical types. This makes the codebase scalable and maintainable. What I implemented: ✅ Full TypeScript migration ✅ Feature-driven folder structure ✅ Redux Toolkit + TanStack Query ✅ Separation of concerns (API, hooks, components per feature) ✅ Complete documentation Key advantages: → Easy to navigate and test → Changes in one feature don't break others → Ready for team collaboration → Follows enterprise-level patterns. Code base: https://lnkd.in/dUfzjpsN Demo: https://lnkd.in/eifp8aZy #OpenToWork #NextJS #TypeScript #CleanArchitecture #SoftwareEngineering #debugging #refactor
To view or add a comment, sign in
-
-
Day 95 - Building Scalable E-Commerce Backend: Domain-Driven Design Lessons from the Trenches. Just wrapped up implementing a DDD-based order management system for an e-commerce platform, and I wanted to share some insights on architecture and integration challenges. Domain-Driven Folder Structure That Actually Works: Our backend follows DDD principles with clear bounded contexts: application/ - Commands & use cases (CreateOrderCommand, UpdateOrderStatusCommand) domain/ - Aggregates, entities, value objects & domain events infrastructure/ - Repository implementations & external integrations presentation/ - API controllers & DTOs This separation ensures the domain logic stays pure and independent of technical concerns. Integration Challenges We Faced: Bounded Context Communication - Defining clear contracts between Order, Inventory, and Payment contexts Aggregate Design - Finding the right aggregate boundaries to maintain consistency Domain Event Publishing - Ensuring reliable event propagation across contexts Anti-Corruption Layers - Protecting our domain from legacy system complexities Key Takeaway: DDD isn't just folder organization it's about aligning your code with business language and isolating domain complexity from infrastructure concerns. What DDD patterns have you found most valuable in your projects? #DomainDrivenDesign #SoftwareEngineering #Backend #ECommerce #CleanArchitecture #Java #SpringBoot #SystemDesign #Microservices #SoftwareArchitecture #DDD
To view or add a comment, sign in
-
-
Vertical Slice Architecture — A Better Way to Build Modern Web Apps Many teams continue to structure their code around layers, with Controllers here, Services there, and Repositories somewhere else. This often leads to huge classes, scattered logic, and slow development. Vertical Slicing offers a solution by flipping this mindset. Instead of organizing by layers, you organize by features. For example, a feature like PlaceOrder or MakePayment becomes its own slice, complete with its own Request, Handler, Validator, and Response. The benefits include: - Everything in one place - Easy navigation - Simplified testing - Enhanced scalability Whether you're building microservices or a monolith, this approach helps maintain a clean and modular codebase. For a deeper dive, I wrote a full breakdown with real e-commerce examples: https://lnkd.in/grTJjcvD
To view or add a comment, sign in
-
-
Hii all, Understanding Image Upload & Fetch Architecture in Modern Web Apps Here’s a simple and scalable approach I’ve been working with for handling images using a CDN: Upload Flow: User → Frontend → CDN (Cloudinary) → Image URL → Backend → Database Fetch Flow: Frontend → Backend → Database → Image URL → Frontend → CDN This pattern keeps the backend lightweight, improves performance, and ensures scalability by offloading media handling to a CDN. #SystemDesign #SpringBoot #React #CDN #Cloudinary #WebArchitecture #BackendDevelopment
To view or add a comment, sign in
-
-
Why Sockress? Sockress is a socket-first Node.js backend framework built for real-time systems. It allows you to serve REST (HTTP) and realtime communication from a single codebase, without maintaining separate backends. Features: • Express-style routing and middleware • Automatic HTTP → WebSocket upgrade • One backend for REST + realtime consumers • Unified middleware pipeline across transports • Production-ready realtime connections and heartbeats Why not just Express? • Express is designed for HTTP only • Sockress is built for HTTP + realtime together • No duplicate logic for sockets and APIs • Cleaner, scalable architecture for modern apps NPM: https://lnkd.in/gMixffvX #Sockress #BackendFramework #NodeJS #RealTimeSystems #SocketIO #SystemDesign #SaaS #AlsoCoder
To view or add a comment, sign in
-
-
Serverless & API-First Architecture ☁️ Modern web apps are no longer “one big backend”. They’re built with: • APIs • serverless functions • microservices • cloud-native tools This approach means: ✔ better scalability ✔ lower maintenance ✔ faster development ✔ pay only for what you use API-first thinking also makes your product easier to integrate, extend, and automate. The future isn’t monolithic — it’s modular. #Serverless #APIDesign #Backend #CloudComputing #WebDevelopment
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development