Tabs or Spaces? merge or rebase? Vim or Emacs? These questions have plagued developers for centuries! Alright, maybe not "centuries",
but I decided to take the problem into my own hands and host a poll. And I'm going to show you how I did it using web development tools and Apache Kafka. You can cast your own vote at the link below. I'm Lucia Cerchie at Confluent, and in this video, I'm going to tell you how I made this website. Here's my stack: on the frontend, I stuck with CSS, HTML, and mostly vanilla JavaScript so that
anyone using a higher level framework would be able to translate the logic. When you click on a button in the frontend,
I collect the information about your vote via a post to an Express.js route. Then, I retrieve the current state of the vote count from
a Kafka topic with a Kafka consumer and update it with that information,
using a Kafka producer to send the new message containing that information to the topic. Then I create a second Kafka consumer that fires
the new vote count to a websocket every time a message comes in. To create the Kafka producer and consumer, I've used confluent-kafka-javascript, which
as I record, is not in general availability but is in early access at the link below. My frontend is listening to that websocket, and it updates the progress bar with the information. This is all hosted on AWS. You might be wondering why I chose to use Kafka. Great question! As web developers, we often store things like poll data in databases. Kafka's status as a database is up for debate,
but it can store our data and support our live visualization of the poll. In addition, should we choose to process our poll
data later, we'll have access to streaming data processing tools. Plus, honestly, I just wanted to make a project that would help you learn
the confluent-javascript-client in a fun way. Step 1: Sending information to the Express route Let's review the code I wrote to make this all
happen. It starts with a POST request to my express route. I've attached an event listener to my buttons that fires this request on click. The data, including information about the vote,
Step 2: The Express route the name of the question, and the timestamp is sent to my route. I'm including the timestamp here in case I want to
use stream processing like windowing in a later iteration of the project. In my express route, I'm fetching the data from the request body, transforming it to
Step 3: getting the current state JSON, and passing it to the sendMessage function, which I'll explain in a moment. Here, I'm creating a variable to hold the voteState, and manually committing the
message so I can pick up from the very last message when my consumer restarts,
whether or not that message has previously been consumed. Step 4: sending the message Inside sendMessage, I parse out the question_id_string and vote, update
the current count kept in the "decoded" variable, while updating the state of the buttons as well. Then I produce the message to Kafka. Now, in my Kafka consumer, I am parsing the incoming message which holds the vote state,
Step 5: the consumer filtering for the last clicked message, creating variables to
hold the current question_id and count, and then sending the message to my websocket. You might notice that the syntax here is slightly different from the syntax in the first consumer. That's because this consumer uses the promisified API, versus the first consumer,
which uses the API that avails itself of the features in node-rdkafka. This consumer.run method from the promisified API
feeds our function one message at a time using the eachMessage handler. Step 6: the user interface Here in the frontend, I'm writing some logic that triggers when the socket receives an event. Then I create a variable for the question_id, and retrieve the DOM element corresponding to that id. I retrieve the label for that bar as well, which I'll update in the following chain of logic. Then, I check if the left-hand option has more votes, if there's been a tie,
or if in the remaining case, the right-hand side has more votes. And that's pretty much it for the essential code. Outro If you want to see the whole sample repository and
get this running yourself, check out the links below. There's lots more to be done with this demo. Perhaps, instead of updating the state in the backend,
I could do some processing and create an aggregation with a stream processing tool? Or, what if you wanted to see what percentage
of developers who voted for tabs also voted for rebase? What would we do if you wanted to be able to change your vote? Or maybe fingerprint the users so they couldn't cheat? I'll leave these features as a challenge for you, my dear viewers. In the meantime, don't forget to like and subscribe. See you next time!