[{"data":1,"prerenderedAt":326},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-how-to-select-framework-design-system-components-i18n-slugs":134,"language-blog-slug-en-how-to-select-framework-design-system-components":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","how-to-select-framework-design-system-components",{"locale":139,"value":140},"nl","kiezen-framework-design-system-componenten",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":151,"subtitle":79,"isArchived":152,"headerIllustration":153,"date":158,"authors":159,"introTitle":169,"items":170,"pivots":245,"relatedBlogPosts":261,"tags":295,"onMountedScript":162,"onUnmountedScript":162},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"How to select a Framework for Design System Components","Which technology or framework do you select for your design system? We looked at a setup with Stencil and PReact. Read about our conclusion. ",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670852538-linkedin-post-2.jpg","How to select a framework for design system components",false,{"url":154,"alt":155,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670852487-design_system_framework_v2.svg","Person looking up a frameworks flying around",538,668,"2022-12-12T01:00:00.000+01:00",[160],{"name":161,"lastName":162,"slug":163,"image":164},"Jasper","","jasper",{"url":165,"alt":166,"width":167,"height":168},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",null,1892,2523,"Design System components aim to be a universal solution for all teams and all products in an organisation. But which technology or framework can provide this universal solution?",[171,175,179,183,187,191,201,204,209,212,216,223,226,230,238,241],{"__typename":172,"id":173,"title":162,"body":174},"TextSectionRecord","144167816","\u003Cp>\u003Cspan style=\"font-weight: 400;\">We’ve created a handful of \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdesign-system\u002F\" title=\"design systems\">design systems\u003C\u002Fa> in the last year using different technologies. Each customer had a dominant technology like Angular, React or plain old JSP. But none of them used only that technology. A recent customer had a wide mix of PHP, Bootstrap + jQuery, Salesforce Lightning Web Components, Angular, more recently React and also native Kotlin and Swift applications. So the question rose: which framework do we use to develop design system components that could work for all their products, with all these different technologies? We got ourselves a challenge.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":176,"title":177,"body":178},"144167817","Just use Web Components?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Native Web Components may sound like the obvious solution. They are the universal web standard and are now supported in all modern browsers. But while Web Components offer a good low-level API, they are hard to author and maintain without a library. And sadly Web Components render in the browser, but can’t be rendered on a server (SSR). This is something most customers expect, as they have at least one major product that requires SSR for SEO and performance. So instead we looked for a framework to create universal components.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":180,"title":181,"body":182},"144167818","Framework criteria","\u003Cp>\u003Cspan style=\"font-weight: 400;\">A design system is a large investment. So when selecting a framework to develop design systems components with, we want to make a well thought through decision. Among our selection criteria are:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>\u003Cspan style=\"letter-spacing: 0px;\">Framework ecosystem\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: maturity of the framework, the organisation behind it, documentation, examples, tutorials and availability of extensions and (compatible) libraries.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli aria-level=\"1\">\u003Cstrong>Compatibility with Web Components\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: can the framework consume and compile to components in the web standard? \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fcustom-elements-everywhere.com\u002F\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Custom Elements Everywhere\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> is a good reference.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>Runtime environments\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: what’s the framework bundle size? And does it support server-side rendering?\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>Compatibility with the customer\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: we aim for maximum adoption, so what works with most of the technology the customer uses now and plans to use in the future?\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>Popularity\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: it’s important for a customer to have a design system developers favour. That means using a popular framework that your current and future developers will like. \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstateofjs.com\u002Fen-us\u002F\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">State of JavaScript\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> is a good reference.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>\u003Cspan style=\"letter-spacing: 0px;\">Works with Storybook, ZeroHeight, or something similar\u003C\u002Fspan>\u003C\u002Fstrong>\u003Cspan style=\"letter-spacing: 0px;\">: \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">clear and interactive documentation of a design system is important for its adoption.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":172,"id":184,"title":185,"body":186},"144167819","Framework selection","\u003Cp>\u003Cspan style=\"font-weight: 400;\">For our customer in question we considered multiple frameworks. During our \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Finventory-workshop\u002F\">\u003Cspan style=\"font-weight: 400;\">inventory phase\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> we performed desk research to compare the frameworks. We also held a workshop to discuss options and risks with developers and stakeholders from the customer’s teams. The result were two candidates to develop the design system with:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Top candidates\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\"> \u003Cstrong>Stencil\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: using web standards, focused on design systems, small runtime, experience in  customer’s teams.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb> \u003C\u002Fb>\u003Cstrong>(P)React\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: most popular framework, best option for React\u002FNext.js apps, experience in customer’s teams.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Others considered\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>Lit\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: “new” framework by Google, no experience at customer or De Voorhoede, good Stencil alternative.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>Angular\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: heavy, focused on app not design systems.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>React Native\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: no Web Components, not used by the customer’s native app team.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cstrong>Svelte\u003C\u002Fstrong>\u003Cspan style=\"font-weight: 400;\">: lightweight, increasingly popular, but small author team, maybe less mature.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Let’s have a look at how our top candidates would be used for a design system.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":188,"title":189,"body":190},"144167820","Design System setup with Stencil","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Stencil describes itself as “\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fintroduction#stencil-a-web-components-compiler\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Stencil: A Web Components Compiler\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">” and “\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fintroduction#design-systems-component-libraries\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Stencil's primary objective is providing amazing tools for design systems and component libraries.\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">” Sounds like a good fit for a design system, so how would this work, what are the benefits and what are the risks?\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":192,"id":193,"image":194,"caption":199,"fullWidth":152,"captionPosition":200},"ImageRecord","144267984",{"url":195,"alt":196,"width":197,"height":198},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670856517-techincal-setup-stencil.png","stencil components + stencil configuration = web components, react components and angular components",1330,1390,"Develop components using Stencil and compile them to Web, React and Angular components","bottom",{"__typename":172,"id":202,"title":162,"body":203},"144167822","\u003Ch4>Concept\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>Components are developed with Stencil using TypeScript, JSX and CSS.\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Stencil is configured to output Web Components (custom elements), React & Angular components (see code below).\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">CI generates compiled packages for each target with Stencil runtime (7kb) + \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fframework-bindings\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">proxies to integrate with target framework\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (for compatibility).\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This is how \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Foutput-targets\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Stencil enables you to output to multiple packages\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":205,"id":206,"language":207,"body":208},"CodeBlockRecord","144167823","javascript","import { Config } from '@stencil\u002Fcore';\nimport { reactOutputTarget as react } from '@stencil\u002Freact-output-target';\nimport { angularOutputTarget as angular } from '@stencil\u002Fangular-output-target';\n\nexport const config: Config = {\n  outputTargets: [\n    { type: 'dist-custom-elements' },\n    react({ \u002F* … *\u002F }),\n    angular({ \u002F* … *\u002F }),\n  ];",{"__typename":172,"id":210,"title":162,"body":211},"144167824","\u003Ch4>Benefits & risks\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Web standards, interoperability.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Young framework, so few examples, libraries etc.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">SSR needs attention due to Shadow DOM. \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fweb.dev\u002Fdeclarative-shadow-dom\u002F\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Declarative Shadow DOM\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> may solve this in the future.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Known compatibility issues with React & Angular. We’ve experienced this in previous projects. And Stencil also notes “\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Foverview\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">All Stencil framework integrations are not yet completed\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">”.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":213,"title":214,"body":215},"144167825","Design System setup with (P)React","\u003Cp>\u003Cspan style=\"font-weight: 400;\">React also makes a good candidate for design system components thanks to its maturity, popularity and ecosystem. We knew our customer had plans to build more React applications in the future and use Next.js (a React meta framework) for public websites. But at the same time they still had web applications with other technologies like Angular. So how could we make React components available as Web Components, while also keeping performance and bundle size in check? For this we looked into Preact, a lightweight drop-in replacement for React. This is how this would work:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":192,"id":217,"image":218,"caption":220,"fullWidth":152,"captionPosition":200},"144267986",{"url":219,"alt":220,"width":221,"height":222},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670858686-technical-setup-preact1.png","Develop components using React and also compile them to Web Components using a Preact wrapper",1182,1336,{"__typename":172,"id":224,"title":162,"body":225},"144167827","\u003Ch4>Concept\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>Components are developed with \u003Ca href=\"https:\u002F\u002Freactjs.org\u002F\" target=\"_blank\" rel=\"noopener\">React\u003C\u002Fa> (JSX).\u003C\u002Fli>\n  \u003Cli>\u003Ca href=\"https:\u002F\u002Fpreactjs.com\u002Fguide\u002Fv10\u002Fweb-components\u002F#creating-a-web-component\" target=\"_blank\" rel=\"noopener\">Preact-custom-element \u003C\u002Fa>is used to wrap each component into a Web Component.\u003C\u002Fli>\n  \u003Cli>CI generates (compiled) packages for React projects (without bundled runtime) and as Web\u003C\u002Fli>\n  \u003Cli>Components with \u003Ca href=\"https:\u002F\u002Fpreactjs.com\u002F\" target=\"_blank\" rel=\"noopener\">Preact\u003C\u002Fa> runtime (3kb) + wrappers.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>Benefits & risks\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>Most popular framework, large ecosystem with docs, examples and helper libraries (like \u003Ca href=\"https:\u002F\u002Fmui.com\u002Fcustomization\u002Funstyled-components\u002F\" target=\"_blank\" rel=\"noopener\">MUI Unstyled\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fheadlessui.com\u002Freact\" target=\"_blank\" rel=\"noopener\">Headless UI\u003C\u002Fa>).\u003C\u002Fli>\n  \u003Cli>Fully compatible with React and Next.js, including SSR.\u003C\u002Fli>\n  \u003Cli>Preact-custom-element is a single point of failure?\u003C\u002Fli>\n  \u003Cli>Do generated Web Components work well with Angular?\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":172,"id":227,"title":228,"body":229},"144167828","Server-side rendering components","\u003Cp>\u003Cspan style=\"font-weight: 400;\">As mentioned before, our customer planned to use the design system components for public websites, requiring server-side rendering, primarily for SEO and accessibility. Some of these websites would have their own server-side JavaScript runtime (like Next.js) and could simply use our React component packages. For other websites we need a different solution. For those we could create a service which they could use to render components and then include in their HTML pages. This way we support different server-side runtimes for our design system components:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":192,"id":231,"image":232,"caption":237,"fullWidth":152,"captionPosition":200},"144267987",{"url":233,"alt":234,"width":235,"height":236},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670856630-technical-set-up-ssr.png","Design system components available as npm packages and via a (pre)render service",1059,1290,"Design System Components available as (npm) packages and via a (pre)render service",{"__typename":172,"id":239,"title":162,"body":240},"144167830","\u003Ch4>Concept\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Create a (pre)render service which returns rendered components as HTML + CSS based on the provided payload (data\u002Fconfig) in JSON.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fhydrate-app\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Stencil offers renderToString\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (Hydrate App).\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpreact-render-to-string\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Preact offers renderToString\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (package).\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">All of these concepts sound good on paper. But how do they play out in practice and how well do they integrate with existing technologies used at a customer? To decide between our two candidates we’ve developed proofs-of-concept during a \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdiscovery-phase\u002F\">\u003Cspan style=\"font-weight: 400;\">discovery phase\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":242,"title":243,"body":244},"144167831","Which technology is right for you?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">We ended up selecting (P)React for our customer, because it integrated best with their current technologies and future plans. Which framework is best for your design system depends on your criteria. Things change over time, frameworks evolve, web standards expand. This means that we take these steps every time we need to select a framework for a design system. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Need help with your \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdesign-system\u002F\" title=\"design system\">design system\u003C\u002Fa>? \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fcontact\u002F\">\u003Cspan style=\"font-weight: 400;\">Contact us\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">There’s a lot more to creating and implementing a successful design system. So we plan to share more on the different steps involved. One important step is the designing of the system. Valsplat has written an excellent article on this on a project we did together:  \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fvalsplat.nl\u002Fwork\u002Feen-design-system-van-wereldklasse\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Designing a world class design system\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (Dutch).\u003C\u002Fspan>\u003C\u002Fp>",[246],{"title":247,"body":248,"links":249,"mailchimpValue":162,"mailchimpName":162,"mailchimpId":162,"formType":257,"contactPerson":258},"Need help with your design system?","\u003Cp>See what we can do for your digital product.\u003C\u002Fp>\n",[250],{"__typename":251,"id":252,"title":253,"link":254},"InternalLinkRecord","135155038","Read about our service",{"__typename":255,"slug":256},"ServiceRecord","design-system","none",{"name":161,"lastName":162,"jobTitle":259,"image":260},"CTO, Co-founder",{"url":165,"alt":166,"width":167,"height":168},[262,269,282],{"slug":263,"title":264,"date":265,"authors":266},"kick-start-your-design-system-with-a-design-inventory-workshop","Kick-start your Design System with a Design Inventory Workshop","2021-09-16T02:00:00.000+02:00",[267],{"name":161,"image":268},{"url":165,"alt":166,"width":167,"height":168},{"slug":270,"title":271,"date":272,"authors":273},"building-design-system-react-web-components","Building a Design System with React Web Components","2023-06-19T02:00:00.000+02:00",[274,276],{"name":161,"image":275},{"url":165,"alt":166,"width":167,"height":168},{"name":277,"image":278},"Sjoerd",{"url":279,"alt":166,"width":280,"height":281},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":283,"title":284,"date":285,"authors":286},"design-system-tooling","Design System Tooling","2021-11-15T01:00:00.000+01:00",[287,289],{"name":161,"image":288},{"url":165,"alt":166,"width":167,"height":168},{"name":290,"image":291},"Karlijn",{"url":292,"alt":166,"width":293,"height":294},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[296],{"id":297,"title":298,"slug":299,"blogPosts":300},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[301,308,315],{"slug":302,"title":303,"date":304,"authors":305},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[306],{"name":277,"image":307},{"url":279,"alt":166,"width":280,"height":281},{"slug":309,"title":310,"date":311,"authors":312},"design-system-from-scratch-from-the-shelf","Design System: from scratch or from the shelf?","2024-11-19T13:16:02.759+01:00",[313],{"name":161,"image":314},{"url":165,"alt":166,"width":167,"height":168},{"slug":316,"title":317,"date":318,"authors":319},"write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality","“Write components once, run everywhere” with Mitosis; a beautiful dream or reality?","2024-09-16T13:04:31.307+02:00",[320],{"name":321,"image":322},"Wessel",{"url":323,"alt":321,"width":324,"height":325},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,1776256139027]