"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", em: "em", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "In React I'll often see components that set up a data structure\nwhich is mapped over in the render function, where the data is passed to a component as\nprops." }), "\n", _jsx(_components.p, { children: "Something like this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "configurations.map((group) => (\n \n));\n" }) }), "\n", _jsx(_components.p, { children: "At first, it's a clean way to render a list,\nand lets you share some behavior or presentation/styles without repeating\nyourself." }), "\n", _jsx(_components.p, { children: "Adding another item to the list is as simple as adding another object\nto the array. Not bad!" }), "\n", _jsx(_components.p, { children: "I call this approach \"data-driven templating\" since it builds up data to be passed into a template-like component." }), "\n", _jsx(_components.p, { children: "It feels more \"template-like\" than component-based because it resembles server-side templating languages that lack React's composability." }), "\n", _jsx(_components.p, { children: "It's useful and can get you far. However, it doesn't scale well with changing product needs." }), "\n", _jsxs(_components.p, { children: ["I prefer composition because requirements ", _jsx(_components.strong, { children: _jsx(_components.em, { children: "almost always" }) }), " change. When they do, data-driven templates unravel quickly."] }), "\n", _jsx(_components.h2, { id: "data-driven-templates", children: _jsx(_components.a, { href: "#data-driven-templates", children: "Data-driven templates" }) }), "\n", _jsx(_components.p, { children: "Let's start with an example of what this might look like:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function SomeComponent() {\n const configurations = [\n {\n title: \"Feature One\",\n icon: \"icon-one\",\n description: \"This is an awesome feature one.\",\n callToAction: \"Learn more about feature one\",\n },\n {\n title: \"Feature Two\",\n icon: \"icon-two\",\n description: \"This is an even better feature two.\",\n callToAction: \"Discover feature two\",\n },\n {\n title: \"Feature Three\",\n icon: \"icon-three\",\n description: \"Feature three is truly groundbreaking.\",\n callToAction: \"Uncover the power of feature three\",\n },\n {\n title: \"Feature Four\",\n icon: \"icon-four\",\n description: \"Experience the difference with feature four.\",\n callToAction: \"Experience feature four\",\n },\n {\n title: \"Feature Five\",\n icon: \"icon-five\",\n description: \"Find out why everyone loves feature five.\",\n callToAction: \"Fall in love with feature five\",\n },\n ];\n\n return (\n

\n {configurations.map((group) => (\n \n ))}\n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "It's clean and tidy. Adding a new item is as simple as adding an object to the array. Let's start to consider some (contrived) iterations\nthat might happen to this component as requirements change." }), "\n", _jsx(_components.p, { children: "First, say one configuration needs a \"beta\" tag next to the title." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function SomeComponent() {\n const configurations = [\n //...\n {\n title: \"Feature Two\",\n icon: \"icon-two\",\n description: \"This is an even better feature two.\",\n callToAction: \"Discover feature two\",\n beta: true, // Add beta tag to Feature Two\n },\n //...\n ];\n\n return (\n

\n {configurations.map((group) => (\n \n ))}\n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "So far so good. But, now let's say we want the ability to support different\ncolors for the beta tag as well." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function SomeComponent() {\n const configurations = [\n //...\n {\n title: \"Feature Two\",\n icon: \"icon-two\",\n description: \"This is an even better feature two.\",\n callToAction: \"Discover feature two\",\n beta: {\n active: true,\n color: \"red\", // Support different colors for the beta tag\n },\n },\n //...\n ];\n\n return (\n

\n {configurations.map((group) => (\n \n ))}\n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "There's another request to add different classes for different list items." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function SomeComponent() {\n const configurations = [\n //...\n {\n title: \"Feature Two\",\n icon: \"icon-two\",\n description: \"This is an even better feature two.\",\n callToAction: \"Discover feature two\",\n beta: {\n active: true,\n color: \"red\",\n },\n className: \"my-custom-class\", // Different classes for different list items\n },\n //...\n ];\n\n return (\n

\n {configurations.map((group) => (\n \n ))}\n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "Then, we need to make the call to action open up a dialog instead of a link." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function SomeComponent() {\n const configurations = [\n //...\n {\n title: \"Feature Two\",\n icon: \"icon-two\",\n description: \"This is an even better feature two.\",\n callToAction: \"Discover feature two\",\n beta: {\n active: true,\n color: \"red\",\n },\n className: \"my-custom-class\",\n onClick: () => alert(\"Open dialog\"), // Open dialog instead of link\n },\n //...\n ];\n\n return (\n

\n {configurations.map((group) => (\n \n ))}\n

\n );\n}\n\n// YourComponent.js\nfunction YourComponent({\n title,\n icon,\n description,\n callToAction,\n beta,\n className,\n}) {\n // Define the function to handle the click event\n const handleClick = () => {\n // Open the dialog here\n alert(callToAction);\n };\n\n return (\n

\n {title} {beta && Beta}\n $\"\"$ \n

{description}

\n {/* Handle click event */}\n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "Now there's a new requirement to hide specific items based on the user's role." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function SomeComponent() {\n const configurations = [\n //...\n {\n title: \"Feature Two\",\n icon: \"icon-two\",\n description: \"This is an even better feature two.\",\n callToAction: \"Discover feature two\",\n beta: {\n active: true,\n color: \"red\",\n },\n className: \"my-custom-class\",\n userRole: \"admin\", // Show this item only to admins\n },\n //...\n ];\n\n const userRole = \"user\"; // current user's role\n\n return (\n <>\n {configurations.map(\n (group) =>\n group.userRole === userRole && ( // Check if the user's role matches\n \n )\n )}\n \n );\n}\n" }) }), "\n", _jsx(_components.h3, { id: "what-is-even-happening", children: _jsx(_components.a, { href: "#what-is-even-happening", children: "What is even happening?!" }) }), "\n", _jsx(_components.p, { children: "As you can see, both the component and data structure have grown in complexity.\nTo make matters worse, they're tightly coupled together and yet the data isn't\ncolocated with the component rendering. So you end up with an encapsulation that\nobfuscates the behavior/implementation." }), "\n", _jsxs(_components.p, { children: ["For example, the ", _jsx(_components.code, { children: "onClick" }), " handler is defined in the parent component, but the\nimplementation is defined in the child component. There's a separation that doesn't\nneed to exist, and there's a top-level click handler that's only used by one item."] }), "\n", _jsx(_components.p, { children: "Additionally, each iteration of new needs ends up as a prop to the component. I like to\ncall this \"props-pocalypse\". When every change is added as a prop, the component\nbecomes more and more complex." }), "\n", _jsx(_components.p, { children: "This practice is subtly different from true component composition, which\nis more ergonomic and flexible in JSX and React. This evolution may sound a bit contrived,\nbut generally speaking I've found it to usually be inevitable, and is why I advocate for\na composition-based approach." }), "\n", _jsx(_components.h2, { id: "composition", children: _jsx(_components.a, { href: "#composition", children: "Composition" }) }), "\n", _jsxs(_components.p, { children: ["First, let's implement ", _jsx(_components.code, { children: "YourComponent" }), " as a composition of smaller components."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// YourComponent.js\nexport const Root = ({ className, ...props }) => {\n return

;\n};\n\nexport const Title = ({ children, className, ...props }) => {\n return (\n

\n {children}\n

\n );\n};\n\nexport const Description = ({ children, className, ...props }) => {\n return (\n

\n {children}\n

\n );\n};\n\nexport const CTA = ({ children, className, ...props }) => {\n return (\n \n );\n};\n\nfunction cn(...classes) {\n return classes.filter(Boolean).join(' ');\n}\n" }) }), "\n", _jsx(_components.p, { children: "Here, the components are defined as a composition of smaller components. With\nthis implementation they're only concerned with presentation and are effectively\nencapsulated class sets. However, they can have any other types of behavior, state,\nor behavior that might exist in any other React component." }), "\n", _jsxs(_components.p, { children: ["One of the key pieces here is that we're taking advantage of React ", _jsx(_components.code, { children: "children" }), " to\ncompose our content together."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "import * as YourComponent from \"./YourComponent\";\n\nfunction SomeComponent() {\n return (\n <>\n \n Feature One\n \n This is an awesome feature one.\n \n alert(\"Learn more about feature one\")}\n >\n Learn More\n \n \n // ...\n \n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "Our data now moves into the render function. This is a good thing!" }), "\n", _jsx(_components.p, { children: "Now, let's work through some of the same (contrived) iterations as we did before to\nkeep this comparison consistent." }), "\n", _jsx(_components.p, { children: "First, say one configuration needs a \"beta\" tag next to the title." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "\n \n Feature One BETA\n \n // ...\n\n" }) }), "\n", _jsx(_components.p, { children: "Different colors for beta tags:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "\n \n Feature One BETA\n \n // ...\n\n" }) }), "\n", _jsx(_components.p, { children: "Different classes for different list items:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "\n \n Feature One BETA\n \n // ...\n\n" }) }), "\n", _jsx(_components.p, { children: "Open dialog instead of link:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// ...\n openDialog(\"dialog-for-feature-one\")}>\n Learn More\n\n// ...\n" }) }), "\n", _jsx(_components.p, { children: "Hide specific items based on the user's role:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// Imagine userRole is retrieved from a context or prop\nif (userRole !== \"admin\") {\n return (\n \n \n Feature One BETA\n \n // ...\n \n );\n} else {\n return null;\n}\n" }) }), "\n", _jsx(_components.p, { children: "This user role one is sort of fun, because we can even refactor that to\nuse composition if we like. Take things to the extreme:" }), "\n", _jsx(_components.p, { children: "Create user role context:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// UserRoleContext.js\nimport React, { createContext, useContext } from \"react\";\n\nconst UserRoleContext = createContext(null);\n\nexport const UserRoleProvider = UserRoleContext.Provider;\n\nexport const useUserRole = () => useContext(UserRoleContext);\n" }) }), "\n", _jsx(_components.p, { children: "Create a composable permissions component:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "// WhenUserRole.js\nimport { useUserRole } from \"./UserRoleContext\";\n\nconst WhenUserRole = ({ value, children }) => {\n const role = useUserRole();\n\n return role === value ? children : null;\n};\n\nexport default WhenUserRole;\n" }) }), "\n", _jsx(_components.p, { children: "Then use it:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "import * as YourComponent from \"./YourComponent\";\nimport WhenUserRole from \"./WhenUserRole\";\n\n// The user role should be fetched from an actual source\nconst userRole = \"admin\";\n\nfunction SomeComponent() {\n return (\n \n \n Feature One\n \n This is an awesome feature one.\n \n \n alert(\"Learn more about feature one\")}\n >\n Learn More\n \n \n \n \n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["I think these basic examples show the power of this approach, but let's\nconsider some ", _jsx(_components.em, { children: "substantially" }), " more complex examples."] }), "\n", _jsx(_components.h3, { id: "tooltips", children: _jsx(_components.a, { href: "#tooltips", children: "Tooltips" }) }), "\n", _jsx(_components.p, { children: "Let's say that one of the requirements is to add tooltips to the beta tag\nof an item." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "\n \n Feature One\n \n BETA\n \n \n // ...\n\n" }) }), "\n", _jsx(_components.h3, { id: "conditional-rendering", children: _jsx(_components.a, { href: "#conditional-rendering", children: "Conditional rendering" }) }), "\n", _jsx(_components.p, { children: "In other situations you might have two states that dictate different types of\nrendering. If a user is subscribed to a newsletter, you might want to show\nthe unsubscribe link that opens up a modal. Otherwise you show a subscribe link.\nWith the template approach this would get pretty messy." }), "\n", _jsx(_components.p, { children: "With our composition-based approach it's composing together components like\nwe're used to:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "\n Feature One\n \n This is an awesome feature one.\n \n {isSubscribed ? (\n \n \n Unsubscribe\n \n \n \n \n \n ) : (\n \n Subscribe Now\n \n )}\n\n" }) }), "\n", _jsx(_components.h2, { id: "summary", children: _jsx(_components.a, { href: "#summary", children: "Summary" }) }), "\n", _jsx(_components.p, { children: "For simple, static requirements, data-driven templates are a great approach. They're\nstraightforward and work well when the data and functionality don't change." }), "\n", _jsx(_components.p, { children: "However, when requirements change, they can quickly become a maintenance nightmare (props-pocalypse)." }), "\n", _jsx(_components.p, { children: "The composition-based approach is more flexible and ergonomic, but it does come at the\ncost of verbosity (and sometimes a bit of an education cost). In practice, I've found\nthat the benefits far outweigh the costs." }), "\n", _jsx(_components.h3, { id: "composition-based-approach-benefits", children: _jsx(_components.a, { href: "#composition-based-approach-benefits", children: "Composition-based approach benefits" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Extensibility for presentation, behavior, and even visibility" }), "\n", _jsx(_components.li, { children: "Data moves into the render function, a more natural place for it in React" }), "\n", _jsx(_components.li, { children: "Changes in product requirements can be easily accommodated with composition rather than props" }), "\n"] }), "\n", _jsx(_components.h2, { id: "what-are-your-thoughts", children: _jsx(_components.a, { href: "#what-are-your-thoughts", children: "What are your thoughts?" }) }), "\n", _jsxs(_components.p, { children: ["I'd love to hear your thoughts on this. I'm sure there are other approaches that I haven't\nconsidered. Perhaps there are other examples that I should consider. If you have any feedback,\nplease reach out via ", _jsx(_components.a, { href: "mailto:johnotander@gmail.com", children: "email" }), " or on ", _jsx(_components.a, { href: "https://twitter.com/4lpine", children: "Twitter" }), "!"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Composition over data-driven templates