"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 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 the beginning, it's a nice and tidy way to render a list,\nand let's 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: "For lack of a better term I've started to call this approach \"data-driven templating\"\nsince it's building up data to be passed into a template-like component." }), "\n", _jsx(_components.p, { children: "To me it feels more \"template-like\" than component-based because the implementation\nis more reminiscent of server side templating languages that lack the composability\nof React/Vue/etc." }), "\n", _jsx(_components.p, { children: "It's a useful approach, and can get you pretty far. In this post, I will be challenging\nit because I think that it doesn't scale well with ever-evolving product needs." }), "\n", _jsxs(_components.p, { children: ["I generally go with a composition-based approach because requirements\n", _jsxs(_components.strong, { children: [_jsx(_components.em, { children: "almost" }), " always"] }), " change. And when they do, data-driven templates start to 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: "Right now it's nice and tidy. Adding a new item to the list is as simple as adding\na JavaScript 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, let's say that one of the configurations 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 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 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 that 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" }) }), "\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, let's say that one of the configurations 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 augment 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