Snippet Architecture

[teesloane]

Read this to:

• Get insight into how this project will attempt to structure the overall code.

What I expect you to know:

• Basics of functional programming (don't worry if you don't, I barely do myself)
• How reduce works

Background
Recently I worked on a project that made use of a "function pipe" to both organize and execute the entirety of a document's code. I had never come across this methodology before. Basically things worked by creating a long function pipeline that continuously passed a state object down a pipe of functions.

Why is this interesting? Well, personally, I've always found it a bit tricky to figure out how to organize plain ol' javascript projects. Frameworks and libraries are great, especially in that they often recommend you organize your code to some (albeit, however small) standard. But we're not writing in a framework (happy to answer why that is if someone wants to know -- just create an issue).

Resources
This post helped me learn how to create a pipe function. Don't worry if that post confuses you — it's a fair bit to take in.

The goal here is to create a pipeline that will perform all the operations we need to go from nothing ... to something.

Implementation

I have already implemented an example of this in my first prototype of the snippet , but it was not geared up for handling asynchronous actions (ie. fetching an emoji_count from a database.

Here's a basic example

The pipe being declared:

  function pipe (...fns) { return fns.reduce(
    (f, g) => (...args) => g(f(...args))
  )}

// note, this example is from the linked blog post. It is very terse, and not super clear what it's doing. When we write our pipe, it might start like this for the sake of making things easier to get moving, but it definitely needs better variable names (`f` and `g` are too unclear)

the pipe being invoked; and it's end result being called with a state object

  // --- Functions --- //
  const render = pipe(
    get_all_ids,
    make_mounts,
    populate_mount,
    style_make_sheet,
    add_click_event
  )(state)

So if you look at the above code block, each parameter of the pipe function is actually a "step" that our state goes through. If you're confused, don't worry! Let's humanize this a bit.

You have a sweet bike you want to fix up for summer time riding. You invite 5 friends over who are good at fixing bikes — each one of them has a real specialty.

James: Looks at your bike and says: "these tires need air!". He puts air in the tires. Then he passes the bike to Carly.

Carly: Looks at your bike and says: this bike needs a new chain. Good thing I have my chain breaking tool! She removes your old rusty chain and puts a new chain on and passes the bike off to Ren.

And the chain goes on. (ha, pun).

In this example, your friends are the FUNCTIONS of the pipe. And your bicycle is the STATE. Once your bike passes through the entire pipe you go from having a rusty piece of junk to a shiny new set of wheels. Sweet.

Nice. I think we're getting onto things now.

I'll be back to add more soon.

[teesloane]

The function pipeline is alive and somewhat filled out! If you'd like to see the process of it's making feel free to checkout the youtube channel.