[{"data":1,"prerenderedAt":219},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-future-proof-front-end-components-i18n-slugs":134,"language-blog-slug-en-future-proof-front-end-components":138},{"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],{"locale":136,"value":137},"en","future-proof-front-end-components",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":146,"isArchived":147,"headerIllustration":145,"date":148,"authors":149,"introTitle":165,"items":166,"pivots":206,"relatedBlogPosts":217,"tags":218,"onMountedScript":152,"onUnmountedScript":152},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Future-proof Front-end Components","Hidde de Vries and Peter Goes show how to tame JavaScript frameworks to improve user experience and achieve interoperability through Web Components 🚀",null," Blog",false,"2019-03-27T01:00:00.000+01:00",[150,158],{"name":151,"lastName":152,"slug":153,"image":154},"Jasper","","jasper",{"url":155,"alt":145,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"name":159,"lastName":152,"slug":160,"image":161},"Karlijn","karlijn",{"url":162,"alt":145,"width":163,"height":164},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Videos, slides and extras of our March 2019 meetup",[167,171,175,185,188,192,199,202],{"__typename":168,"id":169,"title":152,"body":170},"TextSectionRecord","822157","\u003Cp>\u003Cspan>Working with components has been popularised by frameworks like React and Vue. It improves developer experience as smaller things are easier to work with and reason about. But can we exchange components between frameworks? And what about user experience? What do these frameworks spit out in our browsers?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>During our \u003Ca href=\"https:\u002F\u002Fwww.meetup.com\u002FFront-end-Forward\u002Fevents\u002F258465977\u002F\">meetup Future-proof Front-end Components\u003C\u002Fa> (March 2019), \u003C\u002Fspan>\u003Cspan>Hidde de Vries and Peter Goes showed how to tame JavaScript frameworks to improve user experience and achieve interoperability through Web Components. 🚀Here are there talks:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":172,"title":173,"body":174},"826161","It's the markup that matters, by Hidde de Vries","\u003Cp>\u003Cspan>Modern JavaScript frameworks virtualise our DOMs. This allows us to focus on implementation, as data declaratively maps state into markup. While this is great in itself, the significance of the actual markup often gets overlooked. In this practical talk, Hidde (\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fhdv\">@hdv\u003C\u002Fa>) will show how specific bits of markup provide real benefit to users.\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":176,"id":177,"mute":147,"loop":147,"autoplay":147,"caption":152,"video":178,"gif":145},"ResponsiveVideoRecord","826162",{"url":179,"title":180,"height":181,"width":118,"provider":182,"providerUid":183,"thumbnailUrl":184},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=rQsqwbgPIO8","Front-end Forward: It's the markup that matters",270,"youtube","rQsqwbgPIO8","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FrQsqwbgPIO8\u002Fhqdefault.jpg",{"__typename":168,"id":186,"title":152,"body":187},"826163","\u003Cp>\u003Cspan>🖼 \u003Ca href=\"https:\u002F\u002Ftalks.hiddedevries.nl\u002FjvlLvb\u002Fits-the-markup-that-matters\">Slides\u003C\u002Fa> and \u003C\u002Fspan>\u003Cspan>✏️\u003Ca href=\"https:\u002F\u002Ftalks.hiddedevries.nl\u002FjvlLvb\u002Fslides\">full transcript\u003C\u002Fa> of Hidde's talk.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":189,"title":190,"body":191},"826166","Cross framework components, by Peter Goes","\u003Cp>\u003Cspan>Component based front-end development has won the hearts of a lot of developers. All popular frameworks (React, Vue and others) are build around this concept. Taking a component from one project and bring it into a new one is a promise that attracts a lot of front-enders. But React components can not be used in a Vue projects or vice versa. Web Components can offer a way out. In his talk, Peter (\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fpetergoes\">@petergoes\u003C\u002Fa>) researches the possibilities to create and use Web Components cross framework.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":176,"id":193,"mute":147,"loop":147,"autoplay":147,"caption":152,"video":194,"gif":145},"826181",{"url":195,"title":196,"height":181,"width":118,"provider":182,"providerUid":197,"thumbnailUrl":198},"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F8nqoVcFpoog","Front-end Forward: Cross framework component","8nqoVcFpoog","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F8nqoVcFpoog\u002Fhqdefault.jpg",{"__typename":168,"id":200,"title":152,"body":201},"826171","\u003Cp>\u003Cspan>🖼 \u003Ca href=\"https:\u002F\u002Fslides.com\u002Fpetergoes\u002Fcross-framework-components#\u002F\">Slides\u003C\u002Fa> and \u003C\u002Fspan>\u003Cspan>✏️\u003Ca href=\"https:\u002F\u002Fwww.petergoes.nl\u002Fblog\u002Fmy-stab-at-rendering-shadow-dom-server-side\">follow-up article\u003C\u002Fa> of Peter's talk.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":168,"id":203,"title":204,"body":205},"826172","Next meetup","\u003Cp>Want to attend our next meetup in person, or via the live stream? Keep an eye on our \u003Ca href=\"https:\u002F\u002Fwww.meetup.com\u002FFront-end-Forward\u002F\">Front-end Forward meetup group\u003C\u002Fa> and check out our own \u003Ca href=\"\u002Fen\u002Fevents\u002F\">event page\u003C\u002Fa>!\u003C\u002Fp>",[207],{"title":208,"body":209,"links":210,"mailchimpValue":152,"mailchimpName":152,"mailchimpId":152,"formType":152,"contactPerson":145},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[211],{"__typename":212,"id":213,"title":214,"link":215},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":216},"jobs",[],[],1776256144234]