3:I[7608,[],""] 5:I[5455,[],""] 6:I[5058,["607","static/chunks/fd91cb85-aa21392f87c5ccdd.js","884","static/chunks/884-51200089ff0ce704.js","987","static/chunks/987-27076b70be92d031.js","185","static/chunks/app/layout-18db438fe05b7d71.js"],"ThemeProviders"] 7:I[5566,["607","static/chunks/fd91cb85-aa21392f87c5ccdd.js","884","static/chunks/884-51200089ff0ce704.js","987","static/chunks/987-27076b70be92d031.js","185","static/chunks/app/layout-18db438fe05b7d71.js"],"KBarSearchProvider"] 8:I[884,["884","static/chunks/884-51200089ff0ce704.js","82","static/chunks/82-969a65ce44d67e38.js","797","static/chunks/app/blog/%5B...slug%5D/page-401cdf591be06470.js"],""] 9:I[1468,["607","static/chunks/fd91cb85-aa21392f87c5ccdd.js","884","static/chunks/884-51200089ff0ce704.js","987","static/chunks/987-27076b70be92d031.js","185","static/chunks/app/layout-18db438fe05b7d71.js"],"N26Logo"] a:I[5844,["607","static/chunks/fd91cb85-aa21392f87c5ccdd.js","884","static/chunks/884-51200089ff0ce704.js","987","static/chunks/987-27076b70be92d031.js","185","static/chunks/app/layout-18db438fe05b7d71.js"],"KBarButton"] b:I[1114,["607","static/chunks/fd91cb85-aa21392f87c5ccdd.js","884","static/chunks/884-51200089ff0ce704.js","987","static/chunks/987-27076b70be92d031.js","185","static/chunks/app/layout-18db438fe05b7d71.js"],"default"] c:I[771,["607","static/chunks/fd91cb85-aa21392f87c5ccdd.js","884","static/chunks/884-51200089ff0ce704.js","987","static/chunks/987-27076b70be92d031.js","185","static/chunks/app/layout-18db438fe05b7d71.js"],"default"] 4:["slug","using-flowkit-in-a-n26-product","c"] d:T69f,M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z0:["c9qRB0_UmLDvmSiskO4p8",[[["",{"children":["blog",{"children":[["slug","using-flowkit-in-a-n26-product","c"],{"children":["__PAGE__?{\"slug\":[\"using-flowkit-in-a-n26-product\"]}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":[["slug","using-flowkit-in-a-n26-product","c"],{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","$4","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/400960ae09b9403d.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en-us","className":"scroll-smooth","suppressHydrationWarning":true,"data-theme":"light","children":[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/static/favicons/favicon-96x96.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/static/favicons/site.webmanifest"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","body",null,{"className":"bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white","children":["$","$L6",null,{"children":["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":["$","div",null,{"className":"flex h-screen flex-col justify-between font-sans","children":[["$","$L7",null,{"kbarConfig":{"searchDocumentsPath":"search.json"},"children":[["$","header",null,{"className":"flex items-center justify-between py-10","children":[["$","div",null,{"children":["$","$L8",null,{"href":"/","aria-label":" N26 Tech","children":["$","div",null,{"className":"flex items-center justify-between","children":[["$","div",null,{"className":"mt-1 flex h-8 w-8 items-center pt-1","children":["$","$L9",null,{}]}],["$","div",null,{"className":"hidden h-6 text-2xl font-semibold sm:block","children":" N26 Tech"}]]}]}]}],["$","div",null,{"className":"flex items-center space-x-4 leading-5 sm:space-x-6","children":[[["$","$L8",null,{"href":"/blog","className":"hidden font-medium text-gray-900 dark:text-gray-100 sm:block","children":"Blog"}],["$","$L8",null,{"href":"/tags","className":"hidden font-medium text-gray-900 dark:text-gray-100 sm:block","children":"Tags"}]],["$","$La",null,{"aria-label":"Search","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":1.5,"stroke":"currentColor","className":"h-6 w-6 text-gray-900 dark:text-gray-100","children":["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","d":"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"}]}]}],["$","$Lb",null,{}],["$","$Lc",null,{}]]}]]}],["$","main",null,{"className":"mb-auto","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","p",null,{"className":"mb-8","children":"But dont worry, you can find plenty of other things on our homepage."}],["$","$L8",null,{"href":"/","className":"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow transition-colors duration-150 hover:bg-blue-700 focus:outline-none dark:hover:bg-blue-500","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"styles":null}]}]]}],["$","footer",null,{"children":["$","div",null,{"className":"mt-16 flex flex-col items-center","children":[["$","div",null,{"className":"mb-3 flex space-x-4","children":[null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://github.com/n26","children":[["$","span",null,{"className":"sr-only","children":"github"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Github"}],["$","path",null,{"d":"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}]]}]]}],null,null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://www.linkedin.com/company/n26","children":[["$","span",null,{"className":"sr-only","children":"linkedin"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Linkedin"}],["$","path",null,{"d":"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"}]]}]]}],null,["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://x.com/n26","children":[["$","span",null,{"className":"sr-only","children":"x"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"X"}],["$","path",null,{"d":"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"}]]}]]}],["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://www.instagram.com/n26/","children":[["$","span",null,{"className":"sr-only","children":"instagram"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-6 w-6","children":[["$","title",null,{"children":"Instagram"}],["$","path",null,{"d":"$d"}]]}]]}],null]}],["$","div",null,{"className":"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400","children":[["$","div",null,{"children":"N26 Tech"}],["$","div",null,{"children":" • "}],["$","div",null,{"children":"© 2024"}],["$","div",null,{"children":" • "}],["$","$L8",null,{"href":"/","children":"N26 Engineering"}],["$","div",null,{"children":" • "}],["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://n26.com","children":"Website"}]]}],["$","div",null,{"className":"mb-8 text-sm text-gray-500 dark:text-gray-400","children":["$","$L8",null,{"href":"/feed.xml","children":"RSS Feed"}]}]]}]}]]}]}]}]}]]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/c146a786aa5f42c4.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/a5acd496e347a880.css","precedence":"next","crossOrigin":"$undefined"}]],"$Le"]]]] f:I[8723,["884","static/chunks/884-51200089ff0ce704.js","82","static/chunks/82-969a65ce44d67e38.js","797","static/chunks/app/blog/%5B...slug%5D/page-401cdf591be06470.js"],"default"] 10:I[5878,["884","static/chunks/884-51200089ff0ce704.js","82","static/chunks/82-969a65ce44d67e38.js","797","static/chunks/app/blog/%5B...slug%5D/page-401cdf591be06470.js"],"Image"] 11:I[4778,["884","static/chunks/884-51200089ff0ce704.js","82","static/chunks/82-969a65ce44d67e38.js","797","static/chunks/app/blog/%5B...slug%5D/page-401cdf591be06470.js"],"default"] 2:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Using FlowKit in a N26 Product\",\"datePublished\":\"2023-01-17T00:00:00.000Z\",\"dateModified\":\"2023-01-17T00:00:00.000Z\",\"description\":\"It’s a hard truth: Scaling up products isn’t easy. And this is even more true and obvious when you have multiple platforms to manage, mostly because the chances of something getting out of hand are directly proportional.\",\"image\":\"/static/images/posts/flowkit-at-n26/diagram-1.jpg\",\"url\":\"https://tech.n26.com/blog/using-flowkit-in-a-n26-product\",\"author\":[{\"@type\":\"Person\",\"name\":\"Giulio Lombardo\"}]}"}}],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":[["$","$Lf",null,{}],["$","article",null,{"children":["$","div",null,{"className":"xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700","children":[["$","header",null,{"className":"pt-6 xl:pb-6","children":["$","div",null,{"className":"space-y-1 text-center","children":[["$","dl",null,{"className":"space-y-10","children":["$","div",null,{"children":[["$","dt",null,{"className":"sr-only","children":"Published on"}],["$","dd",null,{"className":"text-base font-medium leading-6 text-gray-500 dark:text-gray-400","children":["$","time",null,{"dateTime":"2023-01-17T00:00:00.000Z","children":"Tuesday, January 17, 2023"}]}]]}]}],["$","div",null,{"children":["$","h1",null,{"className":"text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14","children":"Using FlowKit in a N26 Product"}]}]]}]}],["$","div",null,{"className":"grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0","children":[["$","dl",null,{"className":"pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700","children":[["$","dt",null,{"className":"sr-only","children":"Authors"}],["$","dd",null,{"children":["$","ul",null,{"className":"flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8","children":[["$","li","Giulio Lombardo",{"className":"flex items-center space-x-2","children":[["$","$L10",null,{"src":"/static/images/authors/GiulioLombardo.jpg","width":38,"height":38,"alt":"avatar","className":"h-10 w-10 rounded-full","unoptimized":true}],["$","dl",null,{"className":"whitespace-nowrap text-sm font-medium leading-5","children":[["$","dt",null,{"className":"sr-only","children":"Name"}],["$","dd",null,{"className":"text-gray-900 dark:text-gray-100","children":"Giulio Lombardo"}],["$","dt",null,{"className":"sr-only","children":"Twitter"}],["$","dd",null,{"children":"$undefined"}]]}]]}]]}]}]]}],["$","div",null,{"className":"divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0","children":[["$","div",null,{"className":"prose max-w-none pb-8 pt-10 dark:prose-invert","children":[["$","p",null,{"children":"It’s a situation you’ve probably been through."}],["$","p",null,{"children":"You build a tailor-made product taking into account all the needs, legal requirements and functionality required by targeting a specific group of customers or a particular country. The product is released and you’re already looking to its future: expand the user base and make it accessible to new markets."}],["$","p",null,{"children":"You get back to work looking for the differences between what you just published, new requirements and the possible solutions to implement everything."}],["$","p",null,{"children":"At first it all seems feasible, but shortly after having listed all the possible combinations of the product, due to the different requirements for the new users, you realise that managing everything, without risking breaking the already published product, will be difficult."}],["$","p",null,{"children":"It’s a hard truth: Scaling up products isn’t easy. And this is even more true and obvious when you have multiple platforms to manage, mostly because the chances of something getting out of hand are directly proportional."}],["$","h2",null,{"className":"content-header","id":"n26-instalments","children":[["$","a",null,{"href":"#n26-instalments","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"N26 Instalments"]}],["$","p",null,{"children":"We also found ourselves in the same situation with N26 Instalments, but this time we had an ace up our sleeve to solve the scalability problem: FlowKit."}],["$","p",null,{"children":"To understand how we used FlowKit, let’s first start by taking a look at the original product that did not use it."}],["$","h2",null,{"className":"content-header","id":"the-original-product","children":[["$","a",null,{"href":"#the-original-product","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"The original product"]}],["$","p",null,{"children":"At that time, the product consisted of a few screens connected to each other without particular conditions. In fact, the main focus was the German market and we did not know if it would be available in other markets in the future."}],["$","p",null,{"children":"In the diagram below you can see how it looked like:"}],["$","div",null,{"children":["$","$L10",null,{"alt":"diagram","src":"/static/images/posts/flowkit-at-n26/diagram-2.jpg","width":"1265","height":"200","unoptimized":true}]}],["$","h2",null,{"className":"content-header","id":"the-new-requirements","children":[["$","a",null,{"href":"#the-new-requirements","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"The new requirements"]}],["$","p",null,{"children":"The product worked well and we wanted to publish it in new European markets, specifically Italy and France. This was great news! Although, at the same time, we realised that these two markets had specific laws that required additional screens or different content in the existing ones. In short, to reach these new markets we had to make the product scalable."}],["$","h2",null,{"className":"content-header","id":"the-italian-flow","children":[["$","a",null,{"href":"#the-italian-flow","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"The Italian Flow"]}],["$","div",null,{"children":["$","$L10",null,{"alt":"diagram","src":"/static/images/posts/flowkit-at-n26/diagram-3.jpg","width":"1509","height":"200","unoptimized":true}]}],["$","h3",null,{"className":"content-header","id":"esignature","children":[["$","a",null,{"href":"#esignature","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"eSignature"]}],["$","p",null,{"children":"The Bank of Italy’s requirement was clear: customers applying for a loan must approve it with a digital signature, so we had to add a new step dedicated to the eSignature, visible only to Italian customers, to keep the flow as it was for the previous customers."}],["$","h2",null,{"className":"content-header","id":"the-french-flow","children":[["$","a",null,{"href":"#the-french-flow","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"The French Flow"]}],["$","div",null,{"children":["$","$L10",null,{"alt":"diagram","src":"/static/images/posts/flowkit-at-n26/diagram-4.jpg","width":"1020","height":"200","unoptimized":true}]}],["$","h3",null,{"className":"content-header","id":"a-single-offer-screen","children":[["$","a",null,{"href":"#a-single-offer-screen","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"A single offer screen"]}],["$","p",null,{"children":"As for French clients, according to other legal requirements, we could not show more than one offer to the client when it came to small loans, as in our case. Furthermore, no message was required prior to the confirmation of the offer, unlike the previous version of Flow. For this reason the content of the Offer Selection Screen had to be made dynamic to show this new “single offer” mode."}],["$","h2",null,{"className":"content-header","id":"getting-it-done","children":[["$","a",null,{"href":"#getting-it-done","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Getting it done"]}],["$","h3",null,{"className":"content-header","id":"presentation-gateway","children":[["$","a",null,{"href":"#presentation-gateway","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Presentation Gateway"]}],["$","p",null,{"children":"The first problem to be solved was customising the content based on the user’s region."}],["$","p",null,{"children":"To solve it we could insert controls in the two FE platforms (Android & iOS) in order to control the region and modify the contents shown. However, this solution already presented problems. In fact, by duplicating the control in the platforms, we could create two separate points of failure, and also in order to format the data according to the customer’s region we needed new data compared to those already provided."}],["$","p",null,{"children":"So we looked elsewhere, and came up with a new and better solution: the Presentation Gateway."}],["$","p",null,{"children":"The purpose of this new tool was to centralise the creation of content according to various conditions (currency, region, interest rates) for the FE platforms, so as to remove all logic and have a single source of truth. Thanks to this, we were able to open the doors to a new concept: to generate navigation to BE, for all FE platforms, and here FlowKit was able to express its full potential."}],["$","div",null,{"children":["$","$L10",null,{"alt":"Product diagram","src":"/static/images/posts/flowkit-at-n26/diagram-1.jpg","width":"1400","height":"1010","unoptimized":true}]}],["$","h2",null,{"className":"content-header","id":"flowkit","children":[["$","a",null,{"href":"#flowkit","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"FlowKit"]}],["$","p",null,{"children":"Having now data already formatted and ready to use coming from the BE through the Presentation Gateway, the FE platforms only had to make the latest changes to receive the new dynamic navigation Flow and execute it."}],["$","p",null,{"children":"In order to do this, we’ve converted the existing screens, and the screens for the new regions in FlowKit Steps. This enabled us to present them to the user in the order established by the Back-End and only when it indicated it was necessary by it."}],["$","p",null,{"children":"All this, without adding any conditions in the FE platforms. This translates into: central source of truth, less code, fewer parts to test and fewer places where logic can create problems."}],["$","p",null,{"children":"FlowKit allowed us to reach a win-win situation."}],["$","h2",null,{"className":"content-header","id":"the-baseline","children":[["$","a",null,{"href":"#the-baseline","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"The Baseline"]}],["$","p",null,{"children":"Now that we have seen together the scalability solution that uses FlowKit, the same solution that we have chosen to implement the new requirements in the real world, we can compare the traditional solution afterwards to understand what the differences and strengths are by going into detail. To compare the two solutions in the most effective way, we can take a problem and understand how they solve it respectively."}],["$","p",null,{"children":"Let’s take for example the navigation management in case a user has a bank account in Italy."}],["$","h2",null,{"className":"content-header","id":"standard-way","children":[["$","a",null,{"href":"#standard-way","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"\"Standard\" way"]}],["$","p",null,{"children":"To manage navigation for customers with German, French and Italian current accounts, we must provide data to the FE platforms which makes it possible to discern the nationality of the current account."}],["$","p",null,{"children":"This information will be used in navigation operations, possibly in every point, as the screens will have to “get to know each other” in order to present."}],["$","p",null,{"children":"Let’s look at some sample code to better understand how this translates into:"}],["$","$L11",null,{"className":"language-swift","children":["$","code",null,{"className":"language-swift code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"enum"}]," ",["$","span",null,{"className":"token class-name","children":"Country"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," germany\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," italy\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," france\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsOfferConfirmationPresentation"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"navigateToNextScreen"}],["$","span",null,{"className":"token punctuation","children":"("}],"country",["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"Country"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"switch"}]," country ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"germany",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token function","children":"showPINInput"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"italy",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token function","children":"showESignature"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"france",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token function","children":"showPINInput"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"showESignature"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"showPINInput"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"class"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsOfferSelectionPresentation"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"navigateToNextScreen"}],["$","span",null,{"className":"token punctuation","children":"("}],"country",["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"Country"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"switch"}]," country ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"germany",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token function","children":"showADM"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"italy",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token function","children":"showADM"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"france",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token function","children":"showOfferConfirmation"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"private"}]," ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"showADM"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"private"}]," ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"showOfferConfirmation"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]]}]}],["$","p",null,{"children":"If the code already looks complicated and tangled now, imagine how it will become more complex as future nations are added to the product. The more checks, the more difficult it gets to read the code and write or run tests."}],["$","h2",null,{"className":"content-header","id":"flowkit-1","children":[["$","a",null,{"href":"#flowkit-1","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"FlowKit"]}],["$","p",null,{"children":"Using FlowKit the only part of the code that will increase will possibly be only the StepFactory, as the order of the Steps in the Flow does not affect the lines of code since the link is dynamic and not based on the position."}],["$","p",null,{"children":"As we can see below:"}],["$","$L11",null,{"className":"language-swift","children":["$","code",null,{"className":"language-swift code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"enum"}]," ",["$","span",null,{"className":"token class-name","children":"StepType"}],["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"String"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," marketing\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," offerSelection\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," adm\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," offerConfirmation\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," pinInput\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," eSignature\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"protocol"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsStepHandlerFactoryType"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"marketingStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"MarketingStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"offerSelectionStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"OfferSelectionStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"admStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"ADMStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"offerConfirmationStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"OfferConfirmationStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"pinInputStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"PINInputStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"eSignatureStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"ESignatureStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsStepFactory"}],["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"StepFactory"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"typealias"}]," ",["$","span",null,{"className":"token constant","children":"OUTPUT"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token class-name","children":"Empty"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"typealias"}]," ",["$","span",null,{"className":"token constant","children":"STEP"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token class-name","children":"FlowStep"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"private"}]," ",["$","span",null,{"className":"token keyword","children":"let"}]," stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsStepHandlerFactory"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"init"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsStepHandlerFactory"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"self"}],["$","span",null,{"className":"token punctuation","children":"."}],"stepHandlerFactory ",["$","span",null,{"className":"token operator","children":"="}]," stepHandlerFactory\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"makeHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"for"}]," stepRawType",["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"String"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token constant","children":"STEP"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token constant","children":"OUTPUT"}],["$","span",null,{"className":"token operator","children":">?"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"guard"}]," ",["$","span",null,{"className":"token keyword","children":"let"}]," stepType ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token class-name","children":"StepType"}],["$","span",null,{"className":"token punctuation","children":"("}],"rawValue",["$","span",null,{"className":"token punctuation","children":":"}]," stepRawType",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token keyword","children":"else"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token constant nil","children":"nil"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"switch"}]," stepType ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"marketing",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function","children":"marketingStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"offerSelection",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function","children":"offerSelectionStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"adm",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function","children":"admStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"offerConfirmation",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function","children":"offerConfirmationStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"pinInput",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function","children":"pinInputStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"case"}]," ",["$","span",null,{"className":"token punctuation","children":"."}],"eSignature",["$","span",null,{"className":"token punctuation","children":":"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" stepHandlerFactory",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function","children":"eSignatureStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsStepHandlerFactory"}],["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"InstallmentsStepHandlerFactoryType"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"marketingStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"MarketingStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"offerSelectionStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"OfferSelectionStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"admStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"ADMStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"offerConfirmationStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"OfferConfirmationStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"pinInputStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"PINInputStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"func"}]," ",["$","span",null,{"className":"token function function-definition","children":"eSignatureStepHandler"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"->"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"ESignatureStepDefinition"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token comment","children":"/* Presentation Code */"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"///"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"protocol"}]," ",["$","span",null,{"className":"token class-name","children":"StepFactory"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"Empty"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"FlowStep"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"AnyStepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"A"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token class-name","children":"B"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"init"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword omit","children":"_"}]," stepHandler",["$","span",null,{"className":"token punctuation","children":":"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"A"}],["$","span",null,{"className":"token operator","children":">"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"StepHandler"}],["$","span",null,{"className":"token operator","children":"<"}],["$","span",null,{"className":"token class-name","children":"T"}],["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"MarketingStepDefinition"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"OfferSelectionStepDefinition"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"ADMStepDefinition"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"OfferConfirmationStepDefinition"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"PINInputStepDefinition"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"struct"}]," ",["$","span",null,{"className":"token class-name","children":"ESignatureStepDefinition"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]]}]}],["$","h2",null,{"className":"content-header","id":"scaling-even-more","children":[["$","a",null,{"href":"#scaling-even-more","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Scaling even more"]}],["$","p",null,{"children":"Making your product scalable using FlowKit not only makes navigation management easier by removing conditions in your code, it also opens the door to new scalability solutions and opportunities."}],["$","h2",null,{"className":"content-header","id":"ab-test","children":[["$","a",null,{"href":"#ab-test","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"A/B Test"]}],["$","p",null,{"children":"Having a central source of truth in the Back-End for both platforms also means being able to enable A/B Testing easily and simultaneously, with one simple switch."}],["$","p",null,{"children":"In fact, by using the solution explained above, it will be easy in the future to add new Flows to be used according to an A/B Test logic, for example: test a new version of the product with only 50% of users, while keeping the experience the same for the other half."}],["$","p",null,{"children":"This is also possible to achieve without FlowKit, of course, but the code will necessarily have to rely on (repeated) checks in the navigation, because it will be linked to individual screens. In FlowKit on the other hand, screens are Steps part of a dynamic Flow and without direct links, making it easier to react to changes."}],["$","h2",null,{"className":"content-header","id":"future-proof-ness","children":[["$","a",null,{"href":"#future-proof-ness","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Future “proof-ness”"]}],["$","p",null,{"children":"Another potential benefit that you get for free from this implementation is the ability to modify the Flow without releasing a new version of the FE applications."}],["$","p",null,{"children":"If the FE applications are already able to manage a stepType, one can decide to add more Steps with it in a given Flow, or even add future stepTypes to be used at a specific moment in time by just updating the Flow remotely using the Back-end. By doing this you would make features unlinked from application releases."}],["$","p",null,{"children":"In other words, you can make FE applications more “future-proof” and app version agnostic by supporting new stepTypes to use later, or reusing old ones."}],["$","h2",null,{"className":"content-header","id":"conclusions","children":[["$","a",null,{"href":"#conclusions","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Conclusions"]}],["$","p",null,{"children":"Scaling products is certainly not an easy task and there is no silver bullet to use in all situations. You have to take into account many behaviours that may be non-linear. If the problem is tackled in an innovative way, such as the decomposition of Flow into Steps with the use of FlowKit, many difficulties can be set aside."}]]}],["$","div",null,{"className":"pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300","children":["$","a",null,{"target":"_blank","rel":"nofollow","href":"https://x.com/search?q=https%3A%2F%2Ftech.n26.com%2Fblog%2Fusing-flowkit-in-a-n26-product","children":"Discuss on X"}]}],"$undefined"]}],["$","footer",null,{"children":[["$","div",null,{"className":"divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y","children":[["$","div",null,{"className":"py-4 xl:py-8","children":[["$","h2",null,{"className":"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400","children":"Tags"}],["$","div",null,{"className":"flex flex-wrap","children":[["$","$L8",null,{"href":"/tags/n26","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"n26"}],["$","$L8",null,{"href":"/tags/software-engineering","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"software-engineering"}],["$","$L8",null,{"href":"/tags/kotlin","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"kotlin"}],["$","$L8",null,{"href":"/tags/kubernetes","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"kubernetes"}],["$","$L8",null,{"href":"/tags/tech-stack","className":"mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":"tech-stack"}]]}]]}],"$undefined"]}],["$","div",null,{"className":"pt-4 xl:pt-8","children":["$","$L8",null,{"href":"/blog","className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","aria-label":"Back to the blog","children":"← Back to the blog"}]}]]}]]}]]}]}]]}]] e:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Using FlowKit in a N26 Product | N26 Engineering"}],["$","meta","3",{"name":"description","content":"It’s a hard truth: Scaling up products isn’t easy. And this is even more true and obvious when you have multiple platforms to manage, mostly because the chances of something getting out of hand are directly proportional."}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","6",{"rel":"canonical","href":"https://tech.n26.com/blog/using-flowkit-in-a-n26-product/"}],["$","link","7",{"rel":"alternate","type":"application/rss+xml","href":"https://tech.n26.com/feed.xml/"}],["$","meta","8",{"property":"og:title","content":"Using FlowKit in a N26 Product"}],["$","meta","9",{"property":"og:description","content":"It’s a hard truth: Scaling up products isn’t easy. And this is even more true and obvious when you have multiple platforms to manage, mostly because the chances of something getting out of hand are directly proportional."}],["$","meta","10",{"property":"og:url","content":"https://tech.n26.com/blog/using-flowkit-in-a-n26-product/"}],["$","meta","11",{"property":"og:site_name","content":"N26 Engineering"}],["$","meta","12",{"property":"og:locale","content":"en_US"}],["$","meta","13",{"property":"og:image","content":"https://tech.n26.com/static/images/posts/flowkit-at-n26/diagram-1.jpg"}],["$","meta","14",{"property":"og:type","content":"article"}],["$","meta","15",{"property":"article:published_time","content":"2023-01-17T00:00:00.000Z"}],["$","meta","16",{"property":"article:modified_time","content":"2023-01-17T00:00:00.000Z"}],["$","meta","17",{"property":"article:author","content":"Giulio Lombardo"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Using FlowKit in a N26 Product"}],["$","meta","20",{"name":"twitter:description","content":"It’s a hard truth: Scaling up products isn’t easy. And this is even more true and obvious when you have multiple platforms to manage, mostly because the chances of something getting out of hand are directly proportional."}],["$","meta","21",{"name":"twitter:image","content":"https://tech.n26.com/static/images/posts/flowkit-at-n26/diagram-1.jpg"}]] 1:null