[{"data":1,"prerenderedAt":310},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-kiezen-framework-design-system-componenten-i18n-slugs":132,"language-blog-slug-nl-kiezen-framework-design-system-componenten":139},{"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},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__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},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"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",null,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":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","how-to-select-framework-design-system-components",{"locale":137,"value":138},"nl","kiezen-framework-design-system-componenten",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":149,"subtitle":79,"isArchived":150,"headerIllustration":151,"date":155,"authors":156,"introTitle":165,"items":166,"pivots":242,"relatedBlogPosts":258,"tags":279,"onMountedScript":159,"onUnmountedScript":159},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Hoe kies je een framework voor Design System Componenten","Welke technologie of framework kies je voor jouw design system? Wij onderzochten een setup met Stencil en PReact. Lees over onze conclusie. ",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670852538-linkedin-post-2.jpg","Hoe kies je een framework voor design system componenten",false,{"url":152,"alt":104,"width":153,"height":154},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670852487-design_system_framework_v2.svg",538,668,"2022-12-12T01:00:00.000+01:00",[157],{"name":158,"lastName":159,"slug":160,"image":161},"Jasper","","jasper",{"url":162,"alt":104,"width":163,"height":164},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523," Design System componenten streven ernaar om een universele oplossing te zijn voor alle teams en alle producten in een organisatie. Maar welke technologie of framework biedt deze universele oplossing?",[167,171,175,179,183,187,197,200,205,208,212,220,223,227,235,238],{"__typename":168,"id":169,"title":159,"body":170},"TextSectionRecord","W0625JidS3KgJ3i5ALBGmQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>We hebben het afgelopen jaar een handvol \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\">design systems\u003C\u002Fa> gemaakt met verschillende technologieën. Elke klant had een dominante technologie zoals Angular, React of gewoon oude JSP. Maar geen van hen gebruikte alléén die technologie. Een recente klant had een brede mix van PHP, Bootstrap + jQuery, Salesforce Lightning Web Components, Angular, meer recentelijk React en ook native Kotlin- en Swift-toepassingen. Dus rees de vraag: welk framework gebruiken we om design system componenten te ontwikkelen, die werken voor al hun producten, met al deze verschillende technologieën? We hebben onszelf een uitdaging gegeven.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":172,"title":173,"body":174},"M6jYGJExRpmvlo6nx9G2sg","Gewoon webcomponenten gebruiken?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>Native webcomponenten klinken als de voor de hand liggende oplossing. Ze zijn de universele webstandaard en worden nu ondersteund in alle moderne browsers. Maar hoewel webcomponents een goede API op laag niveau bieden, zijn ze moeilijk te maken en te onderhouden zonder een bibliotheek. En helaas worden webcomponenten in de browser weergegeven, maar kunnen ze niet op een server worden weergegeven (SSR). Dit is iets wat de meeste klanten verwachten, omdat ze minstens één groot product hebben dat SSR vereist voor SEO en prestaties. Dus in plaats daarvan zochten we naar een framework om universele componenten te maken.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":176,"title":177,"body":178},"aWixzFHeRuqwdQRMzmh4OQ","Framework criteria","\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>Een design systeem is een grote investering. Dus bij het selecteren van een framework om design syste componenten mee te ontwikkelen, willen we een weloverwogen beslissing nemen. Onder onze selectiecriteria vallen onder andere:\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Cstrong>Framework-ecosysteem:\u003C\u002Fstrong> volwassenheid van het framework, de organisatie erachter, documentatie, voorbeelden, tutorials en beschikbaarheid van extensies en (compatibele) bibliotheken. \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Cstrong>Compatibiliteit met webcomponenten:\u003C\u002Fstrong> kan het framework webcomponenten consumeren en samenvoegen naar componenten in de webstandaard? \u003Ca href=\"https:\u002F\u002Fcustom-elements-everywhere.com\u002F\" target=\"_blank\" rel=\"noopener\">Custom Elements Everywhere\u003C\u002Fa> is een goede referentie. \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Cstrong>Runtime-omgevingen: \u003C\u002Fstrong>wat is de omvang van het framework-bundel? En ondersteunt het server-side rendering? \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Cstrong>Compatibiliteit met de klant: \u003C\u002Fstrong>we streven naar maximale adoptie, dus wat werkt met de meeste technologieën die de klant nu gebruikt en van plan is in de toekomst te gebruiken? \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Cstrong>Populariteit:\u003C\u002Fstrong> het is belangrijk dat klanten een design system hebben waar ontwikkelaars van houden. Dat betekent dat je een populair framework moet gebruiken waar je huidige en toekomstige ontwikkelaars van zullen houden. \u003Ca href=\"https:\u002F\u002Fstateofjs.com\u002Fen-us\u002F\" target=\"_blank\" rel=\"noopener\">State of JavaScript\u003C\u002Fa> is een goede referentie.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Cstrong>Werkt met Storybook, ZeroHeight, of iets soortgelijks:\u003C\u002Fstrong> duidelijke en interactieve documentatie van een design systeem is belangrijk voor de adoptie ervan.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":168,"id":180,"title":181,"body":182},"P19I__G5Re6lQ55L8V4vxg","Framework selectie","\u003Cp>Voor de desbetreffende klant hebben we meerdere frameworks overwogen. Tijdens onze \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Finventory-workshop\u002F\">inventory fase\u003C\u002Fa> hebben we bureauonderzoek uitgevoerd om de frameworks te vergelijken. We hebben ook een \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fblog\u002Fkick-start-design-system-design-inventory-workshop\u002F\">design system workshop\u003C\u002Fa> gehouden om opties en risico's te bespreken met ontwikkelaars en belanghebbenden van de teams van de klant. Het resultaat waren twee kandidaten om het design system mee te ontwikkelen:\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Topkandidaten\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Stencil\u003C\u002Fstrong>: gebruikmakend van webstandaarden, gericht op design systems, kleine runtime, ervaring in klantenteams.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>(P)React\u003C\u002Fstrong>: meest populair framework, beste optie voor React\u002FNext.js-apps, ervaring in klantenteams.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Andere frameworks die we hebben overwogen:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Lit\u003C\u002Fstrong>: \"nieuw\" framework van Google, geen ervaring bij klant of De Voorhoede, goed alternatief voor Stencil.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Angular\u003C\u002Fstrong>: zwaar, gericht op apps, niet op design systems.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>React\u003C\u002Fstrong> \u003Cstrong>Native\u003C\u002Fstrong>: geen webcomponenten, niet gebruikt door het native app-team van de klant.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Svelte\u003C\u002Fstrong>: lichtgewicht, steeds populairder, maar klein auteurstrio, misschien minder volwassen.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Laten we eens kijken hoe onze topkandidaten zouden worden gebruikt voor een design system.\u003C\u002Fp>\n\u003Cul>\u003C\u002Ful>",{"__typename":168,"id":184,"title":185,"body":186},"Q4jp1KRPSnmCx0mMAbe9wQ","Design System setup met Stencil","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Stencil omschrijft zichzelf als “\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;\">” en “\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;\">” \u003Cspan>Dat klinkt als een goede match voor een design system, dus hoe zou dit werken, wat zijn de voordelen en wat zijn de risico's?\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":188,"id":189,"image":190,"caption":195,"fullWidth":150,"captionPosition":196},"ImageRecord","agk7hO28TmO1_x4L0n_NZQ",{"url":191,"alt":192,"width":193,"height":194},"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,"Ontwikkel componenten met Stencil en zet ze om naar Web, React en Angular componenten","bottom",{"__typename":168,"id":198,"title":159,"body":199},"QbY_JhIyQtC9L6qsuvEr0g","\u003Ch4>Concept\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>\u003Cspan>Componenten worden ontwikkeld met Stencil met behulp van TypeScript, JSX en CSS. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>Stencil is geconfigureerd om webcomponenten (custom elements), React- en Angular-componenten te genereren (zie onderstaande code). \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>CI genereert gecompileerde pakketten voor elk doelplatform met Stencil-runtime (7kb) + \u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fframework-bindings\">proxies om te integreren met doelframework\u003C\u002Fa> (voor compatibiliteit).\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan>Zo \u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">maakt Stencil het mogelijk om \u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Foutput-targets\">naar meerdere pakketten uit te voeren:\u003C\u002Fa>\u003C\u002Fspan>\u003Cbr \u002F>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":201,"id":202,"language":203,"body":204},"CodeBlockRecord","AlxMjs_IQ2-q3fv3RtnDOA","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":168,"id":206,"title":159,"body":207},"ERxzPDBOQUuIIflXJjYHYQ","\u003Ch4>Voordelen & risico's\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>\u003Cspan>Webstandaarden, interoperabiliteit. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>Jong framework, dus weinig voorbeelden, bibliotheken, enz. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan>SSR vereist aandacht vanwege Shadow DOM. Declaratieve Shadow DOM kan dit in de toekomst oplossen.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">Bekende compatibiliteitsproblemen met React & Angular. We hebben dit ervaren in eerdere projecten. En Stencil laat ook weten dat \"\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Foverview\" target=\"_blank\" rel=\"noopener\">Nog niet alle Stencil frameworkintegraties voltooid \u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Foverview\" target=\"_blank\" rel=\"noopener\">zijn\u003C\u002Fa>\u003C\u002Fspan>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":209,"title":210,"body":211},"aGvLQNDKQJy0R6Lvj57Gng","Opzet van design system met (P)React","\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>React is ook een goede kandidaat voor design system componenten dankzij de volwassenheid, populariteit en het ecosysteem. We wisten dat onze klant plannen had om in de toekomst meer React-toepassingen te bouwen en Next.js (een React-metaframework) te gebruiken voor openbare websites. Maar tegelijkertijd hadden ze nog steeds webtoepassingen met andere technologieën, zoals Angular. Dus hoe kunnen we React-componenten beschikbaar maken als webcomponenten, terwijl we ook de prestaties en de omvang van de bundel in de gaten houden? Hiervoor keken we naar Preact, een lichtgewicht vervangende optie voor React. Zo zou dit werken:\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":188,"id":213,"image":214,"caption":219,"fullWidth":150,"captionPosition":196},"bh9wQNhrSyW5NE8bjAJvMA",{"url":215,"alt":216,"width":217,"height":218},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670858686-technical-setup-preact1.png","React components + Preact Custom Element Wrapper = Web components en React Components",1182,1336,"Ontwikkel componenten met React en compileer ze ook naar webcomponenten met behulp van een Preact-wrapper",{"__typename":168,"id":221,"title":159,"body":222},"BLi86vcVReKjCUMGar3Qjw","\u003Ch4>\u003Cstrong>Concept\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">Componenten worden ontwikkeld met React (JSX).\u003C\u002Fspan>\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> wordt gebruikt om elke component in te pakken in een webcomponent.\u003C\u002Fli>\n  \u003Cli>CI genereert (gecompileerde) pakketten voor React-projecten (zonder gebundelde runtime) en als Web Componenten met Preact-runtime (3kb) + wrappers.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>\u003Cstrong>Voordelen & risico's\u003C\u002Fstrong>\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli>Meest populair framework, groot ecosysteem met documentatie, voorbeelden en hulpbibliotheken (zoals \u003Ca href=\"https:\u002F\u002Fmui.com\u002Fcustomization\u002Funstyled-components\u002F\" target=\"_blank\" rel=\"noopener\">MUI Unstyled\u003C\u002Fa> en \u003Ca href=\"https:\u002F\u002Fheadlessui.com\u002Freact\" target=\"_blank\" rel=\"noopener\">Headless UI\u003C\u002Fa>).\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">Volledig compatibel met React en Next.js, inclusief SSR.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>Preact-custom-element is een single point of failure?\u003C\u002Fli>\n  \u003Cli>Werken gegenereerde webcomponenten goed met Angular?\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":168,"id":224,"title":225,"body":226},"a6x_ExSFQvOW4oEGvuVKSg","Server-side rendering componenten","\u003Cp>\u003Cspan>Zoals eerder vermeld, was het de bedoeling van onze klant om de design system componenten te gebruiken voor openbare websites, waarvoor server-side rendering nodig is, voornamelijk voor SEO en toegankelijkheid. Sommige van deze websites hebben hun eigen server-side JavaScript-runtime (zoals Next.js) en kunnen eenvoudig onze React-componentenpakketten gebruiken. Voor andere websites hebben we een andere oplossing nodig. Voor die sites maken we een service die ze kunnen gebruiken om componenten te renderen en vervolgens op te nemen in hun HTML-pagina's. Op deze manier ondersteunen we verschillende server-side runtimes voor onze design system componenten:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":188,"id":228,"image":229,"caption":234,"fullWidth":150,"captionPosition":196},"aMsIsv6qSCi2-72da7jTfw",{"url":230,"alt":231,"width":232,"height":233},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670856630-technical-set-up-ssr.png","Design System Components onderverdeeld in (npm) packages en (pre)render service",1059,1290,"Design System componenten beschikbaar als (npm) pakketten en via een (pre)render service",{"__typename":168,"id":236,"title":159,"body":237},"Y9naz1WVS4ObvTjNaYYSDg","\u003Ch4>Concept\u003C\u002Fh4>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">\u003Cspan>Maak een (pre)render service die gerenderde componenten retourneert als HTML + CSS op basis van de verstrekte payload (gegevens\u002Fconfiguratie) in JSON. \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Ca href=\"https:\u002F\u002Fstenciljs.com\u002Fdocs\u002Fhydrate-app\" target=\"_blank\" rel=\"noopener\">Stencil biedt renderToString\u003C\u002Fa> (Hydrate App). \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpreact-render-to-string\" target=\"_blank\" rel=\"noopener\">Preact biedt renderToString\u003C\u002Fa> (pakket).\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cspan>Al deze concepten klinken goed op papier. Maar werken ze in de praktijk en hoe goed integreren ze met bestaande technologieën die bij een klant worden gebruikt? Om te beslissen tussen onze twee kandidaten hebben we proofs-of-concept ontwikkeld tijdens een \u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdiscovery-phase\u002F\">\u003Cspan style=\"font-weight: 400;\">discovery fase\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":239,"title":240,"body":241},"O65DQkJyS0igAL5N1bNXOA","Welke technologie is geschikt voor jouw design system?","\u003Cp>We hebben uiteindelijk (P)React gekozen voor onze klant, omdat het het beste integreerde met hun huidige technologieën en toekomstplannen. Welk framework het beste is voor jouw design systeem hangt af van jouw criteria. Dingen veranderen in de loop van de tijd, frameworks evolueren, webstandaarden breiden uit. Dit betekent dat we deze stappen elke keer doorlopen wanneer we een framework moeten kiezen voor een design systeem.\u003C\u002Fp>\n\u003Cp>Heb je hulp nodig bij je \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\">design system\u003C\u002Fa>? Neem contact met ons op.\u003C\u002Fp>\n\u003Cp>Er komt nog meer kijken bij het maken en implementeren van een design system. Dus we zijn van plan om meer te delen over de verschillende stappen die hierbij komen kijken. Een belangrijke stap is het ontwerpen van het systeem. Valsplat heeft hier een uitstekend artikel over geschreven over een project dat we samen hebben gedaan: \u003Ca href=\"https:\u002F\u002Fvalsplat.nl\u002Fwork\u002Feen-design-system-van-wereldklasse\" target=\"_blank\" rel=\"noopener\">Het ontwerpen van een design system van wereldklasse.\u003C\u002Fa>\u003C\u002Fp>",[243],{"title":244,"body":245,"links":246,"mailchimpValue":159,"mailchimpName":159,"mailchimpId":159,"formType":254,"contactPerson":255},"Hulp nodig met jouw design system?","\u003Cp>Ontdek wat wij voor je kunnen doen voor jouw digitale product.\u003C\u002Fp>\n",[247],{"__typename":248,"id":249,"title":250,"link":251},"InternalLinkRecord","135155041","Lees meer over onze service",{"__typename":252,"slug":253},"ServiceRecord","design-system","none",{"name":158,"lastName":159,"jobTitle":256,"image":257},"CTO, Co-founder",{"url":162,"alt":104,"width":163,"height":164},[259,266],{"slug":260,"title":261,"date":262,"authors":263},"kick-start-design-system-design-inventory-workshop","Kick-start jouw Design System met een Design Inventory Workshop","2021-09-16T02:00:00.000+02:00",[264],{"name":158,"image":265},{"url":162,"alt":104,"width":163,"height":164},{"slug":267,"title":268,"date":269,"authors":270},"design-system-bouwen-react-webcomponenten","Een Design System bouwen met React Webcomponenten","2023-06-19T02:00:00.000+02:00",[271,273],{"name":158,"image":272},{"url":162,"alt":104,"width":163,"height":164},{"name":274,"image":275},"Sjoerd",{"url":276,"alt":104,"width":277,"height":278},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,[280],{"id":281,"title":282,"slug":283,"blogPosts":284},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[285,292,299],{"slug":286,"title":287,"date":288,"authors":289},"toegankelijkheid-in-design-systems","Toegankelijkheid in Design Systems","2025-06-17T14:15:56.000+02:00",[290],{"name":274,"image":291},{"url":276,"alt":104,"width":277,"height":278},{"slug":293,"title":294,"date":295,"authors":296},"design-system-op-maat-of-kant-en-klaar","Design System: op maat of kant-en-klaar?","2024-11-19T13:16:02.759+01:00",[297],{"name":158,"image":298},{"url":162,"alt":104,"width":163,"height":164},{"slug":300,"title":301,"date":302,"authors":303},"schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid","“Schrijf code eenmalig en gebruik het overal” met Mitosis; een mooie droom of werkelijkheid?","2024-09-16T13:04:31.307+02:00",[304],{"name":305,"image":306},"Wessel",{"url":307,"alt":305,"width":308,"height":309},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,1776256148117]