[{"data":1,"prerenderedAt":327},["ShallowReactive",2],{"DefaultLayouten":3,"language-cases-slug-trouw-i18n-slugs":134,"language-cases-slug-en-trouw":140},{"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","trouw",{"locale":139,"value":137},"nl",{"page":141,"cases":247},{"title":142,"slug":137,"i18nSlugs":143,"social":146,"heroIllustration":150,"caseTeaser":155,"content":161,"metaData":200,"quote":222,"author":222,"pivots":223},"Trouw, Volkskrant and Parool",[144,145],{"locale":136,"value":137},{"locale":139,"value":137},{"title":147,"description":148,"image":149},"Trouw, Volkskrant and Parool | De Voorhoede","One app strategy for multiple brands",null,{"url":151,"alt":152,"width":153,"height":154},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1542197587-de-persgroep.svg","de persgroep",720,310,{"title":142,"image":156},{"url":157,"alt":158,"width":159,"height":160},"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1514918712-trouw-as-pwa-android-ios-app.jpg","Trouw.nl as PWA in browser (left), as PWA published to Google Play Store (middle) and as PWA published to Apple's App Store (right).",1600,857,[162,167,171,175,184,188,196],{"__typename":163,"id":164,"title":165,"body":166},"TextSectionRecord","431124","The challenge: performance and app development workflow over multiple brands","\u003Cp>De \u003Ca href=\"https:\u002F\u002Fwww.persgroep.nl\u002F\" target=\"_blank\" rel=\"noopener\">Persgroep Nederland\u003C\u002Fa> is a publisher of some of the biggest newpapers in the Netherlands. For their brands Volkskrant, Parool and Trouw there is one team responsible for all development and maintainance of these web sites and native apps. The team wanted to establish one workflow to develop all three brands. With this workflow they wanted to ensure web performance and share this development strategy across multiple brands. To establish this workflow, De Voorhoede was asked to help.\u003C\u002Fp>",{"__typename":163,"id":168,"title":169,"body":170},"431129","The solution: put your money where your users are","\u003Cp>One of the first things we do when starting a new assignment is consult the analytics to see how users are distributed over browsers and platforms. Analytics showed us that there was hardly any use for the native app. Since the large majority visit the website. we decided to use this to our advantage, and focus on web technology.\u003C\u002Fp>\n\u003Cp>By building an app-like experience in the browser and reusing that code to build a hybrid mobile app, we cut costs \u003Cem>and\u003C\u002Fem> ensured Apple App Store & Google Play Store presence.\u003C\u002Fp>\n\u003Cp>This lead to the following strategy:\u003C\u002Fp>",{"__typename":163,"id":172,"title":173,"body":174},"431132","Step 1: Lightning fast website","\u003Cp>Since we reuse most of the web functionalities, a performant website leads to a performant \u003Ca href=\"https:\u002F\u002Fdevelopers.google.com\u002Fweb\u002Fprogressive-web-apps\u002F\" target=\"_blank\" rel=\"noopener\">progressive web app (PWA)\u003C\u002Fa> and hybrid app. Besides that, \u003Ca href=\"https:\u002F\u002Fwpostats.com\u002F\" target=\"_blank\" rel=\"noopener\">research has shown\u003C\u002Fa> that performance has a massive impact on conversion, user engagement and more. We helped the team to develop a performance workflow resulting in the fastest news websites in the Netherlands. Next to that we established a performance budget to ensure performance during future development.\u003C\u002Fp>",{"__typename":176,"id":177,"image":178,"caption":180,"captionPosition":183},"ImageRecord","176458581",{"url":179,"alt":180,"width":181,"height":182},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501078204-trouw-filmstrip.jpg","WebPageTest result showing Trouw.nl rendering in 0.6s compared to other news sites",2492,1227,"right",{"__typename":163,"id":185,"title":186,"body":187},"431139","Step 2: Modern web app for the masses","\u003Cp>To create an app-like experience on the web we developed a PWA. It can, for example, send push notifications and deliver a connectivity independent experience due to a service worker. All of these functionalities work in modern browsers and the website is installable as PWA on mobile phones.\u003C\u002Fp>",{"__typename":176,"id":189,"image":190,"caption":192,"captionPosition":195},"176458582",{"url":191,"alt":192,"width":193,"height":194},"https:\u002F\u002Fwww.datocms-assets.com\u002F2651\u002F1501078207-trouw-web-pwa-app.jpg","On the left side you see the website with PWA install banner, in the middle the fullscreen running PWA, on the right the hybrid Android app",2203,1280,"left",{"__typename":163,"id":197,"title":198,"body":199},"431151","Step 3: A bit of native for the rest","\u003Cp>In order to have Apple App Store & Google Play Store presence we wrapped the PWA in a React Native hybrid app. Our PWA strategy is future proof. At this point in time we can even reuse the PWA functionalitites on Android in the hybrid app. Despite the fact that iOS does not support PWA, by wrapping the website in a 'native app', we can still add the same functionalities with a React Native solution.\u003C\u002Fp>",{"expertisesTitle":201,"expertises":202,"deliverableTitle":207,"deliverables":208,"technologiesTitle":213,"technologies":214,"interestedTitle":219,"interestedLinkUrl":220,"interestedLinkLabel":221},"Expertises",[203,205],{"title":204},"Development",{"title":206},"Web Performance Optimisation","Deliverable",[209,211],{"title":210},"Progressive web app",{"title":212},"Hybrid web app","Technologies",[215,217],{"title":216},"Cordova",{"title":218},"React Native","See result","https:\u002F\u002Fwww.trouw.nl\u002F","www.trouw.nl","",[224,236],{"title":225,"body":222,"links":226,"mailchimpValue":222,"mailchimpName":222,"mailchimpId":222,"formType":227,"contactPerson":228},"Let's discuss what we can do",[],"contact",{"name":229,"lastName":230,"jobTitle":231,"image":232},"Nena","de Clercq","Operations Director",{"url":233,"alt":149,"width":234,"height":235},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535373-nena.jpg",2174,2898,{"title":237,"body":222,"links":238,"mailchimpValue":222,"mailchimpName":222,"mailchimpId":222,"formType":239,"contactPerson":240},"Subscribe to our newsletter",[],"newsletter",{"name":241,"lastName":222,"jobTitle":242,"image":243},"Vera","Marketer",{"url":244,"alt":149,"width":245,"height":246},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,291,294,297,300,303,306,309,312,315,318,321,324],{"slug":249,"title":250},"quantum-inspire","Quantum Inspire",{"slug":252,"title":253},"life-terra","Life Terra",{"slug":255,"title":256},"geldmaat","Geldmaat",{"slug":258,"title":259},"pathe-thuis","Pathé Thuis",{"slug":261,"title":262},"viriciti","ViriCiti",{"slug":264,"title":265},"drop-and-fly","Drop & Fly",{"slug":267,"title":268},"15-apps-for-water-research-at-deltares","15 Apps for water research at Deltares",{"slug":270,"title":271},"a-brand-new-funda","A brand new Funda",{"slug":273,"title":274},"bouwen-is-macht","Bouwen is Macht",{"slug":276,"title":277},"world-water-atlas","World Water Atlas",{"slug":279,"title":280},"pick-up-10","Pick Up 10",{"slug":282,"title":283},"hike-one","Hike One",{"slug":285,"title":286},"dlr-inspection-app","DLR Inspection app",{"slug":288,"title":289},"tradus","Tradus",{"slug":137,"title":142},{"slug":292,"title":293},"abn-amro-loan-wizard","ABN-AMRO loan wizard",{"slug":295,"title":296},"npo-dashboard","NPO Dashboard",{"slug":298,"title":299},"hotel-and-bungalowspecials","Hotel- and BungalowSpecials",{"slug":301,"title":302},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":304,"title":305},"2dehands-be","2dehands.be",{"slug":307,"title":308},"swipe-and-shop","Swipe & Shop",{"slug":310,"title":311},"ziggo-interactive-television","Ziggo Interactive Television",{"slug":313,"title":314},"giftforyou","GiftForYou",{"slug":316,"title":317},"commtrac","Commtrac",{"slug":319,"title":320},"stamp-postnl-design-system","PostNL",{"slug":322,"title":323},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":325,"title":326},"privacy-by-design-in-je-bol","In je bol",1776256156578]