Forem: brandon flowers

Cave Troll: Cracking React, XState & PusherJS Communication

brandon flowers — Tue, 24 May 2022 15:56:09 +0000

As we develop an app, we enjoy a sense of flow, connecting functions following our mental models of how we believe the code should all fit together. It can be frustrating to get bogged down by functions that don't behave as we expect them to; especially when we adopt some new library that has promised us to save us time and tears.

I've been experimenting with the mechanics that drive modern 2D multiplayer experiences that feature machine learning taking inspiration from Wildermyth.

I'm building with React, PusherJS, XState, RabbitMQ, and a recommendation engine built in Python. The goal is have them all work in harmony to provide a non-blocking experience where long jobs like reinforcement learning tasks are processed in the background and the user can perform other activities and receive feedback on their progress.

In this post, I'm only going to going share how React can subscribe to PusherJS events via XState, and update the UI once the work has completed. I've been a big fan of XState's visualization tool using it Storybook for the past year and recently started using the new Stately tools for VS Code as well as kicking the tires of their hosted editor.

I won't go into the backend of this project, but it's important to say a few things so that you can understand why I wanted to use PusherJS. So I will mention that the setup is a pipeline with 4 flask apps: API, producer, consumer, and a recommendation model. I wanted a pipeline flow so that I can add and remove libraries to experiment and transform the data. Depending on what I want to play with, I can try different models and other tasks like text processing.

With this backend in place, I have developed the frontend app to make Restful requests and subscribe to PusherJS which will eventually receive an update.

Since I'm building a 2D game, the app will make requests to generate maps and predict optimized walking paths but the UI will not be blocked because the final response will be picked up from a PusherJS subscription.

Now how do we get PusherJS to update our XState machine within React? But first, why XState as my state management weapon of choice?

Similar to what attracted me to functional programming, I liked that XState is deterministic which basically means that I should know where I am, where I came from, and where I'm going in the code base at all times. It also comes with a visual editor, and finally provides clear examples of how to reduce complexity and split up machines making it more readable and testable parts; props to Steve Ruizok and his multiplayer XState experiments.

I wasn't satisfied with my first attempts to make this happen. I tried several approaches to position the machine inside and outside the React functional component. I could trigger the task and have my pipeline return the result to a bound instance of PusherJS within React.

The PusherJS subscription would then send an XState event with the result as a payload and my context should be updated but unfortunately it failed to update, and thus my view wouldn't react to the change.

So I turned to google to see if anyone else was having this issue, and discovered a few interesting posts including these two: How should a machine interact with websocket? and XState Websocket Machine.

It's a bit disappointing to see that Github thread locked but it basically inspired this article so please use the comments below if you have any questions; not to say I'll have all the answers; but we can certainly struggle together.

I'll share the section of my state machine that I borrowed from glenndixon's post and show how I worked through this communication.

export const caveTrollMachine = createMachine(
  {
    context: initialContext,
    invoke: {
      id: 'socket',
      src: (context, event) => (callback, onEvent) => {
        const { channel } = context;

        setTimeout(function () {
          console.log('got here after 1 sec ');
          callback({ type: 'FETCH_USER_MAP' });
        }, 1000);

        const onGetMapSuccessHandler = data => {

          const {
            result: { map },
          } = data;

          callback({ type: 'PUSHER_FOUND_MAP_SUCCESS', generatedMap: map });
        };

        PusherService.bindToPusher(channel, c.GET_MAP_SUCCESS, onGetMapSuccessHandler);
      },
    },
    id: 'caveTroll',
    initial: 'idle',
    states: {
      idle: {
        on: {
          FETCH_USER_MAP: {
            target: 'loadingUserMap',
          },
          SAY_HI: {
            target: 'sayingHi',
          },
        },
      },

I also installed the XState Chrome extension so that I could use the machine visualization via Chrome dev tools but found it not as effective as the hosted Stately visualizer. In fact, the many times the chrome extension would fail to render and all I saw was "Resetting..." in the window.

Once I could watch the machine, I could finally see the actual state, and was able to add the missing on listener to that state so that it would hear when PusherJS had updated with the result of my request.

I left my SAY_HI event in that screenshot to show how I start by building simple experiments. It's always nice to follow hello world first approach to programming where I simply want to get some text to appear and then add more complexity once I understand how it works.

on: {
  FETCH_MAP_SUCCESS: {
   target: 'idle',
   actions: assign({ 
      tileModels: onTileModelsUpdateHandler, 
      generatedMap: onGeneratedMapHandler, 
      isMapGenerated: true }),
   },
},

Everything was working in my state chart as expected except my onTileModelsUpdateHandler. For some reason, it appeared that when this function fired, it did update the models with the proper x,y coordinates from the DOM but then suddenly the entire array would be empty.

  useEffect(() => {
    if (tileModels.length > 0) {
      const el = document.getElementById(`tile8`);
      if (el && tileModels?.length > 0) {
        const updatedTileModels = tileModels.map(model => {
          const newEl = document.getElementById(`tile${model.id}`);
          const boundingRect = newEl.getBoundingClientRect();
          return { ...model, x: boundingRect.x, y: boundingRect.y };
        });
        send({ type: 'UPDATE_TILE_MODELS', updatedTileModels });
      }
    }
  }, [tileModels]);

If I ever get stuck on a coding problem, the first thing I do is start to remove the complexity, and break it down into a more simple task . I'll never forget when I was pair-programming with another developer and she asked, "What's the delta?".

So I started to refactor, rewrite, and remove some of the deltas aka the differences and complexity. Instead of drawing a grid, I simplified it to one row. I changed my design from a field to single tunnel, a cave.

With the cave model, I didn't need the grid function, and once I replaced it with a function that drew a row everything started to work again!

By eliminating the grid, I was able to identify it and not the XState machine as the source of my vanishing model problem.

  const createGrid = () => {
    const grid = [];
    // credit https://stackoverflow.com/questions/22464605/convert-a-1d-array-to-2d-array
    // but be careful here since splice is destructive - make sure you don't destroy the original array!!!
    // important lesson for xstate that you don't mutate the original array!!!
    const cloneModels = [...models];
    // vs using just models
    while (cloneModels.length) grid.push(cloneModels.splice(0, totalInRow));
    return grid;
  };

I didn't realize that I was mutating the original array through the destructive act of using splice. Of course this is one of the dangers of copypasta from Stackoverflow, and I did review the source before implementing it, and it appeared harmless. I've since added ImmutableJS into the mix which I know is a bit controversial because it's not maintained but that doesn't mean it doesn't work. I have another large library of game asset datasets built on top of it and have never had issue with it.

After cloning the array, I was then able to bring back the grid, and once again everything worked as expected. I had assumed the context within the machine was immutable. I want to explore using XState's guards in the future to see if I could have received some feedback and data protection which could have helped point to my grid function instead of having to tear up my machine work digging for the cause.

By refactoring the machine, it did help me understand much more about how it works and definitely improved my work flow and ability to detect and squash bugs.

A Guide for Guides: Building a Fun Java App with Tomcat & Maven with the Community Edition of IntelliJ

brandon flowers — Thu, 25 Nov 2021 21:25:20 +0000

Often, when reading tech articles, we long for cliff notes and tips in the margins. This is where comments and discussion threads can be especially helpful.

I've embarked on a 100 days of code challenge to become more proficient in Java, and am now 30 days. So today, my IntelliJ Ultimate license expired and I'm faced with two options:

Ask my manager for a license
Continue with the free community edition

Since I'm considered mainly a frontend dev on my team, asking for a license is a bit of stretch but my manager has seen enough of my full-stack experiments with Node or Python to know that I do have the potential contribute end to end features in Java too.

I'm especially interested in building internal tools and dashboards to improve the visibility into our system. For instance, to allow our Trading team to make informed decisions about when they can launch email campaigns based on the status of multiple complex, orchestrated cron jobs that need to complete successfully before it's safe to proceed, targeting over a million customers with our latest deals.

So I have asked, and while I wait for the green light (usually a couple days within any large enterprise) I have some time to explore the free community edition and see what I can build in the meantime with what I have.

During this 100 day learning project, I've been bouncing between two toy apps that help me learn. One app is command line chat bot app and the other is maven-based stats app that requires Tomcat so that can run a web server to display web pages.

This stream of consciousness post will eventually get to the steps it took me to render some html via Java. But it's less about rendering, and really only a final check before deploying to GCP. For the past few years, I've been increasingly interested in the shape of data over attempting to visualize it. I'm more interested in the complexity of how distributed systems communicate; how is the data exchanged and safe guarded so that the system can always recover and there is a sense of consistent flow where thresholds are rarely reached.

When I tried to run this web app with the community edition, I was immediately struck by the lack of run button that was present in the Ultimate edition. I could not figure out how to add the Tomcat server which was easy to do in the licensed version. I tried both Smart Tomcat and Tomcat Runner plugins without success on the mac.

After a googling adventure where I stumbled upon this article Step by step Maven Tomcat WAR file deploy example by Cameron Mackenzie which lead me to his github for the Rock Paper Scissors github repo which seemed like a fun sample project to get up and running.

Now this is the part where I step in as a guide as say that while I recommend reading his article first, you may not need to follow his step by step instructions. In fact, I tried and faltered. Instead, I did the following.

brew install tomcat
cd /usr/local/Cellar/tomcat/10.0.13/bin/
catalina start
go to your browser and see localhost:8080
refer to Cameron's step about grabbing the roshambo.war file from the specific branch
paste that war into /usr/local/Cellar/tomcat/10.0.13/libexec/webapps
notice that when you paste in the war, it creates a folder and expands its contents
go back the browser and view localhost:8080/roshambo
rename roshambo folder to rps and try to view it again

I'll also credit this youtube which tipped me off on how to copy the war into Tomcat.

And voila! I have a working rock paper scissors app in my browser which is gives me enough confidence to return my app and continue experimenting.

Now, the final part that I wanted today was the ability for Maven to build the war file and move it Tomcat. And thanks to this stackoverflow thread I was able to tweak the ship for my mac:

<plugin>
  <artifactId>maven-war-plugin</artifactId>
  <version>3.2.0</version>
  <configuration
<outputDirectory>/usr/local/Cellar/tomcat/10.0.13/libexec/webapps/</outputDirectory>
  </configuration>
</plugin>

Simply calling mvn package performs the desired results. I decided to change a few values and learn a bit about the system.

Again, all I want to use Tomcat as final check for little UI that I have, and mainly use IntelliJ for the big services backing it. I've worked alongside many devs who would be entirely comfortable with no UI whatsoever but I prefer at least some parse, minimal controls that empower non-technical people to make mighty leaps of faith.

Dig Through Python And Create Game Art with Playscii

brandon flowers — Thu, 10 Jun 2021 16:37:00 +0000

One of the best ways to learn any language is to dig through the source code of a full application. It may be daunting at first, but if you have a sense of where the application begins, you should be able to find the main application file. From there, you can start to explore various paths and learn how it operates.

I have been following the playscii project (and several artists using it) on Twitter and wanted to try the tool myself.

I purchased it for the paltry default sum of $2, and was pleasantly surprised to see that it includes the source code along with the compiled app.

Playscii can be used to create art that is ideal for tile-based games.

// Detect dark theme var iframe = document.getElementById('tweet-1401997698228789251-713'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1401997698228789251&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1298363766577520640-456'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1298363766577520640&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1380683117598371843-81'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1380683117598371843&theme=dark" }

First, I tried to launch the application but my Mac refused to open this app.

“Playscii” cannot be opened because the developer cannot be verified.

macOS cannot verify that this app is free from malware

Ok the app wasn't going to work, but what about the source code?! As an ever-learning python dev, the source code is much more valuable than any compiled tool.

My first attempt to install the source code failed unfortunately but I wasn't deterred yet. I have had other pythons app fail the first time and knew I might be able to get past this hurdle with a little determination.

python3 install -r requirements.txt

It did not finish building the wheel. I waited a half hour and then abandoned this approach. Next, I turned to googling and discovered what appears to be the original repo along with another dev's update to it. So thanks to Michael Lazar's build I was to able to use his updated requirements.

appdirs==1.4.0
gprof2dot==2015.12.1
numpy==1.20.1
Pillow==8.1.2
PyOpenGL==3.1.5
PySDL2==0.9.7

This time all the requirements installed without issue on my Mac (Catalina with Python 3.9). Then I tried to run the app

python3 playscii.py

This didn't work, and my next hoop was related to the sdlmixer library. I can give live without audio support, and simply decided to see if I could comment out that out and try again.

I only had to do a few tweaks with the main playscii file to disable the audio.

# from audio import AudioLord
# from sdl2 import video, sdlmixer
from sdl2 import video

Be careful to disable the audio but not the ui here:

# self.ui,self.al = None, None
# self.al = None
self.ui = None

And presto! ✨

// Detect dark theme var iframe = document.getElementById('tweet-1403004357772148750-568'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1403004357772148750&theme=dark" }

As you can see from own tweet, having a little bit of friction in your game that an eager dev can overcome on their own actually encourages them to promote to your work.

Ideally though, everything should just work though. But you wouldn't be able to focus on the core value if you had to manage every build across multiple platforms as an indie developers; that's why other indie developers are here to help!

Composing React Hooks

brandon flowers — Sun, 02 May 2021 14:59:22 +0000

As a leader, working with several bootcamp developers entering their second or third years as a professional javascript developers, we have a certain responsibility to guide them and introduce computer science concepts that they may have missed in their compressed education.

There is a natural interest to refine their craft by diving into Functional Programming. After a solid year or two of Javascript programming, they would have mastered enough of the fundamentals to be open to learning more.

They may get turned on to FP after reading a blog post or through co-workers. The first steps in learning FP would be to read a book and soak up a few videos on the basic principles. Once you have the concepts, then you can begin experimenting with them.

To the gain of the benefits of FP, you do not need a library right away. Many FP practices, like writing more testable, pure functions that when given an input always return the same output, can be applied in your daily coding without importing an another library.

Adding a library like react-hook-compose or ramda will give you extra functionality when you are ready for it. They do require extra brain power so I would not recommend approaching them until after you have absorbed at least the basics of FP.

What is composition?

Have you ever realized that after writing within the same React file, your code has swelled to hundreds of lines and its becoming unwieldy to manage? This becomes even more pronounced when you try to share this code with a fellow developer who shrieks at the size of your commit with appropriate emoji.

We want to refactor large files into smaller smaller so that they are easier to review and test.

Ramda

I had invested several years in learning the ImmutableJS library and feel that I know it well enough that I wanted to experiment with a new FP library. In my mind, ImmutableJS and Ramda are comparable libraries. There is some drama about ImmutableJS being unmaintained but I have never had an issue with it and sometimes a library can reach a certain maturity without needing more work.

My first impression of Ramda is that the documentation already feels more like Clojure which I've studied in the past. It mentions terms like or unary or arity which are probably new language to javascript developers unless you have already learned other FP focussed languages like Haskell, Clojure, or Elm. Like Clojure, Ramda offers the javascript a new world of functionality, providing more tools to safely transform data without worrying about mutation.

The Ramda library provides a compose function which allows you to take smaller files and bring them together through incremental steps.

const Poster = ({ id, coverUrl, title }) => {
  return (
    <ListItem key={id}>
      <Image url={coverUrl} a11y={title} width="100" />
    </ListItem>
  );
};

const makePosters = map(Poster);
const getPoster = pick(["id", "coverUrl", "title"]);
const getPosters = map(getPoster);
const TitleList = compose(makePosters, getPosters);

const Posters = ({ tvSeriesDataset }) => (
  <Column>
    <SubHeadline size="large">TV Series</SubHeadline>
    <List customClass="list">{TitleList(tvSeriesDataset)}</List>
  </Column>
);

I've prepared a Ramda codesandbox exploring how to compose several react functions. For instance, we can write a list component in one file and a list item component in another file. As the author, this can become subjective when is a file too small? In my case, I decided to write them as separate functions to be exported and re-used by other components, but I left them in one file because the line count was already under 100.

Along with compose, this codesandbox also features various ways to transform the data at each step of the composition. I started this experiment by simply googling "codesandbox ramda" and leveraged some code from other authors giving them credit within the readme.

react-hooks-compose

This library is almost self explanatory. It does what you would expect it to do. Similar to compose in Redux, you can take a presentational component and apply several hooks to it.

What is the motivation to use compose? Through compose, we can write hooks external to our presentation and re-use them within other components. In this experiment, I take 3 hooks: useState, useQuery, and useMutation and combine them with a presentation component. Each part is a separate file.

With composeHooks can add hooks to our presentational component following this pattern:

const ViewComponentWithHooks = composeHooks(({ myQuery, myMutation}) => ({
  useCaptureInput: () => useCaptureInput(),
  useQuery: () => useQuery(myQuery),
  useMutation: () => useMutation(myMutation)
}))(ViewComponent);

I had some fun creating this react-hooks-compose codesandbox which displays some of my favourite recent TV series. Most of these series were recommended by friends.

Conclusion

Over the last year, I have watched a team of mainly bootcamp developers grow to a point where I feel like they have become peers and can sagely criticize the DRYness of my own programming. We are in the process of introducing FP at Loblaws Digital, beginning with the fundamentals and, through these experiments, I'm attempting to convince them (and myself) that should introduce Ramda into our codebase.

It's not enough for me to mention ImmutableJS or Ramda in a meeting, I want my team to follow my example and experiment with them. I hope they see this post as motivation to create their own codesandbox so that I in turn can learn from them.

If you've never looked at Clojure before...

brandon flowers — Tue, 14 Aug 2018 14:30:58 +0000

If you've never looked at Clojure before, this brief article may be your first taste and I hope you savour the experience. Clojure is an alternative to Java. It features interop with Java meaning you can access core Java functions within Clojure. It is a server side language and thus you would also need either Javascript or ClojureScript to write web-based client code.

I'm working on a series of Clojure & ClojureScript lessons to help me learn the language, and I've completed the first lesson introducing map, filter & reduce which I'd like to share with you.

Why should you learn Clojure? If you are a fan of Functional Programming design patterns, you will appreciate the immutable nature of Clojure functions and its FP approach to server side development producing highly testable code. Like Python, Clojure also features a REPL where you can experiment and test functions of your program vastly speeding up development.

After a few weeks of writing Clojure and receiving valuable feedback from the much more seasoned Clojure devs at TODAQ, I've managed to get several pull requests merged into our master branch and I've mainly learned to simplify my Clojure functions by pulling out complex sections and breaking them up into smaller, more manageable functions, increasing code readability. Once you begin to refactor deeply nested functions, all those braces begin to make sense and you can achieve some nice terse, code clarity.