Using CodePen to enhance Developer Experience

Tony Zoght
Solace PubSub+
Published in
3 min readOct 25, 2018

Companies of all shapes use CodePen and how they use it varies quite a bit. The majority of the users are front-end developers that use it to prototype, experiment, teach and learn.

At Solace, I’ve used CodePen to help improve the developer experience (DevX) and reduce the time it takes to get started with the Event Broker.

The “Hello World” Example

In general, when reading about a service or a product for the first time, it’s crucial to give the user the best possible experience when getting them to try the product. What this means, is that you have to strive to eliminate mundane and error-prone steps to get to the original point, which is “try my product”. CodePen shines when it comes to eliminating necessary but tedious steps.

Every product needs a “Hello World” and for event brokers it’s the following:

  • Publisher sending an Event (or a Message :-)) to a Topic and
  • Subscriber receiving this Event, by subscribing to that Topic

Before CodePen

To get such a scenario going, the developer trying the example, had to do the following (Omitting the necessary steps to run the event broker) :

  1. Clone the example repository
  2. Install the needed dev tool chain (For example: JDK)
  3. Build Publisher
  4. Build Subscriber
  5. Configure the Publisher and Subscriber to point to the event broker
  6. Run Publisher and Subscriber

After CodePen

Make the same assumptions stated in Before, embed 2 CodePen Pens (One for Publisher and a second for Subscriber). From the Developer point of view:

  1. Run Publisher and Subscriber Pens

So what are the benefits ?

From the developer’s perspective, a number of unnecessary steps (to get a taste of the product) are eliminated by using CodePens for the Publisher and Subscriber samples. Most importantly:

I’ve Enabled the developer to continue to “play” and “experiment” on their own terms without having to leave the “Try my product” page.

It’s important to note that the goal of this approach is not to “replace” examples in source format hosted on Github, but to provide instant gratification to those who are trying the simplest example, and intrigue the developer’s interest to experiment and play.

See a working example

Checkout https://solace.com/get-started for a working example using Solace PubSub+ Standard Edition.

The same approach was used in the Cloud SaaS Version Solace Cloud and the getting started tutorial

Conclusion

Next time you want to write a getting started and you want to delight your developers, give CodePen a shot.

--

--

Tony Zoght
Solace PubSub+

Tech Leader, Architect, Builder and aspiring Data Scientist