Forem: Karolis Ramanauskas

Keeping up in the JavaScript world 🏃‍

Karolis Ramanauskas — Fri, 03 Aug 2018 16:30:19 +0000

JavaScript fatigue has been on the rise for a while now. You often hear developers complain that the front-end world is moving too fast, there are too many frameworks to choose from and too many things to learn all at once. While I agree there is truth to that, I also know that continuous learning and improvement is an inevitable aspect of being a programmer. You either accept it or go stale.

This post is not about dealing with JavaScript fatigue. Instead, it assumes that you are ready for the challenge to keep up with the front-end world despite the risk of experiencing the so-called JavaScript fatigue. If you are, this post will introduce you to the best ways and resources of doing so.

But before we dive into the nitty-gritty, we have to remember that none of us were born with natural talent and just knew how to program perfectly the first time we used a computer. Some of us learn new programming concepts faster, some take it slower. But none of us can progress as professionals without putting deliberate effort into it. So take your time, find what works for you and experiment with the following ways to improve as a developer.

📚 Consume curated content

One of the best ways to find out what's happening in the JavaScript world is to let others do the hard work and curate the content for you. As a result, you will only get the news that are worth your attention. Below are some of the recommended resources to follow.

Newsletters:

Podcasts

Social media

JavaScript Daily
JavaScript Wisdom (my own Twitter handle tweeting bite-sized JavaScript wisdom every day)
We ❤ JavaScript
JavaScript

👁️ Find the learning style that fits you

It's great to continously learn, go to conferences, do tutorials and self-improve in whatever ways you can. But if you notice that one way of learning does not work for you, try others. The three primary modes of learning for developers are through blog posts, books and video courses. Experiment with each one of them, see which one works best for you and use it as much as possible.

Personally, I use all three learning resources. This is because each one of them focuses on different levels of depth in regards to specific topics. Blog posts tend to focus deeply on a very narrow topic in a trendy niche, or give a shallow overview of a wider topic. Courses tend to cover medium-sized topics in a somewhat comprehensive manner. Just like blog posts, most courses also tend to cover what's hot. And books often tend to focus on fundamental aspects of programming meaning that the things you learn in them tend to be more foundational in nature than the ones learnt from video courses and blog posts. Thus, I believe it's important to combine all of the resources to become a well-rounded programmer.

The best video based tutorials for JavaScript developers can be found on:

Some of the best places to learn from blog posts are:

And in regards to books, I just tend to look at Amazon reviews or recommendations from others and buy them whenever available.

🔬 Experiment recklessly

Sometimes it's a good idea to not only take the time to learn about shiny new libraries or frameworks but also explore existing ones deeper. My recommendation would be to experiment more with frameworks and libraries that you already use and push them to their limits. Try doing the same thing in a different way, create a performance benchmark, try doing some silly things, play around. This will force you to get to know your tools better and consequently become a better programmer. The key here is to not be afraid, the code will not bite you back.

🚀 Seek mentorship

While it's great to self-learn and find your own path, having a good mentor can expedite your progress ten-fold. Receiving mentorship just means that you will be getting valuable advice from someone more experienced than you instead of seeking advice online from random strangers which may or may not have your best interests in mind. All of the greatest achievers had mentors in one way or another. Why not have one as a programmer?

Finding a mentor may seem daunting but it doesn't have to be complicated. First, just try to improve on your own. Eventually, you will get better and meet like-minded individuals in conferences, meetups, online forums, etc. Some of them will be further along than you as programmers. All you have to do now is try to get to know them better, establish a relationship, see if you can help them in any way and only once in a while ask for advice on a specific topic where you want to improve. Finding a mentor is not easy but it's not complicated either.

While I haven't tried it yet, it's also certainly possible to try out paid solutions out there such as codementor. If you give it a try, let me know how it went 😊

☝️And remember that you certainly can grow as a programmer without a mentor, it's just easier with one.

🌎 Learn other languages

Sometimes learning is not just about getting to know the next "new thing". It's also about thinking in different ways outside of your normal thought patterns.

There is a saying that "when you are a hammer, everything looks like a nail". Similarly, when you are a JavaScript developer and all you know is JavaScript, all the code that you write will be somewhat constrained by the patterns that you have learnt as a JavaScript developer. However, if you are exposed to other languages, you may quickly discover new better ways to solve the existing problems that you have.

"The Pragmatic Programmer", legendary book about software development craft confirms the same:

Learn at least one new language every year. Different languages solve the same problems in different ways. By learning several different approaches, you can help broaden your thinking and avoid getting stuck in a rut.

💬 Expose yourself to others

Whilst having a mentor is great for getting answers to questions that are specifically relevant to you, it's also important to expose yourself to others and get to know what and how they think, what problems they face and how they go about them. Just like learning new languages, meeting other developers will broaden your thinking and may further your career in unexpected ways. Some of the best places to meet other developers can be found below:

Slack/IRC/Gitter groups
Online communities such as dev.to, sitepoint
Stack Overflow
Meetups
Twitter
Conferences
Reddit
Water-cooler chats
Co-working spaces

🏗️ Build stuff

It's widely agreed that some of the best learning in programming comes when you build stuff. While it's fine and dandy to consume tutorials, you will never know how well you understand the material until you apply it in your own work. So, the best strategy to use whilst learning is to have an end goal in mind. Then go learn from the best tutorials, books or courses you can find and try to apply it in your job or side-project as soon as possible. Building your own stuff forces you to deal with real problems rather than hypothetical ones which is what programming is all about.

🎤 Teach

Teaching is one of my favorite things to do as a programmer. It's a win-win situation for everyone involved. The students get to learn from someone more knowledgeable than them who practices what he/she teaches in real life situations. And the teacher gets to solidify his/her knowledge through teaching. As an added bonus, by teaching one also gets a chance to look at the concepts being taught from the fresh perspective of a student. This can be powerful by potentially providing an opportunity to re-think of things you already know in new ways. Some of the ways one can start teaching now:

Blog
Screencast
Give talks
Podcast
Answer on StackOverflow
Help people on Gitter/Slack

By the way, a lot of people shy away from teaching as they think they are not yet good enough to teach. However, it's most likely that there are people who are even less knowledgeable than you and would benefit from your knowledge and perspective about a given topic. It's like a hierarchy of knowledge. There is almost always one step below that you can teach to. So, don't be afraid to teach and just do it 🤜

👐 Contribute to open-source

One good way to be up-to-date with what's happening in the JavaScript world is by actually contributing to it. This way you will get exposed to other developers code and inevitably some of the ways they do things will rub off on you as well. Just like with mentorship, one can be just fine developer without it but you will be even greater if you do indeed do it.

🤔 Ask why

Sometimes you don’t need to just keep on keeping up. It’s also worthwhile to stop once in a while and ask yourself “why” on the things you already know i.e. why did I choose to use Redux Thunk? What problem does it solve for me? Why not use something else? This will force you to be conscious of your decisions and not just randomly follow recommendations that you read online.

📅 Wait

Now once we covered all the ways to keep up in the JavaScript world, I will say one last word of caution. And that is the fact that you don’t have to keep up with everything! There, I said it. You can be a good developer just fine without knowing about every new framework and library out there.

One way to separate signal from the noise is to wait until a given technology has reached enough popularity and maturity to be worth having a look at. So it's fine to follow what is happening in the JavaScript world but only jump on the bandwagon once a certain technology has proved itself.

🔥 Summary

We have covered a lot of ways one can keep up in the JavaScript world. It can seem overwhelming. It almost seems overwhelming to me. The key is to choose what works for you and have regular intervals of time in which you deliberately focus on improving as a programmer. So, even if you don't contribute to open-source, perhaps you are active in online communities where you help others. For others this may not work but something else will. Don't be afraid to experiment and find the way to keep up-to-date and yet still keep sane. Good luck and let me know your own resources and strategies to keep up with all that is happening in the JavaScript world ✌️

Higher-Order Components (HOC) React Pattern

Karolis Ramanauskas — Sun, 29 Jul 2018 15:59:01 +0000

Today I decided to get more familiar with Higher-Order Components (HOC) commonly used in libraries such as Redux (connect), react-i18next (translate) or react-router (withRouter). I have often used them as part of aforementioned libraries but never got the full grasp behind their magic. Today is the day to get underneath the carpet and see how they really work.

But before we begin, let's define what a Higher-Order Component is. According to React docs, Higher-Order Component is an advanced React pattern consisting of a function that takes a base (wrapper) component as an argument and returns a new, enhanced component. The best thing about it is that it allows to reuse component logic in a clean compositional way.

The abstract code for a HOC would look somewhat like this:

const higherOrderComponent = BaseComponent => {
    // ...
    // create new component from old one and update
    // ...

    return EnhancedComponent
}

In a more concrete form, a Higher-Order Component always takes a form similar to this:

import React from 'react';

const higherOrderComponent = BaseComponent => {
    class HOC extends React.Component {
        ...
        enhancements
        ...

        render() {
            return <BaseComponent newProp={newPropValue} {...this.props} />;
        }
    }

    return HOC;
};

Simple example

To get a better understanding, let's take a look at a simple example of a Higher-Order Component. Imagine we want to have several components that all get set random background value each time the component is rendered.

We do this by first defining a Higher-Order Component function called withColor. It accepts BaseComponent as a parameter and returns the enhanced component. EnhancedComponent that gets returned consists of a getRandomColor and render methods. Within the render method we return BaseComponent that gets assigned a new color prop and by taking advantage of {...this.props} desctructuring, BaseComponent also gets access to all the props which were passed to the BaseComponent from outside the HOC.

import React from 'react';

const withColor = BaseComponent => {
  class EnhancedComponent extends React.Component {
    getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';

      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }

      return color;
    }

    render() {
      return <BaseComponent color={this.getRandomColor()} {...this.props} />;
    }
  }

  return EnhancedComponent;
};

export default withColor;

To use the newly created HOC, we just have to export it with our base component passed as an argument.

import React from 'react';
import withColor from './withColor';

const ColoredComponent = props => {
  return <div style={{ background: props.color }}>{props.color}</div>;
};

export default withColor(ColoredComponent);

Finally, we render the new enhanced component the same way as we would render a regular component.

import React, { Component } from 'react';
import ColoredComponent from './ColoredComponent';

class App extends Component {
  render() {
    return (
      <div>
        <ColoredComponent someProp="Prop 1" />
        <ColoredComponent someProp="Prop 2" />
        <ColoredComponent someProp="Prop 3" />
      </div>
    );
  }
}

export default App;

Note that all the props defined at this level such as someProp will be passed further down the line via {...this.props} and new props such as color in the above example are defined explicitly from within the HOC.

Practical example

The previous example was a bit contrived. We could, for example, have used a utility function that generates random color, and then call it from within each component. The end result would have been the same with less code. Let's better look at an example where Higher-Order Component pattern is indeed the most elegant solution.

In the following example we will develop a Higher-Order Component that accepts BaseComponent and API URL to fetch the data that it needs. While the data is loading, it will show a loading state, and once the data is loaded we will display whatever BaseComponent renders based on the data. The end result will look as follows.

To get started, we will first create a Higher-Order Component function. We will call it withLoader and initially set the data property of component's state to null. Once the component has mounted we will start fetching the data and when that's done, set the data property to the returned response.

As already mentioned, whilst the state is null we will show a loading state. And once we have the data fetched, we will return BaseComponent which in return will render markup based on the returned data. The Higher-Order Component function looks as follows:

import React from 'react';

const withLoader = (BaseComponent, apiUrl) => {
  class EnhancedComponent extends React.Component {
    state = {
      data: null,
    };

    componentDidMount() {
      fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
          this.setState({ data });
        });
    }

    render() {
      if (!this.state.data) {
        return <div>Loading ...</div>;
      }

      return <BaseComponent data={this.state.data} {...this.props} />;
    }
  }

  return EnhancedComponent;
};

export default withLoader;

The components that use this HOC are fairly straightforward. We simply have to take the data from the props and use it as needed. In the example below we use the data to show a list of users.

As usual, we first need to import the Higher-Order Component function and pass the component as function argument. Along with it we also pass the API URL from which the data is fetched. See the code for a base component below:

import React from 'react';
import withLoader from './withLoader';

const Users = props => {
  return (
    <div>
      <h1>Users:</h1>
      <ul>{props.data.map(user => <li key={user.id}>{user.name}</li>)}</ul>
    </div>
  );
};

export default withLoader(Users, 'https://jsonplaceholder.typicode.com/users');

Similarly, we use another component to show a list of posts. The code is pretty much the same except for the component's name and API URL.

import React from 'react';
import withLoader from './withLoader';

const Posts = props => {
  return (
    <div>
      <h1>Posts:</h1>
      <ul>{props.data.map(post => <li key={post.title}>{post.title}</li>)}</ul>
    </div>
  );
};

export default withLoader(Posts, 'https://jsonplaceholder.typicode.com/posts/');

Now all that's left is to render the components. In order to do that we don't have to do anything special. Just import the components and render them where needed as usual. That's all 😃

import React, { Component } from 'react';
import Users from './Users';
import Posts from './Posts';

class App extends Component {
  render() {
    return (
      <div>
        <Users />
        <Posts />
      </div>
    );
  }
}

export default App;

HOC caveats 🤔

HOC should always be a pure function. That means that the same enhanced component should always be returned with the same base component passed as a parameter.
Don’t use HOCs inside the render method. This makes React's reconciliation algorithm think that a new component is redeclared within each render, causing the whole subtree to be unmounted rather than just checked for differences.
Static methods do not get copied implicitly. This needs to be done explicitl. A good way to do it is with hoist-non-react-statics package.
Refs don’t get passed through.

Summary 🔥🔥🔥

A Higher-Order Component has access to all the default React API, including state and the lifecycle methods. This allows to reuse logic in a very conscise way and make your code more elegant. As we have seen, it can be used for a variety of use cases but sometimes it's not the most conscise solution. Sometimes a simple utility function or a smart parent component is all that's needed. So just use Higher-Order Components at your best judgement and don't over-engineer things where not needed 😊

React v16.4.0 - Pointer events

Karolis Ramanauskas — Fri, 25 May 2018 11:37:57 +0000

On May 23rd, 2018 a new minor release v16.4.0 of React has been launched. Overall, it's a rather uneventful release mostly concerned with fixing a variety of bugs. Quite notably though, it adds support for pointer events which has been an often requested feature for almost the entire existence of React.

Pointer events, in essence, are very similar to mouse events (mousedown, mouseup, etc.) but are hardware-agnostic and thus can handle all input devices such as a mouse, stylus or touch. This is great since it removes the need for separate implementations for each device and makes authoring for cross-device pointers easier.

Pointer events

The API of pointer events works in the same manner as existing various event handlers. Pointer events are added as attributes to React component and are passed a callback that accepts an event. Inside the callback we process the event. The following pointer events have been added to React DOM:

onPointerDown
onPointerMove
onPointerUp
onPointerCancel
onGotPointerCapture
onLostPointerCapture
onPointerEnter
onPointerLeave
onPointerOver
onPointerOut

When pointer events are fired is well explained on MDN Pointer events documentation so keep it as a reference for in-depth explanation of each event. Note that at the time of this writing, pointer events are not supported by Safari.

For an example of how pointer events can be incorporated on your own application, have a look at the below example by Philip Spiess. I added PEP polyfill to also make it work on Safari. Note that onGotPointerCapture and onLostPointerCapture events still do not work even with the polyfill.

Check out this demo on Code Sandbox to get a glimpse of what's possible with new pointer events. Hint: try dragging the circle on various devices.

Can (aﾠ == 1 && a == 2 && ﾠa == 3) equal true?

Karolis Ramanauskas — Sat, 21 Apr 2018 10:56:40 +0000

Here is a JavaScript trivia question. Can the expression (aﾠ == 1 && a == 2 && ﾠa == 3) ever evaluate to true? Well, today I found out it can. Run the below code and see for yourself.

Now let's look at seemingly the same code below. Try to run it. This time the expression does not evaluate to true. So what changed?

The difference is actally really simple and much less mysterious once you figure out what's happening. Apparently, there is a Unicode character called Halfwidth Hangul Filler which is a Korean symbol and is, for all intents and purposes, invisible. So the reason why the first code snippet evaluates to true is because the three variables a are in fact three distinct variables. One of them is prepended with halfwidth hangul filler, another one is left intact and the third one is appended with the hidden character.

Now next time someone asks you whether (aﾠ == 1 && a == 2 && ﾠa == 3) can ever equal to true, you can answer them that yes, indeed it can (with a small caveat) 😀

Binding in React

Karolis Ramanauskas — Sun, 25 Mar 2018 10:01:58 +0000

Before the release of React v0.13 using methods in React components was very straightforward since the traditional React.createClass automatically bounded user defined methods to the correct this context.

However, since the introduction of ES6 classes in React components, the methods are no longer automatically bound. As a result, we have at least four ways to handle this context in React. Let’s consider the advantages and disadvantages of each.

Bind in render

This approach works by allocating this to a given function on each render call. The downside of this approach is that the function is reallocated on each render. Whilst for most applications the performance implications of this are negligible, it's still something to keep in mind.

class LogThis extends Component {
    handleClick() {
        console.log('this is:', this);
    }

    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>
                Click me
            </button>
        );
    }
}

Arrow functions in render

This approach makes use of ES6 fat-arrow functions which help preserve the context of this by using lexical scoping. For those non-familiar with lexical scoping, it just means that a function uses this from the code that contains the arrow function.

Since this in render function always refers to the containing React component, and fat-arrow function uses lexical scoping, handleClick retains the component's this.

It stil has the downside of the previous approach in that a diffrent callback is created on each rerender and thus may cause performance issues.

class LogThis extends Component {
    handleClick() {
        console.log('this is:', this);
    }

    render() {
        return (
            <button onClick={e => this.handleClick(e)}>
                Click me
            </button>
        );
    }
}

Bind in constructor

One way to avoid performance downsides of previous two approaches is to bind in the constructor. This approach is currently recommended by the official React documentation and it's also the approach I have adopted on my projects.

The main downside of this approach is having to repeatedly bind each function in the constructor. If there are several functions in the component to be bound, it may start looking ugly quick.

class LogThis extends Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Hello, world!' };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log('this is:', this);
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
}

Class fields

The final way to bound this is by using experimental public class fields syntax.

This approach is the most superior of all because it avoids the performance issues of reallocating functions on each render. And it also removes unnecessary repetition when binding functions in the constructor.

One notable disadvatange of this approach is that by declaring methods in such a way, handleClick is not declared in the prototype and thus is impossible to be called via super.handleClick from the derived class.

class LogThis extends Component {
    handleClick = () => {
        console.log('this is:', this);
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
}

Extra: use react-autobind

The final extra and from what I can tell, a non-conventional way to handle binding in React ES6 classes is by using npm module react-autobind. It has all the advantanges of binding in constructor, plus you get to avoid repetition by having to bind each function separately.

The disadvantage is that an additional npm module has to be imported and you still have to call autoBind in the constructor.

import autoBind from 'react-autobind';

class LogThis extends Component {
    constructor() {
        super();
        autoBind(this);
    }

    handleClick() {
        console.log('this is:', this);
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
}

Summary

I personally see no real benefits of using binding or arrow functions in render. There are no real readability benefits as far as I'm concerned and the performance is negatively impacted, even if negligibly.

Thus, if you are willing to use Babel stage-2 preset and will not have to call a parent function from derived class, I would recommend using class fields approach to binding.

Otherwise, I would recommend binding in the constructor either by binding each function manually, or using react-autobind module. Both are fine and comes down to personal preference. If there are several functions to be bound, I would use react-autobind and if it's just one or two, go with the conventional approach.