DEV Community: Robbie

RamdaJS: transduce

Robbie — Fri, 03 Apr 2020 08:41:16 +0000

When I was looking at the Ramda docs I came across the transduce function. And at first I found it rather difficult to understand what exactly the function did and what you could do with it. So I did some reading about transducers in general and started trying some things to fully understand. In this post I will describe the steps I took towards fully understanding this transduce function.

What is a transducer?

First things first. What are transducers and what can we do with them? Well, you may have guessed it already, but the word transduce is just a combination of the words transform and reduce. And that is also what it does:

A transducer transforms items while reducing them.

I assume you have an understanding of what reducers are. If not, there are a lot of resources out there that will help you and it's not that difficult.

Doc example

Now we have some idea of what a transducer does, we can have a look at the example code from the Ramde docs and try to understand:

const numbers = [1, 2, 3, 4];
const transducer = R.compose(R.map(R.add(1)), R.take(2));

R.transduce(transducer, R.flip(R.append), [], numbers); //=> [2, 3]

So what is happening here?

The first 2 lines are pretty clear, I think. We declare an array of numbers and create a transducer function which is just a composed function of:
- R.map(R.add(1)): map over an array and add 1 to each element
- R.take(2): take the first 2 elements of an array
- We use R.compose here so it will perform a right-to-left composition, i.e. first take and then map.
The last line is where we are going to use the transduce function. The function accepts 4 arguments:
- The transducer: function that performs the transformation
- The iterator: in our case we will append the current value to the accumulator
- The initial value
- The list to iterate

When we run this example code the result will be an array of [2, 3]. And that is understandable because in the composed transducer function we:

Take the first 2 elements of the array -> [1, 2]
Add 1 to each element -> [2, 3]

But now you may ask yourself: What is the difference then with just running the composed transducer function with the numbers array? That will have the same result, right? Yes, it has!

// Only running the transducer function with the numbers array will return the same result
transducer(numbers); //=> [2, 3]

So, why are we using this R.transduce function and not just the composed transducer function? What is the added value of using R.transduce?

Benefits of `R.transduce`

I found this point confusing at first, but it's pretty simple if you understand. Because the benefit of using transduce is performance 🎉

Transducers are all about replacing multiple trips through the same data with a single one.

So with using R.transduce the composed transducer function will be used in a different optimised way, where the array is only iterated once! We can make that clear by replacing the take with another add and by adding some logs to the transducer function:

const transducer = R.compose(
  R.tap(x => console.log('LEFT')),
  R.tap(x => console.log('ADD 1 to', x)),
  R.map(R.add(1)),
  R.tap(x => console.log('ADD 2 to', x)),
  R.map(R.add(2)),
  R.tap(x => console.log('RIGHT'))
);

Now you will see a difference in output when using the transducer directly and when using it with R.transduce.

transducer(numbers); //=> [4, 5, 6, 7]
// RIGHT
// ADD 2 to [3, 4, 5, 6]
// ADD 1 to [4, 5, 6, 7]
// LEFT

Understandable and as expected:

Iterate over the array and add 2
Iterate over the array (again!) and add 1

Now, can you guess what R.transduce will output when using our modified transduce function? Because it still had a surprise for me when running it for the first time. Let's see:

R.transduce(transducer, R.flip(R.append), [], numbers); //=> [4, 5, 6, 7]
// LEFT
// ADD 1 to 1
// ADD 2 to 2
// RIGHT

// LEFT
// ADD 1 to 2
// ADD 2 to 3
// RIGHT

// ... and the same for the numbers 3 and 4

What we can see clearly now is that the array is only iterated once. Each element is passed to the transformer function before moving to the next element. So that is the performance benefit we were talking about.

But what you also must notice in the output is that R.transduce is performing the operations left-to-right instead of right-to-left what you would expect when using R.compose. And that is just something you must know about transducers:

Transducers compose in an opposite order.

So, using R.compose with a transducer performs left-to-right and using R.pipe with a transducer performs right-to-left. The exact opposite when using normal function composition.

Conclusion

Reading the Ramda docs about R.transduce can be very confusing at first. But in the end it is not that difficult to understand what the function does. At least, I hope you feel the same after reading this post.

Transducers can just be very useful if you need to combine a number of operations (map, take, filter) over a list. With a transducer it's then possible to optimize this process and keep your code clean.

If you still have any questions about transducers, don't hesitate 😄

Cheers

How I became a software developer in the traditional way

Robbie — Fri, 27 Mar 2020 14:29:50 +0000

Lately I read and hear more and more stories from people who have become software developers by following a bootcamp. I didn't follow a bootcamp but became a software developer in the more traditional way. So I thought maybe it's fun and interesting to write this story down.

Teenager

It all started for me as a 14 year old boy in my room behind the computer. I don't remember exactly how but I got in touch with so-called click-to-pay websites. In short you got paid by clicking on a link or by having others clicking on your link. You would receive like 1 cent per 1000 clicks. And I wanted to become rich so… 😆

I found out that with clicking on your own link every day you are not going to earn much. But there was also an option to start your own click-to-pay website. With that, you pay others a little bit less than you receive for clicking on your links. And yes, this was actually a kind of pyramid scheme. But you could earn some pocket money with it, what is nice as a teenager.

So I bought a website and started my own click-to-pay website.

And that's where it all started for me. I started experimenting, made changes to the layout, in PHP scripts, in the database. Often after school and in the evenings, with a real trial-and-error approach, just on the live website... 🙈 It was really a lot of fun, especially when something at the end worked out as you wanted.

In this way I taught myself the basic knowledge of PHP, HTML, CSS, JavaScript and MySQL. And I went on with it, found it interesting and wanted to make more. Which eventually enabled me to create my very own click-to-pay script.

Thanks to web.archive.org you can still visit a website that used it.

So, you are 16 and you want to learn more. And I took an important step in that when I came into contact with the Laravel framework.

At that time Laravel 3.0 was just released and it was not very popular yet.

With Laravel I really took big steps in my development towards becoming a software professional. I learned a lot of new things, such as:

MVC Pattern
Dependency Injection
Inversion of Control
Object Relational Modeling
HTML templating (blade)
Database migrations
And more things that I forget now...

I made various (hobby) websites in Laravel, including a website for the local football club.

It's still online but please don't try to hack it 🙏

With using Laravel, I honestly thought I was there, that I knew pretty much everything about programming. I was quite wrong of course. For example, my controllers were huge with all the business logic in it. But I certainly already had a lot of knowledge for a 17 year old boy, I think.

Student

Because my interests in web development, my choice to go study computer science was no surprise for anyone. However I did almost stop after the first week, because I was really wondering what I was doing there. I mean come on, a 2 hour lesson on HTML and CSS and how to give a text a different color... I was already able to do that 4 years ago. In short, the first half year was not very challenging for me. But it was also logical that it all started from zero, because there were also students without prior knowledge. And eventually I'm very glad that I went through. Because I was learning a lot of other things, besides the actual programming, that are important for a software professional, like:

Working in teams
Communication
UML and other modelling tools
Writing documentation
Testing

I think these are the important skills you learn in college and I'm wondering if you will learn them at a coding bootcamp. At my study we didn't really learn a programming language though, you had to do that out of your own interest (in my case that was still Laravel and PHP).

During college I never had to write a single line of JavaScript code.

Professional

After 4 years I graduated and my professional career could start. First, I was looking for a job in Laravel and PHP, but in the end I got a job as a NodeJS Backend Developer at a digital agency. Which I also liked because in that way I could learn something new, and it was JavaScript so not really new new. And in addition, I was very happy that I could just be the backend developer and not have to look at the frontend.

I couldn't have imagined then that there would come a time that I would start enjoying frontend stuff.

Yet, I already left my first job after 7 months. The most important reasons for this, were:

No real challenges
No work
- After a project was finished, I had to entertain myself for 2 months, waiting for the next project.
Not feeling valued
Lack of trust

In addition, I received an offer from a cryptocurrency startup which was really appealing to me. And so I made my first career move.

And at this startup I got a lot of freedom and, with that, a lot of responsibility. I learned a lot, worked on challenging and fun projects, including my first app and discovered the fullstack developer in me.

With using React I suddenly liked doing things in the frontend.

I'm very curious what my future career will bring me and what I will learn in the coming years. Because that's really the best part about being a software developer, constantly learning new things. You could even say it's a never ending bootcamp 😉

So that's my life as a software developer in short so far and I'm only 24 years old. A lot of beautiful years to come! Keep on coding 😄

Cheers

Cancel your promises when a component unmounts

Robbie — Sat, 21 Mar 2020 08:25:23 +0000

In basically all React applications you will need to perform some async operations in your components. A common example would be to fetch the authenticated user on mount:

import useDidMount from '@rooks/use-did-mount';
import { useState } from 'react';

export default () => {
  const [user, setUser] = useState();

  // Fetch the authenticated user on mount
  useDidMount(() => {
    fetchAuthenticatedUser().then((user) => {
      setUser(user);
    });
  });

  // Rest of the component...
};

At first glance, this all seems fairly valid, but it can cause the following error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

So what does this mean? It is quite logical what happened if this error occurs in the above example, in that case:

The component unmounted before the "fetchAuthenticatedUser" promise was resolved.

What means that if the promise does resolve:

The setUser function is called on an unmounted component.

This is not allowed and to resolve this issue:

The promise has to be canceled when the component unmounts.

So how are we going to fix this?

Component still mounted?

First we need a way to check if a component is still mounted. We can do so
by making use of the cleanup function in a useEffect hook.

Every effect may return a function that cleans up after it.

So with the help of this cleanup function we can keep track of the mounted state and we can fix the potential error in the example code:

import useDidMount from '@rooks/use-did-mount';
import { useState } from 'react';

export default () => {
  // Keep track of the mounted state
  const mountedRef = useRef<boolean>(false);
  const [user, setUser] = useState();

  // Fetch the authenticated user on mount
  useDidMount(() => {
    // Is mounted now
    mountedRef.current = true;

    fetchAuthenticatedUser().then((user) => {
      // Before calling "setUser", check if the component is still mounted
      if (mountedRef.current) {
        setUser(user);
      }
    });

    // Also in "useDidMount" we can use this cleanup function because it is just a wrapper around "useEffect"
    return () => {
      // Called before unmount by React
      mountedRef.current = false;
    };
  });

  // Rest of the component...
};

This will fix the potential error already. However, we probably need to do this in many components and therefore we can make it a little bit cleaner and more DRY with a custom hook called useMountedState:

useMountedState

We basically want to extract the "mountedRef" part from above code in a custom hook. So we can then return a function which returns the current mounted state of the component:

import { useCallback, useEffect, useRef } from 'react';

export default (): () => boolean => {
  const mountedRef = useRef<boolean>(false);

  // Basically the same as "useDidMount" because it has no dependencies
  useEffect(() => {
    mountedRef.current = true;

    return () => {
      // The cleanup function of useEffect is called by React on unmount
      mountedRef.current = false;
    };
  }, []);

  return useCallback(() => mountedRef.current, []);
};

Next, we can use this custom hook to make the fix a little bit cleaner:

import useDidMount from '@rooks/use-did-mount';
import { useState } from 'react';
import useMountedState from './useMountedState';

export default () => {
  const isMounted = useMountedState();
  const [user, setUser] = useState();

  // Fetch the authenticated user on mount
  useDidMount(() => {
    fetchAuthenticatedUser().then((user) => {
      // Before calling "setUser", check if the component is still mounted
      if (isMounted()) {
        setUser(user);
      }
    });
  });

  // Rest of the component...
};

Already a little better, right? But we can do it even better with another custom hook, which will use the useMountedState hook internally. We will call this one useCancelablePromise:

useCancelablePromise

The purpose of this hook is to create a wrapper function that we can use in our components around promises. So the hook needs to give us:

A function which accepts a promise and returns a promise
Where the returned promise resolves or rejects with the result of the accepted/wrapped promise
Only when the component is still mounted

May sound a bit tricky, but it's pretty simple:

import { useCallback } from 'react';
import useMountedState from './useMountedState';

export default () => {
  // Use our just created custom hook to keep track of the mounted state
  const isMounted = useMountedState();

  // Create our function that accepts a promise
  // Note the second parameter is a callback for onCancel. You might need this in rare cases
  return useCallback(<T>(promise: Promise<T>, onCancel?: () => void) =>
    // Wrap the given promise in a new promise
    new Promise<T>((resolve, reject) => {
      promise
        .then((result) => {
          // Only resolve the returned promise if mounted
          if (isMounted()) {
            // Resolve with the result of the wrapped promise
            resolve(result);
          }
        })
        .catch((error) => {
          // Only reject the returned promise if mounted
          if (isMounted()) {
            // Reject with the error of the wrapped promise
            reject(error);
          }
        })
        .finally(() => {
          // Call the onCancel callback if not mounted
          if (!isMounted() && onCancel) {
            onCancel();
          }
        });
    }),
  [isMounted]);
};

Now we can change our example code for the last time:

import useDidMount from '@rooks/use-did-mount';
import { useState } from 'react';
import useCancelablePromise from './useCancelablePromise';

export default () => {
  const makeCancelable = useCancelablePromise();
  const [user, setUser] = useState();

  // Fetch the authenticated user on mount
  useDidMount(() => {
    makeCancelable(fetchAuthenticatedUser()).then((user) => {
      setUser(user);
    });
  });

  // Rest of the component...
};

Cleaner and still safe! Because the promise returned from makeCancelable is only resolved (or rejected) if the component is mounted 🎉

Library

The source code of both custom hooks created in this article can be found on my Github:

useMountedState
useCancelablePromise

And they are also both published as a npm package. So you can use them directly in your React (native) project by just adding them:

yarn add @rodw95/use-mounted-state
yarn add @rodw95/use-cancelable-promise

So make your promises cancelable and safe! Happy coding 😀

Cheers

Show DEV: Writing a Trade App in React Native and Expo

Robbie — Fri, 20 Mar 2020 07:32:34 +0000

In this article I want to describe the process I went through while creating an App with React Native and Expo as a single developer on the task. Which is quite exciting if you don't have that much experience with App development...

Goal

The goal was simple: create a Trade App for the Nocks cryptocurrency platform using there publicly available REST API. The App will have to become available on both iOS as on Android and the features it should have are:

Authentication (with Nocks OAuth)
App (un)lock with PIN, TouchID or FaceID
View available assets
Make deposits
Make withdrawals
View history of trades and transactions
Overview of markets
Per market:
- View open orders
- Cancel open orders
- Place a new order
- View history (list and graph view)
- View order book (list and graph view)
Various notifications
Various settings (night mode, language etc.)

So with such a list of features, where do you start?

Approach

The first thing I did was creating user stories out of the features list. Doing this gave me a better idea of what the expectations were for the client and for the end users.

With these user stories in place the plan was to use an agile-like approach. Of course with some tweaks because of the small "team" that was involved in the project:

Client: The man with all the ideas
Product Owner: Point of contact for me as the developer
Developer: Me, the guy who had to make the product real

So how was this "agile" approach working?

Every week I discussed my work with the product owner. I showed him the progress that I made and the user stories that were ready to test. Together we tested these user stories and checked if these could be considered as done. After that we discussed about the user stories that could be picked up next.

By working this way, the product owner and the client were always well informed about the state of the development process. And also for me it was very useful to retrieve quick feedback on my work.

Stack

As I mentioned before, I didn't have a lot of experience in App development. I only had experience with creating a small App with React Native and Expo. Although this was just a small project, the impression I got with these frameworks was very positive. And because there was no real reason to not use them, I chose to go with it.

Looking back, I think that was the right choice. I experienced Expo as a great tool with some great advantages which can really speed up your development process:

Great documentation and community
Easy to use build services
Over-the-air updates

However there were also some small issues I came across while using Expo:

I wanted to use a library which depended on a later version of React Native than Expo supported. Because of that I needed to create a workaround and wait until the next Expo release.
Expo includes some libraries out of the box. One of them caused a deprecation warning when publishing to the App Store. It was only a warning... but it does not feel good that you have no control over it.

In the end these two issues were not a big problem for the App. And if it was: there is always a possibility to eject from Expo and go back to React Native only. Looking at the documentation, ejecting doesn't seem to be very difficult either, but you'd rather not do it if you don't have to. And I didn't have to 😄

Beta testing

After about 3 months the MVP was ready. It didn't yet have all the features, but it was usable and had added value for the end users. So it was ready to be tested by some "real" end users. First only for iOS with Testflight and later on also for Android with Google Play beta testing. The goals for this beta testing phase were:

Retrieve feedback for the App in general
- Looks, feeling, intuitivity etc.
Check the stability of the App
- We used Sentry to track unexpected errors
Continue with developing the remaining features

The over-the-air updates that Expo out of the box supports came in very handy during this phase. With that I could just push fixes without having to create new versions in the stores. And the testers didn't have to download a new version each time. This makes verifying fixes with testers very easy and fast. Also with the new features that I developed during this phase I could often make use of these over-the-air updates.

After about 1,5 month of beta testing we could consider the app as stable and it was ready with all the requested features: time to publish!

Result

I must say that I'm very proud of the result. After the App went live there were only some minor issues and each of them could be fixed pretty fast. And yet again the over-the-air updates came in very handy with this.

If you get started with such a project where you are the only developer and you are working with frameworks you have not much experience with, it can be quite scary at the beginning. And you will sometimes wonder if you are able to complete the job. But if you do manage to finish the job, you will eventually learn a lot from it and it will give you a lot of satisfaction. Especially if the client and the end users are very positive about the product you made. So sometimes you just need to accept the challenge and go for it!

Curious about the App?

Here are some screenshots to give you an idea:

And of course if you are interested in downloading the App. It's available in the App Store and in the Google Play Store 😊

You want to create your fist App?

React Native (with or without Expo), Flutter, Ionic or just going fully native, there are so much possibilities and I only used one of them... So I can't possibly make a comparison or give any advice. The only thing I can say is that I really liked React Native + Expo. But whatever framework you choose: just get started! Because app development is just a lot of fun and you will probably learn a lot from it.

And if you choose Expo (great choice 😉) here are some helpful links:

Expo documentation clear documentation and useful tutorial
Expo forum very helpful community

And if you have any questions, don't hesitate to leave a comment 😄

Cheers

RamdaJS: Using it for the first time

Robbie — Thu, 19 Mar 2020 07:39:00 +0000

Ramda is a JavaScript library that I know for a while but have never used before. Now that I want to use it in my projects, I will write about my experiences with it in some blog posts. And in this article I will describe my first experience with the library. But first things first:

What is Ramda

Ramda describes itself as follows:

“A practical functional library for JavaScript programmers.”

Well that covers already a lot I think. It’s a toolset like the popular lodash but in a more functional style:

It embraces immutable data and pure functions
All functions are curried automatically

So it’s especially useful if you want to do functional programming in JavaScript (or TypeScript).

Using Ramda for the first time

Ramda was one of those libraries on my list to check out. So I included it in a React project where my main goal was to play with some new tools (I plan to write some blogs about this “test” project as well). The Ramda functions I used the most during this project were:

pipe

I think it's clear what the pipe function does for everyone that is into functional programming: it performs left-to-right function composition.

const isNotEmpty = R.pipe(R.isEmpty, R.not);

And of course Ramda also has a compose function which does the right-to-left function composition.

const isNotEmpty = R.compose(R.not, R.isEmpty);

These two functions are simply indispensable in a library that describes itself as functional.

cond

You can use the cond function as an alternative for if-else constructions. In my test project I used it to create a function that will call the correct error handler based on the given error:

// Function to check if an error has a certain code
const hasErrorCode = (code: string) => R.allPass([
  isPlainObject, R.has('code'), R.propEq('code', code),
]);

// Condition statement which will call the correct error handler
const errorHandler = R.cond([
  [
    hasErrorCode('NotAuthorizedException'),
    ({ code }) => {
      // Handle "NotAuthorizedException"
    },
  ],
  [
    hasErrorCode('UserNotFoundException'),
    ({ code }) => {
      // Handle "UserNotFoundException"
    },
  ],
  [
    R.T, // Functions that always returns true
    () => {
      // Error handler fallback
    },
  ],
]);

// Call error handler
errorHandler(error);

Looks pretty clean, right? Imagine writing this with if-else statements...

tryCatch

If you don't like to have try... catch... statements in your code like me than this function will really help you. It's more of a wrapper around try catch statements which accepts two functions: a tryer and a catcher. When the tryer does not throw an error the result of the tryer will be returned. On the other hand, if the tryer does throw an error the catcher will be called and it's result will be returned. For example:

// In plain JavaScript you will have something like this
let result; // Ugh, we must use let here

try {
  result = mayThrowAnError();
} catch(error) {
  result = null;
}

// In Ramda with tryCatch you can do this
const result = R.tryCatch(
  () => mayThrowAnError(),
  R.always(null),
)();

In my opinion much cleaner and you don't have to use let 🎉

propEq

A simple function that checks if a property of an object is equal to the given value.

// Find a person where name = "Robbie"
const person = persons.find(R.propEq('name', 'Robbie'));

And yes, this can also be easily done in plain JavaScript too:

// Find a person where name = "Robbie"
const person = persons.find(x => x.name === 'Robbie');

The question is: what is more readable? I guess you can discuss that.

Conclusion

Ramda offers a lot of helpful functions for functional programming and function composition. It helps (not enforce) you to write functions without side-effects (pure) and use immutable data. So if you think these concepts are important in good code (you should, in my opinion) it’s definitely a library to check out. It has great power, but….

Don’t over use it. Sometimes just plain JavaScript is better or clearer. A good software developer always keeps the readability of code in mind. Maybe you can write the most complex things with Ramda but you should always ask yourself:

Will it be easy for my colleague to read this code and understand directly what’s happening?

For example, you can debate about what is more readable:

// A function that accepts a string and checks if it's not in an array

// Using Ramda
const notInArray = R.pipe(R.flip(R.includes)(array), R.not);

// Using plain JavaScript
const notInArray = code => !array.includes(code);

It’s big and has a lot of functions. It will take some time to familiarize yourself with all of them. I probably have missed a lot of powerful functions I could use in my first project. However you will also notice, when you start using Ramda, that you will instinctively think:

“Uhm there is probably a Ramda function for this.”

To learn all the possibilities you should just include it in your project and you will learn it along the way.

TypeScript and Ramda…. First of all I must note that I’m not the biggest TypeScript expert so that has to do with it too. But in my first project I had some problems with return types that where incorrectly or not automatically set. Which is a pain because you know the function works but the compiler is complaining. An example of a problem that I had with TypeScript and Ramda:

// This will cause an error
return pipe(
  R.reject<NonNullable<Item>>(R.propEq('id', item.id)),
  R.append(item), // TypeScript error: No overload matches this call.
)(items);

// Turns out you have to tell the reject function that it's dealing with an array
return pipe(
  R.reject<NonNullable<Item>, 'array'>(R.propEq('id', item.id)),
  R.append(item),
)(items);

All problems with TypeScript and Ramda seems "fixable", so again this may be more of an issue related to my TypeScript knowledge than related to Ramda itself.

More about Ramda

Ramda is a very popular library and so there is enough to read about it. An overview of some great articles can be found here or check out the documentation right away and try it out!

Something else…

This is my first post on dev.to. I hope someone is going to read it and it would be awesome if it’s in some way useful to someone. In the future I want to write more posts and they will probably go about JavaScript and related frameworks/libraries. If you have any questions about this post or Ramda in general, please let me know. And of course, I would also like to hear if you have any tips for me about Ramda or about writing posts on dev.to.

Cheers

DEV Community: Robbie

RamdaJS: transduce

What is a transducer?

Doc example

Benefits of R.transduce

Conclusion

How I became a software developer in the traditional way

Teenager

Student

Professional

Cancel your promises when a component unmounts

Component still mounted?

useMountedState

useCancelablePromise

Library

Show DEV: Writing a Trade App in React Native and Expo

Goal

Approach

Stack

Beta testing

Result

Curious about the App?

You want to create your fist App?

RamdaJS: Using it for the first time

What is Ramda

Using Ramda for the first time

pipe

cond

tryCatch

propEq

Conclusion

More about Ramda

Something else…

Benefits of `R.transduce`