 Who here enjoys deploying production changes late night last minute on a Friday night? Well, you really shouldn't I certainly don't and neither does my team So we had to break some rules to be able to join you here at the Dev Summit to be able to release our Progressive web app just before just in time So hello, my name is Andrew and I work for a company called conga And I'm here today to tell you a little bit more about our new progressive web app conga easy Let me find my clicker. So what is conga? So conga is an online Shopping website in Nigeria a leading one and we have a product catalog Consisting of products from our marketplace So we have our merchant partners who who manage and an upload and manage inventory and orders, etc in a separate system And so it's consisting of marketplace products and retail products our own in-house retail products So we currently operate in Nigeria But our mission is actually to become the engine of trade and commerce in Africa as a whole That's our mission statement. So we have teams based in in Lagos, Nigeria and in Cape Town, South Africa and The main reason I enjoy working at conga Is that through business service and technology we actually make a difference to people's lives We add value and we can see these changes on a relatively easy easy scale so We offer support to SMEs and Provide a wider selection of products to consumers and customers and we're actively making a difference to these people There's not a large amount of brick-and-mortar shops So for consumers to be able to have access to this to this product selection makes a difference I would like to extend a serious thank you to the awesome team of technologists based in Cape Town in Nigeria And I'm extremely proud of the work that they've done over the last couple of weeks It's been an extremely short period of time and I'd like to say a big thank you to them So I'm going to tell you a little bit about the Nigerian market and the network infrastructure there. It's not normal not simple There's about 185 million people in Nigeria and of that number about about a hundred million internet users And this is a difficult number to to manage because Nigerians are known for multi-simming so they'll have multiple SIM cards and the reason for doing that is because the telcos Telecommunication companies have varying rates and varying network coverage. So that's probably not a very unique number But of that we have a high mobile penetration 80 percent and here's an interesting stat that 65 or 64 percent of All traffic in this in this areas is being served on 2g and actually about 15 percent is being served on the Edge Network and Which leaves a remaining 20 percent that's being served over Wi-Fi and 3g so you can see this is relatively problematic and I'll explain why in a moment So Nigerians fantastic people They're particularly price sensitive so they're willing to sacrifice almost any other aspect of a product in over price and And this is a source from McKinsey So besides being price sensitive this obviously relates to being data sensitive and obviously there's an associated cost with data and These numbers are not particularly correct. I'm just trying to paint a picture here So don't don't quote me on these numbers But imagine if the the the minimum wage in Nigeria about 18,000 Naira or more or less a hundred hundred US dollars per month And imagine the the cost per megabyte of data and of city It's 0.5, but I know it's actually recently it is coming down and I look forward to it reducing in further But the picture I'm trying to paint here is the fact that you know, there's a non negligible amount and a significant Percentage of that monthly wage could be spent on downloading our app and this is something we would like to mitigate So we also have mobile traffic very strong mobile traffic iOS and Android apps So besides that if you just look at our web traffic and we have a response of web web application Our current traffic is sitting at about 60 percent mobile or mobile web and about 5 percent Tablet and the remaining is is desktop so you can see what our customer base is actually quite focused on mobile web So Why progressive web apps? I think it's actually quite simple. It's actually really really well suited to our To our use case so right now and traditionally, you know We've we've had about three and a half years of operation and in that time We've built a responsive web design a responsive desktop application and it works really well on Wi-Fi and 3g as you'd imagine But I guess if you look at 2g networks and the average transfer rate on our CDN It's sitting at about 250 kilobits per second Which is obviously not ideal if you're trying to download a home page for the first time and it sits at two and a half megabytes You can imagine how long this takes for our users. So that's the first area that pushed us into progressive web apps The native apps So one of the major problems is we're a startup and we're changing our business model pretty pretty fast so in these environments, it's very difficult to produce a Native app and expect that to last the duration of our business model So essentially be changing features all the time and every time we make a change to these features or to these apps we have to release a new version and With it's with this new version comes an upgrade cost and our users are That they don't want to upgrade. Well, they don't want to spend 15 megabytes upgrading the app so what we've what we've ended up with the result is a long list of versions that we can't really support and users refuse to upgrade so and Then finally these these native apps are pretty much thin HTTP clients So they do work under sort of degraded networks, but it's not really built with offline first in mind so We could have gone an incremental route or should we go from scratch and it just coincided it just happened to coincide with Something else that's going on in our engineering department Which is a replatforming and so at this moment We're actually breaking down our monolithic e-commerce application into a bunch of smaller independently deployable independently scalable microservices, so this is actually the focus of our engineering department at the moment so We started with a complete mobile web redesign So just a design optimization and a lot of these improvements have come from this Redesign phase not not only from progressive web app technology, but also from the fact that we looked at our design and said okay Let's stop serving 800 kilobyte images to our users So the focus was on clean and simple UI as well as a slick customer experience The user experience so we design features and applications as a whole With with an offline first approach So we looked at a bunch of different areas of the application and decided to build this with an offline first in mind So we started with an app manifest So that's the first thing we did when we moved to progressive web app And it it gives us the ability to add the app to home screen and to launch it in standalone mode And then as you can see it here We have a little coach mark and and and an action called a call to action and Then the next thing we did was added a service worker and we use this as a network proxy And it gives us control over the network layer And we utilize the service the service worker to cache all resources and requests that come through it before before it hits the network And we use the fastest cache strategy this ensures that our app Content renders quickly and even during intermittent network connectivity or a completely degraded network So those are the first two things we we added an app manifest and a service worker The next part we we decided to use the application shell architecture to load all app static content and data on initial Load so we cash them and then only after they've loaded we render them to the user So the app the app shell architecture consists of html CSS and and all the JavaScript we we require to bootstrap the site excluding all the user data So other than that the app manifest a splash screen We also added our own splash screen that we basically show that until all of that that content is loaded And then release that and render it to the user So the other thing we've done with the app shell is we've vulcanized all of these Components into a single file. So when the site loads we we we load the entire file first before you render it This process contact concatenates all custom elements into a single file So all of our custom web components as well as the polymer components and third-party Components they're all compressed into one file and something that we get out of it. It's very simply We get some extra linting some optimization as well as the minification of our resources the next part of Our app journey was looking at the background sync API So this really suits us well for for analytics and tracking of offline actions And there's another element to this that we're very interested in using and that's the the the idea to provide some sort of offline Check-out capability. So the problem with this is Imagine I'm offline and I'm looking at a product How can I guarantee that that price and that stock quantity is available at the time that that background sync event happens? And it sends an action to the server. We can't really guarantee that so that's something we're working on We're looking to to innovate in this area and hopefully use background sync to provide a solid offline offline checkout experience So with polymer we pretty much went with a bare-bones approach We avoided third-party libraries in order to reduce the app size and focus on speed We chose to use plain JavaScript I think it's quite quite common knowledge that plain JavaScript can outperform third-party libraries So we didn't include JQuery or Angular or the like so we also declared we ensured that we only declared properties that we used and Try to focus on reusing JavaScript functions where we could so it's a pretty bare-bones approach to polymer So some of the practices that we followed We tended to use reusable web components so we built some of our own custom elements and the challenge that we had was When we we had to fully define each element before we use them and control its scope and we often found ourselves In situations where elements were being forced to to be reused but ended up performing different actions that they were initially tended for That's one of the one of the areas that we struggled with and then quite simply we used We managed packages using npm and dependencies with Bower and We decided to lock down all of these dependencies To avoid introducing errors into our staging and production environments and instead built those checks into our build process And sort of manually manage that that dependency upgrade piece Then another thing is that we did was we well and we're still working on it is a custom web component repository that we managed with Bower and some of the some of the pieces that we've Figured out here. We hope to roll out to other areas of our applications and our systems So hopefully we'll be able to use these web components across projects and manage that with Bower So some of the major obstacles I think we've all heard about some of the challenges supporting Safari and I think we've made some really good progress I'm not going to explain all of that today, but we will continue and I think we'll we'll probably get that right pretty soon and So one of the largest things one of the obstacles I wouldn't really call it an obstacle It's more like a challenge is is the learning curve of moving moving from normal web development to progressive web app sort of technology But even more so We had a resourcing issue. So all of our web developers are building certain projects at work And the only team that was available at the time to look at this was our native engineering team So these are experienced engineers senior engineers We've been working on iOS and Android for for a long period of time and I asked them to build this progressive web app So you can imagine their initial Concerns, but I can say they led this engineering effort and I'm very proud of what they've done making a switch from compiled Sort of native app environment to to web development, and I think we've had a fantastic result come out of them So well done to them so we had some problems with Modularity of web components So you normally need to just define a style for for for a specific component and whether to do it You know for specific ones or global or global rules So this is kind of something that we struggled with and we're still working through and I hope to Figure it out over the next couple of weeks and then finally here's a swear word in our office at the moment It is cross-origin resource sharing I think some people would probably agree if you're sharing resources across domains and across systems and different services It becomes extremely problematic So if I could make a suggestion to teams that have that shared domain Within their systems, I'd probably spend quite a bit of time preparing to mitigate against against this kind of thing We always end up deploying something to production and or not to production to staging and it just doesn't work and You know nine times out of ten. It'll be a cause issue and I'd like to explain more about obstacles that we face during this journey But the honest truth is the obstacles the real obstacles we face were internal ones not really major obstacles moving towards progressive web app and Yeah So as I said late night Friday late Friday night deployments we deployed our beta version this this last Friday just before I flew here and This is a sneak peek. We decided not to release to all of our public We're actually a very highly transactional website and we didn't want to destroy All of our revenue at once So what we did was we decided to we handpicked very specifically 50 users and we're currently going through I guess we can call it an AB test so we're just presenting this new web application to to 50 of our customers and we'll probably add more as we go and We'll be gathering metrics and making changes as we understand more about the app and more about the users on the app So it's live So here's some of the initial results Which I'm extremely proud to present and the reason why I'm so excited about it is because you can actually see these This effect on our customers and I wish I could explain more I think you'd need to sit in in some of our usability tests and you'd understand So I think one of the excerpts I'm taking from one of the usability tests I'd seen was a user he'd searched for something on our website and he'd seen a big list of You know an infinite scroll of products and as he was scrolling through these products He was he exclaimed I can't scroll like this. It's costing me too much money Which is you know a serious indication of how sensitive people are with regards to data So the first thing that we achieved out of this is for for the home page Well, it's not very difficult if you think about that original image I showed you with seven images in a slider each at 800 kilobytes per image So I get again This is a large optimization came from a redesign not not only on progressive web app, but a big component of it Is so 92% less data on initial load and most important the 82% less data to complete a first transaction So, you know the mindset is I'm shopping on your site It's costing me money to be able to check out on top of the actual order order value So I'm excited to be able to present this to our customers. It's not shopping for free But at 82% less cost Yeah So that's what it looks like as you can see I'm just showing you the the previous design as opposed to our Konga easy Progressive web app very simple very clean It's like a before-and-after picture and you know, this is another before-and-after picture It's not that we were actively looking at these metrics I'm assuming that we will start to to seriously look at these pieces But I just happened to catch it before and afterwards that I don't know why the page speed score went down I'll have to go and investigate what happened there But the page load time and this is obviously sitting on a wired connection I don't know where GT metric servers are but they're they're obviously wired to get a 5.5 second home page load time And we've gone down to 1.2 seconds and more importantly a 2 megabyte home page is now being served at 140 kilobytes And as you can see the 151 network requests Have become nine so this is this is something I'm excited about and another area that that that we're preparing for we didn't really struggle with migrating to HTTPS because we'd we'd been preparing to go to HTTP to which is a prerequisite So at this point, you know This is something that we didn't struggle with but I'd urge people to take that that dive Specifically for some of the gains that are coming in HTTP to So here I'm going to show you five major areas of the application that we focused on in terms of an offline first experience And the first one is is is the catalog experience. So as you've seen in other applications It's it's possible to just cash all of these requests and and responses with service worker cash or even in in the IDB database and so what you can see me doing here is browsing and What happens when I switch off the network is a little pop-up comes up and it says hey you're offline Click here to be able to browse offline and it takes you to your account section And you can click on your recently viewed items and and see all the products that you'd seen so it's aggregating all of the Catalog data that's been cached and representing it to the user The second the second feature is our wish list. So we've we've depicted it as save for later and The idea is that you've saved these products on your device You surely should be able to view them at a later time and you can just see me here Switching off the network and being able to navigate to to my wish list to my saved items so that I can shop Even when the network is down or not shop, but at least continue to to view these products so Can I have a red? Can I have the audience raise their hands has anyone ever added any livestock to cart? Okay well, if you haven't added any livestock to cart you can now come to to conga and This is not an uncommon thing actually So I've personally done so and had had livestock delivered with a bow a bow tie delivered right to my doorstep so I'm trying to show you four three three features here cart profile and check out and You know what I'm trying to show you here is I'll wait for it to move forward But what I'm trying to show you is here here is it I'm in an online state I'm searching for a live goat and I'm presented with a response. Obviously. This is a search results I'd need to be online for that. I find my product and let's imagine the network dies and You know initially I wouldn't be able to add to cart if it specifically if it was an API call but in this case we've moved all of our logic client side and we're controlling the user experience and and that that entire journey on The client side so I'm able to add to cart on this case add a goat to cart and I'm able to continue viewing my cart being viewing all that the the price and The state of my cart in an offline mode and right now in the specific screen grab I'm just showing you our current offline checkout have mentioned some changes that are coming to that that checkout process But instead of being able to check out it sees I'm off in an offline state And it allows me just to call to order and we have a team of customer experience Representatives waiting for for offline checkout So what's next for for Konga easy as I said, we're in a beta mode We're currently collecting data and UX metrics and hopefully depending on what we find will make a few more last-minute changes before Before releasing to the wider audience in Nigeria We're going to continue to solidify our offline capabilities I've shown you some features and we're hoping to apply that approach to all of the components of the application and Then as Owen said yesterday, we have started on our push Implementation, but we're going to implement timely precise and relevant notifications quite shortly The final part is obviously to continue supporting all browsers and I'm very excited to see so many vendors here today And I'm looking forward to being able to produce a consistent Progressive web application to all of our customers. Thank you