Five month at Mobile.de
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.
3.5 years at DemoUp
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 mightchat about it.
11kb for Hundreds of Shops
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:
- code to extract product data from the page and send it back to DemoUp for finding videos
- code to check for an already matched video
- code to check whether the correct video language is available
- code to track clicks on the cart button for video statistics
- code to place the button in the correct positions in the DOM for mobile and desktop
- code to load the player in case a video is available
- customized storage.js for storing infos about the user in localStorage or fallbacks
- the button's SVG and all required styles
The script is doing all that in less than11kb. 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.
Preact based Video Player
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 just23kb of size. I usually providehls.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.
React based Dashboard
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:
- uploading videos
- mapping video to pages
- supervise statistical data of the video program
- beautiful charts based on D3
- enter payment information
- livestream of watched videos
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.
DemoUp's Homepage
Thehomepage 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.