Refactoring JavaScript code into tiny, pure, composable functions

💛 NordVPN (Episode Sponsor)
Coupon code: funfunfunction (Use to get 1 extra month when signing up for the 3-year plan, which also gives 75% off)

🔗Code from the episode

💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

[philipph]

Wow, the different scene constants are a wonderful example of currying. I understood the concept of it but still didn't knew when to use it. Great Video!

[MecchaKakkoi]

Larger font would have been good as it's very difficult to read on my tablet. A bit of scrolling now and then would be ok if we're following along :)

[lukaszklejszta]

28:10 you are confused about what R.curry do, you can make it more clear just by:
const encrypt = secret => data =>
now you dont use third party library and nobody has to know what R.curry does if know what the function is.
compose function you can really make by something like that
const compose = (mixins: Array, target) => mixins.reduce((arg, fn) => fn(arg), target)

[wazazaby]

OK so after watching a lot of videos on functionnal programming, I have a question regarding the code that you refactored in this vid : in the function, you call another function ("triggerRequestScene") without passing it as a parameter, doesn't it means that the function is impure ? Since it's calling something that is declared outside of the first function's scope

[krige]

To duplicate lines without clearing the clipboard, select them and press Alt+Shift+[Down|Up]

[bla]

I wonder why nobody in comments mentioned that line 21 is wrong from 40:10 on:) Did you people watch the whole video?:D

[suhashc]

Can you make an video on how to use performance and memory tab of chrome developer?

[MiladCale]

I'm from an Arabic country (Syria), I can tell you that it doesn't really matter since I write code in English, I have to reason about it in English (left-to-right). Also, even if you consider the language direction, you always have (compose vs. pipe) so I wonder if it's easier for you to reason about pipe! btw, Arabic is not the only language that's written in right-to-left direction. Mvh!

[rafaellerescapone]

quick question: why is trigger defined as "R.curry((secret, data) => ...)", instead of "secret => data => ..."

[outlanderoutlander]

Thanks, by the way, your beard is awesome!

[ReinaldoTrindade]

MPJ, please increase the zoom on VSCode. It's very difficult to watch this on a phone.

Best regards

[LazyGod]

All the functions seem to be reasonable, but the encryptWithSecret doesnt make sense to me in this context.
Why it isnt a pure function? Am I missing something? I was hoping to get the answer for more than a half of this video.. :D

[travholt]

Nice video, but the editor footage isn't in sync with the sound, which makes the code editing quite uncomfortable to watch.

[alexschin]

repl.it is a good tool to share code, I think it would be perfect for your life coding

[LosEagle]

I don't get the constant hate on oop

[kirillstepanov]

So sad, that you stopped making really good videos. I tried to watch some of new, but... And forum is not as good as it was when I joined it anymore.

[ubuntu]

I think you lost half the audience using Ramda for currying. That's not a concept a lot of people understand really well, so if you hide that behind a library, you don't help people. They have to know Currying concept AND Ramda library.
You should have done that in javascript first (to explain currying smoothly) then refactored using ramda if you liked.
I know that you already did in other videos but there are always new viewers that did not watch old videos.

Because in my mind there are less magic behind :
const encrypt = secret => data =>
than behind
const encrypt = R.curry((secret, data) =>

For composition though... javascript does not really help... (would be great to have that in the language someday !)

You could still split trigger function in two and compose the two, if you would want to push even further.
I like the way you're baby stepping, just don't forget to run your test at every step, cause the ending code does not work : you forgot to remove the last parameter "sceneName" in line 21. In the same register, using a real IDE (don't hit me please) would help to find some errors like when you declare twice the same const for example.