[{"data":1,"prerenderedAt":197},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-elder-js-the-new-kid-on-the-block-i18n-slugs":134,"language-blog-slug-en-elder-js-the-new-kid-on-the-block":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","elder-js-the-new-kid-on-the-block",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":152,"authors":153,"introTitle":144,"items":162,"pivots":184,"relatedBlogPosts":195,"tags":196,"onMountedScript":156,"onUnmountedScript":156},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Elder.js, the new kid on the block","Elder.js is a new meta framework based on Svelte. What does it bring to the table?",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1621322949-elderjs-cover.png",false,{"url":149,"alt":150,"width":151,"height":151},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1621322138-elder-js.png",null,2000,"2021-05-18T02:00:00.000+02:00",[154],{"name":155,"lastName":156,"slug":157,"image":158},"Jasper","","jasper",{"url":159,"alt":150,"width":160,"height":161},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[163,168,172,177,180],{"__typename":164,"id":165,"title":166,"body":167},"TextSectionRecord","39628499","Svelte apps with 0kb client-side JS","\u003Cp>\u003Cspan>Svelte introduced a radical new idea by becoming a compile-time framework, resulting in single page apps without a run-time framework. But while Svelte apps don’t have to load a framework script (like \u003C\u002Fspan>\u003Ccode>react.js\u003C\u002Fcode>\u003Cspan> and \u003C\u002Fspan>\u003Ccode>vue.js\u003C\u002Fcode>\u003Cspan> do), they do run as client-side JavaScript code.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>Elder takes this a step further by turning Svelte apps into server-side generated HTML and CSS and \u003C\u002Fspan>\u003Cem>0kb client-side JavaScript\u003C\u002Fem>\u003Cspan>. This is fantastic for performance and delivering small footprint web things. With this approach Elder sets itself apart from other meta frameworks like Next.js, Nuxt.js and Sapper which only add more JS to your apps on top of the frameworks they’re built on. The concept of SPA’s with zero JS by default is slowly gaining more traction. \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\u002Fpull\u002F11949\">Next.js recently added an experimental “no run-time JS” feature\u003C\u002Fa>\u003Cspan> and other frameworks like the \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fnatemoo-re\u002Fmicrosite\">Preact-based Microsite\u003C\u002Fa>\u003Cspan> are popping up.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":164,"id":169,"title":170,"body":171},"39628500","Progressive enhancement with partial hydration","\u003Cp>\u003Cspan>0kb of JS is a great baseline. But eventually you’ll want to add client-side interaction and logic to your project. Elder’s solution to this is \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Felderguide.com\u002Ftech\u002Felderjs\u002F#partial-hydration\">\u003Cem>partial hydration\u003C\u002Fem>\u003C\u002Fa>\u003Cspan>. Which is a fancy way of saying only specific parts of the web page become interactive once client-side JS is executed. Elder has a declarative approach to partial hydration using attributes on dynamic page components for passing props and hydration options:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":173,"id":174,"language":175,"body":176},"CodeBlockRecord","39628501","html","\u003C!-- typical Elder.js page -->\n\u003Csvelte:head>\n  \u003Ctitle>My web page\u003C\u002Ftitle>\n\u003C\u002Fsvelte:head>\n\n\u003CMyStaticComponent ssr-prop-a={ value } \u002F>\n\n\u003CMyDynamicComponent\n  hydrate-client={{\n    ssrPropA: value,\n    clientPropB: value2\n  }}\n  hydrate-options={{\n    loading: lazy,\n    preload: true\n  }}\n\u002F>",{"__typename":164,"id":178,"title":156,"body":179},"39628502","\u003Cp>\u003Cspan>With this strategy, your app only includes client-side JS once you use hydration. And with the hydration options you decide when the JavaScript bundles are loaded and when hydration kicks in. This too is different from the isomorphic approach of the other meta frameworks. With isomorphic apps a server-rendered HTML page is served, which loads scripts in the browser and then re-renders and hydrates the entire page client-side. Hydration is a heavy operation taking place on the main thread and thereby blocking interaction. Elder completely avoids this issue using smart partial hydration.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>On a personal note, I’m a \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fblog\u002Fprogressive-enhancement-for-javascript-app-develope\u002F\">long-time fan\u003C\u002Fa>\u003Cspan> of \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjbmoelker\u002Fprogressive-enhancement-resources\">progressive enhancement\u003C\u002Fa>\u003Cspan>. Partial hydration fits right into this strategy where you start with a robust static web page and incrementally enhance it. Now we could deliver static web pages long before the invention of SPA frameworks and make them interactive with a dash of JS. What’s new about Elder is that you can now start with a fully static site and incrementally enhance it with client-side script using one and the same framework and programming language. To me, that’s a big step and I hope more frameworks adopt this approach in the future.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":164,"id":181,"title":182,"body":183},"39628503"," The adolescence of Elder.js","\u003Cp>Thus far we’ve delivered a handful of projects using Elder. It lives up to its expectations of being a fast and lean framework. But as it’s still young, we also experience some quirks and limitations:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Development mode can be\u003C\u002Fstrong> \u003Cstrong>quirky\u003C\u002Fstrong>: we often find ourselves restarting the development setup or forcing a recompile to fix errors on a page. For example when changing a static component into a hydrated one, leading to missing client-side bundles. Another \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FElderjs\u002Felderjs\u002Fissues\u002F44\">issue is sharing state between components in development\u003C\u002Fa>, which does work in production.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Hacky serverless rendering\u003C\u002Fstrong>: Elder is primarily designed as static site generator and works as a Node.js server in development. Ideally we’d like to use it for serverless rendering as well. \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FElderjs\u002Felderjs\u002Fissues\u002F28\">Serverless rendering with Elder is possible\u003C\u002Fa>, but a bit hacky. Maybe in the future it could work with or like \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Fsvelte-kit-the-first-serverless-first-framework\u002F#serverless-first-using-adapters\">the new Svelte serverless adapters\u003C\u002Fa>.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>The Elder.js ecosystem is still small\u003C\u002Fstrong>: where mature frameworks typically have lots of extensions and example projects, the Elder.js ecosystem is still small. The good thing is that it’s essentially still just Svelte and you can often borrow things from Sapper. And even better is that \u003Ca href=\"https:\u002F\u002Felderguide.com\u002Ftech\u002Felderjs\u002F#hooks-how-to-customize-elderjs\">Elder.js is designed to be extendible using hooks\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FElderjs\u002Fplugins\">Elder.js has its own plugins system\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Nick Reese, the creator of Elder, underlines Elder is still in its infancy in \u003Ca href=\"https:\u002F\u002Fnicholasreese.com\u002Flessons-from-building-a-static-site-generator\u002F\">Nick’s elaborate blog post on Elder.js\u003C\u002Fa>. He has a clear idea of things to improve and a roadmap to achieve it. As Elder.js is still a young framework, \u003Cem>you\u003C\u002Fem> can play a part in how it evolves. I personally experienced Nick is very open to new ideas. So give \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FElderjs\u002Felderjs\">Elder.js\u003C\u002Fa> a try and get involved!\u003C\u002Fp>",[185],{"title":186,"body":187,"links":188,"mailchimpValue":156,"mailchimpName":156,"mailchimpId":156,"formType":156,"contactPerson":150},"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",[189],{"__typename":190,"id":191,"title":192,"link":193},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":194},"jobs",[],[],1776256144025]