Design Pattern – Publish-Subscribe

On my last post, I’ve talked one of design patterns, which is Template Method. Now I want to talk about other design pattern which is Publish-Subscribe. I used this pattern to make a communication between React components which are not directly related.

Continue reading “Design Pattern – Publish-Subscribe”


Design Pattern – Template Method

In this time, I will explain about one of design pattern that you can apply when developing a software. Yep, the pattern is called by Template Method. I also applied Template Method pattern when developing our project. In a simple explanation, Template Method is a pattern where there’s an abstract class that contains template(s) to execute its methods then its subclasses can override the method implementation as what’s needed.

Continue reading “Design Pattern – Template Method”

Understanding Spy, Stub, and Mock

Welcome back readers! Well, after creating 2 posts explaining about testing on frontend in a row, on this time I’ll also talk about testing! Lol. Actually this time will be more general. However, I applied this knowledge most of cases on frontend so I’ll give an example on frontend side too haha, forgive me plz. Yep, on this time I will talk about testing techniques which are spy, stub, and mock. I was really really starved to know what actually they are and now I want to end my curiosity. I’ll explain to you what actually they are! šŸ˜€

Continue reading “Understanding Spy, Stub, and Mock”

Golden Way to Traverse React Components on Shallow Rendering Approach

On my last post, I’ve talked about shallow rendering to test React components. This post is the sequel of that post sinceĀ I’ll also talk about testing React components. The shallow rendering that I’ve done on the last post is using the help fromĀ createRendererĀ functionĀ from React Addons Test Utils. Unfortunately, (until now) there are no function for traversing React element trees neatly just by using the help fromĀ React Addons Test Utils. If you want to check an element somewhere deep in the component tree, you will end up in a long chaining of props.children.props.children… which it also happened to me and I think it’s not elegant.

Continue reading “Golden Way to Traverse React Components on Shallow Rendering Approach”

Shallow Rendering to Test React Components

There are several approaches to test React components. The first approach that I tried was render the real DOM on the virtual environment. I usedĀ TestUtils.renderIntoDocument to render component into a real DOM. For the first time, I didn’t get any problem until I used Chart.jsĀ using this React wrapper for displaying chart. I faced a new problem!

Continue reading “Shallow Rendering to Test React Components”

Airbnb JavaScript Convention

Like what I mentioned in the previous post, my team will use Airbnb convention for writing JavaScript code. I looked on their Github, they provide so many guides to write JavaScript especially in ES6 syntax. Yep, my team will follow the guides there. But of course, we can’t remember all the rules at once, so we use the linter config provided by Airbnb. There will be a warning (or an error) message on every lines of our code that break the rules.

Continue reading “Airbnb JavaScript Convention”