Higher-order components vs Render Props
Published
Higher-order components (HOC) and render props are two ways to build cross cutting code in React JS. How do you decide to use one over the other?
Using promises, async/await and testing
Published
This post has lots of code examples showing promises, async/await and unit testing async functions. There is a coding challenge at the end to test your learning.
What do promises solve in our code?
Whenever you wanted to resolve some data asynchronously it had to be done via a callback. In complex applications this led to “callback hell”, when the first data fetch was resolved another data fetch needs to happen afterwards. This would repeat a few times, creating a “nice” sideways pyramid in your code.
Promises mostly solved that problem by chaining. Each step resolved data and passed it along to the next then function.
Understanding React JS Render Props
Published
In this post, I will discuss the why and how to use React JS Render Props.
Why use Render Props: Promote reuse of behaviour across React components.
If you have read my post on higher-order components this may seem similar. The React community has been working hard on solving reuse across components, and one common theme is passing data to children. However, we will focus here on how to use Render Props - and discuss the differences between HOC and Render Props in another post.
Composition in JavaScript
Published
Let’s look at using composition instead of classical inheritance in JavaScript.
JavaScript is an expressive language and is one reason I enjoy using it. An interesting feature is the ability to compose objects from simple objects without inheritance.
Recycle tests in TDD and code kata
Published
Have you ever written a unit test and it seems to take a long time to make green?
What is a long time, you might ask? In my opinion if you spend more than 5 minutes solving the test you wrote then you are in the amber zone that you made it too complex. If greater than 10 minutes then you need to simplify the test. Which might not seem like an obvious thing to do.
This exercise is to help unblock the solving of complex tests consistently and quicker.
Understanding React JS higher-order components
Published
In this post I will discuss why and how to use higher-order components (HOC) with React JS.
Why use HOC: Promote reuse of logic across React components.
Components are the typical element for reuse in React but sometimes features don’t fit into this standard. There might be similar methods used to fetch data but maybe the display is different. An example of this is shown later.
Understanding React Relay
Published
As with any new tech it can be overwhelming and confusing how all the parts work together. Especially with the combo of Relay and GraphQL. Hopefully this post will help demystify some things in Relay.
What is Relay: Data driven JavaScript framework used to efficiently handle data communication between a React and a GraphQL server.
Why use it: One typical issue found in an SPA are the number of network calls made to render a page. Quickly this starts to affect your server performance because the requests made can be high. Relay is focused around efficient network calls helping to mitigate this issue. Another good feature is the queries are close to the components making it obvious the data requirements.
Should-enzyme: Useful functions for testing React Components with Enzyme
Published
What is should-enzyme: An library of extension functions for ShouldJS and a wrapper round Enzyme.
Why use it: Make it easier to test ReactJS components, improve readability of asserts and provide better error messaging on failing tests.
Should-Enzyme API in the read me on Github and is an NPM package.
JavaScript Singleton pattern
Published
The Singleton pattern is to ensure there is only one instance of the class that exists. In the case it does exist it returns a reference to that object. This is normally achieved by a method belonging to the class to create an instance.
Joinable - Join strings with built in control flow
Published
What is Joinable: A library to join strings together without the need to check if a value is a falsy like undefined.
Why use it: Keep your code base clean by removing the if else statements and improve the readability.
Joinable API in the read me on Github and is an NPM package.
Continuous integration, delivery and deployment
Published
Below is a succinct overview of what is continuous integration, delivery and deployment. The core benefit of following these practices allows developers to ship production code quicker to the user. This should help provide a quicker feedback loop.
Elixir task file watch with Eye Drops
Published
Eye drops is an Elixir mix task used to watch file changes and run tasks in the command line for those files. You can read more about how to use it on my Github repository read me documentation.