Live coding on stage, the right way

Baptiste Carlier
6 min readApr 30, 2023

--

Few days ago, Antoine Robiez and I were on stage at Android Makers, speaking and demonstrating in front of a bunch of people. By demonstrating, I mean that a part of our talk was live coding.

It was the second time we made this talk. But this time, we anticipated few things just to be sure everything went OK. Here’s few keys to do secure your live coding demonstration on stage.

It’s a Android developer point of view with Android Studio as IDE, but if it’s not your case, I think most of those advices will match your fits.

1. Prepare your code base

Compilation time

First thing, you’ll build and run your project maybe several times on stage. To gain time, you have to ensure a fast compilation time. Reducing this time is reducing the blanks you’ll have to fill. 😄

So be sure to remove everything unnecessary: dependency injection, unnecessary ressource, … everything not mandatory should be removed.

Fallback #1: branches

Everything will be OK. Yeah, sure!

But if not, branches will be a great fallback solution.

You should be able to switch easily from one branch to another. Ideally do it inside you IDE and the fastest way ever. Try to get shortcuts or with minimum actions required.

[Terminal tab] git checkout -f am23/step-2

Dependencies

Your talk is coming soon. So don’t update your external dependencies or your IDE anymore!

In our case, many things should be updated:

  • Jetpack libraries
  • Kotlin 1.8
  • Android Gradle Plugin
  • Android Studio Electric Eel ➡️Android Studio Flamingo

We upgraded many of them but from a point of time, we’ve decided too don’t upgrade to project anymore.

It’s working. It’s building. It’s OK. ✅

TODOs !

During your demo, you’ll have to reach specific lines to add or replace code. TODOs are useful mainly due to the IDE tab.

You’ll see all of them, and with a good naming convention (number? emoji? colored emoji ?), you’ll reduce the time spent finding the right lines.

It could have been bookmarks.
But bookmarks are stored into the IDE, not to your repository. It matters if you’re not speaking alone.

Branches + TODO = best combo 💙

2. Prepare your IDE

Let’s see what we can do from Android Studio itself.

Clean up your IDE

First, clean up your UI. IDE interface are very customizable. It’s nice for productivity. But it can distract you and the audience during your talk.
What should they look at?

An easy solution is to remove everything unnecessary : clean your opened file tabs and your IDE tabs.

Build variants, Structure, Gradle, … it’s up to you to see which views are relevant and which one you should keep. My advice is to remove everything you can.

Live Templates 🖤

Have yourself a break. Use live templates. 😎

This JetBrains’s IDE feature is a very powerful tool on a daily basis.
(I think I’ll write a publication just on this later)

And it’s also really useful on stage for two reasons :

  1. Your code will be cleaner.
    Previously we manage our live coding with uncomment section. It’s easy but on a small european keyboard, it’s not convenient. That also means that, if you edit several times the same code, it may not be clearly readable for the viewers.
    By using live template, you’ll just have to call the shortcut to complete the missing part. Not erase and uncomment code. 🤔
  2. Your talk will be more professional:
    - You have a TODO.
    - Then you replace the missing part with just a simple word.
    - Tape Enter. Completion is done!
    - Then you can just focus on the explanation. 👍

Obviously you’ll have to have a find the right way to manage your template abbreviation. But it’s up to you to find your own.

➡️ Pro tip for live templates: Save and share them!

Story time:

We did not have much time to prepare our presentation. Wze were not available to meet regularly. So we were each mainly working on our own for a while.

We had to find a way to share our Live Templates because we were working on our own computers.

You can share your Android Studio Live Template with a simple trick: a share repository.

  • You can find your Live Template location.
    It might be something like /Users/John/Library/Application Support/Google/AndroidStudio2022.2/templates .
  • Create a git repo and share it!
  • Then create a symbolic link like:
cd "/Users/John/Library/Application Support/Google/AndroidStudio2022.2/templates"
ln -s "/Users/John/Documents/github/compose-animations-livetemplates/Android_ComposeAnimationTalk.xml" Android_ComposeAnimationTalk.xml
  • Push/pull really often et voilà 😉

Comment regions

Did you know that you can make regions?

We didn’t use them on stage but I saw few speaker did it. It helps the audience to focus on a specific part of your code. Then you unfold the regions as you go.

Mirroring your device

Since Android Studio Dolphin (experimental), you can mirror your device directly inside the IDE. It’s sable since Flamingo. It’s really efficient and easy to use it inside the IDE.

But be sure to try it before your demo.

No need scrcpy and Vysor anymore. Farewell bros! 👋

Prepare your device

Other tip with your device (pick those you need):

  • Turn off notifications
  • Turn on Do Not Distrube mode
  • Turn on plane mode
  • Disable auto-rotation
  • Show taps to show where you point your finger (Developer options > Input)
  • Enable demo mode to clean the status bar
  • Ensure battery is full

3. Prepare your slides

Fallback #2: put screenshots/videos into your slides

Everything will be OK. Yeah, sure!

But if not, videos of the results will be a great fallback solution.

You have branches. So you can move to the next step of your demo.
Don’t waste your time trying to find why it’s not working.

You’re in front of people. You and they don’t need you to debug your code. Except if it’s a way to explain a common problem that happens often.

So, just in case you’ll be in trouble, you can add screenshots/videos into your slides. This way you’ll show how it should work. And they see the result instead wasting their time in front of you. Looking for the reason why it’s not working.

And if all goes well, skip the result slide. You’ll just waste 1 seconde.

Train, repeat, train, repeat, … and enjoy 😁

It looks like a dumb advice but obviously it’s the most important one.

Train yourself.
Pull your repository (codebase and templates)
Try things.
Repeat your tasks.
Prepare and practice your live template.
Train how fast you can switch from a branch to another.
Think about when you should do it.
Test your compilation/build/run time.
See what you can do during the compilation time; or where your can take time to explain.

Surely you’ll have to spend a looot of time training yourself speaking in front of people. But if you want to do live coding, it’s that you are able to explain what you do.

Spoiler:
You’ll not get a Wahoo Effect every time with just few lines of code. It’s up to you to explain how it work and why it’s may be easy or why those lines matter. 😀

Doing live coding is great. Take advantage of it to explain your shortcuts, what you faced, and why you do what you do.

It has been a tremendous opportunity for me the share a moment in front of an audience, doing live code. I hope you’ll remember few tips of this publications for your next talk. And I wish you the best!

💙 Thanks Decathlon Digital for supporting me in this activity!

Twitter : @bapness
YouTube : @baptistemobiledev
LinkedIn

--

--