HomeMioTech ResearchArticle Detail

My Not So Typical Day as a Front-End Engineer

Delighting financial institutions by making the best software he can imagine, Colloque Tsui, MioTech’s senior front-end engineer in charge of stability, performance and visual quality.

Colloque Tsui, Sr. Software Engineer in Front-end2019-02-25

Colloque Tsui is MioTech’s senior front-end engineer, responsible for creating MioTech’s core technology, AMI. Just 6 months into joining the tech squad, Colloque, or Cola as we MioTechers endearingly call him, dived in head first to develop AMI’s Knowledge Graph. “At MioTech, new challenges will come at you anytime. There’s something new everyday.” Originally from Hong Kong but based in Shanghai, Cola spends roughly 50% of his time developing new features, 20% troubleshooting issues, 10% managing and updating the ever-changing task managing system, Asana, and the last 10%, fighting for an alternate career as a Street Fighter Esports player.

Why did you decide to move to Shanghai and take up a job with MioTech?

As a software engineer, the opportunities for good developer roles are better in the Mainland as compared to Hong Kong. Upon graduating from the UK and returning to Hong Kong, I realised that there weren’t many reputable IT companies locally that I was keen on joining. The companies that I had worked for in the city were small in size and the projects involved geared towards e-commerce and online marketing/advertising. While it had the flexibility to apply technology to an actual application within a short period of time, I was dabbling in smaller, seasoned software. Personally I felt there wasn’t enough room to grow which is why I ended up leaving.

But if I’m completely honest I moved to Shanghai for love. I chose MioTech for its youthful, energetic and entrepreneurial spirit. (MioTech’s average age is 28.8 years old) It became clear to me 6 months into the job that it was the right choice. On top of growing in my career, I’m growing a wider Mandarin vocabulary. MioTech’s well stocked pantry also means a wider waistline.

What is the biggest difference between MioTech and your previous job?

The biggest difference between my previous work experience and MioTech is the level of access and exposure I get to the most cutting-edge technology in the industry. This privilege comes with it the need to learn continuously and be in synch with the latest offerings in the field.

In order to expand the capabilities of of our knowledge map, the tech team decided to rewrite the entire code to convert from SVG to Canvas. While the deadline was tight, it was a moment for me to test myself. Not only has the FPS greatly improved, our additional adjustments to our recently launched Shareholding Analysis function gives us that edge against our competitors.

The other big change was moving from a B2C to a B2B business. I was responsible for web development at LIHKG, now one of the largest local forums in Hong Kong. One of the features I’m most proud of is the “office mode” function on the website. A lot of our users love to camp on the website, browsing it during work time, so we decided to create an incognito office mode for them to appear like they’re working. So what we ended up doing, was to disguise the website as an Excel or Word document so eyes from a distance would assume you were working. Positive feedback was instant. You do feel a great sense of accomplishment working in the 2C environment as feedback is instantaneous upon launch of a new feature. But it was a relatively simple product.

After joining MioTech, it was a huge learning curve for me when it came to developing B-end products. The concept of complete product development was brand new to me. AMI was much more complex application with heavy data visualization features. This meant delving into Canvas, D3 and Highcharts fast. I had to adapt fast to sprints which I never had before in my previous job. On top of the pace of work and the rapid iteration of products, it really does push you to think more strategically and carefully on developing an architecture of this scale. But being exposed to a bigger team meant tapping on the knowledge and support of many talented people. While you do work longer and harder for gratification, I’ve come to realise that the sense of accomplishment is just as gratifying.

What's your favourite Front end stack? (ReactJS) Why? (As compared to Vue)

When I first started working with modern frontend frameworks, I loved Vue. It was easy to use, fast and small. It still is and I still love it. But for what I do now, I prefer ReactJS. With React you have the options to build multiple platforms whether it be native mobile apps or VR apps or TV apps. The syntax of React’s library is also a lot closer to Javascript whereas Vue has a bit of a syntactic sugar and it kind of works like magic behind the scenes if you don’t know what you are doing. You really need to study their documentation in order to use Vue well. But I must say that Vue’s documentation is one of the best out there.

What are some of the challenges you face when writing code?

When writing, you’re never writing solely for yourself. It’s critical to write it in a way that is understandable to others because you never know who might maintain your code later on. Coming into MioTech, I had to maintain the codes of my colleagues which were different from my coding style. Moreover when working on a modern front end project, you’ll be writing modular code (components) that needs to be easily reused by others. You’ll need to conscientiously build a structure that doesn't affect other components which could cause a range of unpredictable bugs. So I know first hand the importance of writing for the benefit of everyone.

Source: Thom Holwerda

While I’m still learning the art of it all, I try my best to write clean and understandable code. Of course there are times when a deadline is tight (sometimes tomorrow morning) and features need to be pushed out the door and my code is compromised. Even if I want to come back to it and refactor it, I’d get snowballed with other features. But I’m making it a point during my free time and my tasks are done, I revisit and refactor the old code.

But keeps me excited about UI engineering is this constant evolution of tools. In the frontend world, new concepts and libraries come and go. While the frontend library we use is React, we’ve recently adopted a new concept called Hooks, which can encapsulate a chunk of code that can be reused in many components without polluting the virtual dom tree. It’s fascinating and new, the industry is still experimenting with it and figuring out the best practices when using it. You can only grow by being part of this dynamic community.

How does your day look like?

8.00 Get up and browse the latest technology news

9.30 Check tasks on Asana, confirm code deployment and check on bugs in yesterday’s new online functions

10.00 Standup meeting to confirm products that are going live. Write code.

12.00 Lunch/Street Fighter with GameSquad

14:00 - 20:00 Write code. Write more code. Write even more code. When the day ends is always uncertain.

20:00 - 24:00 Put on a movie, play games, play more games.