DEV Community: Louis Tsai

My plan to become more productive in a month

Louis Tsai — Sun, 06 Dec 2020 21:42:08 +0000

2020 is almost over, and I just so happen to have almost an entire month off to do whatever I want. One of the things I have learn about myself this year is that my productivity often relies on supervision & “too afraid to say no so now I have to get it done in the next 4 hours”. So one of my goal in the next month 25 days is to figure out something that can keep me productive (and hopefully subsequently fulfilled and happy).

What’s the status quo

Currently, I have 2(-ish) system going on: 1 for my work stuff, and 1 for my personal stuff

Work: 2D version of Einsenhower Matrix using Asana

For some reason, I remember very distinctly how I got introduce to the Eisenhower Matrix: it was when I was like 16, during a tutorial session (Hong Kong style, i.e. watching a pre-recorded video from one of the “famous” tutors), in which there was just me and 1 other student. Anyway, ever since then, I have this concept in mind for a lot of the things I do, but for like 10 years, I have not been able to translate to something that works. I either worry too much about things that I should not be (e.g. “What if I need to work remotely”, which never happen until COVID-19), or I just don’t really need/care about a comprehensive system. That chances a few months ago:

Back in August, I got a chance to become a temporary team lead, which means my role changes from “dealing with Jira tickets” to “making sure others have Jira tickets to deal with”, which means a shit ton of meetings, a shit ton of messages and emails, and a shit ton of documents to write. It doesn’t take long before I realize how fucked I am if I don’t come up with some system that works, and that combine with moving to a bigger place for myself, I ended up dedicating a wall to build a physical Einsenhower Matrix

And it actually works pretty well! It forces me to be honest to myself what is urgent/important, and stop working on things that’s interesting but can be dealt with later. And that’s what I have been using for about 2.5 months. And then November comes, and I started to take some lessons before going to work in the office, which means now I need some ways to make it portable. And right now in our team, there seems to be a trend to use more of Asana to organize tasks, and since the company is already paying for it, I might as well give it a shot.

It does not take long before I start missing the Eisenhower Matrix. While “urgent or not” can easily be reproduce by due date, there does not seems to be a build-in way to indicate importance. Thankfully after a quick Google, I found an extension call Asana2Go, which has a feature to build an Eisenhower Matrix by adding a custom field to specify which quadrant does a task falls into. Actually, after like 2 days, I just use the custom field and forgot about the extension completely. I just rely on sorting to display the tasks by due date first, then pick the next task to work on according to its quadrant.

And it has been about 2 weeks since I started using this Asana + custom field to mimic Eisenhower Matrix, and so far I really like this approach. As long as I can figure out a way to Asana visible (i.e. a vertical monitor), I am able make sure I work on the next most urgent and/or important task 👍

(And of course we use Jira for all the tickets 😭)

Personal: “Whatever is closest to me” is a system, right?

For my personal tasks, I have not been paying much attentions to it for a very long time. I switch between different to-do-list-app constantly, and even more ways to keep track of my notes. Here are some of the things I have tried

Evernote + Google Tasks
OneNote + Google Tasks
Google Drive + Wunderlist (RIP)
Google Drive + Todoist
GitHub + (every to-do-list-app)
Calendar + Google Tasks (the new one)
Google Keep + Apple Reminder
Apple Notes + Apple Reminder
Microsoft To Do + reMarkable + Post-it notes on the wall + Apple Notes + Google Keep

As you can see, it’s really a mess.

What’s working

Separating work & person tasks is mostly good

Except for 1 or 2 edge cases, I have extremely separate personal and work life (that’s just how I always deal with things). And so far the only “issue” I really have is that there is no way to check work tasks if I don’t have work machines with me. For 95% of the time, that’s not a bad thing anyway.

Due date + Eisenhower sorting is actually not bad

Like I said above, so far I am really enjoying the 2D version of Eisenhower matrix using Asana. It forces me to give each task an end date, it’s easy enough to figure out how those tasks are gonna fit into the schedule, and it’s super easy and satisfying to update and finish a task 👍

What’s not working?

The entirety of my personal system is not working. It’s not just the fact that I didn’t get things done on time, the fact that I constant switch systems also translates to a lot of long term tasks and goals getting lost. While so far it has not cause any major trouble, it definitely needs to be fix up ASAP, hence this article.

What are the options

Notion

It sponsored so many YouTube channels to a point that it’s kinda hard to escape it. I have created an account to play with it a little bit to see what it’s all about, and while it definitely looks nice, I am not sure Notion is the right approach.

(Note: this is not a review of Notion at all)

It feels too flexible
It often feels like a bad compromise between “a full fledge tasks management system” and “a full fledge note taking system”
It’s not satisfying to use, esp. from my phone

Google Calendar everything, LITERALLY

I think I very briefly tried it in the past, but life is just way too chaotic to try to schedule every little tasks. It took me maybe 2 days before I realize how stupid I was.

Other apps/system/method that I have heard of/tried before

Hour Blocks: not a bad idea, but the fact that it relies on my phone (i.e. source of distraction) means I can’t use it. However, I do like the idea a lot 😍, which you will see in a minute.
Pomodoro: In a world where I have a bunch of meetings, Pomodoro just doesn’t fit well into the system. I need something that’s more flexible & more predictable at the same time, and “let just start a 25 minutes timer at any time of the day” it just not gonna work on itself.
Asana: I don’t wanna pay for my personal account🤑. Also I don’t think all the project/milestone/roadmap are useful to organize my personal tasks anyway.

Build my own app

Because I don’t have enough dead side projects already 😂

And the winner is…

Jira!? 🤨

I know this does sound like the stupidest idea. Isn’t it already tragic enough that I have to use Jira on a daily basis at work, why am I doing this to my personal life as well? Well, let me explain a bit of what I have learned in the last 3 months of dealing with Jira…

PROS 1: CONFIGURABLE

On one hand of the spectrum, you have tools like Microsoft To Do, in which there is pretty much nothing you can configure. And then you get tools like Asana, which (if you pay) you have access to custom fields, some decent filtering, but you are still very much in the bubble of how Asana thinks you should work. And then there is Jira, in which most things are configurable, but it still feels very “type-safe” and somewhat complicated to change, but at least it’s possible. And if you keep driving along the spectrum, you will get to tools like Notion and AirTable, which basically is a free canvas/spreadsheet/database/all-of-the-above with extra steps.

PROS 2: JQL

As a programmer, the fact that there is a query language to find tasks has proven to be a godsend. Imagine if you got dozens of new tickets a day (that’s not kidding, it seriously happen for like 2 months straight), there is no reasonable way to keep them sorted and filter correctly without something advance, and JQL has proven itself to be very useful. I hope it won’t come to that day for my personal tasks, but you’ll never know.

PROS 3: NEXT-GEN PROJECT

Another thing that makes my personal Jira better than the work Jira is the fact that I am using the next-gen project. It is actually a lot closer to Trello (which is now another Atlassian product anyway) than the traditional Jira. And since it’s just me and myself in the “project”, something lighter and simpler is just what I need

PROS 4: REASONABLE APP

There are so many software that never figured out how make their mental model works well in mobile client, and for that I really have to applaud the Jira apps. It’s actually pretty useable. A lot of other apps either can’t figure out how to make all the info fit on screen (e.g. Asana, in which the list does not display any fields), not a very good app (e.g. Microsoft To Do, in which I very often swipe away a task when I was just trying to go back), or combination of both (e.g. Notion, which is just trying to cramp the entire webpage to a small screen. Please stop).

PROS 5: CONFLUENCE (🤞)

If you take another look in my person system above, you can see that I often have a tasks list + a note taking app. And so far, they are always 2 separate entities, and some information are always separated. And right now I am hoping the fact that Jira & confluence can cross-reference each other can turn itself into something a lot more powerful. I have seen how it makes my life a lot easier when I build our team’s documentation at work, and I am hoping to transfer that to my own Jira + Confluence setup.

PROS 6: I AM ALREADY USING IT AT WORK ANYWAY

I have spend the last 3 months managing tickets on Jira, and documents on Confluence, I am already quite familiar with how it works, even though we are still using the ugly classic version of Atlassian apps. And at the end of the day, I am trying to get shit done, and spending way too much time to figure out how to setup a new system is not particular practical.

Actually, it’s Jira + Google Calendar

So Jira should explain all the part about task management & documentation. And for time management, I think we are all stuck with Google Calendar anyway (if you have any reasonable alternative please let me know 🙏). However, I took the idea of Hour Blocks, and only put big generic blocks of tasks, instead of trying to make detail and accurate schedule.

For example: currently I am reading the “Atomic Habits” by James Clear, and I am trying to have a committed time and place to actually build my habits. So about 80% of the blocks you see are actually events to build my habit. And the fact that I can easily make sure they are not interfering with my other events and meetings is extremely useful.

So far the only major thing that’s missing for me is the lack of a easy (and free) way to see both Jira and Google Calendar together, and so far it has not been a big issue.

Conclusion

So this is what I am trying out for the next 25 days. Let’s see if this system is enough to drive me back to a productive and healthy lifestyle. And if you don’t see a follow-up of this article in January 2021, there are only 3 possibilities

Shit hits the fan and I got busy AF
The system does not work
I am dead

🤞🤞🤞🤞🤞

Let’s see if Flipper can make me a 1.1x engineer

Louis Tsai — Sun, 16 Aug 2020 07:36:39 +0000

Flipper is a debugging tool build by facebook, which in a sense is a spiritual successor to Stetho. For those who don’t know, Stetho is also a debugging tool, which allows Android apps to redirect a bunch of debugging data to chrome://inspect, most notably networking requests. I have used Stetho quite extensively in one of my last companies, because how easy it is to setup and use, so I do have some fond memory of it. However, slowly and gradually, it stops being maintain, and then I found out the existence of Flipper. So obviously the next logical step is to give it a shot, and see how useful it is 👀👀

Setup

The process is actually quite straight forward, thanks to the pretty extensive-yet-not-too-verbose documentation site. The only hurdle I ran into is when setting up the networking plugin, you have to make sure you have the same instance of the plugin use by both the interceptor, and the setup step. I messed up some setup in Dagger, and it took me like a solid 30 minutes before I really how stupid I was 🤦‍♀

Custom Plugin

So the biggest selling point of Flipper is probably it’s plugin API. It opens the door to build project-specific and user-friendly GUI dev tools.

In a lot of projects, probably at some point someone will think “hmm, what if I just wrote a script to make it easier to debug this?”, and then they hack the script together in record breaking time (because it’s usually the fun part), and tell the entire team “now your problem is solved”. But when team grow/change, suddenly everyone is relying on that script with little to no test, often convoluted code, and even more confusing and cryptic inputs/outputs (and stacktrace if something went terribly wrong).

So these are the problems that I hope Flipper can solve/mitigate:

Confusing to use : By having a GUI, I can at least try to layout all the buttons and text in a way that is less confusing. And the fact that it uses React should also help make it easier to build the UI.
Too many dev tools : By having just 1 debugging application, this can consolidate most of the random dev tools into just 1 windows, which should make it easier to deal with.
“Sketchy” dev tools : It’s not that you cannot write script that testes those script, it’s just that by having a “normal” project setup, hopefully it can encourage me to not only write dev tools, but also write test to make sure those dev tools works in the long run

So with these goal in mind, here’s what I have learned:

The documentation of building your own native (i.e. apps) plugin is also very good: on the client side, it took me maybe 15 minutes to have a basic network plugin that filters out only the traffic that I care
And for building desktop plugin, it’s less good but still not terrible : While the documentation itself is still pretty good, there are quite a few issue that I ran into and with not a lot of useful debugging. The biggest problem I have is “how to get Flipper Desktop to see my plugin”, and according to the documentation, it is to add the path to the plugin to the config.json Flipper created in your machine. But it looks like if Flipper thinks the path you added is “wrong”, it will just remove it when Flipper Desktop closes. So it ended up taking me another hour of trial and error, and looking through the entire site to found another page that explains what is the exact path that I should have used, and the fact that I should have run yarn watch to build the tar ball for Flipper to detect the plugin correctly.
Depends on what you want to build, you can put the logic on the client plugin or desktop plugin. Putting logic on client side means writing those logic in Kotlin, which would have been a lot easier; but at the end I’d recommend putting those logic on the desktop side , in the hope that A) it might be share if the iOS all also adopts it, and B) my TypeScript knowledge is good enough, or worst case scenario, it’s not that hard to Google the solution.
Building a user-friendly desktop plugin is not as simple as it seems , mostly because the level of abstraction that comes with Flipper is either too high, or too low. If you just want to show “a list of something”, createTablePlugin makes things very simple. But since I want to do some data processing before it shows on table, I ended up copying that entire file, make like 10 line changes in there to expose a lambda for me to sanitize the data, before showing it in the table.

Currently it is entirely still an experiment, and also I have not asked my boss if I can even share it. I hope in a month or 2, I will be able to share if Flipper turns out to be a good idea or not.

1.1x Engineer

And to end this blog post, I just want to do a quick shout-out to the 1.1x/+10% engineer concept. What I have started to realized that I like to do is to “help other people do what they are good at, but even better”, and I think more people should give it a shot. Imagine if every month, 1 of the engineers build/do something that makes everyone works 10% more efficient/more productive/happier, in 2 years, 1.1²⁴ = 9.85, i.e. the team will be almost 10 times better than 2 years ago! And I am 1000% sure you cannot simulate these kind of growth just by hiring more people/“10x” engineers.

At the end of the day, I hope Flipper will allow me to make our team 10% more efficient, and so far it looks promising, and I recommend you to give it a shot!

Random Compose Project #1: Compose95

Louis Tsai — Sat, 25 Jul 2020 14:10:17 +0000

Jetpack Compose is getting closer and closer to becoming “stable enough”, and for the next few weeks/months, I will be working on a bunch of completely random projects, and document what I have learned along the way.

TL;DR: This is not tutorial/how-to of Jetpack Compose at all. This is just blog post of my experience of using it.

What is Compose95

As it’s name suggest, it’s trying to build Jetpack Compose that looks like it’s 1995, more specifically, Windows 95. It is inspired by Miguel Beltran’s work on Flutter95, which is inspired by Artur Bień’s React95

miquelbeltran/flutter95

arturbien/React95

What am I building, exactly?

For this post, I am documenting what I went through when buildling

Window (most of it)
Button

It’s all open-source, click here to judge how bad the code is 😂

Window

Window is the relatively straight forward component to build. It is basically just a container with a bar at the top, optionally the ability to minify/maximize/close the window, which doesn’t make sense in the case of an Android app anyway.

As you can see, Windows95 is pretty straight forward. The most "complicated" part is probably the border. If you remember, Windows 95 is very skeuomorphism (is this word an adjective?), and the borders colors really sells the elevation, even to this date. I am not saying it looks great, but it certainly is effective. Using React95 as reference, I can see that the border is actually more like 2 boarders:

1 on the outsize with pure white or black
1 on the inside a few shares of grey to make it look more like shadow, instead of just color borders

And to achieve that look, basically I have to figure out how to draw border that has different color accordingly, and that means digging into what .drawBorder is doing. Since it is a receiver function of Modifier, of course there is a Modifier.Element powering it, in this case: DrawModifier. And once you get the draw scope inside of it, you just have to figure out the coordinates, and then it is not too complicated to draw the 8 lines.

And 1 last thing: if you check DrawBorder, you can see there are a lot more complexity inside, with how round corner should be, and most importantly cache. At some point Window95 probably should do that, but it is way too early for me to do any kind of optimization. Hell the code still looks like shit.

Button

Button95 is also structurally quite simple, the "biggest" challenge is to figure out how to detect press state, and flip the borders around to sell the effect of "from above surface to below surface". And to figure out how, I digged into .ripple.

Inside .ripple, I found RippleModifier, but there is nothing too interesting to look into, since it looks like most of the code is about the animation of the ripple. What I want in this case is just a very basic "is it pressed or not" callback of some sort. And after I while, I realized that there are more than 1 argument for .clickable, esp. Indication. It is exactly what I need in this case.

What Indication does is actually more like IndicationFactory, which creates IndicationInstance, and that IndicationInstance just have a function that gets a ContentDrawScope to draw whatever I want. And now things are starting to look very similar to how I draw the boarders inWindow95, except I have to check interactionState to see what color each border should be.

While technically not a bug, it looks like I still have some work to do to figure out how to make it behave more naturally……

This is the end of this blog post, it is absolutely gonna take me forever to get it to a working state. I wish I have more energy and time to work on stuff like this……

Went from “liking tweets about remote working” to “being 100% remote” in 1 day

Louis Tsai — Wed, 08 Apr 2020 19:22:48 +0000

My desk setup from a week ago

Today is 2020 April 1st , and we are in the middle of a pandemic. Roughly 2 weeks ago, the company I worked for went “remote first”, and in terms of work, things are starting to get back to usual (well, as usual as it can get). So today, I’d like to write down some of my first impressions of the whole situation so far!

How it went down (simplified)

Even before Berlin starts getting it’s first COVID-19 case, there has been a bunch of people asking if the company’s policy about WFH and other preventive measures are gonna adapt to it. And after Berlin has it’s first confirmed case, it takes a few more days until the management establishes official news source. And a few more days (& a lot of messages on the chat room) later, the company held a basically impromptu-all-hands in the morning, and announced the procedure of how to “apply” for WFH for most employees. And the next thing you know, half the people are gone before lunch.

Perception of remote working before this

I have been living in Berlin for 3 years now, and worked in multiple companies as full time employee, in their office, at least 9–5. I am now mostly used to it, but I don’t think I ever really liked it.

I like being able to easily make friends at work, but I don’t like waking up when it’s one of those days where I just don’t feel like socializing at all.

I like that it forces me to have a consistent schedule and lifestyle, but I don’t really enjoy the hours being so inflexible, given my work is not really time-specific.

I like that an office provides a safe space in terms of productivity (usually), but I hate having to spend 1+ hour each day on the commute.

TL;DR: I never hate showing up to office per se, but I have a list of things I can complain about.

The first 24 hours of “OK you work from home now”

Even though I was one of the people who tried to push the company to adopt WFH as soon as possible (i.e. “wrote on the super long COVID-19 thread to keep the conversation going”), the sudden announcement still throws me off. I spend basically the whole afternoon planning what do I have to do to get my room ready, and try to organize the work to make sure I won’t forget anything (although this didn’t really work because I was so distracted the entire time).

I left office a bit later than usual to try to avoid the crowd, and then I went to supermarket to get enough groceries for a week, and tried to go get a microphone for all the video chat (although the store was out of the cheap one). The last thing I did before officially working remotely is that on the next day at 7AM, I planned out how I am gonna move the furnitures in my room around to have a more separate work & rest place (sorry downstairs neighbors). Living in a tiny room in a share flat in the middle of a pandemic is not ideal.

TL;DR: Chaotic

What happens in the next week

In terms of the work itself, things are quite typical, since it is such a short notice, we are not really prepared to adapt anything to be more remote friendly. We still have a lot of meetings, but with video chat instead of face-to-face. It’s ever so slightly worse than what I usually experience.

In terms of productivity, I’d say I am able to focus around 60% of the time. There is only so much you can do to improve your home office in such short notice. And I tried to compensate for it with working extra hours, which ever so slightly cancel out my reduced productivity (but not sustainable at all).

This comic from Alex Norris speaks to my soul: https://twitter.com/nadiaoxford/status/1239588500212789248

The biggest change probably happens in terms of my sanity. This sheer amount of news around the pandemic drives my stress level high already, combine with issues with the work itself with a tight deadline that actually needs to be met or “shit might go down”, and me trying to compensate it with extra work hour, is driving my mood to an all time low.

TL;DR: Externally business as usual, internally pulling my hairs out

Now what?

Knowing that I will be stuck on this chair for a while, I am starting to plan how am I gonna survive this without going me insane (if I am not already insane).

First thing I did: online shopping. If all the advertisements have taught me anything, it is “buy this product and your problem will go away”. I am now aware of how much “useless” things I just bought, and I am doing a slightly better job at controlling my spending habit than a week ago. But I do need to make a few adjustments to the physical environments, and I am fortunate enough to have some saving & incomes to do just that.

Next thing I did: spend a lot of time on the internet to try to figure out how WFH usually work. What should I expect (under normal circumstances), how should I adjust that expectation based on the situation, how people usually work, etc. One of the thing that kinda blows my mind is the Q&A session by David Heinemeier Hansson and Jason Fried from Basecamp. While some of it do feel a bit too much like an ad for Basecamp, I think the rest is a good short summary of what a team of expert remote workers is experiencing, along with how newly remote workers can/should expect.

While I am coming up with a list of improvements for my surrounds physically, I also started to think about how to change my behavior to reduce my stress level, so that I don’t have to pull my hairs out.

Workout

A lot of people have suggested that keeping your workout routine is very helpful, and I will try to do some quick research on what body weight exercise can I do in such a tiny space. I haven’t do much body weight exercise since my Uni days.

“Separation of concerns”

A lot of people also suggested to keep your work space and personal space separate. While it’s physically hard to do in my tiny room, I can kinda achieve that by removing all work-related items from my sight (all notes, computer, accessories, etc.) when the day is over, and let my laziness do the the rest (a.k.a. “Nah I am too lazy to move the chair and take the computer back out. I will check it tomorrow”)

Clean your room/apartment/mansion/whatever

A lot of people suggested to keep your space tidy, plus the act of tidying can double as a distraction. That’s just a good idea in general, especially now that we are all spending 24 hours in the apartment everyday.

Spend less time on internet

First I have to say I love the internet, without it I would be absolutely useless. But in the last few months, the amount of time I spent reading COVID-19 related news is pretty much inversely proportional to my mood.

Back in 2003 when SARS was hitting Hong Kong, I remember everyone can’t stop watching the news, and it drives everyone into panic mode. And this time around, it started for me back in Jan-Feb, when my family and friends in Hong Kong are panicking on how they are gonna get enough masks, and pretty much my entire instagram feed is about how people are trying to keep themselves safe (from the virus or the police, or both). And when cases start to appear in Europe, I just can’t stop scrolling on Twitter and panic.

And even if you find the news about COVID-19 useful, there is still a huge problem of misinformation being share around, from random obfuscated screenshots on Instagram, to actual leaders of multiple countries (yes of course I am referring to Trump). One of the most vivid memory I have is that in the early days of the spread in Hong Kong, no one actually knows what the symptom should be, how they spread (WHO were saying “human to human transmission is unlikely”), and someone share a (later to be proven fake/taken out of context) video, of a men puking blood on some China subway/underground/U-Bahn/MTR, for like a full minute straight. That was really disturbing, not because of the visual, but the idea of “what if this happens to people I care about”. I was (and still am) not prepared for this. I just can’t stop thinking about it and focus at work for 2 days straight.

I think it’s safe to say I should spend a lot less time on the internet.

Take up some new hobbies/pick up some old hobbies

Now that I promise to spend less time on the internet, I’d need some other form of distractions. Some of my recent hobby-building purchase (i.e. online shopping spree) includes buying a Nikon FM (i.e. an old-school film camera from the 70s?), some books (currently reading how to by Randall Monroe), and a decent speaker set (Creative T40 II to be exact. I am not an audiophile I just bought it because my work computer speaker starts cracking). Each of them should be enough distraction for quite a while.

There are also hobbies that does not involve extra spending, like writing, playing some instruments (A lot of people probably have an instrument laying around), or cooking (you have to eat everyday anyway, might as well make your food better).

We are all gonna be stuck here for a while, and by we I mean those who are privileged enough to work from home. The best we can do is to buy scientist and manufactures time to develop the vaccine and more effective cure, to help keep those who cannot work from home as safe as possible. In the day and age when both the physical world and digital world is plague with danger, it would be my first step to figure out how I can embrace remote working and get my sanity back on track.

Stay safe!

Mental Models of Jetpack Compose #4: Components and Hindsight

Louis Tsai — Wed, 26 Feb 2020 23:36:58 +0000

Photo by Jamie Street on Unsplash

After months of procrastinating, I am finally getting to the last chapter of “Mental Models of Jetpack Compose”, at least for now. Today, we are gonna talk about components, and hindsight.

Component

If you just look at the basics structure of Component in React or Widget in Flutter, you will probably find it not too far off from android.view.View on the typical Android View API.

React:

Flutter:

Typical Android View:

More specifically, they all have 1 method that ultimately determines what should be display. So what makes the concept of Component different? Well, the biggest distinction is that the render/build function defines an abstraction on what the view should look like, while in onDraw function you are responsible for specifying every last detail. Basically it goes back to episode 1, which we talk about declarative programming vs imperative programming.

And that’s pretty much what the concept of component is! On it’s own component is nothing special, what makes it fun and powerful is that it only carries information, not instructions, which usually makes it more understandable, and also more lightweight. Speaking of fun, that brings us to a minor addition to the concept of component. But first, let’s take a look at this example from React:

Sample from React documentation

Even if you don’t know JSX, when you read render(), you probably still understand what it is trying to do: it will have a text, and a button, probably as a column, and each click will trigger some text to change. But why are there so many other stuff? OMG does the constructor in JavaScript looks like the one in Java!? And what the hell are componentDidMount() and componentDidUpdate() doing there when they do exactly the same thing?

And if we take a step back, and try to remember why React was created in the beginning, what they wanted to do is basically this:

UI = f(state)

(read: given a state, a function transforms it into a UI)

So what if we just take that literally? That brings us to the concept of functional component. The mental model of component is still there, but instead of representing it with a “class”, just directly represent it with the function, and it would look like this:

Sample from React documentation

Making function directly the star of the component encourages/forces us to embrace composition (since there is nothing to inherit from), and all it needs are a set of good API to expose the lifecycle and state management API back out.

React calls this “hooks”, named after all the API (i.e. hooks) it exposes for components to interact with the runtime, i.e. all the use___ functions. And after barely more than a year, it seems that React hooks have become the standard way of building components for them. And for Jetpack Compose, which is heavily inspired by React, it took it to the next level/extreme, by only having function components.

Hindsight

This is the last mental model I want to mention for this series, which is not actually a technical thing, but more of a mindset you should be aware of.

Often when we look at “legacy code”, we will say “ah they should have done X instead of Y”. But then 5 minutes later, you remember you are the one who wrote those code to begin with. Is that because you/that person was “young and dumb” back then? That’s possible, but the far more likely scenario is that things and people change in ways that were not participated. Who knew build time would be such a big issue 5 years ago? Who knew RxJava will be overuse 5 years ago? Who knew assuming there are only 2 genders is a bad idea 10 years ago? Probably not a lot of people.

And that’s what makes hindsight important: being able to learn from not just your own experiences, but also from others, is very important for your learning. And in the context of building a UI framework, knowing how annoying opinionated people can get, and what pattern people often use, are extremely useful information, even if we are not building for the same platform, or with the same language. (P.S. hindsight from React on what motivates them to create hooks)

So how does it apply to you? Well, even though there are not a lot of Jetpack Compose material (also half of those blog posts and videos out of date, since the API change so drastically), you can still learn from React, Flutter, and more other frameworks, see what other people have been doing, how they get used to it, what they have learned, and more. I promise a lot of the concepts are applicable to Jetpack Compose as well.

Conclusion

This will be the end of the “Mental Model of Jetpack Compose” series, at least for now, mostly because now Android Studio 4.0 is available, you can actually go try it out yourself. And very soon I will try to pick some random ideas I have and document my experience of “turning theories into practices”.

And also it’s 0:24 and I really should go to sleep right now 😴

How much am I really worth?

Louis Tsai — Sun, 16 Feb 2020 21:32:51 +0000

The beginning of #KnowYourWirth

In the last 2 days, the tech community on Twitter blew up with the #KnowYourWorth movement. The TL;DR it is to share your salary, so that minorities can have a better grasp of what the market rate is, instead of relying on anonymous sites that you never really know if they can be trusted.

And just like every movement on Twitter, immediately there are a lot of supporters, along with a lot of criticisms. And what I want to do today is to share my 2 cents of what I fell about #KnowYourWorth.

First, I would like to get a few facts straight, before jumping into my own train of thoughts:

The tech industry lacks diversity (and has been like that for a very very long time). According to Stack Overflow 2019 Survey, 91.7% of the respondent identifies as male, and 70.8% identify as “White or of European descent” (!)
The gender pay gap is (sadly) still real. According to Harnham European Diversity Report 2020, the gender pay gap is around 16%, while the gap in Germany being just 4% (so close!)

I am sure there are a lot of peer-reviewed studies on these topics, just go to Wikipedia and go through all of the citations for gender disputesarity and gender pay gap, not to mention race, sexuality, age, and more.

The TL;DR of what I think I am worth boils down to the following:

Honestly I think right now I am worth less than what my company is paying me
However, just 2 years ago, I am probably underpay (because I know nothing)
I wish the society has less stigma on compensation transparency
And hopefully with that, we can have a much better look at the inequality as a whole

What should be the criteria?

One of the bigger group of discussion focuses on “should people with the same title have the same compensation, regardless of where they live”. Personally I am more in the camp of “pay people with same responsibility with same base compensation + compensation based on context”.

The reason why I am against same salary for everyone is because it is kinda unrealistic. Some people are gonna like to live in expensive places (SF, Norway, etc.) for a wide range of reasons. And unless you pay everyone that high level of compensations, you are excluding them based on something that they may have no power to change. There are also a lot of other reasons why you might want to pay people differently, like appreciation of loyalty, compensation in salary vs days off, and not to mention bonus on performance of individuals.

Ok, so what are you really worth?

And based on this criteria, I honestly think I am very lucky and maybe even overpay. I did not ask my teammates what their compensations are (since this blow up during the weekend), but from what I understand about our company’s pay structure, they probably get paid less than I do, while doing the same or even more than what I do. I fucked things up on such a regular basis, that I am still wondering if I am gonna pass the probation period 🤞

And in terms of the context, we more or less joined at the same time, with more or less the same amount of expertise of what we do (more then I do to be honest), and surprisingly similar backgrounds, and we are all living in Berlin now, so I think from that perspective we should more or less score the same as well.

Umm, so are you gonna do anything about it?

This is something I have been thinking about for the last 48 hours (i.e. not that much time), and here’s my train of thoughts:

I should ask my leads on criteria of judging our pay grade
I should find out what’s the law on “keeping salary a secret” in Germany
Try to remember and write down how I got this offer (which is more than 5 months ago), and hopefully some of it can be useful to others
Spread the message to border audiences

Wait that it?

For now that’s the list of things that I can come up with, and that brings up to a topic that I am no an expert in, but after watching this video, makes me appreciate this whole movement a lot more:

While it is not about salary or compensation or money, it does bring up a quite interesting topic on how much an individual can do, when facing a deep-rooted mental model that the society held. And from this video, this reminds me of this somewhat exaggerate & American-focus snippet of Adam Ruins Everything:

The more I think about it, the more I agree that currently the common practices for companies are the biggest bottleneck for achieving fair compensation regardless of age, gender, sexuality, race, and more. How can people have an open discussion on how to tackle pay gap, when people are still arguing that pay gap is not real (although to be fair, there are also people who think the earth is flat, so I guess data and statistics are not as powerful as I think they are 🤷‍♀️).

Hopefully one day, we can all sit down, have detailed and meaningful analysis and discussion on the inequality in the tech industry, and how we can tack the issue as a whole.

Closing thoughts: some criticisms of #KnowYourWorth

Intentional or not, some of the tweets gonna feel more like humble-brag (“Oh I make 1000k in SF and you should too!”).
Privacy is absolutely a big issue here. I get the point here is “This is my name, this is my compensation, and you can trust this info”, but judging by the amount of people who backtracking their decisions, and amount of things people can extract from these data, I guess it is safe to say this is not a scalable solution to raise awareness.
Context is absolutely still a very big problem. Does earning 200k in SF means the same thing as 100k in Berlin? And what about things that money cannot buy, like public health care that does not cost an arm and a leg, or nicer weather, or friends and family?

I hope that it could be the beginning of a much bigger movement towards eliminating inequality, and I swear to god I will do my best to make that happen!

From Android zero to kinda-middle: Basic shell script for Android dev

Louis Tsai — Sun, 12 Jan 2020 16:01:04 +0000

From Android zero to kinda-middle: Basic shell script for Android dev

It has been a while since I did my last "From Android zero to kinda-middle" series, and today I'd like to talk about shell script.

WTF is shell script

You can think of it as a scripting language + the program that interprets it.

Why you should know shell script?

All the buttons in Android Studio will ended up executing some shell script in one way or another. For example,

"Run" 👉 ./gradlew assemble${flavor} + adb install

Install newer version of Android SDK 👉 sdkmanager "platforms;android${versionCode}"

Commit 👉 git commit -m "${message}"

But if all of the task can be done with buttons, why would anyone want to type all the steps out instead? Well, if you have a series of events you want to run repetitvely, having a script will often makes it a lot easier to deal with, esp. when compare to reading documentation and do it step-by-step. And those automated task can also be done by computers more accurately, for example, have a computer that builds and ship the app every time master branch is updated. And that is basically what "Continuous Integration" or "Continuous Delivery" (also known as CI/CD) are.

But this only explains half of the question. What makes shell script different than, let say JavaScript? Well, it's all about the history. Shell script is very much tied to Unix, i.e. the foundation of Linux and macOS, and the popularity of the 2 (amongst developers and servers) makes it pretty much the universal way to tell a computer how to do something. Not only that, being super close to the operating system, it allows a multitude of tools to do whatever they want to do, from transforming video between formats, framerate, resolutions, and more with ffmpeg, to compiling Java/Kotlin code with javac/kotlinc, to tools that communicate with external sources or devices like curl or adb.

What can shell script do

In general
- Travel in the file system (cd) 🚙
- See where you are (pwd) 🗺
- Create folder(s) (mkdir) 📁
- See what files are there (ls) 🗂
- Modify files (vi/nano) 📝
- Open files and programmes (open on macOS) 👀
- Read files (cat/less) 🖨
- Install other softwares (brew) ⬇️
- Version control with Git (git, dah) 📚
- etc.
Android-specific
- Talk to Android devices (adb and fastboot) 📱
- Update tools to build Android app (sdkmanager) 📲
- Contribute to AOSP (repo) 💪
- Use dependencies (gradle) 😯
- Build the app (still gradle) 😮
- Test the app (also gradle) 😲
- Install a specific version of gradle (yes the answer is gradle, and then you can use gradlew) 🤯
- etc.

How to run shell script

If you are on Windows, I'm sorry but 50% of this article is not for you. While the concept is the same, they are so fundamentally different, that you should be using something call "Command Line" or "PowerShell". These are 2 different program + scripting language that runs on Windows, and I have little to no knowledge about them. A quick Google will help you a lot more. And if you are brave enough, you can also try out WSL (and WSL2) to run the following steps. Not everything will work.

Now that Windows users are out of the way, let see some basic commands on Linux or macOS!

Open "Terminal" on your computer
Use pwd to see where you are in the file system
Use cd ${folder name} to move into a folder
Use cd .. to move to out of a folder
If you are not sure where you are, just type cd will take you back home.
Use mkdir ${folder name} to create a new folder
Use touch ${file name} to create a new file
(macOS only) Open a file with it's default program with open ${file name}
(macOS only) Open a folder with open .
. means the folder you are currently in
man ${command}(e.g. man git) shows a manuel of the command

And now, let's try to create a new git repository, and then delete it

# Create a folder
mkdir newProject

# Move into that folder
cd newProject

# Tell git this is a new repository
git init

# Create an empty README
touch README.md

# Enter some text into README
echo "# Hello, World!" > README.md

# Tell git to stage everything
git add .

# Commit with message
git commit -m "Initial commit"

# Show commit history
git log

## Go back out
cd ..

## Delete folder (the -r is needed to remove folder. It stands for recursive)
rm -r newProject

All the line starts with # are short comments that explains what the command does. And feel free to mix and match all of these, or just randomly roll around and try things out. But be careful, you don't want to mess up your computer.

Avoid rm -rf ${anything} until you know what you are removing
Stay within the home folder ( echo $HOME ), most of the stuff outside are programmes that the rest of the system relies on.

Practical shell script examples

Install httpie, a pretty user-friendly way to call REST API form terminal

On Linux, there are a lot of "Package Manager", and in this case we will use Debian/Ubuntu as an example, which uses apt-get, and that is includes when you install the OS.

sudo apt-get update
# Then type your password for the computer

sudo apt-get install httpie
# Then you will have to accept it

http --version

And on macOS, the most popular package manager is call "homebrew", and first, you will need to install it. At the time of writing (Jan 2020), you just need to run

# This is from Jan 2020. Please check the website for the most up-to-date install instruction
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# Install httpie. This will usually take quite a while
brew install httpie

http --version

Run unit tests for the entire project

# Assuming you are already in the folder of your project
./gradlew test

Verify code style with pre-commit hook

ktlint is a tool that verifies and fixes kotlin code. And git hook is basically a script that runs in specific time in the git process, in this case, pre-commit will run when you are trying to commit, and if it failes, the commit also fails, which makes it a great place for enforce coding style in a team.

# Install the latest version (0.36.0)
curl -sSLO https://github.com/pinterest/ktlint/releases/download/0.36.0/ktlint &&
  chmod a+x ktlint &&
  sudo mv ktlint /usr/local/bin/

# Ask ktlint to install itself as pre-commit git hook
ktlint installGitPreCommitHook

# Imagine you have typed some kotlin code that's not perfectly format

# Commit and this will fail
git commit -m "Bad commit"

Build & Publish app automatically with Gradle and fastlane

You probably already know the existance of Gradle (via build.gradle), and fastlane is a tool that can automate a lot of stuff for Android and iOS developers. Instead of writing all the steps here, please checkout the official documentation on how to install and publish to Play Store, and this article from GitLab on how to compile and run fastlane on Linux

Closing words

I still remember when I start learning/using shell script from about a year ago, and I was like "Ugh really? It's 2019 and I am going back to using computer like the 70s?". But after a while, I realised the flexibility of it opens a lot of doors. It did took a while for me to understand some basic shell script syntax, but I promise you at some point you will file some usecases that shell script will make you life as an Android developer a lot easier to deal with! Thank you for reading, and I will see you next time!

Mental Models of Jetpack Compose #3: Inheritance, Composition, and why they matter

Louis Tsai — Tue, 22 Oct 2019 06:42:53 +0000

Mental Models of Jetpack Compose #3: Inheritance & Composition

Previously, on MMoJC:

We talked about what even is mental model
We talked about what is state
We talked about what is Programming Model
We talked about Declarative UI
We talked about separation of concerns

And for today, I’d like to talk about Inheritance & Composition in the context (no not that Context😂) of Android.

Inheritance

Android was born (officially) in 2008: Java 1.6, JavaScript is just some things you use to animate stuff, not build a full blown web app, not even the word “app” is a thing just yet. And when it comes time to build all the basic view components, there are probably quite a lot of restrictions on what they can build in a limited amount of time (esp. since iPhone just got released, the pressure is on!). So in order to encourage code-reuse (i.e. DRY), they made a View class that every classes extend from, and then they can add extra functionality, and it just keep growing like that, just like a tree.

What’s wrong with inheritance

While it definitely helps everyone to reuse UI code, like “Button don’t have to implement their own text rendering logic”, it is also very limiting on building complex things, which turns out to be the case, when Android become the most popular OS in the world.

For example: Button with an image instead of text. When I first start learning Android, at some point I was trying to use an image instead of text for a button, so when I find ImageButton, I was like “jackpot”, and just converted it in the XML. but then 20 seconds later, everything broke, and I got a bunch of compile error. Turns out a lot of the functions that I was calling from the Java side don’t work anymore, and it’s because Button and ImageButton, although share a very similar name, has almost nothing in common 😐

ImageButton and Button are both View, so that's something I guess 🙆‍♀️

Maybe the Android team could have design these 2 views the other way around? But in general I hope you got the point of “how difficult it is to predict how people mutate their UI, and what would be the best hierarchy to ensure high level of compatibility”.

There is another way people discover this to be an issue over time, and it’s when people try to update existing UI: we get some ticket on what new feature we needs to implement in the UI, we updated that View, and make sure it’s covered with test. What could possibly go wrong? Well, if you are building a library of views that thousands if not millions of other classes inherent from, too bad! Since there is no clear mechanism to warn every single places that extends from you to double check if the change in behaviour is acceptable, you kinda just have to prey nothing went wrong. One example that the Google team pointed out is the “selectable text in Button”, which maybe 3 apps in the world needs it.

TL;DR: Building UI with inheritance does not scale over space and time

(BTW inheritance is not the only thing that didn’t aged well with View, but that’s story for another day)

Composition: Is it the answer we are looking for?

So how else can we build reuseable View? For that, let see if composition helps: Instead of saying “Button = modify view to show text, and modify text to have a specific style”, just say “Button = Whatever hint you want + some background + click callback”. And an example for that can be seen in Flutter, like this:

https://medium.com/media/b954722363f4154bff5eeb209c18658a/href

And all of these are technically possible in the past, but the developer experience/ergonomics will be so bad, no one will like to develop for the platform to begin with! With much better tooling like IDE with crazy-good autocomplete support, build system that can process a huge amount of dependencies, and stack traces that gets more and more human-friendly over time, we are start to utilize composition to our advantage!

So is it the “ultimate” solution to UI building? It’s closer, but there are still some gaps to fill, and with the each of the composition-based UI framework, there are different trade-offs they’ve made, and that’s what we will cover in the next chapter!

Hope you like what I have wrote, and if you have any feedback or anything, feel free to leave a comments down below! Thanks!

Mental Models of Jetpack Compose #2: Declarative UI (with code) & separation of concerns

Louis Tsai — Mon, 19 Aug 2019 13:31:33 +0000

Separation. Photo by Jamie Street on Unsplash

In the last chapter, we looked at 2 mental models: “state”, and “programming models”. And now, let’s take it 1 step further and see how declarative model translated to the world of UI development. 🌀

Declarative UI (and the spectrum of it)

Even when the goal went from “describing the process of building a house 🏠 ”(imperative) to “describe the house 🏠”(declarative), there are still a lot of different ways to “describe the house 🏠”. You can make a CAD, you can sketch it out on pen and paper, or you can write a 200 page descriptions of every single texture, material, and color of every single wall. And in my opinion, it is more or less the same story for declaring UI. There are a lot of different solutions, and the amount of flexibility you have is one of the most obvious different between them:

The static kind of declarative UI

Basically most if not all markup languages (e.g. XML, HTML) are in this category. In those languages, there is not much you can do, other than laying out existing “components” or “tags” or “whatever you want to call it”. If you want to do pretty much anything else, you will have to go back to imperative-programming-land.

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" \>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" \>

</LinearLayout>

Less static kind of declarative UI

While XML is not the most human-friendly syntax, it’s still far from “terrible to read” or anything. And if it is still understandable, what if we just add a few extra feature on top of it? Introducing data binding, officially introduced to Android Developer back in 2015.

It is still very much based on all the existing syntaxes, along with all the XML skills developers have build up over the years. It basically just introduce a series of basic imperative programming tools, and makes it a lot easier to keep more of the “concern of the UI” in the XML itself.

...

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{viewmodel.userName}" \> // <- tada 🎩

...

A really dynamic kind of declarative UI

And just 2 years before that, in the world of web development, a little project call React.js got open-sourced by facebook, and while the early responses was not exactly stellar, it doesn’t take long before the industry adopts it in a very rapid pace. And not just React itself, similar frameworks also started to pop up and got adopted by the industry: Vue.js, Angular, and later to the world of Android (and iOS) with React Native, Anko, Litho, and more recently Flutter. So what makes it special?

class Hello extends React.Component { 
  render() { 
    return <h1>Hello world!</h1>; 
  } 
}

While data binding introduces logic into a markup language, React does the opposite, by introducing markup language into a imperative programming language. While that might sound counter-intuitive (if the goal is to encourage declarative code, why would we make it so easy to write imperative code!?), the reality is that making a generic declarative programming framework is really really really hard. People build wildly different things that looks and acts very differently, and the last thing a developer wants to do is staying up at 3am to debug not their own code, but deep dive into the framework, and is still 10 hours away from realizing that the framework just haven’t take that edge case into account, and the only way to really fix it is to reverse the order of how the framework interpret 50% of the code.

Basically it’s just a very long way to say “we hate black magic”, and having a good “developer ergonomics/experience” is a big missing piece that previous attempts of declarative UI framework missed. Stuff like debugger and breakpoints, log, and a syntax that you are already used to, are really helpful, and by using an imperative programming language like JavaScript, it makes React (and similar UI frameworks) very attractive to developers.

There are also a lot of other reason why people find React attractive, and they will be cover in later chapters with other mental models. So stay tune ! ⏰

Separation of concerns

I feel like one of the biggest concerns some developers have had with the React.js kind of declarative UI is that “it violates the separation of concerns”. While I’ll admit that now that everything can be in the same place, it can be tempting to just “nah I will just throw everything this one class”. It’s just that XML is not necessarily a good way to “separate concerns” either. For example, “show ProgressBar when loading, show RecyclerView when load finished”, I would definitely classify that as view logic, but the Java/Kotlin code is the one that triggers that. Simple cases like this can be mitigated with data binding, but then you can also go way over-board with it as well, and add business logic into XML.

What I am trying to say, is that while XML encourages separation of concerns, sometimes XML can give us the illusion that it is actually there when it’s not. And the limitation of it being just a markup language makes it harder to see the big picture at once. Having the UI + UI logic + business logic (+ more) in the same syntax makes it a lot easier to refactor (or just simple re-organize) them, into the most logical “concern” that it actually belongs.

So that wraps up chapter 2, and again, more chapters are coming up. If you have any comments, ideas, or feedback, leave a comment down below, or find me on twitter! 🐦

Louis Tsai

Mental Models of Jetpack Compose #1: State & Programming Models

Louis Tsai — Sun, 18 Aug 2019 19:11:47 +0000

Update (2019.08.19): Chapter #2 is now up 🎉

Generic representation of “mental model”. I don’t really know how to visualize this concept 🤷

So last month, droidcon Berlin happened, and I gave a talk on Jetpack Compose, and gave a brief overview of the internals, and some decisions they have made.

I did wrote a bunch of blog posts leading up to the conference, and I really appreciate all the supports. While the videos are still not available 😠, and there is also not much feedback from the attendees, I do feel like there are a lot of basics that should have been covered instead. So today, I would like to give you guys a brief overview of a bunch of so call “Mental Models”, which IMO is the 1st step to get you to understand what Jetpack Compose really means to being an Android Developer in the future.

So first, before talking about any mental models, let’s briefly talk about what even is it, and why I think they are important. According to Wikipedia:

A mental model is an explanation of someone’s thought process about how something works in the real world.

First and foremost, it’s an explanation. Second, it’s from a person, so it can be personal, subjective, even over-simplified (i.e. technically wrong).

And why is it important know some mental models to understand Jetpack Compose? In my opinion, there are so many potentially earth-shattering changes that Jetpack Compose brings, and along with it, a bunch of current best practices or standards are gonna be obsolete at best, and flat out wrong in some cases. And just like the transition from Jave to Kotlin, or AsyncTask to Rx, or Rx to Coroutine, there are some things you might want to un-learn, and in order to un-learn those things, you have to wrap your head around the original problem, and then reapply the new way of thinking onto it, i.e. the mental model.

State

Unless you are playing apk golf, your apps have states. The view have states, your logic have states, there’re states everywhere. Basically if your code remembers any event (it can be text change, network response, system callback, pretty much anything), your application is consider “stateful”, and that piece of data is a “state”. All those event only happen for a few milliseconds, and a state exists to persist it longer that.

And what you usually do with any state is to transform the view accordingly. Some common examples include:

When the flag checkCheckbox == true, then set a CheckBox to checked
When the List<User> changes, then set the ProgressBar to GONE, and set the RecyclerView to VISIBLE.

Programming Models/Paradigm

So your program have states, but how do we change between them? We do that with code, and the different ways we write code is what we call “Programming Models” or “Programming Paradigms”. And when I say “different ways”, I don’t just mean programming languages, or architectures, or “how many ways to add 1 to x”(++x, x++, x += 1, x = x + 1, and more).There is a fundamental thought process baked into the language design, the standard libraries, and everything in-between, and that defines how we come up with solutions.

Imperative programming

TL;DR: In imperative programming, you use statements (or so call “instructions”) to change the state of a program. As a programmer, you are in charge of writing how to change a state, like every setText, every notifyDataSetChanged, and every invalidate. If you trigger it multiple times, you might not generate the same result; and if you trigger it at different state, it might not generate the same result as well.

Declarative programming

TL;DR: In declarative programming, instead of writing how a program should perform, you more or less just write a general rule/expected outcome.

In SQL, you don’t write “go to the beginning of the user table, and extract 5 rows”, you just write “fetch 5 items from the user table”.
In regular expressions, you don’t write “split the input by ., and then count how many groups are there”, you go to StackOverflow and copy the most upvoted answer on “the rule of digits-dot-digits-dot-digits-dot-digits”, i.e. IP address.
And in Android layout (we are talking about xml here), you don’t write “add TextView to LinearLayout, and then add another TextView to thatLinearLayout”, you write 2TextViews surrounded by aLinearLayout`.

And once you wrote all of that, you pass it off to someone: SQLite, java.util.regex.Pattern, and LayoutInflator, and they will magically find a (probably) efficient way to give you the result you expected.

One thing to note is that there can be quite a bit of overlap/intertwine between these 2 models, and RecyclerView is a good example: the ViewHolder pattern is quite declarative: it doesn’t really care who/how/why someone trigger’s it, you just render the ViewHolder according to the input; while the Adapter is very much imperative, since you are responsible using statement(s) to notify the right position to trigger that specific ViewHolder to update.

It’s also not that uncommon to wrap existing imperative code in a declarative way, and the Navigation Component is a good example for that. It is powered by all the existing Fragment APIs, but instead of imperatively giving the manager a transaction, we declaratively pre-define all the possible screens and directions between them, and the correct transaction will be generated and executed. Other common examples includes

JSON parsing with Moshi’s codegen
Data binding
And pretty much everything Gradle does

Some of them are generate code at compile time, some of them just transform them into the correct parameter at runtime, either way, as a user of those libraries, you are only responsible for asking “what”, not “how”. And while Wikipedia list Java (and presumably Kotlin) as imperative languages, it is also not uncommon for them to get some features that is more declarative, most notably, annotation, and DSL.

So this wraps up the first chapter of “Mental Models of Jetpack Compose”, and a few more chapters have already been planned. If you want to know more, or if there are any comments, or if I have made any mistakes, please feel free to let me know 🤗

From gqlgen to GraphQL.js: a story of “choosing the right tool for the right job”

Louis Tsai — Sun, 14 Jul 2019 15:40:29 +0000

Oh this? It has nothing to do with the content, I just took this yesterday and I quite like it ¯_(ツ)_/¯

A few months ago, I briefly talked about using gqlgen to create a backend for a now “postponed” project. And after that, I have been trying to create a GraphQL wrapper for the official HackerNews REST API.

And about a week ago, I finally said “screw it”, delete everything, and restart from scratch with GraphQL.js

So what went wrong? Is it because of Go? Is it because of gqlgen? Or is there something/someone else to blame? Let’s find out!

So, the premise of the project is simple: the REST API is kinda weird, since it returns (almost) exclusively just ID. Clients will have to fire a billion extra requests to get enough data to show on screen. This is probably not a good thing, especially for mobile devices, so let’s use GraphQL as a proxy, and expose the flexibility to the client. The (presumably) powerful server does most of the heavy lifting, and in might even be able to add some clever caching mechanism at some point.

So I started the project with Go and gqlgen, mostly because of 3 reasons:

I want to practice my Go skills
I have use gqlgen before
The premise of “type safe + codegen” seems like a perfect fit for GraphQL

And I still stand by all those reason why I chose it in the first place. And at the beginning, it doesn’t take long to whip out a super simple “happy path only + not efficient” schema + resolver + query. But the moment I start to drill down a bit, it starts to get kinda convoluted. Here’s a list of things that I have to figure out how to solve with my very limited knowledge of Go & gqlgen:

If the query only ask for id, it should not invoke any extra API call. That means I need to tell gqlgen to use resolver to get every-single-field-in-basically-every-single-type. It gets really verbose real fast.
The ID for item (story, comment, job listing, poll, poll option) is an integer, while the ID for user is a string (like handler for twitter), but I can’t teach gqlgen to interpret GraphQL’s ID type to 2 different type at the same time.
It took me way too long to realized that I should at least put the resolver functions into another file, so that when I have to update the schema and regenerate resolver.go, I don’t have to painfully put the logic back in -_-
Update from dep to mod. Not really a problem, just something I have to deal with.
etc.

And after like 2 month, I really starting to feel like I am fighting both Go and gqlgen at every level. I just want to get a Hacker News API in GraphQL done. There’s got to be a better way.

my brain after 2 months

Since I don’t control Hacker News, nor its API, I will have to adjust how I tackle the problem. Here’s a list of things that I have re-consider during that time:

Type-safety: Maybe for this project it matter less? The output definitely needs to match what the GraphQL schema specified, but the internals don’t have to be. In fact, there are some benefit to not having type-safety, so that there are less ceremonial type cast/check/conversion.
Framework: Having schema-first with codegen + a billion lines to configure it is probably not what this project needs. Just do a typical resolver-first approach.
Developer ergonomics: I am still very much in Java-esq-languages-land, and trying to figure out pointers, basically no OOP, and not knowing how to do basic parallelism, means I probably spend more time going the wrong way, run into dead end, and go back and realize what the right approach is. Don’t get me wrong, it’s nice to learn, but it’s not nice to feel like you have accomplish nothing.

So after considering all of the above, I decided to give GraphQL.js a shot. And fast-forward to today, I have already build a lot more of the resolvers comparing to the old one with Go + gqlgen, so I think it’s safe to call it a success (for now).

Don’t get me wrong, I still really like Go and gqlgen. It’s just that in this very particular case, it’s not the right tool for me nor this project. And on the other side of the spectrum, there are still a lot of things I don’t like about Node.js + JavaScript + GraphQL.js, but most of them are trade-offs that I can deal with (for now).

So what’s the takeaway here?

Use the right tool for the right job.
If you have good reasons, don’t be afraid to do some experiment, and even restart what you are working on. It might actually pay off.
10x engineers are the future of society, and you have to learn how to spot and keep them. /s

And if you are interested in Go/gqlgen/Node.js/JavaScript/Hacker News/this project/GraphQL/basically anything, feel free to leave a comment or reach out to me 🤗