At mobile.de I had the chance to join the small development team responsible for the web application that enables private customers to book appointments for taking in their cars for assessment. At the beginning of my project that software consisted of critical but hardly maintainable jQuery based pages and some simple pages already having been ported to React already. I took part in porting the codebase to recently introduced UI libraries and standards, replaced code and worked on continuously moving the whole application into a Single-Page-Application that makes use of modern web technologies. Notable challenges were understanding and overworking the interfaces to other parts of mobile.de's software ecosystem.
The project was successful increasing user experience, enhancing performance, drastically reduce technical debts and heavily improving maintainability and flexibility (for A/B tests) of the codebase.
DemoUp is a video service for Online-Shops. They gather product videos from the brands in a big database and maps them to product pages of shops. The clue is that shops just have to paste a script tag into their page and soon after buttons will appear in the shop and start the correct video when you click it. It is so easy that people do not believe it is true. Isn‘t that cool, now?
Moreover DemoUp provides a shiny dashboard from where you can control the videos, supervise how often they have been watched and see the calculated revenue generated by using the video service.
Practically everything you see in a browser from DemoUp was done by me in a permanent position - you'll find the most interesting projects below.
Sorry for the long text, but you can hardly explain tech without. Alternativly we might chat about it.
The script responsible for connecting shops to the DemoUp service is created by a framework which bundles code from general and shop-specific parts using webpack. The framework consists of Preact components. Small wrappers around the components make it possible to build variants which are either included by script tags or used as a React component. The final bundle includes the following:
The script is doing all that in less than 11kb. That is small enough for browsers to download it in the first round-trip of any TCP connection. Because this script is so small and efficient the video play buttons in the shops pages often feel like native elements when shops integrate it as recommended.
It was my task to keep the integrations running for all of DemoUp's customers despite their constant changes, different page templates and A/B tests. Moreover I provided those integration codes for even more interested companies as demonstration of DemoUp's abilities.
There are enough video players out there. Nonetheless my previous implementations based on VideoJS or mediaelements had many flaws and it was hard to make them do exactly what we wanted them to do. Moreover they build their interface using jQuery or jQuery-like approaches. That approach is producing a too large and difficult code for generating the DOM elements.
Moreover all players suffered the same problems when being tested on different mobile browsers: For example, it was possible to make player and browser have different opinions whether the video is paused or not. Additionally they had problems to pause when being clicked or tapped due to browser's different and changing implementations of mouse and touch events.
My Preact player proved to be simpler and better. It uses the one and only source of truth for state: the video element. In my implementation Preact renders the UI elements of the player and reads all state information from the properties of the video element. This is simple and highly browser-independent. Browsers have very different opinions about touch events, but they all get the basic video properties right. This implementation heavily increased our compatibility with mobile web browsers.
Another great advantage of my player is its small weight. The whole code including telemetry, embedded SVG icons and styles is just 23kb of size. I usually provide hls.js in the bundle to provide wider support for this advanced video streaming format. That is another cool feature, but it triples the code size.
DemoUp's dashboard is a React based Single-Page-Application. It provides access to DemoUp's core systems for customers and employees of DemoUp. I implemented the following functionality in front-end and back-end:
Although having started this project in 2014 it is technically up to date. It was continuously lifted from React 0.11 to React 16, moved from Flux to Redux as data store, went through all major versions of react-router, left behind browserify for webpack and recently started to use webpack's code split feature.
The homepage of DemoUp is a React based progressive web app. It makes use of server-side-rendering to support search engines and faster time to interactive. Thanks to this architecture it has once been called 'fast as hell'.
The page was the first user of my React integration for DemoUp's video service. The page itself is static but it includes the cool looking brand scanner which is also my work.