DEV Community: Johan du Toit

📱 Starting a new React-Native app?

Johan du Toit — Mon, 27 Jun 2022 09:59:54 +0000

After having built many mobile apps, especially with react native, I've noticed some of the following patterns emerge and they hinder productivity and maintenance if not implemented.

🧱 Abstractions
🌗 Theming
🌍 Internationalisation (i18n)
🧪 Testing

🧱 Abstractions

React is naturally modular. Take advantage of that. Do not build components that are 300 lines long. React lends itself very well to the idea of ATOMIC* design. Build smaller components and compose them together to what will eventually be a screen/page.

Our low level components generally consists of base components and are generally pretty flexible (i.e. buttons, inputs, typography, icons, etc). React Native provides most of these, however they should never be used outside of our UI components.

Once we have our building blocks wrapped and in place, starting composing them together and limit the props that are made available. This both reduces cognitive load and the ease of testing. The more props you expose, the more a developer has to think about what to provide and generally leads to either bugs or inconsistencies within the app.

Pro tip- this methodology works with every thing we do in React Native. Instead of using a library directly in all your files, abstract it away to your own wrapper. It helps when you're changing providers. i.e. storage, auth, analytics, logs, etc

ATOMIC design is atoms, molecules, organisms, templates, and pages concurrently working together to create effective interface design systems.

🌗 Theming

Having a theme in place from early on is highly beneficial. I'm not talking about having a full blown theme, more along the lines of color palette, font family, spacing, etc.

It helps having a designer in place here, but you could use some good defaults and change them as you progress.

Your theme should use semantic naming for colors (i.e. primary100, border, background). Your color palette, which should not be exposed outside of your theme will consist of names like green100, green80, etc.

🌍 Internationalisation (i18n)

Likely the most trivial on this list, is using an i18n library as soon as possible. With minimal setup, the benefits far outweigh the initial effort, especially when the inevitable "we need to support additional locales" conversation starts.

You might argue that you'll not need to support localisation (l10n) ever, however we still benefit from having all our "magic strings" in a single location. Which means it is easy to find and easy to modify. How convenient is that?

🧪 Testing

"Ahhh. Testing. We don't have time. We need to push new features." Is what most of us have experienced at least once in our careers, if not more often. As with comments, if we write tests, we'll need to maintain both the code and the tests.

Start simple and build on them over time. Ensure your components have TestID's set. You'll not necessarily write tests to use them, but they'll be there and ready to be picked up by whomever when the time arises for automated testing.

These are some of my React Native quality of life improvements. Using these tips will make your future-selves extremely happy!

As always, #KeepHavingFun

TypeScript: ensure your strings are in the right format

Johan du Toit — Thu, 04 Mar 2021 09:28:30 +0000

Turns out TypeScript allows you to type your string formats...

Example #1

type MyStringFormat = `${number} ${string} ${number}`;
const valid: MyStringFormat = "1 b 3"
const invalid: MyStringFormat = "a b c"

Example #2

type Unit = 'C' | 'F' | 'K'

type Temp = `${number} ${Unit}`;
const validTemp: Temp = "273 K" // 0 C, 31.73 F
const invalidTemp: Temp = "0 B" // 0C, 31.73F, 273K (no spaces)

TypeScript: It's time to decorate your code 🎉

Johan du Toit — Thu, 12 Mar 2020 05:17:19 +0000

Even though Decorators are still experimental (currently stage-2), let's figure out what they are, how we'd use them and whether it changes the way we think.

🚧 To enable experimental support for decorators, you must enable the experimentalDecorators compiler option in tsconfig.json or in the command line using tsc --experimentalDecorators.

So what is a Decorator? A function that can be applied to a class, method, accessor, property or parameter.

🛑 Before we continue, know that there are two variations: Decorators and Decorator Factories

// Oh look, a function, nothing special here as it just receives a `target` parameter
function basicDecorator(target) {
  // Decorator magic happens here
}

// A function that returns a function, still nothing special here!
function decoratorFactory(someValue: string) {
  return function(target) {
  // Decorator magic happens here
  }
}

// Usage
@basicDecorator
@decoratorFactory("some value")
class MyClass {
  //The expressions for each decorator are evaluated top-to-bottom.
  //The results are then called as functions from bottom-to-top.
}

Topics

🎉 Class Decorators
🎉 Method Decorators
🎉 Accessor Decorators
🎉 Property Decorators
🎉 Parameter Decorators

🎉 Class Decorators

Class decorators allow you to hook into the constructor of a class and allowing us to perform arbitrary code at runtime (before the class is executed/instantiated).

💀 You can change the prototype of the class (which is highly discouraged) so tread lightly!

function sealed<T>(target: T) {
  Object.seal(target);
  Object.seal(target.prototype);
}

@sealed
class MyClass {
  // class code goes here
}

Would you rather see it all in action? Use the Class Decorator Playground.

🎉 Method Decorators

Method decorators allow us to completely override an existing method or better yet add some logic before it's executed (like deboucing, logging, etc.)

// Method decorator
function myMethodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 // Update method descriptor, replace the method, etc.
}

class MyClass {
  @myMethodDecorator
  doAction() {
    // Do your thing here
    console.log("doAction has been called");
  }
}

Would you rather see it all in action? Use the Method Decorator Playground.

🎉 Accessor Decorators

Unfortunately not many developers use Accessors enough (hopefully this entices you to get more familiar with them). As with Method decorators, it allows us to modify the descriptor (which includes the getters and setters).

function myAccessorDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // Update method descriptor, replace the getter and/or setter, etc.
}

class MyClass {
  @myAccessorDecorator
  get myValue() {
    // internal set logic here
  }
}

Would you rather see it all in action? Use the Accessor Decorator Playground.

🛑 Hold up! The next two decorators are only really 'useful' when using external libraries like reflect-metadata (which adds polyfills for the experimental metadata API), as they don't receive a property descriptor parameter. Once decorators are fully supported, will the reflect-metadata library proposed for adoption.

🎉 Property Decorators

I'm sure you've picked up on the pattern already, simply add the decorator before the property. If you're not going to use an external library, then I'd pass on using a property decorator and instead use an accessor or method decorator.

function myPropertyDecorator(target: any, propertyKey: string) {
  // Use an external library like `reflect-metadata`
}

class MyClass {
  @myPropertyDecorator
  myValue: string;

  constructor(value: string) {
    this.myValue = value;
  }
}

Would you rather see it all in action? Use the Property Decorator Playground.

🎉 Parameter Decorators

As before simply add the decorator before your parameter of choice. You will notice that we have a new parameter called parameterIndex, which is pretty self explanatory.

function myParameterDecorator(target: any, propertyKey: string, parameterIndex: number) {
  // Use an external library like `reflect-metadata`
  console.log(...arguments);
}

class MyClass {
  doAction(value: string, @myParameterDecorator anotherValue: number) {
    console.log(`doAction called with: ${value} & ${anotherValue}`);
  }
}

Would you rather see it all in action? Use the Parameter Decorator Playground.

Proof read & edited by my beautiful wife ❤!

Remember to #KeepHavingFun

TypeScript: Tuples are just fixed length arrays‽ 🤔

Johan du Toit — Tue, 03 Mar 2020 09:58:13 +0000

Tewple or Tupple? Well both actually, keep this in mind during discussions.

📚 What is a Tuple
🧬 Usage
☠ The "tread with caution"

📚 What is a Tuple

Okay, so what is a Tuple? Simply put, it's a data structure, that consists of a fixed length array where each item may or may not be of the same type.

// Using a type
type MyTupleType = [boolean, string];

// Using an interface
interface MyTupleInterface
{
 0: boolean
 1: string,
};

The above definitions are identical and lets us choose which is best for our situation.

🧬 Usage

Using our definitions above, let's create our first Tuple!

const myTuple: MyTupleType = [false, "stringValue"]

Great, so what can we do with our Tuple?


// Accessing our data
const myBoolean = myTuple[0]
const myString = myTuple[1]

const [myBoolean, myString] = myTuple; 

// Setting our data
myTuple[0] = true;
myTuple[1] = "Another String";

// Looping our data... remember, it's an Array.
myTuple.forEach(m => console.log(m));


// Useful for functions, this pattern is widely used with React Hooks
function validate(value: any): MyTupleType {
  // Some validation here
  return [false, "Invalid value provided"]
}

☠ The "tread with caution"

Because a Tuple is an array, we're allowed to push in new data 👀.

// Continuing from above
myTuple.push(true, "why is this possible");
myTuple.push("why is this possible", true);

Both the cases above are valid, as the compiler is unioning our types. In our example this produces the type of string | boolean.

This may not immediately come across as a bad thing, however try accessing any of your newly pushed data and experience the wrath of the compiler!

const [a1, a2, b1, b2] = myTuple;
// const b2: undefined
// Tuple type 'MyTupleType' of length '2' has no element at index '2'.

const myValue = myTuple[3];
// Tuple type 'MyTupleType' of length '2' has no element at index '3'

Proof read & edited by my beautiful wife ❤!

Remember to #KeepHavingFun

🤯 Typescript features you may not know

Johan du Toit — Thu, 20 Feb 2020 09:14:57 +0000

TypeScript- the love child of C# and JavaScript which you should be proud of and show off to your family.

Topics

🔑 keyof
🔏 Access Modifiers
⚡ static
🚔 Type Guards (User-defined)
💔 Partial
⛏ Pick & Omit

🔑 keyof

This one does what it says on the tin. It gets the keys of an interface, type or object.


interface MyType {
  id: number;
  category: number;
  name: string;
}

function getProperty<T>(item: T, key: keyof T) {
  // more code goes here
}

// const item: MyType = { ... }

getProperty(item, 'id') // Valid
getProperty(item, 'other') // Error

🔏 Access Modifiers

Access modifiers allow us to close down (or open up) access to properties on a class.

private: Only accessible within the class it was defined in.
protected: Accessible within the class it was defined in & any classes inheriting from it.
public: Accessible from anywhere.

class BaseClass {
  private privateProperty: string;
  protected protectedProperty: string;
  public publicProperty: string; // default is public, can be omitted

  constructor(
    privateProperty: string,
    protectedProperty: string,
    publicProperty: string
  ) {
    this.privateProperty = privateProperty;
    this.protectedProperty = protectedProperty;
    this.publicProperty = publicProperty;
  }

  baseMethod() {
    console.log(this.privateProperty); // Valid
    console.log(this.protectedProperty); // Valid
    console.log(this.publicProperty); // Valid
  }
}

class ParentClass extends BaseClass {
  methodA() {
    console.log(this.privateProperty); // Invalid
    console.log(this.protectedProperty); // Valid
    console.log(this.publicProperty); // Valid
  }
}

let item = new ParentClass("private", "protected", "public");
console.log(item.privateProperty); // Invalid
console.log(item.protectedProperty); // Invalid
console.log(item.publicProperty); // Valid

Note JavaScript doesn't have the concept of access modifiers as we know them (yet!), so it's only enforced in TypeScript land. Once it hits JavaScript land it's public all the way.

⚡ Static

With static we can add properties to a class and access it without the need to create an instance of the class.

class MyClass {
  static value = 13.31;
  value = 89.98;

  process(num: number) {
    return num * MyClass.value;
  }
}

console.log(MyClass.value) // 13.31

// const myClassInstance = new MyClass();
// console.log(myClassInstance.value); // 89.98 (using the instance value and not the static value)

🚔 Type Guards (User-defined)

Have you ever written a function that accepts a union type and then experienced trouble when trying to handle the different types, look no further! Type Guards allow us to define a function that will perform a runtime check that will assure you of a single type within some scope.

Some of you may think that typeof is the solution, but sadly this only works for primitive types.

type MyTypeA = {
  typeAProp: number;
  otherAProp: string;
  sameProp: boolean;
};

type MyTypeB = {
  typeBProp: number;
  otherBProp: string;
  sameProp: boolean;
};

function myFunc(item: MyTypeA | MyTypeB) {
  if (isMyTypeA(item)) {
    console.log(item.typeAProp, item.otherAProp, item.sameProp) // valid
  }

  // item.typeAProp // invalid
  // item.sameProp // valid
  ...
}

function isMyTypeA(item: MyTypeA | MyTypeB): item is MyTypeA {
  // Return a condition, that guarantees your type is what you are after
  return (item as MyTypeA).typeAProp !== undefined;
}

💔 Partial

Partial will set all properties (except nested properties, we'll touch on this in a bit) as optional.

type MyType = {
  RequiredProp1: string;
  RequiredProp2: number;
  OptionalProp1?: boolean;
}

type PartialMyType = Partial<MyType>;

// This will produce an error, as RequiredProp1 is missing
const item: MyType = {
  RequiredProp2: 42
}


// This is valid, as partial marked everything as optional
const partialItem: PartialMyType = {
  RequiredProp2: 42
}

As you can see from the example above, Partial saves us from having to define a nearly duplicate type and marking everything as optional ourselves.

Note there is a built in utility method that does the opposite of Partial called Required. Its usage is identical to the above.

Bonus To apply partial to your nested types recursively, use the following snippet

type RecursivePartial<T> = { [P in keyof T]?: RecursivePartial<T[P]> };

// Usage
type EverythingPartial = RecursivePartial<MyType>;

⛏ Pick & Omit

Pick & Omit are useful when it comes to creating a sub type from an external (or internal) interface or types.

// external.ts
interface ExternalInterface {
  name: string;
  address: string;
  age: number;
}

// mycode.ts

// Pick
type MyPickType = Pick<ExternalInterface, 'name' | 'age'>;


// Omit
type MyOmitType = Omit<ExternalInterface, 'address'>;

Both MyPickType and MyOmitType end up consisting of the same properties. As the term Pick suggests, you pick which properties you want on your new type. With Omit you exclude the properties you list.

Footnote

If I left out a hidden gem or if you need clarification on anything, let me know!

Proof read & edited by my beautiful wife ❤!

Remember to #KeepHavingFun

Heroku & Github (private) packages - Just Work™

Johan du Toit — Fri, 14 Feb 2020 11:38:59 +0000

Cut to the chase

Like many developers out there, we work on side projects from time to time. Sometimes it's to learn, to have fun or to make money. Regardless of the reason, we often throw in the towel due to burnout, loss of interest or that frustrating service/tool that should just work™ but doesn't.

I recently murmured "Why isn't this just working as stated!" while attempting to get Heroku to install my private Github packages. I headed to my trusty ol' friend, Google, to scour the internet for an answer only to be repeatedly told that I need to 'commit an .npmrc file' with the registry URL (with auth token) and getting absolutely nowhere.

On the verge of giving up, I decided to head into the Github actions source code. After all I was able to publish my package to my private Github registry in a CI environment.

Below is the code that dynamically creates the .nmprc file before the Heroku build (using the heroku-prebuild hook), using values from the environment variables.

The good stuff

Add the auth-npm.js script to your project (I add it to my bin directory)
Update package.json

Drop a comment below if you're running into trouble and/or if you have improvements!

Remember to #KeepHavingFun

DEV Community: Johan du Toit

📱 Starting a new React-Native app?

Table of Contents

🧱 Abstractions

🌗 Theming

🌍 Internationalisation (i18n)

🧪 Testing

TypeScript: ensure your strings are in the right format

Example #1

Example #2

TypeScript: It's time to decorate your code 🎉

Topics

🎉 Class Decorators

🎉 Method Decorators

🎉 Accessor Decorators

🎉 Property Decorators

🎉 Parameter Decorators

TypeScript: Tuples are just fixed length arrays‽ 🤔

Table of contents

📚 What is a Tuple

🧬 Usage

☠ The "tread with caution"

🤯 Typescript features you may not know

Topics

🔑 keyof

🔏 Access Modifiers

⚡ Static

🚔 Type Guards (User-defined)

💔 Partial

⛏ Pick & Omit

Footnote

Heroku & Github (private) packages - Just Work™

The good stuff