Functional Programming with Ramda.js

React.js library with a focused FP goal

/logos/2019.09.13-ramda.jpg

Ramda.js

Ramda is a library designed specifically for a functional programming style. It makes it easy to create functional programming pipelines, and never mutates user data. JavaScript’s Array.prototype class has some functionally-flavored methods such as map, reduce, and filter. However, these only operate on arrays. Ramda is described as more generic, being that it can work with strings, objects, and user-defined data types. There are other convenience libraries that allow functional operations on objects, such as lodash, but Ramda is much more functional by design; explicitly eliminating the possibility side-effects, and facilitating a divergence from the very imperative style of JavaScript to a more declarative model of programming.

Composition with Functions

So why would I want to use Ramda when lodash is easier to understand? Ramda allows functions to be used as first-order components.

[Read More]

Integration testing with Cypress

React.js E2E Testing Frameworks

/2019.09.29-yzfinance-cypress-tests.gif

Cypress E2E Integration Testing

The cypress testing framework is an end-to-end integration test framework for React.js, which is quickly surpassing alternatives such as Jest, Mocha, and Enzyme, Chai, and others.

Unit testing had long been an area of React.js where a stark lack of consensus existed. Myriad different frameworks had been available, all with their own selling points. Many developers won over by Cypress are now abandoning this patchwork of other unit testing tools in droves.

[Read More]

Using React Hooks API

An alternative to Redux

/2019.08.31-React-Hooks-API.png

The hooks api is a game-changing new framework introduced by the Facebook team in React 16.8. It represents a radical foray into a totally new paradigm of React.js development.

Notes on Hooks

Hooks are like primitive composable components for React. With hooks, instead of using ES2015 classes and complex third party frameworks such as Redux, we can use simple function() expressions throughout.

Functional Programs

They are more functional - essentially they trade the complexity of how classes work for the complexity of how closures work. Hooks are more consistent with functional programming.

Side-Effects

I had previously associated side-effects with a negative connotation, but in this context, side-effects are very much intentional. A side-effect, or simply effect is employed anytime we perform a fetch operation or write something out to the console in a class component.

UseState

One of the most exciting parts of the Hooks API is the global state functionality. With useState, we have native functionality in React that might finally make it possible to avoid Redux entirely. At long last, React developers can make use of global state without cluttering up our applications with loads of messy connect functions and the 10 pounds of actions, reducers, and lifecycle triggers code it takes to get an ounce of functionality in React.

[Read More]

Using TypeScript with React

How Strong Typing Helps You Spot Errors You Never Knew Were There

/logos/typescript-graphic.jpg

So what is Typing anyway?

To understand what TypeScript is, first you must be familiar with the concept of typing. JavaScript developers will probably be aware of the difference between Equality (==) and Identity (===) Operators. These operators differentiate between entities like the string "123" and the integer 123. This is because numbers and characters are fundamentally stored differently in memory. In JavaScript, all variables are declared using the keyword var (or const/let). However, this is not the case in strongly typed languages, such as Java and C, which CANNOT declare any variable without an explicitly defined data type.

JavaScript is ‘interpreted’, not ‘compiled’

A data type is a formalization of the way in which information is represented in a computer system, such as the case with Integers and Strings. Languages such as Java and C are referred to as strongly typed languages, because they depend on these types being defined at compile time, before the high-level language is converted into machine code or byte-code. JavaScript is an interpreted language (it is not compiled) It uses dynamic typing because, as the name implies, JavaScript was created with script-building in mind. Scripts generally automate the execution of code that is exterior to the script itself (such as compiled programs). As JavaScript development has become increasingly complex, there has arisen greater need for more explicit typing. This need was partially met by tools such as PropTypes. However, TypeScript, which was created by Microsoft, is especially helpful for validating the consistency of user-designed data objects.

Type Checking

Type checking is the idea that the shape of a data object remains consistent as it is passed between different parts of a program. TypeScript extends the JavaScript language, making it possible to explicitly define the shape of objects when they are declared, or passed into / returned from a function.

[Read More]

Snapshot Testing with Jest and Enzyme

Unit testing in React

/testing-react-components-with-enzyme-jest.jpg

What is Jest?

Jest is a popular Node.js unit testing framework, frequently used with React. Like React itself, Jest is used internally by Facebook as a primary development tool. Jest allows for tests to be run in parallel, greatly increasing efficiency.

Why use tests at all?

Even after you complete an app and get everything finally working, this is always the possibility of future modifications introducing new bugs. Unit testing simply makes it easier to guard against this scenario.

How do I install Jest?

Jest is included with React (and React Native). Otherwise, it can be installed using your package manager of choice

npm install --save-dev jest
yarn add --dev jest
[Read More]

Mastering GraphQL

Efficient Query and Manipulation Language

/logos/graph-ql.png

GraphQL

GraphQL is a powerful data query and manipulation language, created by Facebook. Essentially GraphQL is an alternative to REST. GraphQL exceeds REpresentational State Transfer because it facilitates data queries which manipulate the shape of returned data from a web api. It allows web API-driven applications to be structured in a much more flexible and efficient way.

[Read More]