MDC 2019 Recording Live for Flexible UI Architecture with React and GraphQL

I had the opportunity to speak at MDC 2019 recently and recorded my talk Designing a Flexible UI Architecture with React and GraphQL. I think it's even better than the version I gave at NDC MN earlier this year.

What's the talk about?

Here's the abstract:

If your application suffers from hard-to-debug UI state, complex client-side business rules, and has trouble scaling to meet your performance needs you might be tearing your hair out. In this session I will share how we shifted the way we thought about our application using a 3 step process from the ground up. I’ll show you how we built a declarative “schema-driven UI” engine built on React and GraphQL that could manage business complexity and still scale to meet future business requirements.

I'll share our approach, some challenges we faced and advice for your own applications so you can design your own declarative schema-driven UI architecture that fits your business needs. Don’t fret if you don’t use React or GraphQL because this pattern can be introduced into any framework you might be using.

What did people say?

Like I said, I thought this went even better than the one I gave at NDC (recording).

This last session was rated 4.3/5 out of 25 ratings. 💖 Some specific feedback I got:

"so much content!!!"

"useful approach"

"very handy guide to UI design with any technology"

🙏 I was very happy to read these! I even had to cut out content to fit within 50 minutes.

I also had a couple people come up afterwards who said they thought the content was great and "impressive." Great!

"wish would of talked more generic graphQL and react to"

I think this last comment was referring to maybe adding more introductory content around GraphQL/React. Totally fair but I think the case study and design methodology are the focal points and for an intermediate talk, I don't have enough time to introduce React much though I do spend at least 5-8 minutes on why GraphQL was a good fit for this architecture.

What did I change?

I made a few changes structurally to the presentation that I think made it even better this time around.

Wrote a script

What! Actually this is something I've had to admit about myself. It's better if I write out my thoughts first to get them in order and be more articulate. I have time to mull it over and edit. I did this on my last two courses and it made a real difference in quality.

Each of the slides now has full speaker notes and I practiced reading through it several times to get the flow and points straight that I wanted to make.

Cut out the bio

I got rid of the "about me" section and replaced with a single slide at the end with resources. I basically launch into the talk and then at the end when people have heard what I have to say, they can look me up. This was some advice I came across online from somewhere (maybe this or even this meta talk) that I implemented.

Start with the point

My teacher in high school gave me this advice about speaking:

"Tell them what you want to tell them, tell them, then tell them what you told them."

I didn't know it until later but this advice actually originated from Aristotle. I am reading some books on rhetoric currently so that was neat to learn.

Even though I knew this intellectually it hit home more after we had an internal guest speaker at work, Frances Frei, talk about rebuilding trust. It was a lengthier version of her TED talk which I highly recommend.

She says if you're having a hard time getting your point across, it may be because you take a long, winding road to get to your point. Instead, just start with your point and people will be more engaged.

So that's what I did, my second slide is the whole point of the presentation. Then I follow Aristotle's advice and summarize at the end.

Divide into 3 parts

Everything is better in threes. I divided the talk into 3 main sections and I think that really helped keep the flow and structure solid in people's minds.

What would I change?

Plenty. Each time I give a talk it surfaces more things I'd change.

• I'd like to do more with the Adobe XD design I made: animations, callouts, etc.
• I think I'll redo the GraphQL section next time.
• I want to add a "post-mortem" section again, I took it out due to time but I might be able to save on time other places.
• I would love to show a minimal demo/sample using one of the libraries I mention.

I might have a chance to do these things, I've submitted the talk to several more conferences for 2020. Wish me luck!