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 vs Automation testing with Appium.io

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]

Setting Up Authentication on AWS Amplify

Using Amazon Web Services Console

/Screenshot_2019-08-15_14-49-13-aws-signin.png

Creating an AWS Account

It is necessary to provide a payment method (Credit or Debit card) to use AWS, including the free tier. Be careful about this - many people have complained that they end up getting charged surprise fees even though they never intended to go over the data caps for the “free” services.

Creating a Sub-user

While it is possible to use your root AWS account for managing services, this is not recommended. The principle of least access is that no account should have more privilege than is needed. This will limit potential fallout in the case that any of your account keys are breached. Those familiar with UNIX systems understand that the root user is not meant to be used for normal operations, and in AWS it is recommended that you create a sub-user for managing AWS services. This is kind of like having a luxury car that has a “valet key”, which is basically a key that can start the engine, but won’t allow the glove-box or trunk to be opened (to prevent theft).

[Read More]

yZ Finance Mobile

A React Native Application

React-Native mobile app for my Yahoo-finance web scraper.

/2019.07.27-yzFinance-1.gif

Scan to open

With an Android phone, you can scan this QR code with your Expo mobile App to load this project immediately.

/2019.07.27-yzFinance-expo-qr-code.png

Visit this app at it’s home on expo.io (https://expo.io/@fossnik/yz-finance-mobile)


Features

[Read More]

Navigation in React Native

Notes on using React Navigation

/Screenshot_2019-07-24_12-07-38-react-navigation.png

React Native navigation is largely analogous to the concept of routing in React.js Web development, although it does work a bit differently, being that URLs are not an inherent part of the mobile application experience.

Some (older) materials recommend wix react native navigation for implementing RN navigation. This was preferred by many developers because the official React Navigation was once notoriously buggy. However, the consensus now seems to be that those issues have mostly been ironed out.

[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]

React Native - Learn once, Write everywhere

or: How I learned to Stop Worrying and Love the 'book (Facebook)

React Native is a technology that makes it possible to create apps that work on multiple platforms, such as Android and iOS.

/react-native-android-ios.png

Strengths

  • Created by Facebook.
  • Write one app that works on both iOS and Android.
  • Groundswell of support. Find solutions to common problems easily.
  • Open source - broad ecosystem & robust community
  • React Native is used internally by Facebook, so we can rest assured that it will continue to be well-supported in the future.

Weaknesses

  • Minor differences between the Android and iOS platforms may require redress.
  • Inherently asynchronous.
  • Many native device features require 3rd party packages.
  • Fast moving target - still in active development, monthly new versions frequently include breaking changes.
  • React Native acts as a bridge between JS and native platform code, so it’s not as efficient as native apps written with Java (Android), or Swift / Objective-C (iOS).

What is a React Native app?

Although based on the React framework of web-development fame, React Native apps are NOT web-apps or websites. This is because the UI components are expressed by native platform code. React Native allows us to build something similar to a React.js web app, but essentially replaces the React’s HTML DOM with native UI components.

npx --package react-native-cli react-native
[Read More]