{"id":905,"date":"2018-07-19T15:04:22","date_gmt":"2018-07-19T13:04:22","guid":{"rendered":"http:\/\/52.56.69.55\/?post_type=newsitem&#038;p=905"},"modified":"2018-07-19T17:07:41","modified_gmt":"2018-07-19T15:07:41","slug":"how-we-built-the-parkd-application","status":"publish","type":"newsitem","link":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/","title":{"rendered":"How we built the Parkd application"},"content":{"rendered":"<h2>Rethinking our mobile development stack<\/h2>\n<p>When we started building the Parkd application, we took some time to evaluate our frameworks and way of working. We had \u00a0extensive knowledge and years of hands-on experience in Objective-C and Android development; the obvious choice would have been to build our mobile application using these. However, in 2016 Swift (Apple\u2019s newly-released programming language) was swiftly replacing Objective C and more and more Android developers were experimenting with Kotlin (Kotlin is a statically typed programming language created by JetBrains and officially supported by Google). Using Swift or Kotlin would require all our native developers to learn a new language and framework. So, before rushing in and starting development, we dug even deeper. We asked ourselves the following question:<\/p>\n<p>\u201cWhat is our biggest problem and will these new technologies help us with that?\u201d<\/p>\n<p>After much deliberation, \u00a0we came to the conclusion that the biggest problems we were facing were (a) the mismatch in features between iOS versions and Android versions and (b) the time it took to release new versions with a relatively small team. Sometimes both applications did totally different things because of misalignment between both platforms. We mitigated this problem by moving more and more code to the backend, but there was only \u00a0so much we could move to the server without making it too bloated. The direction we had to take was clear: Cross Platform Mobile App Development.<\/p>\n<h2>Cross platform mobile app development<\/h2>\n<p>There were some interesting options: Microsoft had Xamarin (.NET), Adobe had Phonegap (or Cordova, which is the opensource version). Xamarin looked pretty nice, but had slow compilation times and back then (they do now) did not provide any means of live reloading your app on code update. We didn\u2019t want to recompile everything every time our designer asks to move a component one pixel (&#8230;you know what designers are like!). On top of that, the open source community around Xamarin wasn\u2019t very big, and didn\u2019t seem to be growing. Our UI was based very much on custom components and we found them to be very hard to build in Xamarin.<\/p>\n<p>We moved on and looked at Phonegap. The biggest advantage was obvious. We\u2019d just have to build a mobile web application and package it into a phonegap application. When scaling the team, we\u2019d easily find highly skilled web developers \u00a0and use them for the mobile application too. It was super easy to create custom components because we had the entire toolbelt CSS and HTML had to offer. But\u2026 It was\u2026 super\u2026 SLOW! The flexibility came with one big disadvantage: everything was inside a webview instead of using native views.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-928\" src=\"http:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/app-screens-shadow.jpg\" alt=\"Parkd app screens\" width=\"1380\" height=\"600\" srcset=\"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/app-screens-shadow.jpg 1380w, https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/app-screens-shadow-300x130.jpg 300w, https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/app-screens-shadow-768x334.jpg 768w, https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/app-screens-shadow-1024x445.jpg 1024w\" sizes=\"auto, (max-width: 1380px) 100vw, 1380px\" \/><\/p>\n<p>Back in 2016, React Native was trending. It was rather new compared to the ones mentioned above, but it provided many interesting features we desperately needed. It was Facebook backed, so it would not just go away (let\u2019s forget what they did to Parse \ud83d\ude05 and this is a totally different technology). We immediately fell in love with the framework. Every code change I did simply needed a small \u2318-R after saving. We could quickly prototype a small application that became the base of the Parkd application we have today.<\/p>\n<p>The performance was not as fast as a native application, but it was pretty damn close thanks to the fact it uses native views. Most performance issues were fixed fast after moving out of development mode and optimizing navigation transitions. Furthermore it \u00a0was easy creating custom components and leveraging the look and feel of the platform. One thing we had to get over was mixing Javascript and JSX. In React you no longer think in terms of view and template files, which are separated from the code. You just break up your application in small components which contains everything related to that component: code, UI and UX (yes, even CSS\u2026 although not everyone in our team agrees on that!).). It started out feeling a bit weird but once you got used to it, it felt great. You could easily find everything you needed and it severely improved our code navigability. React Native seemed to be the thing we needed \u2013\u00a0but it didn\u2019t come without its issues<\/p>\n<p>Every update of React Native could take our team days (and there were new versions coming in every week) and could break anything at any moment in time. Fortunately, this improved over time, because updates were less frequent. Not only that, we got better at it. Since we had no experience in Javascript whatsoever, we made mistakes\u2026 many mistakes. But that\u2019s how we learn. But with constant refactoring and fixing broken windows as we go forward, the application is always improving.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-913\" src=\"http:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/mvp.png\" alt=\"\" width=\"830\" height=\"600\" srcset=\"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/mvp.png 830w, https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/mvp-300x217.png 300w, https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/mvp-768x555.png 768w\" sizes=\"auto, (max-width: 830px) 100vw, 830px\" \/><\/p>\n<h2>Beyond mobile and the future<\/h2>\n<p>When we started working on our web platform for fleet managers. It was obvious that we would use React for our web applications. The first version of myParkd was built almost entirely on shared code with our mobile application. The entire model, and many of the services, could be reused. This way we could create our web platform lightning fast and it enabled us to easily perform cross team code reviews. We are constantly learning from each other and adapting our code with techniques coming from both domains.<\/p>\n<p>At Parkd, we\u2019re always trying to stay ahead of the curve. Looking backward, we made an excellent decision on React Native. A lot of mobile development companies have moved to React Native and on the web React reigns supreme. But we do not want to lose track of new technologies so we never stop looking for ways to improve. Even now, other interesting technologies are emerging. For example, we\u2019re keeping our eyes open for Flutter by Google, a very interesting cross platform app framework that did not exist in 2016. One thing is certain. I don\u2019t think Parkd will go back to native development in the near future, so, AirBnB, \u00a0you\u2019re on your own here! \ud83d\ude09<\/p>\n","protected":false},"featured_media":932,"template":"","class_list":["post-905","newsitem","type-newsitem","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How we built the Parkd application - Parkd<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How we built the Parkd application - Parkd\" \/>\n<meta property=\"og:description\" content=\"Rethinking our mobile development stack When we started building the Parkd application, we took some time to evaluate our frameworks and way of working. We had \u00a0extensive knowledge and years of hands-on experience in Objective-C and Android development; the obvious [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Parkd\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/parkdnl\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-19T15:07:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/how-we-build-the-parkd-app-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"503\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@iamparkd\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/\",\"url\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/\",\"name\":\"How we built the Parkd application - Parkd\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/parkd.com\\\/nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/parkd.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/how-we-build-the-parkd-app-2.jpg\",\"datePublished\":\"2018-07-19T13:04:22+00:00\",\"dateModified\":\"2018-07-19T15:07:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/#primaryimage\",\"url\":\"https:\\\/\\\/parkd.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/how-we-build-the-parkd-app-2.jpg\",\"contentUrl\":\"https:\\\/\\\/parkd.com\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/how-we-build-the-parkd-app-2.jpg\",\"width\":1200,\"height\":503,\"caption\":\"How we built the Parkd app\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/parkd.com\\\/en\\\/news\\\/how-we-built-the-parkd-application\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/parkd.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How we built the Parkd application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/parkd.com\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/parkd.com\\\/nl\\\/\",\"name\":\"Parkd\",\"description\":\"Parking so simple it feels like magic.\",\"publisher\":{\"@id\":\"https:\\\/\\\/parkd.com\\\/nl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/parkd.com\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/parkd.com\\\/nl\\\/#organization\",\"name\":\"Parkd\",\"url\":\"https:\\\/\\\/parkd.com\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/parkd.com\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/parkd.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/parkd-logo-white-blue.png\",\"contentUrl\":\"http:\\\/\\\/parkd.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/parkd-logo-white-blue.png\",\"width\":600,\"height\":600,\"caption\":\"Parkd\"},\"image\":{\"@id\":\"https:\\\/\\\/parkd.com\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/parkdnl\\\/\",\"https:\\\/\\\/x.com\\\/iamparkd\",\"https:\\\/\\\/www.instagram.com\\\/iamparkd\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/17925645\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How we built the Parkd application - Parkd","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/","og_locale":"en_US","og_type":"article","og_title":"How we built the Parkd application - Parkd","og_description":"Rethinking our mobile development stack When we started building the Parkd application, we took some time to evaluate our frameworks and way of working. We had \u00a0extensive knowledge and years of hands-on experience in Objective-C and Android development; the obvious [&hellip;]","og_url":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/","og_site_name":"Parkd","article_publisher":"https:\/\/www.facebook.com\/parkdnl\/","article_modified_time":"2018-07-19T15:07:41+00:00","og_image":[{"width":1200,"height":503,"url":"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/how-we-build-the-parkd-app-2.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@iamparkd","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/","url":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/","name":"How we built the Parkd application - Parkd","isPartOf":{"@id":"https:\/\/parkd.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/#primaryimage"},"image":{"@id":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/#primaryimage"},"thumbnailUrl":"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/how-we-build-the-parkd-app-2.jpg","datePublished":"2018-07-19T13:04:22+00:00","dateModified":"2018-07-19T15:07:41+00:00","breadcrumb":{"@id":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/#primaryimage","url":"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/how-we-build-the-parkd-app-2.jpg","contentUrl":"https:\/\/parkd.com\/wp-content\/uploads\/2018\/07\/how-we-build-the-parkd-app-2.jpg","width":1200,"height":503,"caption":"How we built the Parkd app"},{"@type":"BreadcrumbList","@id":"https:\/\/parkd.com\/en\/news\/how-we-built-the-parkd-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/parkd.com\/en\/"},{"@type":"ListItem","position":2,"name":"How we built the Parkd application"}]},{"@type":"WebSite","@id":"https:\/\/parkd.com\/nl\/#website","url":"https:\/\/parkd.com\/nl\/","name":"Parkd","description":"Parking so simple it feels like magic.","publisher":{"@id":"https:\/\/parkd.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/parkd.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/parkd.com\/nl\/#organization","name":"Parkd","url":"https:\/\/parkd.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/parkd.com\/nl\/#\/schema\/logo\/image\/","url":"http:\/\/parkd.com\/wp-content\/uploads\/2017\/09\/parkd-logo-white-blue.png","contentUrl":"http:\/\/parkd.com\/wp-content\/uploads\/2017\/09\/parkd-logo-white-blue.png","width":600,"height":600,"caption":"Parkd"},"image":{"@id":"https:\/\/parkd.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/parkdnl\/","https:\/\/x.com\/iamparkd","https:\/\/www.instagram.com\/iamparkd\/","https:\/\/www.linkedin.com\/company\/17925645\/"]}]}},"_links":{"self":[{"href":"https:\/\/parkd.com\/en\/wp-json\/wp\/v2\/newsitem\/905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parkd.com\/en\/wp-json\/wp\/v2\/newsitem"}],"about":[{"href":"https:\/\/parkd.com\/en\/wp-json\/wp\/v2\/types\/newsitem"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parkd.com\/en\/wp-json\/wp\/v2\/media\/932"}],"wp:attachment":[{"href":"https:\/\/parkd.com\/en\/wp-json\/wp\/v2\/media?parent=905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}