[{"data":1,"prerenderedAt":281},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid-i18n-slugs":132,"language-blog-slug-nl-schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid":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","write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality",{"locale":137,"value":138},"nl","schrijf-code-eenmalig-en-gebruik-het-overal-met-mitosis-een-mooie-droom-of-werkelijkheid",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":146,"subtitle":79,"isArchived":149,"headerIllustration":150,"date":154,"authors":155,"introTitle":164,"items":165,"pivots":244,"relatedBlogPosts":245,"tags":246,"onMountedScript":158,"onUnmountedScript":158},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Gebruik Mitosis om een Design System te bouwen","“Schrijf code eenmalig en gebruik het overal” met Mitosis; een mooie droom of werkelijkheid?",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726596846-mitosis-social-cover-nl.jpg",false,{"url":151,"alt":104,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726479339-2024-voorhoede-mitosis.svg",723,471,"2024-09-16T13:04:31.307+02:00",[156],{"name":157,"lastName":158,"slug":159,"image":160},"Wessel","","wessel",{"url":161,"alt":157,"width":162,"height":163},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,"Mitosis is een tool die JSX-componenten omzet in volledig functionele componenten voor frameworks zoals React, Vue, Angular en nog veel meer. Het is een ambitieus project dat heel gunstig kan zijn voor veel ontwikkelaars. Maar hoe bereiken ze hun doel, en hoe geschikt is het voor productie?",[166,170,181,184,188,193,196,199,203,206,209,213,217,220,223,227,230,233,236,240],{"__typename":167,"id":168,"title":158,"body":169},"TextSectionRecord","ScFcvseETlqhOYvZe2N6KA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het door \u003C\u002Fspan>\u003Ca href=\"http:\u002F\u002Fbuilder.io\">\u003Cspan style=\"font-weight: 400;\">Builder.io\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> ontwikkelde \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002F\">\u003Cspan style=\"font-weight: 400;\">Mitosis\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> is een veelbelovend open-source tool. Het streeft ernaar een probleem op te lossen waar elke \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">design system\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> developer van droomt: schrijf code één keer, en gebruik het overal. Mitosis probeert dit doel te bereiken door JSX lite (een statische subset van JSX) om te zetten naar een Abstract Syntax Tree (AST). Deze AST fungeert als een neutraal medium dat niet gerelateerd is aan een specifiek framework. Mitosis biedt compilers voor elk ondersteund output-target. Zie deze compilers als scripts die JSX lite code als input accepteren en code genereren voor een specifiek \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">framework\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> target.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Op het moment dat ik dit schrijf ondersteunt Mitosis de volgende output-doelen:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":171,"id":172,"image":173,"caption":178,"fullWidth":179,"captionPosition":180},"ImageRecord","aOuCXqMRQuCZkXznurbD4w",{"url":174,"alt":175,"width":176,"height":177},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726483457-mitosis-compile-targets.svg","Diagram met alle mogelijke Mitosis compilatie targets",1017,544,"Lijst van alle mogelijke Mitosis compilatie targets",true,"bottom",{"__typename":167,"id":182,"title":158,"body":183},"OCNXbHzFTx-BVJD_zid-GQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Deze indrukwekkende lijst is precies de reden waarom ik Mitosis ben gaan onderzoeken om te zien of we het kunnen gebruiken om onze design systems te verbeteren.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":185,"title":186,"body":187},"duNApiK-TTKjUtvzg23XtA","De voordelen","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bij De Voorhoede hebben we veel ervaring met het bouwen van design systems. Een van de grootste uitdagingen in onze design system projecten is het ondersteunen van meerdere frameworks¹.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Tijd besparen \u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het afgelopen jaar heb ik gewerkt aan een design system dat React, Vue en Angular moest ondersteunen. Deze frameworks hebben elk hun eigen syntaxis en benaderingen voor dezelfde problemen. Het was makkelijk om styling te scheiden en te hergebruiken, maar markup en gedrag zijn vaak zo nauw geïntegreerd in de frameworks dat veranderingen doorgaans vereisen dat je de code in drie componenten test en wijzigt (één voor elk framework). Dit zorgt ervoor dat zelfs de kleinste wijzigingen snel veel tijd kosten.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis is bedoeld om ontwikkelaars de moeite te besparen om dezelfde componenten voor verschillende frameworks te maken en te onderhouden. Wat, sprekende uit ervaring, de ontwikkeling van een design system aanzienlijk kan versnellen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Onderstaand een voorbeeld van een Mitosis-component dat wordt omgezet naar verschillende frameworks:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":189,"id":190,"language":191,"body":192},"CodeBlockRecord","auCZXJenTQqDpfKnflQpKQ","javascript","\u002F\u002F HelloWorld.lite.tsx :: een Mitosis component geschreven in JSX lite\nimport type { HelloWorldProps } from '.\u002Fmodel';\n\nexport default function HelloWorld(props: HelloWorldProps) {\n  return (\n    \u003Ch1>{props.greeting} World\u003C\u002Fh1>\n  );\n}\n",{"__typename":167,"id":194,"title":158,"body":195},"NTWra6_7RS6HqLSvXgjBFg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Dat ziet er gecompileerd zo uit:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":189,"id":197,"language":191,"body":198},"Ntv1GKUERlCgWds-iQHMGA","\u002F\u002F HelloWorld.tsx :: de React output\nimport * as React from \"react\";\nimport type { HelloWorldProps } from \".\u002Fmodel\";\n\nfunction HelloWorld(props: HelloWorldProps) {\n  return \u003Ch1>{props.greeting} World\u003C\u002Fh1>;\n}\n\nexport default HelloWorld;",{"__typename":189,"id":200,"language":201,"body":202},"IC-O5T9tSTud8Oo8W_9y2Q","html","\u002F\u002F HelloWorld.vue :: de Vue output\n\u003Ctemplate>\n  \u003Ch1>{{ greeting }} World\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { HelloWorldProps } from \".\u002Fmodel\";\n\nconst props = defineProps\u003CHelloWorldProps>();\n\u003C\u002Fscript>",{"__typename":189,"id":204,"language":191,"body":205},"Uk18Sa2tS5SFx3SLji6caA","\u002F\u002F HelloWorld.js :: de Angular output\nimport { NgModule } from \"@angular\u002Fcore\";\nimport { CommonModule } from \"@angular\u002Fcommon\";\n\nimport { Component, Input } from \"@angular\u002Fcore\";\n\n@Component({\n  selector: \"hello-world, HelloWorld\",\n  template: `\n    \u003Ch1>{{greeting}} World\u003C\u002Fh1>\n  `,\n  styles: [\n    `\n      :host {\n        display: contents;\n      }\n    `,\n  ],\n})\nexport default class HelloWorld {\n  @Input() greeting;\n}\n\n@NgModule({\n  declarations: [HelloWorld],\n  imports: [CommonModule],\n  exports: [HelloWorld],\n})\nexport class HelloWorldModule {}",{"__typename":167,"id":207,"title":158,"body":208},"Pwn8R-_5QeGmkskUewrhBQ","\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Minder specifieke kennis nodig\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Als ontwikkelaars alleen Mitosis-componenten hoeven te maken (en dus JSX lite schrijven), zou er minder behoefte zijn aan gedetailleerde kennis van de frameworks die ze in hun design system ondersteunen (hoewel ze wel kennis moeten hebben van Mitosis zelf). Natuurlijk zijn er altijd situaties waarin je de omgezette code moet debuggen, wat kennis vereist van het framework, maar dit zou eerder de uitzondering dan de regel zijn.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Dit biedt aanzienlijke voordelen voor zowel ontwikkelaars als bedrijven, aangezien het onderhoud van een design system minder arbeidsintensief wordt.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":210,"title":211,"body":212},"P0VpFMFPRh-K4681WL43jw","De juiste mindset","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Toen ik mijn eerste Mitosis project begon, dacht ik dat het lezen van de documentatie voldoende zou zijn om te kunnen beginnen. Het is tenslotte praktisch hetzelfde als het schrijven van React code. Toch?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Fout! JSX lite is iets dat, hoewel een subset van JSX, vereiste behoorlijk wat moeite voordat ik resultaten begon te zien. Ik dacht dat het schrijven van JSX en het vervangen van React-specifieke concepten door Mitosis-concepten het grootste deel zou dekken. Dus ik schreef een component in JSX, verving alle hooks die je normaal uit React importeert (useState, useEffect, useRef, enz.) door hun Mitosis-tegenhangers (useState\u002FuseStore, onUpdate, useRef respectievelijk), maar dit was niet voldoende.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis is namelijk erg strikt op gebied van code interpretatie. Elk stukje code dat geen deel uitmaakt van je template of een van de Mitosis hooks\u002Flifecycle events, komt niet in de gegenereerde code terecht. Dit betekent dat je, om je gegenereerde componenten te laten werken, de strikte regels van Mitosis moet volgen. Dit kan erg moeilijk zijn, omdat veel van deze problemen onzichtbaar zijn op het moment dat je de code schrijft. Dit komt omdat de IDE je code interpreteert als JSX². Je code is geldig volgens de taal server, maar wanneer je de Mitosis compiler vraagt om z’n magie te doen, begint het te schreeuwen met foutmeldingen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ik vond dit ontmoedigend toen ik begon. Het laatste wat je wilt, is dat je eerste component na het compilen al fouten vertoont voordat je testapplicatie überhaupt is opgestart. Maar als je erover nadenkt, is het niet zoveel gevraagd. Het is tenslotte een eigen tool dat dezelfde onderdelen als een framework uit de handen probeert te nemen. Met dit in gedachten probeerde ik open te staan voor de concepten en valkuilen van Mitosis.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Leer dus van mijn fouten. Probeer niet te denken aan Mitosis als een tool die JSX (lite) gebruikt, maar zie het als een framework waarin je moet investeren om het echt te begrijpen en ervan te profiteren. Mitosis biedt een \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@builder.io\u002Feslint-plugin-mitosis\">\u003Cspan style=\"font-weight: 400;\">eslint plugin\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> om dit iets eenvoudiger te maken.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":214,"title":215,"body":216},"BcswKCqMSI6P6pvOFn-cbQ","De nadelen","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Maar zelfs nadat ik in de \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">juiste mindset\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> zat, liep ik nog steeds problemen tegen aan.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Gebrek aan controle \u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Als ontwikkelaar ben je gewend om controle te hebben over de meeste code die je levert. Bij Mitosis is dit een beetje anders. Je schrijft de input (Mitosis-componenten), maar de compiler genereert de code die je uiteindelijk gebruikt op productie. Dit kan lastig zijn, aangezien de Mitosis-compilers niet compleet en\u002Fof onduidelijk gedocumenteerd zijn (let op dat de documentatie geen volledige lijst van valkuilen\u002Feigenaardigheden bevat). In mijn ervaring — zal er naast werkende code, ook code zijn die ik anders zou schrijven, moeilijk te begrijpen is of simpelweg niet werkt³.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het debuggen hiervan was moeilijk. Mitosis is open-source, dus je kunt de broncode van de relevante compiler opzoeken, maar het debuggen van compilers is niet iets waar ik aan gewend was.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Compatibiliteit \u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Naast het gebrek aan controle over hoe de gegenereerde code eruit ziet, heb je ook weinig controle over versiebeheer. Dit kan leiden tot aanzienlijke problemen, aangezien je niet van alle afnemers van je design system kunt verwachten dat ze altijd de meest recente versie van hun framework gebruiken. De gebruikers van het design system gebruiken vaak ook een meta-framework en\u002Fof code van derden die ook compatibel moeten zijn met dezelfde framework-versie.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis biedt enige controle over de output, bijvoorbeeld:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">In Vue kun je specificeren of je de options- of composition-API wilt gebruiken.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">In veel frameworks kun je kiezen welke populaire oplossing je wilt gebruiken voor styling, state management, enz. (bijv. in \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FBuilderIO\u002Fmitosis\u002Fblob\u002F5d78497420afc71ff4b343e4cdec32cb82ddff44\u002Fpackages\u002Fcore\u002Fsrc\u002Fgenerators\u002Freact\u002Ftypes.ts#L3\">\u003Cspan style=\"font-weight: 400;\">React kun je kiezen tussen useState, MobX, Valtio, Solid, Builder en Variables voor state management\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">).\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":189,"id":218,"language":191,"body":219},"S6MQ2zkUSR-h5WY1FplMDg","\u002F\u002F Voorbeeld van een Mitosis config \nmodule.exports = {\n  files: \"src\u002F**\",\n  targets: ['vue', 'react'],\n  dest: \"..\u002Foutput\",\n  options: {\n    react: {\n      typescript: true,\n      stylesType: 'style-tag',\n    },\n    vue: {\n      typescript: true,\n      api: 'composition',\n    }\n  }\n}\n",{"__typename":167,"id":221,"title":158,"body":222},"RNuWNnX3ThK7csp6284zSw","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Maar er is momenteel geen manier om te specificeren met welke framework-versie je compatibel wilt zijn. Iets dat je meestal wilt vastzetten en alleen wilt wijzigen wanneer het team besluit dit te doen.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":224,"title":225,"body":226},"H7szpHYPT_CoydWl9J9pwg","Ontwikkelaarservaring","\u003Cp>\u003Cspan style=\"font-weight: 400;\">De bovengenoemde pijnpunten laten veel te wensen over op het gebied van ontwikkelaarservaring. Dit kun je accepteren, maar dat is meer een afweging tussen bedrijfsbelang en ontwikkelaarservaring.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Debuggen\u003C\u002Fspan>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het testen en debuggen van je Mitosis-code is lastig. Mitosis is JSX (lite) en wordt niet in de browser uitgevoerd. De aanbevolen methode voor debuggen is het omzetten van je Mitosis-code naar bijvoorbeeld React, en vervolgens de gegenereerde code in een React-app te importeren om deze te testen. Dit is echter een omslachtig proces dat een verworpen beeld van je code oplevert, omdat:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">De compilatie-stappen proberen niet de gegenereerde code te valideren — wat betekent dat Mitosis React-componenten genereert, maar niet controleert of deze bestanden valide zijn of syntax fouten bevatten.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Je weet niet of de fout veroorzaakt wordt door code in Mitosis of in React.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ccode>\u003Cspan style=\"font-weight: 400;\">console.log\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> en dergelijke code wordt door de compiler verwijderd (momenteel zijn er geen configuratie-opties om deze te behouden)\u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">⁴\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Voorbeeld van een Mitosis-component met een \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">console.log()\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> regel die door de compilers wordt verwijderd:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":189,"id":228,"language":191,"body":229},"IiOlmV6bSlCOY_OSO1prLA","\u002F\u002F MyComponent.lite.tsx :: een mitosis component met een console.log() statement\nimport { useStore } from '@builder.io\u002Fmitosis';\nimport type { MyComponentProps, MyComponentState } from '.\u002Fmodel';\n\nexport default function MyComponent(props: MyComponentProps) {\n  const state = useStore\u003CMyComponentState>({\n    greeting: props.greeting ?? 'Hello',\n  });\n\n  console.log(`I am using the ${props.greeting ? 'value from the prop' : 'default value'} as a greeting`);\n\n  return (\n    \u003Ch1>{state.greeting} World\u003C\u002Fh1>\n  );\n}",{"__typename":167,"id":231,"title":158,"body":232},"V9p1d_TOT2aVrtji_TuVJA","\u003Cp>dat ziet er in React zo uit:\u003C\u002Fp>",{"__typename":189,"id":234,"language":191,"body":235},"PRAuoi3YRYeKmKjpD9uTaA","\u002F\u002F MyComponent.tsx :: de React output waar de console.log() statement mist \n\"use client\";\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport type { MyComponentProps, MyComponentState } from \".\u002Fmodel\";\n\nfunction MyComponent(props: MyComponentProps) {\n  const [greeting, setGreeting] = useState(() => props.greeting ?? \"Hello\");\n\n  return \u003Ch1>{greeting} World\u003C\u002Fh1>;\n}\n\nexport default MyComponent;",{"__typename":167,"id":237,"title":238,"body":239},"MsE3WoUrQpO2jGyE2ceqiw","Mijn oordeel voor nu","\u003Cp>\u003Cspan style=\"font-weight: 400;\">En nu, om je brandende vraag te beantwoorden, voldoet Mitosis aan zijn ambities?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Persoonlijk zou ik nog geen design system creëren met Mitosis als basis. Door het gebrek aan controle over de output wil ik dat de compilers vollediger zijn voordat ik Mitosis een cruciaal onderdeel van mijn design system maak.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Laat dit je echter niet afschrikken. Mitosis kan zeker worden gebruikt als een hulpmiddel bij de ontwikkeling van design systems. Als je bijvoorbeeld componenten in React, Vue en Angular moet maken, kan het waardevol zijn om een Mitosis-component te creëren, deze om te zetten naar de verschillende frameworks en deze output als startpunt voor je componenten te gebruiken. Op deze manier kun je veel boilerplate-code vermijden en je tijd besteden aan het aanpassen en verfijnen van de output naar wens. Dit kan veel tijd besparen voor je developers, afhankelijk van het aantal frameworks dat je design system moet ondersteunen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ik wil zeker niet mensen die aan het Mitosis-project hebben bijgedragen schenden. Zoals eerder vermeld, is het project zeer ambitieus en heeft het veel potentie. Ik ben blij om te zien dat het als open-source tool wordt ontwikkeld, omdat ik denk dat het een uniek idee is waar veel mensen van kunnen profiteren. De enorme reikwijdte maakt het schrijven (en onderhouden) van de compilers erg resource-intensief; het feit dat Mitosis momenteel zo goed werkt, is al een prestatie op zich. Ik hoop dat het in de komende jaren verder zal groeien en dat deze blogpost de lezers niet afschrikt om Mitosis zelf uit te proberen. Als je geïnteresseerd bent om bij te dragen, weet ik zeker dat dit in de community zeer gewaardeerd wordt en dat bijdragen aan het project erg op prijs wordt gesteld. Daarnaast is het een goede leerervaring voor developers.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Hoewel ik Mitosis nog niet als kernonderdeel van een design system zou opnemen, zijn er al bedrijven die Mitosis praktijk gebruiken. Een voorbeeld dat ik tegenkwam is \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdb-ui\u002Fmono\">\u003Cspan style=\"font-weight: 400;\">DB UI Mono\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (het design system van Deutsche Bahn). Het lijkt daar goed te functioneren, dus neem mijn conclusie met een korreltje zout.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":241,"title":242,"body":243},"QdH5Ts69S9iPRLC8s7F7ZQ","TL;DR","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mitosis is een open-source tool dat gericht is op het omzetten van JSX-componenten naar functionele componenten voor meerdere frameworks zoals React, Vue en Angular. Het biedt voordelen zoals tijdbesparing en minder noodzaak voor framework-specifieke kennis. Het brengt echter ook uitdagingen met zich mee, waaronder een steile leercurve, strikte regels, debugproblemen en gebrek aan controle over de output. Hoewel veelbelovend, is Mitosis nog geen perfecte oplossing voor ontwikkeling over meerdere frameworks en vereist het zorgvuldige overweging voordat het in productieomgevingen wordt geïmplementeerd.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">¹ Web Componenten hebben geprobeerd deze leegte op te vullen door een standaard component model voor het web te bieden, wat het afschermen van componenten en het samenwerken tussen verschillende systemen mogelijk maakt, maar ze hebben ook hun eigen \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Foverview\u002F#challenges-with-web-components\">\u003Cspan style=\"font-weight: 400;\">beperkingen\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">² Mitosis gebruikt een .lite.jsx naamgevingsconventie. Omdat Mitosis echter nog niet zo populair is, valideert mijn IDE de code als React (lees JSX) code. Je kan \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fconfiguration\u002F#typescript-configuration\">\u003Cspan style=\"font-weight: 400;\">TS configureren om Mitosis’ JSX types te gebruiken\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">, wat sommige van deze problemen oplost.\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">³ Dit gedrag kan je aanpassen door de krachtige \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fcustomizability\u002F\">\u003Cspan style=\"font-weight: 400;\">Mitosis plugins\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> te gebruiken, maar dit kost wel een stuk meer tijd en moeite aangezien je eigenlijk de Mitosis compilers aan het uitbreiden bent met je eigen logica.\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>\u003Cem>\u003Cspan style=\"font-weight: 400;\">⁴ Sami Jaber van het Mitosis team gaf terecht aan dat je de \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fmitosis.builder.io\u002Fdocs\u002Fhooks\u002F#oninit\">\u003Cspan style=\"font-weight: 400;\">onInit\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> hook kan gebruiken om hetzelfde gedrag te bereiken in Mitosis. Maar dat neemt niet weg dat, de vervelende Mitosis ‘gotcha’ waar alle code die in de render body van een component staat niet meegenomen wordt in de output, nog steeds bestaat (terwijl dit een valide use case is om constants\u002Fmagic-numbers te definiëren).\u003C\u002Fspan>\u003C\u002Fem>\u003C\u002Fp>",[],[],[247],{"id":248,"title":249,"slug":250,"blogPosts":251},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[252,263,274],{"slug":253,"title":254,"date":255,"authors":256},"toegankelijkheid-in-design-systems","Toegankelijkheid in Design Systems","2025-06-17T14:15:56.000+02:00",[257],{"name":258,"image":259},"Sjoerd",{"url":260,"alt":104,"width":261,"height":262},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":264,"title":265,"date":266,"authors":267},"design-system-op-maat-of-kant-en-klaar","Design System: op maat of kant-en-klaar?","2024-11-19T13:16:02.759+01:00",[268],{"name":269,"image":270},"Jasper",{"url":271,"alt":104,"width":272,"height":273},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":275,"title":276,"date":277,"authors":278},"kiezen-framework-design-system-componenten","Hoe kies je een framework voor design system componenten","2022-12-12T01:00:00.000+01:00",[279],{"name":269,"image":280},{"url":271,"alt":104,"width":272,"height":273},1776256147593]