1. Looping with Index

While working on problems like Two Sum, You need to iterate the list and get the index of items. You can get the index either using a counter or you can use range iterator to loop through the length of the list. You can also use enumerate to iterate an iterable object with an index.

Using range operator:

def twoSum(nums, target):
    num_map = {}
    for i in range(len(nums)):
        if nums[i] in num_map:
            return [num_map[nums[i]], i]
        else:
            num_map[target-nums[i]] = i
print(twoSum([2, 7, 11, 15], 9))

Using enumerate:

def twoSum(nums, target):
    num_map = {}
    for index, num in enumerate(nums):
        if num in num_map:
            return [num_map[num], index]
        else:
            num_map[target-num] = index

2. Slicing of Iterable

An iterable object can be iterated over using a loop. slice function returns a slice object, that can extract a sublist from an iterable object. Since a string is also an iterable object. Slicing can also be used on strings. The syntax of the slice is slice(_start_, _stop_[, _step_]).

nums = [1, 2, 3, 4, 5, 6]
name = "123456"
sslice = slice(1, 6, 2)
print(nums[slice(1, 6)]) # [1, 2, 3, 4, 5, 6]
print(nums[sslice]) # [2, 4, 6]
print(name[sslice]) # 246
`

The above code can be simplified using square brackets. You can access sublist using square brackets.

Here start, stop and steps all are optional. The default value of start, stop and steps are 0, length of an object and 1 respectively.
You can also use negative values to change the flow. To understand the negative values, Let’s take an example palindrome-number problem. There are multiple ways to solve this problem. The quick way to solve it is, Convert an integer into a string and reverse the string and compare.

class Solution:
    def isPalindrome(self, x):
        num1 = str(x)
        num2 = num1[::-1]
        return num1 == num2
print(Solution().isPalindromewithReverse(121)) # True
print(Solution().isPalindromewithReverse(-121)) # False

Here in the above example, The reverse of the string num1 is assigned to num2.

3. Memoization

There are cases, Where you need to write recursion code. Memoization can really improve the performance of the code. Memoization is also useful to solve Dynamic Programming coding problems. Memoize can be tricky to implement. However, Using the decorator function it is too easy to implement memoize code. If you want to know more about decorators, You can read my article Validation in Python using Decorator.
To explain this topic, We will solve powx-n problem from Leetcode. In this problem, We have to implement a function that calculates x raised to the power n.

Code of Memoize Decorator:

def join(*args):
    return reduce(lambda a, b: f"{a}_{b}", args)
def memoize(func):
    memo = {}
    def helper(*args):
        key = join(*args)
        if key not in memo:
            memo[key] = func(*args)
        return memo[key]
    return helper

Now actual solution can be written as below

@memoize
def powHelper(x, n):
    if n == 0:
        return 1
    return powHelper(x*x, n/2) if n % 2 == 0 else x * powHelper(x*x, (n-1)/2)
class Solution:
    def myPow(self, x, n):
        m = n
        if n < 0:
            m *= -1
        res = powHelper(x, m)
        return res if n >= 0 else 1/res
print(Solution().myPow(2, 3))  # 8
print(Solution().myPow(2, 5))  # 32
print(Solution().myPow(2, -5))  # 0.03125

4. Varargs and Argument Unpacking

To understand Varargs, Let’s take an example of a sum function. The sum is a function, which returns the summation of variable number parameters passed to the function.

def sum(*args):
    res = 0
    for num in args:
        res += num
    return res
print(sum(1, 2, 3)) # 6
print(sum(1, 2, 3, 4, 5)) # 15

Here sum function can accept variable arguments args. Since args is a tuple is an iterable object(tuple), We can also use reduce from functools. To learn more about functional programming, Read Functional Programming in Python.

# Using reduce, simplified version
from functools import reduce
def sum(*args):
    return reduce(lambda a, b: a+b, args)
print(sum(1, 2, 3))
print(sum(1, 2, 3, 4, 5))

Note: In the above examples, varargs is a tuple. So we can unpack it.

def divide(*args):
    num, den = args
    return num/den
print(divide(10, 2))

You can also use named varargs. named varargs is a dictionary to accept multiple named arguments. Named varargs is very useful to take option dictionary.

def range(**args):
    start = args["start"] if "start" in args else 0
    end = args["end"] if "end" in args else 100
    res = []
    while start < end:
        res.append(start)
        start = start+1
    return res
print(range(start=10, end=20)) # [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

5. Mapping of Iterator

Mapping of an iterable object is helpful to convert an iterable object. Mapping can be done using the map function.

numbers = [1, 2, 3, 4, 5]
result = map(lambda x: x*x, numbers) # return map object
print(list(result)) # need to convert to list
# Output: [1, 4, 9, 16, 25]

The above example uses a lambda function. If the function has multiple lines of statements, You can use a custom function.

numbers = [1, 2, 3, 4, 5]
def mapInt(num):
    return num*num if num % 2 == 0 else num*num*num
print(list(map(mapInt, numbers)))

Mapping can be done on any iterable object including sets, lists, tuples etc.

Note: There is a better way to map an iterable object. It is called List comprehensions. List comprehension is a concise and elegant way to map an iterable object.

Celsius = [39.2, 36.5, 37.3, 37.8]
Fahrenheit = [((float(9)/5)*x + 32) for x in Celsius]
print(Fahrenheit) # [102.56, 97.7, 99.14, 100.03999999999999]

You can also map to a dictionary, set and tuple. To learn more read datastructures

>>> a = {x for x in 'abracadabra' if x not in 'abc'}
>>> a
{'r', 'd'}

Conclusion

In this article, I have just mentioned a few tips and patterns. There are a lot of other cool concepts to be learned. To keep the article to a concise length, I have broken this article into multiple sub-article. I will publish those later. I have attached all reference link below.

References:

• https://docs.python.org/3/tutorial/datastructures.html
• https://www.programiz.com/python-programming/list-comprehension
• https://www.programiz.com/python-programming
• https://realpython.com/

Suppose we have a function divide), which accepts numerators and denominators. Here numerators and denominators should be real numbers. and denominators can’t be zero.Let’s implement the function

def is_real_number(num):
    return type(num) == int or type(num) == float


def divide(num, den):
    if not(is_real_number(num) and is_real_number(den)):
        raise ValueError("Invalid argument")
    if den == 0:
        raise ValueError("Number is not divisible by zero")
    return num/den


def add(*arg):
    if any([not(is_real_number(i)) for i in arg]):
        raise ValueError("Invalid argument")
    return sum(arg)


print(divide(10, 2))  # 5.0
print(add(1, 2, 3))  # 6
print(divide("10", 2))  # ValueError: Invalid argument
print(divide(10, 0))  # ValueError: Number is not divisible by zero

Explanation:
If you look at the above example functions, We have added a few extra checks to verify passed arguments. These extra checks can be applied using metaprogramming without modifying the actual functions.

You should know:

Before proceeding further, There are a few concepts that you should know. These concepts will help to understand decorators.

1. Everything is an object
2. Class is callable

Everything is an object: In python, everything is an object. Yes, class is also an object. A name can be bound to multiple variables including function. Check out the below example.

def greet(name):
    print(f"Welcome Mr/Ms. {name}")


gr_8 = greet
greet("Deepak")  # Welcome Mr/Ms. Deepak
gr_8("Deepak")  # Welcome Mr/Ms. Deepak

We can also pass functions as arguments and use that functions.

def inc(x):
    return x + 1


def dec(x):
    return x - 1


def operate(func, x):
    result = func(x)
    return result


operate(inc, 5)  # 6
operate(dec, 5)  # 4

We can also return a function from a function.

def decorator():
    def inner():
        print("Inner function")
    return inner


outer = decorator()
outer()
# Inner function

Class is callable: You can make a class callable object by adding **def** **__call__**(self, *args, **kwargs) function. A callable object is an object but can be called a function. When we execute or call the callable object, it will internally call the method **__call__**

class Callable:
    def __init__(self):
        print("An instance of Callable was initialized")

    def __call__(self, *args, **kwargs):
        print("Arguments are:", args, kwargs)


x = Callable()
print("now calling the instance:")
x(3, 4, x=11, y=10)
"""
An instance of Callable was initialized
now calling the instance:
Arguments are: (3, 4) {'x': 11, 'y': 10}
"""

Now since we know the basic concepts, Let’s try to understand decorators.

Decorators using function

A Decorator function is a single argument function. It takes a function as an argument and returns a helper function.

def decorator(func):
    def inner():
        print("run something before actual function")
        func()
        print("run something after actual function")
    return inner


def func():
    print("something...")


decorated_func = decorator(func)
decorated_func()
"""
run something before actual function
something...
run something after actual function
"""

As you can see in the above example, the decorator function takes func as function and add before/after statements. A decorator functionality can be implemented using @decoratorexpression.

def decorator(func):
    def inner():
        print("run something before actual function")
        func()
        print("run something after actual function")
    return inner


@decorator
def func():
    print("something...")


func()
"""
run something before actual function
something...
run something after actual function
"""

You can also return a function that accepts varargs as an argument. This is very useful to override the function behaviour still gives full flexibility.

def prettify(func):
    def inner(*args, **kwargs):
        print("*" * 30)
        func(*args, **kwargs)
        print("*" * 30)
    return inner


@prettify
def pretty_print(*msg, **kwargs):
    print(*msg, **kwargs)


pretty_print("Hello World")
pretty_print(1, 2, 3)
"""
******************************
Hello World
******************************
******************************
1 2 3
******************************
"""

Decorators using Class

Just like function decorators, You can make callable object decorators. The biggest advantage of creating a class-based decorator is that it looks more declarative and clean compare to functional decorators.

To understand the concept, Let’s take our previous example of add and divide function. If you have noticed that both function as common validation of real numbers. We can create a common validator decorator class.

class RealNumValidator:
    def __init__(self, func):
        self.func = func

    def __call__(self, *args, **kwds):
        if any([not(is_real_number(i)) for i in args]):
            raise ValueError("Invalid argument")
        return self.func(*args)


class ZeroValidator:
    def __init__(self, func):
        self.func = func

    def __call__(self, *args, **kwds):
        if len(args) < 2 or args[1] == 0:
            raise ValueError("Number is not divisible by zero")
        return self.func(*args)

Now we have two argument validators. Let’s use this on real function.

class RealNumValidator:
    def __init__(self, func):
        self.func = func

    def __call__(self, *args, **kwds):
        if any([not(is_real_number(i)) for i in args]):
            raise ValueError("Invalid argument")
        return self.func(*args)


class ZeroValidator:
    def __init__(self, func):
        self.func = func

    def __call__(self, *args, **kwds):
        if len(args) < 2 or args[1] == 0:
            raise ValueError("Number is not divisible by zero")
        return self.func(*args)


def is_real_number(num):
    return type(num) == int or type(num) == float


@RealNumValidator
@ZeroValidator
def divide(num, den):
    return num/den


@RealNumValidator
def add(*arg):
    return sum(arg)


print(divide(10, 2))  # 5.0
print(add(1, 2, 3))  # 6
print(divide("10", 2))  # ValueError: Invalid argument
print(divide(10, 0))  # ValueError: Number is not divisible by zero

Now if you look at the functions, It looks much cleaner compare to its previous version.

Conclusion

There are a lot of things to be covered in metaprogramming or decorators. I have just touched the surface of the water. Like I have given an example of chaining of decorators. This can be very useful to share reusable validations and apply them. Tracing of function calls, spying of function, Writing custom parsers etc. are very common use cases of metaprogramming. You can explore and let me know in the comment.

References:

https://python-course.eu/advanced-python/decorators-decoration.php

Originally Posted: Validation in Python using Metaprogramming and Decorator- Advanced Python

1. Create a mocked data lake/source

To test out the functionality you required a data source. To mimic the real-api data source, I will create a list of dummy users.

const users = Array(1000)
  .fill()
  .map((_, i) => ({ name: `user${i}`, id: `id_${i}` }));
const TOTAL_RECORDS = users.length;

console.log({user: users[0], TOTAL_RECORDS});
// { user: { name: 'user0', id: 'id_0' }, TOTAL_RECORDS: 1000 }

2. Fetch users API function

You can use a promise-based API function to fetch records. However, I will use async-await function to create this Fetch user API function

//service.js

const delay = () => new Promise((r) => setTimeout(r, 1000));

/**
 * fetchUsers
 * 
 * @param {page, limit} current page number, limit of the records to fecth
 * @default {0, 100}
 * @returns 
 */
const fetchUsers = async ({ page = 0, limit = 100 }) => {
  const start = page * limit; // start index of the records
  const end = (page + 1) * limit; // end index of the records
  await delay(); // virtual delay of 1000ms
  return {
    data: users.slice(start, end), //Slice the records from start to end
    done: end >= TOTAL_RECORDS,
    start,
    end,
  };
};

// [optional]
//export { fetchUsers };

The above function fetchUsers takes options like page and limit. Page is defined as the current page of the pagination and limit is defined as the limit of records to be fetched. Delay is just and virtual delay of 1000ms to mimic the actual network.

3. Fetch all records using Generator Function

Traditionally, You can write a function using recursion to solve the problem. However, the Writing recursion version is too complex to understand. You can also use for-loop/while-loop using async-await. Check out the below example.

async function main() {
  let records = [];
  let options = { page: 0, limit: 100, end: 100, total_records: Infinity };

  while (options.end < options.total_records) {
    const response = await fetchUsers(options);
    records = records.concat(response.data);
    options.end = response.end;
    options.page = options.page + 1;
    options.total_records = response.total_records;
    console.log(records[records.length - 1], response.start, response.end);
  }
}
// { name: 'user199', id: 'id_199' } 100 200
// { name: 'user299', id: 'id_299' } 200 300

Output:

As you can see using a while-loop function, Your main function has to worry too much about other variables like records, paging options. In such scenarios, Generators shines well. Let's try to convert the above example into generators.

/**
 *
 * @param {page, limit} start page index, limit/chunk of the records to fecth on each call
 * @default {0, 100}
 * @returns
 */
async function* fetchAllRecords({ page = 0, limit = 100 } = {}) {
  while (true) {
    const records = await fetchUsers({ page: page++, limit });
    yield records;
    if (records.done) return;
  }
}

async function main() {
  const api = fetchAllRecords();
  let records = [];
  for await (let record of api) {
    records = records.concat(record.data);
        console.log(records[record.end - 1], record.start, record.end);
  }
}

Output:

As you can see, Using generators makes code look much simpler and easy to read.

Note: If you noticed line for await (let record of api), Here in this line we are looking at the generator looping asynchronously. This await signals for-loop that api object is async iterator function to iterate.

Codesandbox

Conclusion:

Async await does not make your API run faster. It just simplifies code and increases the readability of code. As someone wise once said.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

Table of Contents:

• 1. Create a simple exportable module
• 2. Creating a Date
  • Simple hacks to Date constructor
• 3. Get day, month, year
  • Simple hacks to Date getters
• 4. Set day, month, year
  • Simple hacks working with month(add/subtract)
• 5. Format a date
  • Simple custom format method
• 6. Invalid Date
• Conclusion
• Some useful hacks
• References

1. Create a simple exportable module

Before going further, Let's create an exportable module. Exporting methods can vary according to the framework used. Below, I have mention a few examples of how to export a method as a module.

Nodejs:

//date.js
exports.isValid = (date) => {
  // TODO:
};

React with Webpack:

//date.js
export const isValid = (date) => {
  // TODO:
};

TypeScript:

//date.ts
export const isValid = (date: Date) => {
  // TODO:
};

2. Creating a Date

Date class provide multiple ways to create an object. To get the current date object you can use new Date(), Date constructor without any parameter. The other way to create a Date object, use the number value in the constructor(new Date(num)). Here, num representing the number of milliseconds since January 1, 1970, 00:00:00.

To get current Date:

/**
 * today: Get the current date
 */
exports.today = () => new Date();

// main.js
const { today } = require("./date");
console.log(today()); // 2021-08-22T15:59:47.482Z

To get current timestamp in milliseconds:

// date.js

/**
 * now: Get the current timestamp
 */
exports.now = () => Date.now();

// main.js

const { today, now } = require("./date");
console.log(now()); // 1629647987489

Simple hacks to Date constructor

// date.js

const [HR, DAY, WEEK] = [
  60 * 60 * 1000,
  60 * 60 * 1000 * 24,
  60 * 60 * 1000 * 24 * 7,
];
exports.hourBefore = () => new Date(this.now() - HR);
exports.dayBefore = () => new Date(this.now() - DAY);
exports.weekBefore = () => new Date(this.now() - WEEK);

//main.js

console.log(hourBefore()); //2021-08-22T14:59:47.489Z
console.log(dayBefore()); // 2021-08-21T15:59:47.489Z
console.log(weekBefore()); // 2021-08-15T15:59:47.489Z

Note: Since a month can be 28,29,30 or 31 days base on the type of year. And same time timezone varies with a local date. So working with a date in the month is a little tricky. I have explained few hacks to work with months in the below setters examples.

3. Get day, month, year

Getting a day, month or year from a Date object is quite simple. There are a lot of getter methods within a date object.

Sample:

const currentDate = today();
console.log(currentDate.toISOString()); // 2021-08-22T16:38:27.164Z
console.log(currentDate.getTime()); // 1629650307164
console.log(currentDate.getDate()); // 23
console.log(currentDate.getDay()); // 1
console.log(currentDate.getMonth()); // 7
console.log(currentDate.getFullYear()); // 2021
console.log(currentDate.getHours()); // 0
console.log(currentDate.getMinutes()); // 38

Note: Few of the biggest confusions are getDay and getMonth. These both two starts with 0. Meaning, month Jan and day Sunday represent as 0 in month and day respectively. This is very confusing for the first time. To work with month and day, You can create an enum/constant map.

//date.js

const MONTHS = { 0: "January", 1: "February", 2: "March", 7: "August" }; // TODO: complete
exports.monthInString = (date) => {
  return MONTHS[date.getMonth()];
};

const DAYS = { 0: "Sunday", 1: "Monday", 2: "Tuesday", 3: "Wednesday" }; // TODO: complete
exports.dayOfWeek = (date) => {
  return DAYS[date.getDay()];
};

// main.js

console.log(monthInString(today())); // August

console.log(dayOfWeek(today())); // Monday

Simple hacks to Date getters

With the new Date.toLocaleString method, Now it is very easy to get day/month as string. You can pass locale as "en-US" and other options to format date string.

// Get Day of the Week
console.log(today(), today().toLocaleString("en-US", { weekday: "long" })); // 021-08-22T16:58:30.238Z Monday
// Get month of the Year
console.log(today(), today().toLocaleString("en-US", { month: "long" })); // 021-08-22T16:58:30.238Z August

You can also collect all information at once using destructure array.

const [month, day, year, hr, min, sec, meridiem] = new Date(
  2021,
  08,
  22,
  18,
  08,
  08
)
  .toLocaleString("en-US")
  .split(/\W+/); //// 9/22/2021, 8:08:08 PM
console.log(month, day, year, hr, min, sec, meridiem); // 9 22 2021 6 08 08 PM

If you want to format or prefix a day/month/hr/min with zero, You can do so by passing the option "2-digit". You can also show the full name of a month.

const [month, day, year, hr, min, sec] = new Date(2021, 08, 22, 18, 08, 08)
  .toLocaleString("en-US", {
    day: "2-digit",
    month: "long",
    year: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  })
  .split(/\W+/); //// 9/22/2021, 8:08:08 PM
console.log(month, day, year, hr, min, sec); // September 22 21 18 08 08

_For more options, You can read this nice article._

4. Set day, month, year

Setting a day, month or year from a Date object is quite simple. Same as a getter, are a lot of setter methods available in a date object.

List of setters: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

Simple hacks working with month(add/subtract)

// date.js
/**
 * addMonths: add a month to date
 * You can pass -(month) to subtract
 *
 * @param {Date} date
 * @param {number} months
 */
exports.addMonths = (date, months) => {
  var d = date.getDate();
  date.setMonth(date.getMonth() + +months);
  if (date.getDate() != d) {
    date.setDate(0);
  }
  return date;
};

exports.subMonths = (date, months) => this.addMonths(date, -1 * months);

//main.js

console.log(today(), addMonths(today(), 2)); //2021-08-22T16:30:11.826Z 2021-10-22T16:30:11.826Z
console.log(today(), subMonths(today(), 2)); //2021-08-22T16:34:10.895Z 2021-06-22T16:34:10.895Z

To learn more on adding/subtracting dates, Read below mention StackOverflow links.

• https://stackoverflow.com/questions/2706125/javascript-function-to-add-x-months-to-a-date/36331522#36331522
• https://stackoverflow.com/questions/5645058/how-to-add-months-to-a-date-in-javascript/13633692#13633692
• https://stackoverflow.com/questions/2706125/javascript-function-to-add-x-months-to-a-date

5. Format a date

There are multiple default standard format methods supported by the Date objects. You can use method likes toUTCString, toISOString, toLocaleString to get formatted string of date. However, there is no standard custom format method supported by the Date object. Intl supports a lot of helper methods to work with date formatting.

Note: Intl is not fully supported by all the browsers. You may have to polyfill methods based on need.

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// US English uses month-day-year order
console.log(new Intl.DateTimeFormat("en-US").format(date));
// → "12/19/2012"
// British English uses day-month-year order
console.log(new Intl.DateTimeFormat("en-GB").format(date));
// → "19/12/2012"

// Chinese
console.log(new Intl.DateTimeFormat("zh-TW").format(date));
// → "2012/12/20"

Same as toLocaleString, You can also pass options along with locale in DateTimeFormat constructor.

var options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};
console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
// → "Donnerstag, 20. Dezember 2012"

Learn more on DateTimeFormat: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

Simple custom format method

Writing a format function is very complex. It evolves by parsing a date object, extract values and compact in a date string. As part of this article, we will not go in-depth. However based on the above useful utility methods, We can create a simple format function using replace command.

//date.js
exports.formatString = (format, date) => {
  const [MM, DD, YYYY, hh, mm, ss, A] = date
    .toLocaleString("en-US", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    })
    .split(/\W+/);
  const timeMap = { MM, DD, YYYY, hh, mm, ss, A };
  return format.replace(/(\w+)/g, (key) => timeMap[key]);
};

// main.js
var date = new Date(2012, 11, 20, 3, 0, 0);
console.log(formatString("DD-MM-YYYY hh:mm:ss A", date)); // 20-12-2012 03:00:00 AM

Note: As mentioned above, This format method is not tested for production support. It is just to demonstrate how a simple format function can be written. You can think of more complex definitions to create a format function.

6. Invalid Date

Invalid Date is a spatial date object. Whenever you create a Date object with an invalid date value. Instead of throwing an error, It creates an object with a special value Invalid Date. This special object is very confusing. This will not throw any error in most of the operations performed on it. which can cause a lot of production issues. To avoid such issues, You can create an isValid function.

//date.js
exports.isValid = (date) => date.toString() !== "Invalid Date";

//main.js
console.log(isValid(new Date("2021-08-22T16:30:11.826Z"))); // true
console.log(isValid(new Date("ff-08-22T16:30:11.826Z"))); // false

Conclusion

In javascript, there is a lot of flexibility. However, This flexibility creates a lot of confusion and chaos. If you know these hacks, It can significantly improve your productivity. And a good way to learn, try and test in your project. Write more code and review more.

If you are looking for more useful methods like these, Please checkout 30-seconds-of-typescript/

Some useful hacks

• Get timestamp without now/getTime method

console.log(+new Date());
//same as
console.log(new Date().getTime());

• Getter than and equals

//date.js
const isAfterDate = (dateA, dateB) => dateA > dateB;
const isBeforeDate = (dateA, dateB) => dateA < dateB;

//main.js
console.log(new Date(2021, 08, 11) > new Date(2021, 08, 10));
console.log(new Date(2021, 08, 09) > new Date(2021, 08, 10));
console.log(
  new Date(2021, 08, 10).toISOString() === new Date(2021, 08, 10).toISOString()
);

Read more: https://decipher.dev/30-seconds-of-typescript/docs/isSameDate

• Sort array by date

const users = [
  { name: "1", dob: "1989/8/26" },
  { name: "2", dob: "1989/8/23" },
  { name: "3", dob: "1989/8/25" },
];

const sortedUsers = users.sort(
  ({ dob: dob1 }, { dob: dob2 }) =>
    new Date(dob1).getTime() - new Date(dob2).getTime()
);
console.log(sortedUsers);

/**
[
  { name: '2', dob: '1989/8/23' },
  { name: '3', dob: '1989/8/25' },
  { name: '1', dob: '1989/8/26' }
]
**/

• Humanize duration

//date.js

exports.formatDuration = (ms) => {
  ms = Math.abs(ms);
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000,
  };
  return Object.entries(time)
    .filter((val) => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? "s" : ""}`)
    .join(", ");
};
// main.js

console.log(formatDuration(34325055574));

Read more: https://decipher.dev/30-seconds-of-typescript/docs/formatDuration

References

• https://decipher.dev/30-seconds-of-typescript
• https://stackoverflow.com/questions/tagged/javascript+date
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
• https://www.w3schools.com/jsref/jsref_obj_date.asp

In this article, I will focus on creating a simple and easy to use module for Internationalization that also uses very few lines of code. I will not compare why you should or should not use third-party libraries.

Before moving forward, Let's understand the requirement of the library.

Project Requirements

1. Users should be able to toggle between languages
2. Users should see different text when a user switches to another language.

Non-Functional requirement

1. Assuming we are using React.js, Library should support the latest hook concept of React.js
2. The library should provide an option to update translations on runtime(fetch over the network)
3. The library should provide support for default messages, In case if requested the key/value is not present in the set of messages
4. The library should provide a method to update the default locale based on user preference
5. Developers should be able to get messages in any locale, even though the default local is different. This will help to get messages in different languages at the same time.

Sample App:

Creating a react app

Creating a react app is pretty much simple. You can use create-react-app to create react app. If you already have your own app. You can skip this step and move to the next step.

npx create-react-app my-multi-lingual-app --template typescript

Once App is created, You can remove existing code from App.tsx.

/// src/App.tsx

import "./App.css";

const Home = () => {
  return null;
};
function App() {
  return (
    <div>
      <Home />
    </div>
  );
}

export default App;

Note: For this article, We will write code using Typescript. I always recommend using TypeScript for custom build libraries. Not only it reduces the efforts of explaining huge codes but it also provides better support by complimenting the bad parts of JS. You can read this article to find more reasons why I’m Not Using JavaScript Anymore.

Creating an i18n Package

For simplicity, let us create a directory inside the src directory. There are plenty of articles available online like How to create node.js modules. You can follow any of them to create a separate package and publish your library if you wish to do so.

Create a file Internationalization.tsx

/// src/i18n/Internationalization.tsx

import React from "react";

export const I18nProvider: React.FC<{}> = ({ children }) => {
  return <div> {children}</div>;
};

Let's import this and create a basic Application structure with default English text.

Update HTML template for the Application

import "./App.css";
import { I18nProvider } from "./i18n/internationalization";

const Home = () => {
  const onLangChange = (code: string) => {
    // toggle Language here
  };
  return (
    <div className="App">
      <header className="App-header">
        <div className="Controller">
          <button className="Button" onClick={() => onLangChange("en-US")}>
            En
          </button>
          |<button className="Button" onClick={() => onLangChange("zh-CN")}>
            中文
          </button>
        </div>
        <p>Welcome, Hello in English</p>
        <p>This is default message: Message not found!</p>
      </header>
    </div>
  );
};
function App() {
  return (
    <I18nProvider>
      <Home />
    </I18nProvider>
  );
}

export default App;

Test I18nProvider class with default messages

For our Internationalization module, We will be using React Context API. To avoid direct exposure to the provider class, We will wrap the provider using the HOC component. You can read in detail here, How to create a wrapper class for Provider.

/// src/i18n/Internationalization.tsx

interface MessagesProp {
  [key: string]: { [key: string]: string };
}

const I18nContext = createContext<{
  messages: MessagesProp;
}>({
  messages: {},
});

export const I18nProvider: React.FC<{}> = ({ children }) => {
  const [messages, setMessages] = useState<any>({
    "en-US": { hello: "Hello in English" },
  });
  return (
    <I18nContext.Provider
      value={{
        messages,
      }}
    >
      {children}
    </I18nContext.Provider>
  );
};

To access the value from the provider class, Let's create a custom hook.

/// rest of the code

export const I18nProvider: React.FC<{}> = ({ children }) => {
  /// rest of the code
};

export const useI18n = () => useContext(I18nContext);

Update the App.tsx, To get the hardcoded messages

/// import custom hook
import { I18nProvider, useI18n } from "./i18n/internationalization";

const Home = () => {
  const { messages } = useI18n();
  const onLangChange = (code: string) => {
    // toggle Language here
  };
  return (
    <div className="App">
      <header className="App-header">
        {/* rest of the code */}
        {/* Direct access to message */}
        <p>Welcome, {messages["en-US"].hello}</p>
        <p>This is default message: Message not found!</p>
      </header>
    </div>
  );
};
function App() {
  return (
    <I18nProvider>
      <Home />
    </I18nProvider>
  );
}

export default App;

Fetch messages from the network

Once you refresh, You can see the hardcoded messages. Let's fetch messages from the network and set them as messages in I18nProvider. To do so we need to create a public method to context provide.

interface MessagesProp {
  [key: string]: { [key: string]: string };
}
const I18nContext = createContext<{
  messages: MessagesProp;
  setMessages: (messages: MessagesProp) => void;
  locale: string;
  setLocale: (locale: string) => void;
}>({
  messages: {},
  setMessages: () => {},
  locale: "en-US",
  setLocale: () => {},
});

export const I18nProvider: React.FC<{ defaultLocale?: string }> = ({
  children,
  defaultLocale = "en-US",
}) => {
  const [messages, setMessages] = useState<any>({});
  const [locale, setLocale] = useState(defaultLocale);

  return (
    <I18nContext.Provider
      value={{
        messages,
        locale,
        setLocale,
        setMessages,
      }}
    >
      {children}
    </I18nContext.Provider>
  );
};

Similarly, we have to expose the method to set locale. Accessing all these methods inside App.tsx is pretty much simple. Let's update App.tsx.

import { useEffect } from "react";

import { I18nProvider, useI18n } from "./i18n/internationalization";

// virtual delay
const delay = () => new Promise((r) => setTimeout(r, 2000));

const Home = () => {
  const { messages, setMessages, setLocale, locale } = useI18n();

  const onLangChange = (code: string) => {
    // toggle Language here
  };
  useEffect(() => {
    Promise.all([
      fetch("/i18n/en-US.json").then((x) => x.json()),
      fetch("/i18n/zh-CN.json").then((x) => x.json()),
      delay(),
    ]).then(([enUS, zhCN]) => {
      setMessages({ "en-US": enUS, "zh-CN": zhCN });
    });
  }, [setMessages]);

  return <div className="App">{/* rest of the code */}</div>;
};
function App() {
  return (
    <I18nProvider>
      <Home />
    </I18nProvider>
  );
}

export default App;

Handle network delay

Even we fetch the message from the network and set it to messages, We will still see a broken page. This is because we try to access message in <p>Welcome, {messages["en-US"].hello}</p> without error handling. Due to a delay in the network(async), You will see this broken page. To avoid such issues, Or handle them elegantly. We can add a boolean(loaded) in our I18nProvider.

/// src/i18n/Internationalization.tsx

import React, { createContext, useContext, useState } from "react";

const I18nContext = createContext<{
  //rest of the code
  setLocale: (locale: string) => void;
  loaded: boolean;
}>({
  //rest of the code
  loaded: false,
});

export const isEmpty = (val: any) =>
  val == null || !(Object.keys(val) || val).length;

export const I18nProvider: React.FC<{ defaultLocale?: string }> = ({
  children,
  defaultLocale = "en-US",
}) => {
  //rest of the code

  return (
    <I18nContext.Provider
      value={{
        messages,
        locale,
        setLocale,
        setMessages,
        loaded: !isEmpty(messages),
      }}
    >
      {children}
    </I18nContext.Provider>
  );
};

export const useI18n = () => useContext(I18nContext);

Now update App.tsx to show loading messages after messages are fetched from the network.

import { I18nProvider, useI18n } from "./i18n/internationalization";

const Home = () => {
  const { messages, setMessages, setLocale, locale, loaded } = useI18n();

  const onLangChange = (code: string) => {
    // toggle Language here
  };
  ///rest of the code

  if (!loaded)
    return (
      <div className="App">
        <br />
        <br />
        <h2>Loading...</h2>
      </div>
    );
  return <div className="App">{/* rest of the code */}</div>;
};
function App() {
  return (
    <I18nProvider>
      <Home />
    </I18nProvider>
  );
}

export default App;

Toggle between languages

I18nProvider exposes setLocale method. Bypassing locale, We can get messages from I18nProvider. It will be much easier to handle messages in one language than having multiple languages. To get text from I18nProvider based on current locale, We can add translate a helper function/method.

/// src/i18n/Internationalization.tsx

import React, { createContext, useContext, useState } from "react";

const I18nContext = createContext<{
  //rest of the code
  loaded: boolean;
  translate: (
    key: string,
    defaultMessage?: string,
    locale?: string
  ) => string | undefined;
}>({
  //rest of the code
  loaded: false,
  translate: () => "",
});

export const isEmpty = (val: any) =>
  val == null || !(Object.keys(val) || val).length;

export const I18nProvider: React.FC<{ defaultLocale?: string }> = ({
  children,
  defaultLocale = "en-US",
}) => {
  //rest of the code

  const message = messages[locale];
  const translate = (key: string, defaultMessage?: string, locale?: string) => {
    return (locale ? messages[locale][key] : message[key]) || defaultMessage;
  };

  return (
    <I18nContext.Provider
      value={{
        messages,
        locale,
        setLocale,
        setMessages,
        loaded: !isEmpty(messages),
        translate,
      }}
    >
      {children}
    </I18nContext.Provider>
  );
};

export const useI18n = () => useContext(I18nContext);

Now getting locale text within the App.tsx will be much easier.

/// src/i18n/App.tsx

//rest of the code

const Home = () => {
  const { setMessages, translate, loaded, setLocale } = useI18n();

  const onLangChange = (code: string) => {
    // toggle Language here
    setLocale(code);
  };
  //rest of the code

  return (
    <div className="App">
      <header className="App-header">
        <div className="Controller">
          <button className="Button" onClick={() => onLangChange("en-US")}>
            En
          </button>
          |<button className="Button" onClick={() => onLangChange("zh-CN")}>
            中文
          </button>
        </div>
        <p>Welcome, {translate("hello")}</p>
        <p>This is default message: Message not found!</p>
      </header>
    </div>
  );
};
function App() {
  return (
    <I18nProvider>
      <Home />
    </I18nProvider>
  );
}

export default App;

Final code

Final code for src/i18n/App.tsx

/// src/i18n/App.tsx

import { useEffect } from "react";
import "./styles.css";
import { I18nProvider, useI18n } from "./i18n/internationalization";

// virtual delay
const delay = () => new Promise((r) => setTimeout(r, 2000));

const Home = () => {
  const { setMessages, translate, loaded, locale, setLocale } = useI18n();

  const onLangChange = (code: string) => {
    // toggle Language here
    setLocale(code);
  };
  useEffect(() => {
    Promise.all([
      fetch("/i18n/en-US.json").then((x) => x.json()),
      fetch("/i18n/zh-CN.json").then((x) => x.json()),
      delay(),
    ]).then(([enUS, zhCN]) => {
      setMessages({ "en-US": enUS, "zh-CN": zhCN });
    });
  }, [setMessages]);
  if (!loaded)
    return (
      <div className="App">
        <br />
        <br />
        <h2>Loading...</h2>
      </div>
    );
  return (
    <div className="App">
      <header className="App-header">
        <div className="Controller">
          <button className="Button" onClick={() => setLocale("en-US")}>
            En
          </button>
          |<button className="Button CN" onClick={() => setLocale("zh-CN")}>
            中文
          </button>
        </div>
        <p className={`message ${locale === "zh-CN" && "CN"}`}>
          Welcome, {translate("hello")}
        </p>
        <p>
          This is default message:
          {translate("no_message", "Message not found!")}
        </p>
      </header>
    </div>
  );
};
function App() {
  return (
    <I18nProvider>
      <Home />
    </I18nProvider>
  );
}

export default App;

Final code for src/i18n/Internationalization.tsx

/// src/i18n/Internationalization.tsx

import React, { createContext, useContext, useState } from "react";

interface MessagesProp {
  [key: string]: { [key: string]: string };
}

const I18nContext = createContext<{
  messages: MessagesProp;
  setMessages: (messages: MessagesProp) => void;
  locale: string;
  setLocale: (locale: string) => void;
  loaded: boolean;
  translate: (
    key: string,
    defaultMessage?: string,
    locale?: string
  ) => string | undefined;
}>({
  messages: {},
  setMessages: () => {},
  locale: "en-US",
  setLocale: () => {},
  loaded: false,
  translate: () => "",
});

export const isEmpty = (val: any) =>
  val == null || !(Object.keys(val) || val).length;

export const I18nProvider: React.FC<{ defaultLocale?: string }> = ({
  children,
  defaultLocale = "en-US",
}) => {
  const [messages, setMessages] = useState<any>({});
  const [locale, setLocale] = useState(defaultLocale);

  const message = messages[locale];
  const translate = (key: string, defaultMessage?: string, locale?: string) => {
    return (locale ? messages[locale][key] : message[key]) || defaultMessage;
  };

  return (
    <I18nContext.Provider
      value={{
        messages,
        locale,
        setLocale,
        setMessages,
        loaded: !isEmpty(messages),
        translate,
      }}
    >
      {children}
    </I18nContext.Provider>
  );
};

export const useI18n = () => useContext(I18nContext);

Demo Application

Source code: You can find the source code in the same code-sandbox, react-internationalization-screr.

Conclusion

We can clearly see by adding a few lines of code. We can create a basic simple Internationalization library. However, If your application is very big and you do not want to maintain your own custom library. You should use third-parties libraries. You will get better support and standardization.

Thanks, Hope you enjoy this article. It will give you a basic idea of how to use React.js context APIs. If you find this useful, Please share and react. If you have any queries and suggestions, kindly do write on comments.

Note: All code example has written in TypeScript. You can use TypeScript Playground to convert TS to JS code.

Basic Principles

Before going further, You should know some of the basic principles as described below.

1. Pure Function
2. Deterministic Function
3. Higher-order Function
4. Immutability
5. Currying or Partial Function
6. Function composition

1. Pure Function

Pure functions are deterministic function with no side-effect. Meaning, The out will be always the same for the same inputs. Same time, it will not consume any other global variables.

Example of Pure Function:

function calculateInterest(p: number, t: number, r: number) {
  return (p * t * r) / 100;
}

console.log(calculateInterest(1000, 5, 5));

//250

Here, No matter what for the same inputs, the output will be the same.

The advantage of having a pure function, It is easy to understand and test. However, It is very hard to build an entire Application just using Pure Function. We needed some deterministic function too.

Note: React.js Pure components are deterministic in nature, but they are not a pure function. It has side-effects in it like React.createElement which create document elements.

2. Deterministic Function

A Deterministic function is where the output of the function is always deterministic. It may have side-effect but still, the output should not change with time. The same input should result in the same output

Simple Example:

function trim(str: string) {
  return str.replace(/^\s+|\s+$/g, "");
}

console.log(trim("    This text had extra spaces.. "));

// "This text had extra spaces.."

Another Example:

A deterministic function can have a side-effect. Meaning, It can have access to global variables.

enum GENDER {
  MR = "Mr.",
  MS = "Miss.",
}

function greeting(name: string, is: GENDER = GENDER.MR) {
  return `Hello, ${is == GENDER.MR ? GENDER.MR : GENDER.MS} ${name}`;
}

console.log(greeting("Deepak"));

// "Hello, Mr. Deepak"

Example of a Non-Deterministic Function:

function rand(num = 4) {
  return Math.random().toString(16).substr(-num);
}
function uuid(): string {
  return [rand(8), rand(4), rand(4), rand(4), rand(12)].join("-");
}
console.log(uuid());

In the above example, the method rand using Math.random to generate a random number. The output of this API will be non-deterministic.

The good thing about a deterministic function that it is very common in any language. It is easy to create and understand. However, having side-effect in it. Some time is hard to test.

3. HOF- Higher-Order Function

A HOF can take function|s as input and can return a function as output.

Example:

const groupBy = <T = any>(fn: (item: T, i: number) => any, data: T[]) =>
  data.map(fn).reduce((acc, val, i) => {
    acc[val] = (acc[val] || []).concat(data[i]);
    return acc;
  }, {});

const { odds, evens } = groupBy((item) => (item % 2 == 0 ? "evens" : "odds"), [
  1,
  2,
  3,
  4,
  5,
]);
console.log(odds, evens);

// [ 1, 3, 5 ] [ 2, 4 ]

Note: Here in the above example, groupBy is a function. You may have noticed that I have not used the keyword function to create a function. Since I am using lambda as a function and assign it to a variable. After ES6/ES2015, JavaScript introduced the concept of lambda along with many more new syntax. Mostly lot of them are sugar syntax around the real implementation. You can read more here.

groupBy is a function that takes an input fn as a function and data as an array. After computation on all item in the array, it returns an object of key and values.

Note: Just like HOF, HOC in React is a component that can take another component|s as input and can return another component.

4. Immutability

Immutability is a concept where once data/variable is created can't be changed over a period of time. The idea to avoid the data race in cross-sharing environments like async programming, side-effects.

JavaScript does have some Immutability APIs. However, Those are not enough. Let's see some of the examples.

const PI = 3.141592653589793;

// PI = 1
// Cannot assign to 'PI' because it is a constant.

const numbers = Object.freeze([1, 2, 3, 4]);

// Just like normal array, you can map on values
numbers.forEach((x) => console.log(x));

// numbers.push()

// Cannot add property 4, object is not extensible
// OR in TS, Property 'push' does not exist on type 'readonly number[]'

Since JavaScript is a dynamic language. Meaning, data can be changed on runtime. This makes it tough to implement Immutability in JavaScript. Same time, not all member/object support immutability. You can use immutable-js. However, I recommend making immutability a practice and not including another library.

Simple way to achieve Immutability

Array:

const numbers = Object.freeze([1, 2, 3, 4]);

// Just like normal array, you can loop on values
numbers.forEach((x) => console.log(x));

// Copy array and add new

const anotherNumbers = [...numbers].concat(5);

//[1,2,3,4,5]

Object:

const configs = {
  API_URL: "some random urls",
  TIMEOUT: 30 * 60 * 10000, //in ms
};

const newConfigs = {
  ...configs,
  SERVER_TIMEOUT: 100 * 60 * 10000, //in ms
};
// OR

const newConfigs2 = Object.assign({}, newConfigs, {
  SERVER_TIMEOUT: 100 * 60 * 10000,
});

Map:

const details = new Map([
  ["name", "deepak"],
  ["address", "some where in world"],
]);

for (let key of details.keys()) {
  console.log(key);
}
//"name" "address"

const updatedDetails = new Map([
  ...details.entries(),
  ["newAddress", "still some where in world"],
]);
for (let key of updatedDetails.keys()) {
  console.log(key);
}
//"name" "address" "newAddress"

5. Currying or Partial Function

Currying is a method or technique in FP, Where a function can be composed to take input partially. Meaning, If a function sum take input a and b as arguments. Currying that function can make sum function take one argument a and return another function. We can use that newly created function to do summation later.

Let's see from example:

const split = (token = /\s+/, str = "") => str.split(token);

const splitByHash = (str: string) => split(/#/, str);

console.log(splitByHash("This#is#awesome"));

// [ 'This', 'is', 'awesome' ]

In the above example, the split function takes token and string data to split in. We have created a function splitByHash where the token is already defined. It just takes a string to split it. Here, splitByHash is a partial function.

Note: Above example is a good demonstration for the partial function. However, creating a partial function like this is not scalable for more than 2/3 arguments. We can use some basic utility to create a partial function or curried function.

// Helper method, Curries a function.
// https://decipher.dev/30-seconds-of-typescript/docs/curry

const curry = (fn: Function, arity = fn.length, ...args: any[]): any =>
  arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);

const split = (token = /\s+/, str = "") => str.split(token);

const splitByHash = curry(split, 2)("#");

console.log(splitByHash("This#is#awesome"));
// [ 'This', 'is', 'awesome' ]

6. Function composition

Function composition is a mathematical concept where an operation takes two functions f and g and produces a function h such that h(x) = g(f(x)). For simplicity, (g º f)(x) = g(f(x))

Let's see from example:

// Helper method, Performs right-to-left function composition.
// https://decipher.dev/30-seconds-of-typescript/docs/compose/

const compose = (...fns: Function[]) =>
  fns.reduce((f, g) => (...args: any[]) => f(...[g(...args)]));

const add10 = (x: number) => x + 10;
const multiply = (x: number, y: number) => x * y;
const multiplyAndAdd5 = compose(add10, multiply);
console.log(multiplyAndAdd5(5, 2)); // 20

In this example, you can see, multiplyAndAdd5 is composed right to left. It's first multiply 2 number(5x2 = 10). And takes it out and add 10.

Let see another example: Get average age of active users

const sum = (nums: number[]) => nums.reduce((s, i) => s + i, 0)
const average = (nums: number[]) => sum(nums) / nums.length


const getActiveUserAges = (data: UserType[] = []) => data.filter(user => user.active === true).map(u => u.age)


const users = [
  {
    name: "deepak",
    age: 31,
    active: true
  },
  {
    name: "sandy",
    age: 20,
    active: false
  },
  {
    name: "unknown",
    age: 35,
    active: true
  }
]
type UserType = typeof users[0]

const activeUsers = getActiveUserAges(users)

const  = sum(activeUsers)


console.log(sumOfAges/ activeUsers.length)

In the above example to get the average age of the active user, We have to call multiple methods. This is good. But we can make this more declarative using compose. If we have to write something functionally. It will look like as below

// helper method

const compose = (...fns: Function[]) =>
  fns.reduce((f, g) => (...args: any[]) => f(...[g(...args)]));

// sum of ages
const getSumAges = compose(sum, getActiveUserAges);
console.log(getSumAges(users));

// average of ages
const getAverageOfAges = compose(average, getActiveUserAges);
console.log(getAverageOfAges(users));

As you can see, adding compose make it easy to mixing function and create another function. That can be reused later.

Some Real-Life Problems

Now since we know the basics of FP. Let's explore with example.

async function main() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/") // fetch todos
    .then((r) => r.json()); // then extract json
  // Response Todo[]
  // Todo {userId: number, id: number, title: string, completed: boolean}
  const todos = response; // extract Todo values
  console.log(todos[0]); // [{"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}, ...]

  const completedTodos = todos.filter((todo) => todo.completed);

  const usersIds = completedTodos.map((todo) => todo.userId);

  const getAllUserById = (id) =>
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`).then((r) =>
      r.json()
    );

  const userWhoCompletedTods = await Promise.all(usersIds.map(getAllUserById));
  console.log(userWhoCompletedTods.length);
  console.log(userWhoCompletedTods[0]);
}
main();

In the above example, First, we are fetching some todos using the rest API. After that, we are filtering todo based on its status completed. Once we have all complete todos, We are collecting ids and to fetch all users.

All good. However, If we have to change one simple behaviour. Fetch users who have not completed todos. Even though it is simply not changing. But will change all coding declaration. We do have to change all variable name. Which is a tedious job to do. We can make this program more declarative using FP. For that we do need some helper methods:

Helper methods: 30-seconds-of-typescript

const curry = (fn, arity = fn.length, ...args) =>
  arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);

const filter = (fn, data) => data.filter(fn);
const map = (fn, data) => data.map(fn);
const not = (fn) => (...args) => !fn(...args);
const prop = curry((key, data) => data[key]);

Now let's rewrite the same program

const isCompleted = (item) => item.completed;
const isNotCompleted = not(isCompleted);
const getId = prop("id");

const userWhoCompletedTodos = map(getId, filter(isCompleted, todos));
const usersWhoNotCompletedIds = map(getId, filter(isNotCompleted, todos));

console.log(userWhoCompletedTodos.length, usersWhoNotCompletedIds.length);

As you can see, Adding only a few helpers makes it so simple to switch between isCompleted to isNotCompleted. And the same time it is very expressive on its own.

Note: There are some other aspects of Functional Programming. I have not covered them all. The reason, Either those are too complex for the scope of this article or not relevant to JavaScript itself.

Some worth mentioning concepts:

1. Functional data structures
2. Handling errors without exceptions
3. Strictness and laziness(Lazy evaluation)
4. Functional parallelism(async FP)
5. Monoids and Functor
6. Side-effect

Where to go from here

As I already mentioned, JavaScript is not a fully functional language. Same time as JavaScript developer, We have to use document and window in frontend. So we completely can not ignore impurity. We have to mix and match. Writing function way makes your code more declarative and readable. However, It does add a little bit of complexity in code in term of core concepts. Saying that, If you know the basic concept as described above. You are good to go and write FP. Same time there are multiple articles online. I have listed some of them below. If you really want to learn FP. I will do recommend to write some code in language like scala, clojure, haskell. It will help you to understand the core concepts and idea behind FP.

Note: Due to content length, I have to break this topic in multiple articles. Soon i will publish next part of it.

Reference articles:

1. An introduction to functional programming in JavaScript
2. 9 Functional Programming Concepts Everyone Should Know
3. Understand the Key Functional Programming Concepts
4. 30-seconds-of-typescript/
5. scala-book/functional-programming
6. An-introduction-to-the-basic-principles-of-functional-programming

Note: All code example has written in TypeScript. You can use TypeScript Playground to convert TS to JS code. Another thing to note, Sample Example Codes are actually not the one-liner. But all code has only one line logical block.

How to create a reusable utility module

If you are using TypeScript or Babel in your project, You can use the ES6 module out of the box.

// util/draw.ts

export const name = 'square';

export function area(length: number, breadth: number) {
  return length * breadth
}

However, in traditional node.js, ES6 import and export are not supported out of the box. You can use module.exports/exports to export method or class.

// util/draw.js

exports.name = 'square';

exports.area = (length, breadth) => {
  return length * breadth
}

Once you have the setup ready. You can use the below function in your utility file.

1. Array to CSV

Converting an array to CSV is a very common operation in the frontend. We do not want to create a server API to perform such a small logical CSV generation. Before generating a CSV file, We need to convert the array to a CSV string. The below util method can help to generate CSV string.

const arrayToCSV = (arr: (string | number)[][], delimiter = ",") =>
  arr
    .map((v) =>
      v
        .map((x) => (typeof x === "string" ? `"${x.replace(/"/g, '""')}"` : x))
        .join(delimiter)
    )
    .join("\n");

How to use:

arrayToCSV([
  ["a", '"b" great'],
  ["c", 3.1415],
]); // '"a","""b"" great"\n"c",3.1415'

2. Capitalize

Capitalizes the first letter of a string. you can pass lowerRest, to convert rest characters in lowercase.

const capitalize = (str: string = "", lowerRest = false): string =>
  str.slice(0, 1).toUpperCase() +
  (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));

How to use:

capitalize("fooBar"); // 'FooBar'
capitalize("fooBar", true); // 'Foobar'

Modified version(using regex, replace)

const capitalizeEveryWord = (str = "") =>
  str.replace(/\b[a-z]/g, (char) => char.toUpperCase());

How to use:

capitalizeEveryWord("hello world!");  // 'Hello World!'

3. Cast/Convert into Array

Casts the provided value as an array if it's not one.

export const castArray = (val: any): any[] =>
  Array.isArray(val) ? val : [val];

How to use:

castArray("foo");  // ['foo']
castArray([1]);  // [1]

4. Create chunks of Array

Chunks an array into smaller arrays of a specified size.

export const chunk = (arr: any[], size: number) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (_: any, i: number) =>
    arr.slice(i * size, i * size + size)
  );

How to use:

chunk([1, 2, 3, 4, 5], 2); // [[1,2],[3,4],[5]]

5. Create a compact Array by removing falsy values

const compact = (arr: any[]) => arr.filter(Boolean);

How to use:

compact([0, 1, false, 2, "", 3, "a", Number("e") * 23, NaN, "s", 34]); // [ 1, 2, 3, 'a', 's', 34 ]

6. String contains

Returns true if given string s1 contains s2. Compare is case insensitive.

const contains = (s1: string, s2: string = "") =>
  s1.toLowerCase().indexOf(s2.toLowerCase()) !== -1;

How to use:

contains("Text1", "Ext"); // true
contains("Text1", "et"); // false

7. Convert CSV string to 2D Array

Converts a comma-separated values (CSV) string to a 2D array.

const CSVToArray = (data: string, delimiter = ",", omitFirstRow = false) =>
  data
    .slice(omitFirstRow ? data.indexOf("\n") + 1 : 0)
    .split("\n")
    .map((v) => v.split(delimiter));

How to use:

CSVToArray("a,b\nc,d"); // [['a','b'],['c','d']];
CSVToArray("a;b\nc;d", ";"); // [['a','b'],['c','d']];
CSVToArray("col1,col2\na,b\nc,d", ",", true); // [['a','b'],['c','d']];

8. Deep Flatten Array

const deepFlatten = (arr: any[]): any[] => {
  if (typeof Array.prototype.flat !== "undefined") return arr.flat(Infinity);
  return [].concat(
    ...arr.map((v: any) => (Array.isArray(v) ? deepFlatten(v) : v))
  );
};

How to use:

deepFlatten([1, [2], [[3], 4], 5]); // [1, 2, 3, 4, 5]
deepFlatten([1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Note: You can also use ES2017 API to flatten Array.

[1, [2], [[3], 4], 5].flat(Infinity)

9. Ellipsis or Truncates Strings

Truncates a string up to a specified length.

Determine if the string's length is greater than num. Return the string truncated to the desired length, with '...' appended to the end of the original string.

const ellipsis = (str: string, num: number = str.length, ellipsisStr = "...") =>
  str.length >= num
    ? str.slice(0, num >= ellipsisStr.length ? num - ellipsisStr.length : num) +
      ellipsisStr
    : str;

How to use:

ellipsis("boomerang", 5, ".."); // "boo.."

ellipsis("boomerang"); // "boomer..."

ellipsis("boomerang", undefined, "♦♦♦"); // "boomer♦♦♦"

10. Group data by the key or function

Groups the elements of an array based on the given function.

Use Array.prototype.map() to map the values of an array to a function or property name. Use Array.prototype.reduce() to create an object, where the keys are produced from the mapped results.

type MapFunc<T = any> = (val: T, index?: number, arr?: T[]) => T;

const groupBy = <T = any>(arr: T[], fn: MapFunc<T> | string) =>
  arr.map(isString(fn) ? (val: any) => val[fn] : fn).reduce((acc, val, i) => {
    acc[val] = (acc[val] || []).concat(arr[i]);
    return acc;
  }, {});

How to use:

groupBy([6.1, 4.2, 6.3], Math.floor); // {4: [4.2], 6: [6.1, 6.3]}
groupBy(["one", "two", "three"], "length"); // {3: ['one', 'two'], 5: ['three']}

Conclusion:

After writing the 10 method example, I realized that I could not cover all the One-Liner util in one post. Same time I could not pick the best of 10 among them all. So I will try to cover the rest in another Article. If your willing to spend some spare time. You can find your best utility method here on my website 30 Seconds of Typescript.

Please let me know your best in the comments. If you have your own version of the one-liner. Please do let me know, I will include it on my website as well as in my next article.

Thanks for reading. If you like, Please share and react to my article.

Then this article is for you. This article will guide you step by step building block to build a scalable Golang project but in simple words.

Do I really need Golang?

Before going further you should ask this question to yourself and your teammates. Hope you are not migrating just for the sake that you want to try out something new. Golang is a new language but it is not that new. The first stable release was in 2009 the same as nodejs. Due to similarity or say javascript popularity, Nodejs become famous in a few years. React, Angular and other frontend framework help to make nodejs one of the popular language in the market.

Golang has a different type of fans. Just like any other stable language, it took time for Golang to become famous. Now it is a buzz word in all industries. However, Golang is not just a buzz word. It has defiantly the potential to become the first choice and it is happing already. Now Golang is the first choice for micro-service development.

The biggest reason for adaptation, This language is maintained by Google Team. And companies like Netflix, Google, Facebook are using it in production read more. Tools like Docker and kubernetes has been written on Golang. Due to its high performance, simplicity it is now goto go language.

You can ask me a question. If Golang is so good and it is in the market for such a long time why I am writing this blog now? The answer is simple, Recently one of my tool build on Golang went live in my Organization. So I want to share my experience.

Prerequisite

• Golang[v1.16 and above]: You should have the latest version of Golang in your system. You can download and install Golang here.
• Basic understanding of async programming
• Basic understanding of functional programming
• Linux/Unix: Since the examples and command will be written for the UNIX system. You can find similar command if you are working on a window system

Verify Golang

To verify, open and type the below command

go version

## output
go version go1.16.1 darwin/amd64

Golang First program, "Hello, Golang ❤️"

Writing a Golang program is pretty simple. You can create a file with "package main".

touch main.go

Add below code in main.go

package main

import "fmt"

func main() {
    fmt.Println("Hello, Golang ❤️")
}

Running a Golang program: go run main.go

Explanation: Every Go Executable program required an entry file which should be defined in package main. And file should contain a main function.

Note: Golang is a compile and statically typed language, meaning you need to compile the program before running it. However, when you run an app using go run command. It creates a binary in the temp folder and executes it. In production, You should do this by own. You should not run an app using Go run.

Running app using the build command

## compile and build go app[You can give any name to executable using -o]
go build -o todo_app.exe main.go 

#### running a go app

./todo_app.exe

Clean up, Gitignore setup [optional]

## .gitignore

# Binaries for programs and plugins
*.exe
*.exe~
*.dll
*.so
*.dylib

# Test binary, built with `go test -c`
*.test

# Output of the go coverage tool, specifically when used with LiteIDE
*.out

# Dependency directories (remove the comment below to include it)
# vendor/

Golang package manager, Start a new project

In version 1.11, Go introduce a new package manager similar to nodejs npm. This makes it easier to start a new project. To start a new project, You can create a folder and follow the below command.

mkdir todo_app
cd todo_app
go mod init github.com/deepakshrma/todo_app

Explanation: Here in the above code, You have created a folder. And just like node(npm) init. You have initialized a module with the name github.com/deepakshrma/todo_app. The module name can be anything. However, It is recommended to use your module hosting platform(here, in this case, github.com) followed by the username and app name.

Once you run the above command You can see a file will be created with the name go.mod. This will have all the dependencies and settings required by this app. You can read more on go.mod here. You can also watch EVERYTHING You SHOULD know about Go Modules , a nice video tutorial on youtube.

cat go.mod

## output
module github.com/deepakshrma/todo_app

go 1.16

Golang task manager, Build something new

Golang does not have an in-built task manager like the npm package. However, there is plenty of third-party modules available in the Golang world. I tried go-task module and I loved it. So we can use the same.

Create a Taskfile.yml in root folder

version: "3"

tasks:
  build-app:
    cmds:
      - go build -o todo_app.exe main.go
    silent: true

To use go-task, you have to install the binary. There are many ways you can install task binary. However, I recommend using the command go get -u github.com/go-task/task/v3/cmd/task. It will download go-task and create a binary in GOPATH. After that, you can use the task command globally.

Build using task

task build-app

Write your first micro-service

A micro-service(web service) can follow different architecture. For the demo, I will use the RESTfull API. You can find relevant doc for GRPC here.

Update main.go file

package main

// import net/http module

import (
    "fmt"
    "log"
    "net/http"
    "os"
)

// Route function to handle the request

func handleFunc(w http.ResponseWriter, req *http.Request) {
    fmt.Fprint(w, "Hello, Golang ❤️")
}

func main() {

    // Get the user provided port from ENV, if port is not defined user default port as 8080
    port := os.Getenv("PORT")
    if port == "" {
        port = "8080"
    }

    // Bind "/" as route to handleFunc
    http.HandleFunc("/", handleFunc)

    log.Printf("You app is running on http://localhost:%s", port)

    // Listen and Serve to localhost:port
    log.Fatal(http.ListenAndServe(fmt.Sprintf(":%s", port), nil))
}

Add a task to Tasklist.yml

version: "3"

tasks:
## rest of the tasks
  build-start:
    cmds:
      - go build -o todo_app.exe main.go && ./todo_app.exe

Run app: Once you add the task, You can build and run the app using the command task build-start. After that, you can open the URL to any browser http://localhost:8080 to see your first RESTfull API.

Implementing database repository

This article is just starting guideline. So, We will not use a real database to make the connection and save data. However to mimic the database let's create a repository. We will use an in-memory array/slice to contain data.

To create a simple database repository and add methods to insert and list Todo, Add the below code to the todo_app/repository/repository.go file.

package repository

import "time"

type Todo struct {
    Title       string    `json:"title"`
    Done        bool      `json:"done"`
    Description string    `json:"description"`
    CreatedAt   time.Time `json:"createdAt"`
}

type repository struct {
    db []Todo
}

var (
    r *repository
)

// This function will run one time when package is imported before anything else.
func init() {
    r = &repository{
        db: []Todo{},
    }
}

// Repository, Create public interface
type Repository interface {
    ListTodo() []Todo
    AddTodo(todo *Todo) Todo
}

// Repository, Get instance of singleton repository
func NewRepository() Repository {
    return r
}

func (r *repository) ListTodo() []Todo {
    return r.db
}

func (r *repository) AddTodo(todo *Todo) Todo {
    todo.CreatedAt = time.Now()
    r.db = append(r.db, *todo)
    return *todo
}

Here in the above code, We have exposed a singleton instance of Repository.

Let's tryout in main.go, we will remove this code later

 package main

import (
    "fmt"

    "github.com/deepakshrma/todo_app/repository"
)

func main() {
    r := repository.NewRepository()
    r.AddTodo(&repository.Todo{
        Title:       "Write a blog on golang",
        Description: "//TODO",
        Done:        false,
    })
    todos := r.ListTodo()
    for _, todo := range todos {
        fmt.Printf("%+v\n", todo)
    }
}

If you try the above code in the main function, You will see come output {Title: Write a blog on Golang Done:false Description://TODO CreatedAt:2021-03-27 14:16:00.03263 +0800 +08 m=+0.000465414}. We will update our router later.

Using a third-party module/package

We have created a simple route using http.HandleFunc. But managing multiple routes could be a challenge. And at the same time, we don't want to re-invent the wheel. Using a module in Golang is pretty simple. You can get any module from the Github repo. Let's use one of the best web framework modules gin-gonic.

To get a go module, you can use go get command or you can use go mod tidy after adding code.

// main.go

package main

import (
    "fmt"
    "log"
    "net/http"
    "os"

    "github.com/deepakshrma/todo_app/repository"
    "github.com/gin-gonic/gin"
)

var (
    r = repository.NewRepository()
)

func GetTodos(c *gin.Context) {
    c.JSON(http.StatusOK, gin.H{"data": r.ListTodo()})
}
func AddTodo(c *gin.Context) {
    var input repository.Todo
    if err := c.ShouldBindJSON(&input); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
        return
    }
    r.AddTodo(&input)
    c.JSON(http.StatusOK, gin.H{"data": input})
}
func main() {
    // Get the user provided port from ENV, if port is not defined user default port as 8080
    port := os.Getenv("PORT")
    if port == "" {
        port = "8080"
    }
    router := gin.Default()
    v1 := router.Group("/v1")
    {
        v1.GET("/todos", GetTodos)
        v1.POST("/todos", AddTodo)
    }
    log.Fatal(router.Run(fmt.Sprintf(":%s", port)))
}

Run go mod tidy command and start the server

## get modules
go mod tidy

## build and start the server
 task build-start

Note: go mod tidy import module and same time clean up go.mod file by removing unused imports. It is a very handy command.

Explanation: Above code we have created a gin router with grouping them using API versioning. If you dot use Group, The default endpoint will be "/todos". But adding Group v1, Now all APIs need to add v1 to request resources.

Insert a todo and get the list using curl

You can use postman to insert and get data. However, for simplicity, I will use the curl command.

Insert data using endpoint

curl --header "Content-Type: application/json" \
  --request POST \
  --data '{"title":"Create Golang Tutorial","Description":"lets do it.."}' \
  http://localhost:8080/v1/todos

// result

{"data":{"title":"Create Golang Tutorial","done":false,"description":"lets do it..","createdAt":"2021-03-27T14:54:56.796403+08:00"}}

Fetch data using endpoint

curl http://localhost:8080/v1/todos

// result

{"data":[{"title":"Create Golang Tutorial","done":false,"description":"lets do it..","createdAt":"2021-03-27T14:54:56.796403+08:00"}]}

Conclusions, Where to go from here

Finally, We have a working Micro Service. Definitely, This is not the perfect one. There are some other topics that need to be cover like Testing. However, It will give a kick start to write code in Golang. And thanks to the good community, You will find lots of nice document over the internet written by experts. Some article has been listed below.

References:

• getting-started
• effective_go
• gobyexample
• Golang-SQLite-Simple-Example
• design-patterns
• golang-using-gin

Source Code:

Quotes Of The Day:

Writing a micro-server is an art and to make good Art, Artist needs a good tool. Go is one of those tools. - Me 😂

First, let’s see what are the different ways to create a loop and break a loop.

1. Traditional for, while, do-while loop

Creating a for-loop is very easy and very common.

For Loop:

function howMany(selectObject) {
  let numberSelected = 0;
  for (let i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

Do While:

let i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);
// While
let n = 0;
let x = 0;
while (n < 3) {
  n++;
  x += n;
}

How to break: Breakin a loop is very easy here. You can use break keyword to break a loop.

for (let i = 0; i < a.length; i++) {
  if (a[i] === theValue) {
    break;
  }
}

This is a more elegant way of breaking a loop. If you have a nested loop(loop inside the loop). You can use the labelled statement to break a loop.

function labeledLoop() {
  let x = 0;
  let z = 0;
  outer: while (true) {
    console.log("Outer loops: " + x);
    x += 1;
    z = 1;
    while (true) {
      console.log("Inner loops: " + z);
      z += 1;
      if (z === 10 && x === 10) {
        break outer;
      } else if (z === 10) {
        break;
      }
    }
  }
}

Here outer is a label given to outer-loop. Whenever the condition matches, we break the outer loop using the labeled condition.

Note: Using the labelled statement is a nice way but it is a little bit confusing for developers. It is like a goto statement that should be avoided. The same result we can get by introducing normal conditional variables.

Example:

function conditionalBreak() {
  let x = 0;
  let z = 0;
  while (true) {
    console.log("Outer loops: " + x);
    x += 1;
    z = 1;
    let breakOuterLoop = false;
    while (true) {
      console.log("Inner loops: " + z);
      z += 1;
      if (z === 10 && x === 10) {
        breakOuterLoop = true;
        break;
      } else if (z === 10) {
        break;
      }
    }
    if (breakOuterLoop) break;
  }
}

Here in the above code, We have introduced a variable breakOuterLoop and I check the value of it after each iteration of the outer loop.

Benchmark: You may say that introducing a variable and condition can slow down the code. However you may surprise when I say, The **conditionalBreak** is faster than **labeledLoop** in the benchmark.

benchmark:

labeledLoop x 9,295,537 ops/sec ±0.85% (87 runs sampled)
conditionalBreak x 9,349,901 ops/sec ±0.45% (89 runs sampled)
Fastest is conditionalBreak,labeledLoop

Test Script:

var { Benchmark } = require("benchmark");
var suite = new Benchmark.Suite();
suite.add("labeledLoop", function() {
  labeledLoop();
});
suite.add("conditionalBreak", function() {
  conditionalBreak();
});
suite.on("cycle", function(event) {
  console.log(String(event.target));
});
suite
  .on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  .run({ async: true });

Note: I am using benchmarkjs

2. Array Functional API methods

As you know, We should try to use more Array's APIs. Array's API for looping is much cleaner and safer. However, breaking Array's methods are tricky.

If you want to read more on for-loops and understand when to use which loop. Here is an article that you can follow. Are For Loops or ForEach Better in JavaScript?

const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = (v) => {
  if(v % 5 == 0) {
    break; //Error here: Illegal break statement
  }
  console.log(v)
}
data.forEach(printValueTill5)

Note: You can’t use break keyword inside a function. Either is named function of anonymous function. Same time, You can't use return false or anything like that. It is considered as returning from the given function. So the code will behave like a continued statement.

// using return
const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = (v) => {
  if(v % 5 == 0) {
    return false
  }
  console.log(v)
}
data.forEach(printValueTill5)
// Output: 1 2 3 4 6 7

Solution via throwing error: You can use a throw statement to break the loop. However, it is not an elegant way.

const data = [1, 2, 3, 4, 5, 6, 7];
const BREAK_LOOP_ERROR = Symbol("BREAK_LOOP");
const printValueTill5 = v => {
  if (v % 5 == 0) {
    throw BREAK_LOOP_ERROR;
  }
  console.log(v);
};

try {
  data.forEach(printValueTill5);
} catch (e) {
  if (e !== BREAK_LOOP_ERROR) throw e;
  console.debug(e);
}

Throwing an error in the loop is an anti-pattern. Same time, If you notice how much boilerplate code we have to write every time using the throw statement.

Using Array#every: If you are familiar with [].every(), It is more eligant way to break a for loop in a functional way.

// using 
const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = v => {
  if (v % 5 == 0) {
    return false; // return false to break
  }
  console.log(v);
  return true; // Else continue.
};
data.every(printValueTill5)

The method every will loop over till you return true. Once you return false, It will break the loop.

Note: Using every is one of the best ways to break loops. However, This solution has a lot of cons.

a. Every method returns a boolean either true or false at the end, So you can chain further.

Example:

const data = [1, 2, 3, 4, 5, 6, 7];
const printValueTill5 = v => {
  if (v % 5 == 0) {
    return false;
  }
  console.log(v);
  return true;
};
data.every(printValueTill5) // returns false
  .map(console.log) // Error: data.every(...).map is not a function

b. You have to change the functionality of printValueTill5 by introducing conditional return. Hard to reuse further.

c. It is hard to debug and test.

So now the question remains the same, “How do you break a loop in JavaScript?”

The best way, You can create a utility method, which is given below. It may not be as performant as the above solutions. But more clean and predictable.

tillWhen:

const _ = {};

// fn: (any[], function, () => boolean) ->  any[]

_.tillWhen = (data, fn, predicate) => {
  if (!data || !Array.isArray(data)) return data;
  let index = 0;
  let arr = [];
  do {
    arr.push(fn(data[index]));
  } while (index < data.length && !predicate(data[index++]));
  return arr;
};
module.exports = _

Uses: Using tillWhen is pretty much simple and straight forward.

const data = [1, 2, 3, 4, 5, 6, 7];
const mapValue = v => {
  return v;
};
const till5 = v => v % 3 == 0;
_.tillWhen(data, mapValue, till5)
  .forEach(x => console.log(x));
// Output: 1 2 3 4 5

Looks like we have nearly touched the surface of JavaScript's Weird Part. In the end, We have achieved what we want to achieve. If you have more suggestions. Please let me know in the comments.

Please do subscribe/follow/react to support me. Thanks.!! 🙏🙏

References:

• Loops_and_iteration
• short-circuit-array-foreach-like-calling-break

Prerequisite:

1. Go [v1.6 and above]
2. NPM (nodejs package manager)

Note: ESBuild is also available in nodejs. However, I find using Go and create binary CLI is much faster and reusable.

Why should I use ESBuild when I have the webpack?

There is no reason that you should stop using webpack. But there are a lot of reasons you can at least start thinking of using ESBuild. Some of the best ones are given below. For more info, you can visit the official page.

1. It's written in Go and compiles to native code.
2. Parallelism is used heavily.
3. Memory is used efficiently.
4. Loaders and plugins added by default

[Compilers time comparison]

Where to start

To build a pipeline, You need an application. You can start a project from scratch as it is documented here. However, For demo purpose, I will use the Quote of the day app that I have created in Github.

Project Structure

• public: A place to keep all public file like image
• src: It contains the source code written in TypeScript and ReactJS
• package.json: This will contain all the common scripts and dependencies for the nodejs app
• runner.go: The build script is written in Golang to use ESBuild to compile and bundle typescript
• tsconfig.json: Basic configuration for a TypeScript and react project.

The rest of the files and folder you can ignore for now.

Note: The purpose of the article to show how to user ESBuild. So I am not going into the details of react app. You can find source code here in Quote of the day repo.

[Screenshot of code]

Write your first Go Script

Open runner.go and add below code

package main

import (
    "os"

    "github.com/evanw/esbuild/pkg/api"
)

func main() {
    result := api.Build(api.BuildOptions{
        EntryPoints: []string{"src/app.tsx"},
        Outdir:      "dist",
        Bundle:      true,
        Write:       true,
        LogLevel:    api.LogLevelInfo,
    })
    if len(result.Errors) > 0 {
        os.Exit(1)
    }
}

Create go module and get all go dependencies

## Create/init a go module
go mod init quote-of-day 

## Create vendor module/directory for all dependencies(similar to **node_modules**)
go mod vendor 

## Get all go dependencies
go mod tidy

Once you are done with go modules, Let's update package.json to build go binary runner.

/*package.json*/

"scripts": {
    "build:bin": "go build -o runner.exe runner.go",
    "build": "./runner.exe && cp public/* dist/",
    "serve": "http-server dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Explanation: npm run build:bin will create an executable binary(runner.exe). This will we used to compile react source code. To compile react code next time you can use npm run build.

Note: We can use the go run command directly. However, Binary will be much faster and can be distributed among the teams.

Run Build: Once you run npm run build, You will see the output as below. You will see some warnings, We will fix these later.

Things to be noted, The size of the app.js. It will be around 1mb which is too high for such a small app.

Optimise build settings and Fix warning messages

To optimize the es build settings, Let's add below BuildOptions in runner.go

//... rest of the code

func main() {
    result := api.Build(api.BuildOptions{
        EntryPoints:       []string{"src/app.tsx"},
        Outdir:            "dist",
        Bundle:            true,
        Write:             true,
        LogLevel:          api.LogLevelInfo,
        ChunkNames:        "chunks/[name]-[hash]",
        MinifyWhitespace:  true,
        MinifyIdentifiers: true,
        MinifySyntax:      true,
        Splitting:         true,
        Format:            api.FormatESModule,
        Color:             api.ColorAlways,
        Define: map[string]string{
            "process.env.NODE_ENV": `"dev"`,
        },
        AssetNames: "assets/[name]-[hash]",
        Loader: map[string]api.Loader{
            ".png": api.LoaderFile,
        },
        Engines: []api.Engine{
            {api.EngineChrome, "58"},
            {api.EngineFirefox, "57"},
            {api.EngineSafari, "11"},
            {api.EngineEdge, "16"},
        },
    })
    if len(result.Errors) > 0 {
        os.Exit(1)
    }
}

Now re-build runner.exe and re-run the build with npm run build:bin && npm run build commands. This time you won't see any error or warning. Same time, The size of the app.js will be reduced to 283.4kb.

Quote Of the Day application

To see the output, I have added http-server in the devDependencies. You can use any other static server.

npm run serve

[Quote Of the Day App Demo]

Comparison with Webpack

I tried to compare build time with Webpack with bare minimal configuration. For that we do need to add some dev dependencies and Webpack itself.

Add dependencies: Add webpack and some loaders

npm install --save-dev css-loader style-loader webpack webpack-cli typescript ts-loader

Update package scripts: Add new command to run build using webpack

"scripts": {
    ...
    "webpack": "webpack && cp public/* dist/",
   ...
  },

Create a webpack configuration file:

// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/app.tsx",
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Let's run both commands and compare:

• Run ESBuild: npm run build
• Run Webpack: npm run webpack

The time taken by Webpack v/s ESbuild is 5.387s/0.329s. As you can clearly see the difference between Webpack vs ESBuild time. ESBuild is 16x faster than Webpack.

Conclusion

ESBuild is not one solution for all your needs. In my opinion, ESBuild should not be used for development purpose. It is not a complete tool. You may struggle to enable a feature like live reload. For that, you can use Snowpack which is built on top of ESBuild APIs. However, by Optimizing build configs and proper scripting pipeline, You can optimize your CI/CD pipeline significantly.

There is a nice quote by Coco Chanel

“To be irreplaceable, one must always be different ” – Coco Chanel

Code: You can all code in es-build-react GitHub repo. And webpack version of the code can be found in esbuild_vs_webpack branch of Github repo.

If you like and appreciate my hours of effort to research, write code and write this article. Please share your love and reaction ;) 😊. Thanks in advance.

Basic syntax

Before going further let’s have a quick look at both of the syntaxes.

For Loop:

for ([initialExpression]; [conditionExpression];[incrementExpression]) {  
  statement|s  
}

const array = [1, 2, 3, 4, 5];  
for (let index = 0; index < array.length; index++) {  
  console.log(array[index]);  
}

ForEach Loop:

arr.forEach(callback(currentValue[, index[, array]]) {  
  // execute something  
}[, thisArg]);

const array = [1, 2, 3, 4, 5];  
array.forEach((item) => {  
  console.log(item);  
});

Here in the above samples, Both code will print the log sequence of numbers. ForEach takes a functional approach to solving the problem. ForEach takes a function callback and execute over each value in the array. The forEach method looks more concise than the For loop. But there are cases where we need for loop, or we can say for loop is better than forEach. Let’s explore.

1. Looping to a range of values: Suppose you have to loop some code for particular times(assume 100). You can’t use forEach here. Because for ForEach you need to have an array of data. You can use Array(100).fill(0) to create an Array of data filled with 0. But it is an extra headache.

// Sum of the first 99 natural numberslet sum = 0;  
for (let index = 0; index < 100; index++) {  
  sum += index;  
}

Same code using forEach

let sum = 0;  
Array(100)  
  .fill(0)  
  .forEach((_, index) => {  
    sum += index;  
  });  

console.log(sum); // 4950

Here the complexity of the code is high( O(2n)). Since we are looping 2 times. One to fill the array and the second one to iterate the array to collect natural numbers.

2. Increment index other than 1: This is another good case, Where you should use for loop instead of forEach. It will reduce the complexity of the code.

For example, Think you have an array of data and you have to perform collect pairs of the data.

let numbers = [0, 1, 2, 3, 4, 5, 6, 7];  
let pairs = [];  

for (let index = 0; index < numbers.length; index += 2) {  
  pairs.push([numbers[index], numbers[index + 1]]);  
}

console.log(pairs); // [ [ 0, 1 ], [ 2, 3 ], [ 4, 5 ], [ 6, 7 ] ]

Notice we can skip(increment) index by any number here. If you have to do the same using the forEach loop you have to have some logic to skip the 2nd number each time.

let numbers = [0, 1, 2, 3, 4, 5, 6, 7];  
let pairs = [];

numbers.forEach((item, index) => {  
  if (index % 2 === 0) {  
    pairs.push([item, numbers[index + 1]]);  
  }  
});  

console.log(pairs); // [ [ 0, 1 ], [ 2, 3 ], [ 4, 5 ], [ 6, 7 ] ]

3. Conditional Break/Continue in a loop: Due to some reason If your code requires to conditional break loop. For loop is better to use than forEach. This is because breaking a forEach loop is pain. I have written an entire article just to explain how to break a loop.

let numbers = [0, 1, 2, 3, 4, 5, 6, 7];for (let index = 0; index < numbers.length; index++) {  
  if (numbers[index] > 5) {  
    break;  
  }  
  console.log(numbers[index]); // 0, 1, 2, 3, 4, 5  
}

Similar code if you have to write using forEach, You have to throw an error and catch it.

let numbers = [0, 1, 2, 3, 4, 5, 6, 7];const printValueTill5 = (v) => {  
  if (v % 5 == 0) {  
    **throw new Error("index is greater than 5");**  
  }  
  console.log(v);  
};  
try {  
  numbers.forEach(printValueTill5);  
} catch {}

4. Working in the chunks, split array: Another good use case could be when you have to work in the chunk of the data. So you can start index from where you leftover in the first iteration.

For example, Suppose you have to merge 2 arrays and you are not sure about the size of both arrays.

const array1 = [1, 3, 5, 7, 8, 9, 10];  
const array2 = [2, 4, 6];  
const merged = [];let index = 0;  

for (; index < array1.length && index < array2.length; index++) {  
  merged.push(array1[index]);  
  merged.push(array2[index]);  
}

// loop over array1, if left any  
for (; index < array1.length; index++) {  
  merged.push(array1[index]);  
}

// loop over array2, if left any  
for (; index < array2.length; index++) {  
  merged.push(array2[index]);  
}

console.log(merged); // [1,2,3,4,5,6,7,8,9,10]

I can’t even think of writing the same code using forEach.

5. Working with nested loop: Another challenge of a forEach loop is working with nested loops. Nesting a forEach can loop very ugly. Same time it can leads to callback hell very easily.

For Example, fill a 2D/3D array.

let matrix = [];for (let i = 0; i < 3; i++) {  
  matrix[i] = [];  
  for (let j = 0; j < 3; j++) {  
    matrix[i][j] = [i, j];  
  }  
}  

console.log(matrix);

/*  
[  
  [ [ 0, 0 ], [ 0, 1 ], [ 0, 2 ] ],  
  [ [ 1, 0 ], [ 1, 1 ], [ 1, 2 ] ],  
  [ [ 2, 0 ], [ 2, 1 ], [ 2, 2 ] ]  
]  
*/

Conclusion

Maybe working with raw for loop is tricky and error-prone. But for loop has its own place. It gives you full control over data, index and condition flow. Same time based on the above examples, We can make the assumption that whenever your work requires more interaction with the index/conditional expression. You can use for-loop. For the rest of the case use forEach for data first uses.

Thanks for appreciating my effort. It encourages me to write more and better than the previous.

“I know it has been tough but I still cheering for you.” - Anonymous

“The more I learn, the more I realize how much I don’t know.” — Albert Einstein

This article is a continuation of my previous article How you should not write code. If you have not read it, I will suggest you please read it.

1. Requiring (Begging) is not good

I have seen code where reading a JSON file, developers use [require](https://nodejs.org/api/modules.html#modules_require_id). However, require is not that performant as you think. Let’s explore with an example.

Create a user.json inside the folder [require_files]. I am showing a small code snippet of a big JSON file. However, you can download the longer version from Github.

// require_files/user.json
[
  {
    "_id": "5dea8219b7e4e8016a6661e0",
    "index": 0,

    "address": "231 Vandervoort Place, Hollins, South Carolina, 2782",
    "about": "Ex nulla do duis exercitation Lorem occaecat veniam tempor voluptate laboris adipisicing proident incididunt incididunt. Aliqua enim duis quis esse eiusmod eiusmod tempor velit duis qui anim in. Ipsum incididunt occaecat eu sint. Ut nulla est commodo laborum minim incididunt proident nostrud consectetur tempor. Eiusmod aute tempor eu aute enim nulla ut aliquip. Pariatur consequat tempor tempor irure sunt cillum. Ullamco Lorem Lorem ullamco enim ex elit ut pariatur in qui.\r\n",
    "greeting": "Hello, Cherie Webster! You have 7 unread messages.",
    "favoriteFruit": "strawberry"
  }
]

Let’s create the main function:

// req.js
function main() {
  console.time("REQUIRE");
  const user = require("./user.json");
  console.timeEnd("REQUIRE");
console.time("REQUIRE-2");
  const userJson = JSON.parse(fs.readFileSync(__dirname + "/user.json"));
  console.timeEnd("REQUIRE-2");
}
main();
// output
// REQUIRE: 0.989ms
// REQUIRE-2: 0.245ms

If you notice the timing of the require and readFileSync, it is drastically different. The reason, require the method does a lot of things behind the scenes (like caching).

Let’s see another version of it inside a loop.

function main() {
  console.time("REQUIRE");
  const user = require("./user.json");
  console.timeEnd("REQUIRE");
console.time("REQUIRE-2");
  const userJson = JSON.parse(fs.readFileSync(__dirname + "/user.json"));
  console.timeEnd("REQUIRE-2");
console.time("REQUIRE-FOR");
  for (let e = 0; e < 10000; e++) 
    require("./user.json");
  console.timeEnd("REQUIRE-FOR");
console.time("REQUIRE-FOR-2");
  for (let e = 0; e < 10000; e++)
    JSON.parse(fs.readFileSync(__dirname + "/user.json"));
  console.timeEnd("REQUIRE-FOR-2");
}
main();
// Output
// REQUIRE: 0.956ms
// REQUIRE-2: 0.190ms
// REQUIRE-FOR: 164.483ms
// REQUIRE-FOR-2: 663.703ms

Here in for-loop, I have required the same file again and again. Since require is cached, require is very fast compared to our version of [fs.readFileSync](https://nodejs.org/api/fs.html#fs_fs_readfilesync_path_options). Let’s create a cached requireJSON utility library.

Here you can clearly see the performance difference: requireJSON is 40 times faster than the require.

// util.js
const fs = require("fs");
let files = {};
function requireJSON(path) {
  if (!files[path]) {
    files[path] = JSON.parse(fs.readFileSync(path));
  }
  return files[path];
}
module.exports = {
  requireJSON
};
// req.js
const fs = require("fs");
const { requireJSON } = require("./util");
function main() {
  // ...Rest of the code
  console.time("REQUIRE-FOR-NEW");
  for (let e = 0; e < 10000; e++) {
    require("./user.json");
  }
  console.timeEnd("REQUIRE-FOR-NEW");
console.time("REQUIRE-FOR-NEW-2");
  for (let e = 0; e < 10000; e++) {
    requireJSON(__dirname + "/user.json");
  }
  console.timeEnd("REQUIRE-FOR-NEW-2");
}
main();
// Output
// REQUIRE: 0.737ms
// REQUIRE-2: 0.196ms
// REQUIRE-FOR: 170.930ms
// REQUIRE-FOR-2: 608.423ms
// REQUIRE-FOR-NEW: 147.607ms
// REQUIRE-FOR-NEW-2: 3.071ms

Note: It doesn’t mean we should not stop using require. require is mainly to load JS files. It has a lot of functionality. However, whenever you are dealing with JSON(static) files. I would recommend creating a small utility function or using any library.

Code: https://github.com/deepakshrma/how-not-to-write-code/tree/master/js/require_files

2. Don’t use Sync APIs

In the above example, I talked a lot about require. However, you should not use any sync I/O in Node.js. It drastically reduces your app performance.

//util.js
function requireFile(path) {
  if (!files[path]) {
    files[path] = fs.readFileSync(path);
  }
  return files[path];
}
// sync_server.js
const http = require('http');
const {requireFile} = require("../require_files/util")
const server = http.createServer();
server.on('request', async (req, res) => {
  res.end(requireFile(__dirname+"/users.json"));
});
server.listen(8080);
// no_sync_server.js
const http = require('http');
const fs = require('fs');
const server = http.createServer();
server.on('request', async (req, res) => {
  fs.createReadStream(__dirname+"/users.json").pipe(res)
});
server.listen(8080);

AB Test benchmark: ab -n 1000 -c 100 [http://localhost:8080/](http://localhost:8080/)

Benchmark: Sync vs Stream

Note: The sync version using the caching requireFile function

The performance of the sync file version seems better than createReadStream. However, the sync version is using cache API and we can’t cache 2GB files like this. Let’s remove the cache.

// utils.js
function requireFileNoCache(path) {
   return fs.readFileSync(path);
}

// js/no_sync/sync_server_no_cache.js
const http = require('http');
const {requireFileNoCache} = require("../require_files/util")
const server = http.createServer();
server.on('request', async (req, res) => {
  res.end(requireFileNoCache(__dirname+"/users.json"));
});
server.listen(8080);

Benchmark: Sync No Cache vs Sync

As you can see by just removing the cache, the performance has reduced 20%, and the file is very small. Think about if the file size is too big. It can really impact your server **concurrency**.

Code: https://github.com/deepakshrma/how-not-to-write-code/tree/master/js/no_sync

3. Hey Underscore, You’re Doing It Wrong:

I really like the video of Brian Lonsdorf (DrBoolean). Here in this video, He explained how underscore is doing wrong. If you are really interested in functional programming I would recommend watching this talk.

Let’s see a small example from his talk.

function firstLetters(words) {
    return _.map(words, (word) => {
      return _.first(word)
    })
}
console.log(firstLetters(["Test", "Rest"]))
// [ "T", "R"]

In the above example, firstLetters is trying to get the first character of words in an Array. If we use a [**partial function**](https://scotch.io/tutorials/javascript-functional-programming-explained-partial-application-and-currying)(curry) concept. We can reduce the code and make it more readable.

Let’s see my own version of [**partial function**](https://scotch.io/tutorials/javascript-functional-programming-explained-partial-application-and-currying).

const first = function(str) {
  return str[0];
};
const map = function(fun, arr) {
  return arr.map(fun);
};
console.log(first("Test"));
console.log(map(first, ["Test", "Rest"]));
// ["T", "R"]

In the above example, nothing is fancy. first returns the first character of the word and map just iterate.

const curry = (fn, arity = fn.length, ...args) =>
  arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);
const first = function(str) {
  return str[0];
};
const map = curry(function(fun, arr) {
  return arr.map(fun);
});
const firstLetters = map(first);
console.log(firstLetters(["Test", "Rest"]));
// ["T", "R"]

If you noticed, I have added just a small utility function curry which helps us to make any function a partial function. Using that now we can make our firstLetters function more readable/reusable.

Code: https://github.com/deepakshrma/how-not-to-write-code/blob/master/js/partial_fun.js

4. Object APIs are not functional

The object class APIs are not functional in nature. When I say so, we have to be aware of the facts. Let’s take a very basic example. Suppose we have an object of the country code and name where the key is code and value is the name. And we want to convert it into an array of country objects.

const obj = {
    "IN": "India",
    "SG": "Singapore",
    "US": "United State Of America",
    "JP": "JAPAN",
    "UK": "United Kingdom"
}
// get all keys
console.log(Object.keys(obj))
// get all key-value pair entries
console.log(Object.entries(obj))
// get all countries array
console.time("entries")
console.log(Object.entries(obj).map(([code, name]) => {
    return {
        name,
        code
    }
}))
console.timeEnd("entries")
// Output
[ { name: 'India', code: 'IN' },
  { name: 'Singapore', code: 'SG' },
  { name: 'United State Of America', code: 'US' },
  { name: 'JAPAN', code: 'JP' },
  { name: 'United Kingdom', code: 'UK' } ]

Here this example works perfectly. Things to be noted, Object.entries itself is a for-loop and after that, we call map function. Meaning, we are looping twice for the same thing.

// flatObject in array
console.time("flatObject")
const flatObject = (obj) => {
    let array = []
    for(let key in obj) {
        array.push({name: obj[key], code: key})
    }
    return array
}
console.log(flatObject(obj))
console.timeEnd("flatObject")
//Output:
[ { name: 'India', code: 'IN' },
  { name: 'Singapore', code: 'SG' },
  { name: 'United State Of America', code: 'US' },
  { name: 'JAPAN', code: 'JP' },
  { name: 'United Kingdom', code: 'UK' } ]
flatObject: 0.415ms

The code is the same as above but with a single time loop. The performance has increased significantly. In this solution, the conversion logic is tightly coupled within the function. Let's decouple it.

// flatObject in array, with mapper function
console.time("flatObjectFn")
// fun object, function -> object[]
const flatObjectFn = (obj, fn) => {
    let array = []
    for(let key in obj) {
        array.push(fn(key, obj[key]))
    }
    return array
}
console.log(flatObjectFn(obj, (key, value) => ({name:value, code: key})))
console.timeEnd("flatObjectFn")
//Output 
[ { name: 'India', code: 'IN' },
  { name: 'Singapore', code: 'SG' },
  { name: 'United State Of America', code: 'US' },
  { name: 'JAPAN', code: 'JP' },
  { name: 'United Kingdom', code: 'UK' } ]
flatObjectFn: 0.128ms

This works the same as the above function. However, we have decoupled the conversion logic into a **mapper** function. And somehow it's more performant than the old version.

Code: https://github.com/deepakshrma/how-not-to-write-code/blob/master/js/object_apis.js

5. Let’s Promise you won't reject me

I personally love the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API. However, I see people struggle a lot with promises. The biggest challenge is to work with multiple promises running in parallel.

Here is one common problem we can solve. Suppose we have to hit 2 different async APIs and we want to collect data from these two APIs.

Let’s see the solution.

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
const resolve = () => {
  return new Promise(r => {
    delay(r, 1000, "SUCCESS");
  });
};
let all = Promise.all([resolve(), resolve()]);
all.then(console.log).catch(console.error);
// [ 'SUCCESS', 'SUCCESS' ]

Note: deley is a small utility function to simulate async I/O.

All looks good. However, there is an issue. What if one of the call fails??

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
const resolve = () => {
  return new Promise(r => {
    delay(r, 1000, "SUCCESS");
  });
};
const reject = () => {
  return new Promise((_, r) => {
    delay(r, 800, "FAIL");
  });
};
let all = Promise.all([resolve(), reject()]);
all.then(console.log).catch(console.error);
// Outputs
FAIL

It fails all. We will not get output for the second API call.

According to the types definition, Promise.all will reject if any promise is rejected.

// Type definition
/**
 * Creates a Promise that is resolved with an array of results when all of the provided Promises
 * resolve, or rejected when any Promise is rejected.
 * @param values An array of Promises.
 * @returns A new Promise.
 */
//all<T>(values: (T | PromiseLike<T>)[]): Promise<T[]>;

To solve this issue, we can create a very basic utility function collectAll.

const collectAll = (...promises) => {
  return new Promise(r => {
    const results = [];
    let counter = 0;
      const final = (index, res) => {
        results[index] = res;
        counter++;
      if (counter === promises.length) r(results);
    };
    promises.map((promise, index) => {
      promise
        .then(final.bind(null, index))
        .catch(final.bind(null, index));
    });
  });
};
let all = collectAll(resolve(), resolve());
all.then(console.log)
all = collectAll(resolve(), reject());
all.then(console.log)
// Output
[ 'SUCCESS', 'SUCCESS' ]
[ 'SUCCESS', 'FAIL' ]

Code: https://github.com/deepakshrma/how-not-to-write-code/blob/master/js/promis_merge.js

Thanks for reading. If you like this article please let me know in the comment. and Please subscribe to my feeds for a more coding blog like this. You can find all code here in GitHub.

This is an article from a mini-series of How you should not write code. If you know how to write code and want to write better code. Please checkout work of genius Robert Martin.

1. Dependency Injection: I have seen many libraries that have created a dependency injection. DI makes code more readable and maintainable. However, this is not a valid case for JavaScript. JavaScript is a dynamic language. You can modify the context of the object or constructor on runtime.

Let's take the Client/Service DI example of Wikipedia.

class Service {
  getName() {
    return "This is service";
  }
}
module.exports = Service;

Create a Client Class with and without DI

const Service = require("./Service");
class ClientWithoutInjection {
  constructor() {
    this.service = new Service();
  }
  greet() {
    return "Hello " + this.service.getName();
  }
}
class ClientWithInjection {
  constructor(service) {
    this.service = service;
  }
  greet() {
    console.log(this.service.getName);
    return "Hello " + this.service.getName();
  }
}
exports.ClientWithInjection = ClientWithInjection;
exports.ClientWithoutInjection = ClientWithoutInjection;

Let’s write some unit test cases: I am using jest here.

const {
  ClientWithInjection,
  ClientWithoutInjection
} = require('./Client')
const Service = require('./Service')
describe('DI', function () {
  describe('Client', function () {
    it('check it', function () {
      const cw = new ClientWithInjection(new Service())
      const co = new ClientWithoutInjection()
      expect(cw.greet()).toBe(co.greet())
    });
  });
});

In the above test suite, I have satisfied both the class here. Nothing fancy. All the tests work fine. **_cw.greet()_** and **_co.greet()_** return the same value which is “Hello This is service”.

Now let’s write another test file with some magic of mocking

jest.mock('./Service', () => (function () {
  this.getName = () => "something else"
}));
const {
  ClientWithoutInjection
} = require('./Client')
describe('DI', function () {
  describe('Client', function () {
    it('check it', function () {
      const co = new ClientWithoutInjection()
      expect(co.greet()).toBe("Hello something else")
    });
  });
});

If you notice, I have to change the expected value in the test case. This will still work. This is because I have mocked the service to return “something else”. So we can stop overthinking DI at least for Javascript.

2. Underscore(_) and $ for private variable: **_/$** for private variable become famous from the ages when people were coding in languages like C++, C. At that time we didn't have any coding guidelines and linting-tool to prevent bugs. And it becomes naming conventions. I have seen variable names like ___name__something__new. It’s like adding more _ and the variable will become more private. By the time, things had been changed. Now we have superb IDE and plugins to support.

If you really care about the private variable. You can use a Symbol with ES2015 or the latest. Babel/Typescript also supports private variables. Below are a few samples to demonstrate.

Using Symbol:

const property = Symbol();
class Something {
  constructor() {
    this[property] = "test";
  }
}
var instance = new Something();
console.log(instance["property"]); // undefined
console.log(instance); // Something { [Symbol()]: 'test' }

Using old-style constructor/closure:

class Person {
  constructor(nm) {
    this.setName = function (name) {
      nm = name;
    };
    this.getName = function () {
      return nm;
    };
  }
}
const person = new Person("deepak");
console.log(person.getName()); // "deepak"
person.setName("kapeed");
console.log(person.getName()); // "kapeed"
function PersonF(nm) {
  this.setName = function (name) {
    nm = name;
  };
  this.getName = function () {
    return nm;
  };
}
const personf = new PersonF("deepak");
console.log(personf.getName()); // "deepak"
personf.setName("kapeed");
console.log(personf.getName()); // "kapeed"

3. Explicitly assign null to a variable: null is not undefined, and null is not false. When I say this statement, I mean it. Many of the times when I get a code to review, often I see people assign explicitly null to a member variable, to signify that it contains no value. However, this could lead to a big issue and can become a code smell. See the below examples.

class Person {
  constructor(name) {
    this.name = name || null;
  }
}
var deepak = new Person();
// how they check
if (deepak.name == null) {
  console.log("null")
}
console.log(deepak.name && true); // null
deepak = new Person("");
console.log(deepak.name && true); // null
deepak = new Person(false);
console.log(deepak.name && true); // null
deepak = new Person(0);
console.log(deepak.name && true); // null

A better way of writing the same code using Symbol

// Better option
const NO_NAME = Symbol();
class BetterPerson {
  constructor(name) {
    this.name = name || NO_NAME;
  }
  hasName() {
    return this.name !== NO_NAME;
  }
}
deepak = new BetterPerson(0);
console.log(deepak.hasName()); // false
deepak = new BetterPerson("deepak");
console.log(deepak.hasName()); // true

4. Basic use of iterator methods[forEach, map, reduce, etc.]: Lots of the time I have seen that people are still using traditional for loop. Maybe they want to write super-fast code or they trust themselves a lot. But using for loop of your own (using array.push) could lead to code smell. JavaScript has such good support for the array. At the same time is simple, we should leverage the power of Array methods.

// Program:: remove all odds and multiply 5, so that u get all numbers divisible by 10
//Data set
let data = [1, 2, 3, 4, 5];
const MULTIPLIER = 5;
//Data set
//Example 1
let mapped = [];
for (let index = 0, len = data.length; index < len; index++) {
  if (data[index] % 2 == 0) mapped.push(data[index] * MULTIPLIER);
}
console.log(mapped);

With array reduce:

//Example 2
mapped = data.reduce((curr, next) => {
  if (next % 2 == 0) curr = [...curr, next * MULTIPLIER];
  return curr;
}, []);
console.log(mapped);

You can see in Example 1, There are too many things to take care of. In example 2, it looks complex. However, if you break down the example then it is easy to understand.

//Break down
mapped = [];
const isEven = num => num % 2 == 0; // Function returns if even
// Accumulator fun to collect all even number
const accumulator = (records, num) => { 
  // push the current numb at last and create new array
  if (isEven(num)) {
    records = [...records, num * MULTIPLIER];
  }
  return records;
};
mapped = data.reduce(accumulator, []);
console.log(mapped);

5. Try-Catch Hell: Whenever you write async-task and you expect an error. In the case of Error/Fail, it becomes spaghetti code. It is very hard to maintain the catch block. Let’s see by example.

const delay = () =>
  new Promise(r => {
    setTimeout(r, 1000);
  });
const fetchData = async function(url) {
  await delay();
  if (url == "fail") throw "CODE_FAIL";
  if (url == "fatal") throw "CODE_FATAL";
  if (url == "") return "OK";
};
async function main() {
  try {
    const data = await fetchData("fail");
  } catch (e) {
    if (e == "CODE_FAIL") {
      // Show toast message
      console.log(e); // CODE_FAIL
    }
    if (e == "CODE_FATAL") {
      // Show popup message
      console.log(e);
    }
  }
}
main();

Here all business logic of the failure is written inside the try-catch. This is ok for small code. However, you have the same logic in multiple places. Then you can simplify catching in the call .catch method and reuse function.

// catch function
const onCatchError = e => {
  if (e == "CODE_FAIL") {
    // Show toast message
    console.log(e);
  }
  if (e == "CODE_FATAL") {
    // Show popup message
    console.log(e);
  }
};
const onSomeOtherCatchError = () => {};
async function mainNew() {
  try {
    const data = await fetchData("fail")
      .catch(onCatchError) // CODE_FAIL
      .catch(onSomeOtherCatchError);
  } catch (e) {
    console.log("Something else handle here");
  }
}
mainNew();

6. A long path for import directory: I have seen path and directory structure nested to 5–10 levels. Once you have such a directory structure, you see long import paths. As a human being, it is hard to navigate backwards to find the correct file. However, Reverse(Traversing from root to file) is easy. See example:

// nest/nest/nest/nest/nest/nest/nest.js
const Service = require('../../../../../../dependency_injection/client/Service')console.log(new Service().getName())
// package.json
"scripts": {
  "nestWithout": "node nest/nest/nest/nest/nest/nest/nest.js",
  "test": "jest"
},

The required service path is too long. If you have the privilege of Webpack, I will recommend you check Webpack resolve. Else you can apply a basic solution.

By default, NODE_PATH points to the global node_modules path. You can add any directory in $_NODE_PATH_ environment variable. Once the user adds any folder in NODE_PATH. It merges with the existing path. And you can require a file as node_module relative to the entry point.

// package.json
"scripts": {
    "nest": "NODE_PATH=./ node nest/nest/nest/nest/nest/nest/nest.js",
    "nestWithout": "node nest/nest/nest/nest/nest/nest/nest.js",
    "test": "jest"
  },

// nest/nest/nest/nest/nest/nest/nest.js
const Service2 = require('dependency_injection/client/Service')
console.log(new Service2().getName())

I will try to add more examples in the future. All the source code can be found on GitHub or Gist. Please do let me know how you code.

For the past few years, I have almost stopped writing JavaScript. You may ask why. It doesn't mean I don't like JavaScript. However, there is a better version of JavaScript, TypeScript. Yes, I have started developing all my library and application in TypeScript. It includes the backend too.

Here in this article, I will try to answer the question of why you should use TypeScript instead of JavaScript. This article does not cover the pros and cons of JavaScript. Rather than just focus on Good Parts of TypeScript.

Chapter 1. The Beginning

As you may know, Every story starts somewhere. I have worked on TypeScript long back ago. However, Sometimes I didn't like it. Sometimes, I felt, it is too hard to maintain so I skipped it. However, When I started working on Angular. I didn't have that privilege to ignore TypeScript. All the code has been written in TypeScript. Even the examples are given in TypeScript. TypeScript was the first and last choice in Angular. So I had to level up my TypeScript knowledge.

My first reaction was bad. It is just me, I don't like thing when it forced on me. But as I mentioned, I didn't have a choice. Since we were working on a big library at that time. I do have to support a lot of stakeholders (developer in this case). Soon I realise, the more code grows in size. It reduces my effort to spend time explaining things. That how my first impression changed.

Chapter 2. How and where to start with

OK, Now I start liking TypeScript. Things were still not clear. I am one of the tech leads. I do have to create new libraries and utilities. Working on something created it easy. But building from scratch requires your understanding of that language. Although, TypeScript is JavaScript. However, the lifecycle is a bit different. Creating JavaScript requires a few other .js files and a node package manager(npm). Babel, If you do want to write code in the latest ECMA standard.

As you can see, You have one main.js which contains source code. __test__ contains all the test cases and package.json, metadata to package.

// main.js

const greetings = (name) => \`Hello, ${name}\`;

module.exports = {  
 greetings,  
};

// package.json

{  
 "name": "js-module",  
 "version": "1.0.0",  
 "description": "",  
 "main": "main.js",  
 "scripts": {  
 "test": "node \_\_test\_\_/geetings.test.js"  
 },  
 "keywords": \[\],  
 "author": "xdeepakv",  
 "license": "ISC"  
}

// geetings.test.js

const assert = require("assert");  
const { greetings } = require("../");

assert.strictEqual(greetings("Deepak"), "Hello, Deepak");

Pretty simple right. Yeah, maybe this is one of the simplest modules in this world. But TypeScript, you need some extra decorators(files) like TypeScript config. You do need to setup compiler options.

In the beginning, the TypeScript community was new. So I struggle a lot to find the correct config. Same time lot of people were facing similar issues on StackOverflow. Basic TypeScript resources were OK. But, It was not good enough to build the library with proper CI/CD.

Note: I explain the step-step guild to build the TypeScript module in later sections. Hold the beer for that time.

Chapter 3. What to build

After long research and discussion, We finalize the starter/scaffolding for our libraries. The next question was, What should we build using TypeScript. Only basic frontend libraries. We do have a few command-line tools, a few backend apps. How should we make a guideline to select the language(js/types)? Since we already had positive feedback from our last work. So we decided to build as much we could. We start building libraries, react components, CLI tools and even I go further. I have built some backend apps using TypeScript and GraphQL. If you want to learn more, please do check out my article build-a-scalable-graphql-server-using-TypeScript.

Chapter 4. Why to use TypeScript

The bad parts in JavaScript are solved in TypeScript it becomes good parts of it. Just kidding. TypeScript does not try to solve the bad part of JavaScript. However, It tries to minimise the mistake/blunder causes by those bad parts. In another sense, It compliments the JS bad parts by providing better support.

Chapter 5. The Good Parts of TypeScript

1. Start a new project config: TypeScript has CLI to create a new config in a project. tsc --init
2. Support all the browser and ECMA standard: TypeScript compiler option you can provide the target ECMA standard.
3. Define the source folder(Inclusion): Since working on node.js, Everything is “.js”. The biggest challenge was to separate the source code from the rest of the script. TypeScript config makes it very simple. It also supports include and exclude options. Same time with the support of paths, You don't have to write long import statements.
4. Support for Strict rule: Before using TypeScript, I had to use eslint and another linter module to enable some basic rule like avoid nulls. However, TypeScript does support such basic rules. There are plenty of such rules that can be used. If you are looking for more hold on rules. You may want to check tslint. It also supports to import rule from some standard libraries.
5. Backward compatibility: TypeScript is backed by Microsoft. And its community is very strong. They do frequent release, the same time they do have better backward compatibility. Now, The transition from one version to another is very smooth(that was not the same when I was using TypeScript 2).
6. JavaScript Support: If you are using TypeScript, It doesn't mean you can't use JavaScript. Anyhow, TypeScript is a superset of JS. TypeScript does support JavaScript. You just need to enable allowJS flag in tsconfig.
7. Superset of JavaScript: This was the biggest key points for me, that I started using TypeScript. TypeScript always ahead and align to ECMA standard. When ECMA standard releases new specs. It is added in TypeScript way before it implemented in the browser. For those who don't know about ECMA standard. Please read this wiki.

Examples:

• Class
• Public, private, and protected modifiers
• Enum
• String templates
• async/await support in ES6 targets (Node v4+)
• Generators/Async Iterators ts 2.3
• ES6 Import

To read more on changes/features introduce to TypeScript, Read this.

Chapter 6. Happy Ending/Continued…Takeaways

Like every other story, This journey has its own ending. Till now, I am happy with the uses of TypeScript. But It doesn't mean, I had stopped here. I started looking some another language like Deno and explore the options. However, the community is still young and it will take time to grow. But It seems promising. It will go longer that is my belief.

Photo by Alex on Unsplash

How to create a script module

As I promise, I will tell you step by step how to create a TypeScript module. Here are the steps, you can take to convert the above create JavaScript module to TypeScript.

1. Add TypeScript: npm i — save-dev typescript

2. Init TypeScript config: npx tsc --init

3. Update folder structure:

4. Update basic config to tsconfig.json:

{  
 "compilerOptions": {  
 "target": "es5",  
 "module": "commonjs",  
 "strict": true,  
 "esModuleInterop": true,  
 "rootDir": "./src",  /* define src directory*/
 "outDir": "./lib" /* define js output directory*/
 }  
}

5. Add build script in package.json and main.ts:

// main.ts

export const greetings = (name: string) => \`Hello, ${name}\`;

// package.json

{  
 "name": "js-module",  
 "version": "1.0.0",  
 "description": "",  
 "main": "lib/main.js",
 "scripts": {  
 "build": "tsc",  
 "test": "node \_\_test\_\_/geetings.test.js"  
 },  
/// rest of the code.

}

You have created a basic TypeScript library. To create an advance module, I will recommend using tsdx: Zero config CLI.

Thanks, I hope you liked this article. Please thumbs up for support and care. Cheers!

I’m Not Using JavaScript Anymore was originally published in JavaScript in Plain English on Medium.

GraphQL is already known for its good parts. GraphQL helps to build super scalable APIs. It reduces coupling between code and data provider. Deno is one of the fastest-growing frameworks/languages to build APIs. However, Deno community still new. So there is a very little framework in the Deno community. Some of them are in a very early stage of development.

In this article, I will explain how you can easily integrate the GraphQL nodejs module with Deno lang. This is a very basic implementation. However, Still, there is a lot of scope for improvements. This is not the end. This is just beginning.

Prerequisite

• Deno installed on system
• Basic knowledge of Deno read more..
• Basic understanding of routing read more..
• Basic knowledge of GraphQL read more..

Steps

1. Basic project directory setup

First, create folders and file as described below.

mkdir  src
mkdir  src/model src/resolvers src/routes src/schema
touch README.md scripts.yaml src/server.ts

## Optional
mkdir .vscode
touch .vscode/settings.json

Here, src will be the directory containing all code. model is to hold all the database/models. We will create all resolvers in resolvers directory. Similarly, routes and schema to keep routes and schemas respectively. src/server.ts will be an entry for the server to start with.

2. Velociraptor as script runner

Deno does not have a task runner like npm. However, in Deno community, There are lots of modules we can use. I like Velociraptor. It is easy to start with an easy to integrate.

## You can check the current version.
deno install -qA -n vr https://deno.land/x/velociraptor@1.0.0-beta.16/cli.tscl

Once you install velociraptor using deno, It will be available as executable as vr. You can try to validate using vr --version. It will print the current version of the velociraptor.

Let's add basic scripts in src/server.ts

allow:
  - net
  - read
  - env

scripts:
  start:
    cmd: deno run src/server.ts
  test: "echo 'No Test Found'"
  build: deno compile --unstable --allow-read --allow-net src/server.ts

Tips: velociraptor supports JSON, yaml and many more formats. I like yaml version cool so I am using it.

Explained:

• allow to allow net, read, and env permission to Deno executable
• scripts to add command.

Let's add basic hello world sever in server.ts

3. Basic server using Oak

We are going to use Oak to build our backend server. It is the most stable and community supported module out there.

// src/server.ts

import { Application } from "https://deno.land/x/oak/mod.ts";
import { config } from "https://deno.land/x/dotenv/mod.ts";
import { Logger, LoggerOptions } from "https://deno.land/x/deno_util/logger.ts";

const initialOptions = { level: 0, format: "%s", newLine: true };
const logger = new Logger(initialOptions as LoggerOptions);
const { PORT = 4000 } = config({ safe: true });

const app = new Application();
app.use((cxt) => {
  cxt.response.body = "Hello GraphQL";
});

logger.line(`🚀 Server is running on http://localhost:${PORT}/graphql`);
await app.listen({ port: Number(PORT) });

Run:

vr start

Output:

==========================================================
||      🚀 Server is running on http://localhost:4000/graphql
==========================================================

Info:

You may get a pop-up to allow network access to Deno when you try to run the server.

Explained:

• Import oak module to create an Application.
• dotevn to allow create environmental variable.
• deno_util to create a basic logger.
• app.use to create basic route. Currently, It will respond Hello GraphQL to every request.

4. Basic mock database

Since the purpose of this tutorial is not to teach you how to bind database and all. So we will mock the database as close as a real app.

Create a database.ts file touch src/model/database.ts

// src/model/database.ts

const users = [
  {
    _id: "6027d46771b8a91a27bc9e13",
    index: 0,
    guid: "b0b80419-58a5-42ac-b488-b7c87a66f9f7",
    isActive: true,
    balance: "$3,095.41",
    picture: "http://placehold.it/32x32",
    age: 26,
    name: "Hickman Beach",
    gender: "male",
    email: "hickmanbeach@vidto.com",
    phone: "+1 (980) 401-2407",
    address: "489 Canda Avenue, Buxton, Tennessee, 252",
    about: "lorem..",
    registered: "2020-11-16T10:40:17 -08:00",
    friends: [
      {
        id: 0,
        name: "Franklin Gentry",
      },
    ],
  },
];

export interface Friend {
  id: number;
  name: string;
}

export interface User {
  _id: string;
  index: number;
  guid: string;
  isActive: boolean;
  balance: string;
  picture: string;
  age: number;
  name: string;
  gender: string;
  email: string;
  phone: string;
  address: string;
  about: string;
  registered: string;
  friends: Friend[];
}

export const getUsers = async (predicate?: (user: User) => boolean) => {
  if (typeof predicate === "function") return users.filter(predicate);
  return users;
};

Note: You can get the whole file in github repo.

Explained:

A very basic mock database with getUsers method, which returns users based on a predicate. If there is no predicate, It will return all users else apply a filter using a predicate.

5. Create a /graphql endpoint to handle graphql POST request

GraphQL specs support POST to query server. We will use the same. To create a scalable routing. We will create our route in the routes folder and append it in Oak Application using the callback function.

Create files touch src/routes/index.ts src/routes/graphql.ts

Let's create gqlrouter

// src/routes/graphql.ts

import { Router } from "https://deno.land/x/oak/mod.ts";

const gqlrouter = new Router();
gqlrouter
  .get("/graphql", (context) => {
    context.response.body = "Please use Post to Query";
  })
  .post("/graphql", async (context) => {
    const result = context.request.body();
    if (result.type === "json") {
      const { query, variables = {} } = await result.value;
      if (query) {
        context.response.body = { query, variables };
      } else {
        context.response.body = { message: "Invalid Query" };
        context.response.status = 400;
      }
    }
  });

export default gqlrouter;

Let's update index.ts to append routes to Server.

// src/routes/index.ts

import {
  Application,
  Middleware,
  Router,
} from "https://deno.land/x/oak/mod.ts";
import { requestTraceMiddleware } from "https://deno.land/x/oak_middlewares/mod.ts";
import gqlrouter from "./graphql.ts";
const baseRoute = new Router();

baseRoute.get("/", (context) => {
  context.response.body = `<b>Please use <a href="/graphql">/graphql</a> to query</b>`;
  context.response.headers.append("Content-Type", "text/html; charset=UTF-8");
});

export default function init(app: Application) {
  app.use(
    requestTraceMiddleware<Middleware>({ type: "combined" })
  );
  app.use(baseRoute.routes());
  app.use(gqlrouter.routes());
  app.use(gqlrouter.allowedMethods());
}

Explained:

• graphql.ts, We have just created an instance of Oak route. It can accept a get request and a post request at endpoint "/graphql".
• All the GraphQL request contains query and variables as data payload.
• Currently, return query and variables in return response.
• index.ts to combine routes and apply some other middleware to Oak Application.

Let's update our server.ts

//src/server.ts

/// Rest of the code...
import init from "./routes/index.ts";

const app = new Application();
init(app);

/// Rest of the code...

Run: vr run start

Query using Postman:

Query using CURL:

curl --location --request POST 'http://localhost:4000/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"query HelloWorld {\n    hello {\n        name\n    }\n}","variables":{"name":"Hickman"}}'

Output:

{
  "query": "query HelloWorld {\n    hello {\n        name\n    }\n}",
  "variables": {
    "name": "Hickman"
  }
}

6. Create GraphQL schema and resolver

GraphQL Executor requires schema and resolver to execute the query. For that, we need to create schema and resolver. Schema can be written in String and compile to code using buildSchema helper method. Resolvers are basic functions, will be called by graphql executor, and act on the query.

To use GraphQL Executor we have to install/use graphql module from cdn.skypack.dev

//src/schema/user.ts

const UserSchema = `
  type Friends {
    id: Int
    name: String
  }

  type User {
    _id: String
    index: Int
    guid: String
    isActive: Boolean
    balance: String
    picture: String
    age: Int
    name: String
    gender: String
    email: String
    phone: String
    address: String
    about: String
    registered: String
    friends: [Friends]
  }
`;
export default UserSchema;

//src/schema/index.ts

import { buildSchema } from "https://cdn.skypack.dev/graphql";
import UserSchema from "./user.ts";
const base = `
type Query {
  hello: String
  users(name: String): [User]
}
`;
export default buildSchema([base, UserSchema].join("\n"), {});

Explained:

• You can use json-to-graphql, To generate graphql schema
• buildSchema compile and validate schema to generate code in runtime.

Note: Currently, graphql does not support multi-file schema(Query). So we have to write all queries in index.ts. Hopefully, In future, we can use graphql tools.

Let's create resolvers for users and hello query

// src/resolvers/hello_world.ts

const HelloResolver = {
  Query: {
    hello: async (_: any, { name }: any = {}, context: any, z: any) => {
      return "Hello world!";
    },
  },
};
export default HelloResolver;

// src/resolvers/user.ts

import { getUsers } from "../model/database.ts";

const UserResolver = {
  Query: {
    users: async (d: any = {}, context: any) => {
      return getUsers(d.name ? (u: any) => u.name.includes(d.name) : undefined);
    },
  },
};
export default UserResolver;

//  src/resolvers/index.ts

import HelloResolver from "./hello_world.ts";
import UserResolver from "./user.ts";

const resolvers = Object.assign(
  {},
  ...[HelloResolver, UserResolver].map((x) => x.Query)
);
export default resolvers;

Explained:

• user.ts and hello.ts contains an object with Query in it. The query has the function same name as it is defined in GraphQL Schema.
• index.ts accumulate all the resolvers.

7. Route to handle Query and execute

Now we have created schema and resolver function. We can handle GraphQL requests and responses to the query. For that, we need to update our src/routes/graphql.ts.

// src/routes/graphql.ts

import { Router } from "https://deno.land/x/oak/mod.ts";
import { graphql } from "https://cdn.skypack.dev/graphql";
import schema from "../schema/index.ts";
import resolvers from "../resolvers/index.ts";

const gqlrouter = new Router();
gqlrouter
  .get("/graphql", (context) => {
    context.response.body = "Please use Post to Query";
  })
  .post("/graphql", async (context) => {
    const result = context.request.body();
    if (result.type === "json") {
      const { query, variables = {} } = await result.value;
      if (query) {
        const data = await (graphql as any)(
          schema,
          query,
          resolvers,
          {
            request: context.request,
            response: context.response,
          },
          variables || {}
        );
        if (data.errors) {
          context.response.body = data;
          context.response.status = 400;
        } else {
          context.response.body = data;
        }
      } else {
        context.response.body = { message: "Invalid Query" };
        context.response.status = 400;
      }
    }
  });

export default gqlrouter;

Query using Postman:

Query using CURL:

curl --location --request POST 'http://localhost:4000/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"query User($name: String){\n    users(name: $name) {\n        name\n        age\n    }\n}","variables":{"name":"Hickman"}}'

Output:

{
  "data": {
    "users": [
      {
        "name": "Hickman Beach",
        "age": 26
      }
    ]
  }
}

Congrats, Your GraphQL Server is ready to serve(🚀) the request.

Limitations

As I mentioned earlier, Deno is still very new and the community is also very new. The above app has a lot of limitations. However, We shouldn't stop exploring it. Some of the limitations are highlighted below.

• Support for multiple Query/Aliases
• Merge Schema from multiple files
• Conflict in resolvers
• Validations and Proper Error Handling

Source Code

deno-graphql-starter

I hope you like this tutorial. let me know your feedback in the comment. Please support(🙏🙏) by subscribing and clapping on https://deepak-v.medium.com/.

Find More...

Here in this tutorial, I will explain how you can create a simple Image component without breaking existing code. This component will support lazy loading and broken images.

Photo by ©Joanna Kosinska

1. Create an Image Component

To start with, First Create a folder in your component library and Create a file named index.tsx.

mkdir -p components/Image
touch components/Image/index.tsx

Add below line to index.tsx.

// components/Image/index.tsx

import React from "react";
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
export default ({ ...props }: ImageProps) => {
  return <img {...props} />;
};

Note: I am using typescript to build this component. You can just remove typing if your project does not support typescript.

2. How to use Image in App Page

You can consume the Image component just like img HTML element. Since this image component extends HTMLImageElement. It supports all the Image properties.

// App.tsx

import React from "react";
import Image from "./components/Image";

function App() {
  return (
    <div className="App">
      <section className="section">
        <div className="container">
          <h1 className="title">React Components Demo</h1>
          <p className="subtitle">Lazy Image</p>
          <Image
            style={{ width: 400, height: 300 }}
            src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"
          />
          <br />
          <Image src="https://doesnot.exits.com/image.png" />
        </div>
      </section>
    </div>
  );
}

export default App;

Try to reload the page, you will notice the image load very slowly. This is because the image is 10mb large. Same time the other image will be broken.

3. Add a default image prop(placeholder)

Let's add a default image prop, modify the interface.

// components/Image/index.tsx

interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  placeholderImg?: string;
}

Take placeholderImg image and show this to the user before the actual image loaded.

// components/Image/index.tsx

export default ({ placeholderImg, src, ...props }: ImageProps) => {
  const [imgSrc, setSrc] = useState(placeholderImg || src);
  return <img {...props} src={imgSrc} />;
};

No question will arise if we are showing a placeholder image, the how we will load the actual image.

4. Load Image Dynamically

For that, we will use the Image class from JavaScript. We will create an image dynamically and add an event listener to it.

// components/Image/index.tsx

export default ({ src, placeholderImg, ...props }: ImageProps) => {
  const [imgSrc, setSrc] = useState(placeholderImg || src);

const onLoad = useCallback(() => {
    setSrc(src);
  }, [src]);

  useEffect(() => {

    const img = new Image();
    img.src = src as string;
    img.addEventListener("load", onLoad);

    return () => {
      img.removeEventListener("load", onLoad);
    };
  }, [src, onLoad]);

  return <img {...props} alt={imgSrc} src={imgSrc} />;
};

Here we are using useEffect to create the image and load it in the background. We can listen to the load event using addEventListener. Once the image is loaded we can replace src with the actual src URL. Since the image has already loaded and cached to the browser. The next loading will be in no time.

Since we are adding event listeners to the image on load and error on mount of the component. We should remove on unmount of the component.

Let’s modify the App code.

// App.tsx

<Image
  style={{width: 400, height: 300 }} 
  placeholderImg="https://via.placeholder.com/400x200.png?text=This+Will+Be+Shown+Before+Load"
  src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"
/>
<br />
<Image
  placeholderImg="https://via.placeholder.com/400x200.png?text=This+Will+Be+Shown+Before+Load"
  src="https://doesnot.exits.com/image.png"
/>

If you notice, the second image is still showing the placeholder image. Since the image never loaded successfully so setSrc never been called.

5. Handle Error State

Let’s handle the image loading error. For that let’s add another prop errorImg and listen on error status.

// components/Image/index.tsx

import React, { useCallback, useEffect, useState } from "react";

interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  placeholderImg?: string;
  errorImg?: string;
}

export default ({ src, placeholderImg, errorImg, ...props }: ImageProps) => {
  const [imgSrc, setSrc] = useState(placeholderImg || src);

  const onLoad = useCallback(() => {
    setSrc(src);
  }, [src]);

  const onError = useCallback(() => {
    setSrc(errorImg || placeholderImg);
  }, [errorImg, placeholderImg]);

  useEffect(() => {
    const img = new Image();
    img.src = src as string;
    img.addEventListener("load", onLoad);
    img.addEventListener("error", onError);
    return () => {
      img.removeEventListener("load", onLoad);
      img.removeEventListener("error", onError);
    };
  }, [src, onLoad, onError]);

  return <img {...props} alt={imgSrc} src={imgSrc} />;
};

Let’s modify the App code.

// App.tsx

import React from "react";
import Image from "./components/Image";

function App() {
  return (
    <div className="App">
      <section className="section">
        <div className="container">
          <h1 className="title">React Components Demo</h1>
          <p className="subtitle">Lazy Image</p>
          <Image
            style={{ width: 400, height: 300 }}
            placeholderImg="https://via.placeholder.com/400x200.png?text=This+Will+Be+Shown+Before+Load"
            src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"
          />
          <br />
          <Image
            errorImg="https://image.shutterstock.com/image-vector/no-image-available-vector-illustration-260nw-744886198.jpg"
            placeholderImg="https://via.placeholder.com/400x200.png?text=This+Will+Be+Shown+Before+Load"
            src="https://doesnot.exits.com/image.png"
          />
        </div>
      </section>
    </div>
  );
}

export default App;

Conclusion: Now we have achieved broken image and lazy loading image both with the same component.

Note: You can use the placeholder image as a loader and show the loading image before loading the actual image. For that, you can use transition animation or Gif.

CodeSandbox Domo:

Thanks for your support. You can find all code in GitHub Repo: deepakshrma/react-components

We have seen how to create a basic Greeting CLI in another tutorial. Now we will extend our knowledge and create a full-fledged CLI which will be partially clone of Mac/Unix find.

Photo by Alex Knight

Creating CLI required below mentioned features:

1. Input command arguments parser
2. Traverse files and directory trees
3. Filter files/directory based on the arguments
4. Logger, better logging information

1. Input command arguments parser

async function main(args: string[]) {
  console.log(args);
}
main(Deno.args);

Taking arguments in Deno, It is very easy. Every process has Deno.args, which returns arguments passed to the program.

Run:

deno run examples/minifind.ts param1 param2

Output:

[ “param1”, “param2” ]

Deno.args returns array of the string passed to the program(examples/minifind.ts).

Our CLI expects params like type, name, and help. To get the value of these parameters. We need to parse arguments. Deno has flags module which helps to parse and collect parameters. Let's add parser.

async function main(args: string[]) {
  const {
    type,
    name,
    not,
    help,
    _: [dir = "."]
  } = parse(args);
  console.log({
    type,
    name,
    not,
    help,
    dir
  });
}
main(Deno.args);

Run:

deno run examples/minifind.ts --help --type=f --type=d --name=".*\.ts" examples

Output:

{ type: [ "f", "d" ], name: ".*\.ts", not: undefined, help: true, dir: "examples" }

When you run the program with a given example, You will see the output as above. Deno parse helps you to collect all the arguments.

I have used the ES6 de-structuring feature to assign default values.

Deno parse automatically tries to collect and combine params based on patterns. Any argument passed as prefixing ( — ), considered as arguments with value. If you don't pass value next to it. It will become boolean.

Example 1:

console.log(parse(["--test", "t"])); // { _: [], test: "t" }
console.log(parse(["--test"])); // { _: [], test: true }

Things to be noted: If you pass an argument with the same param more than once. parse combine them in array. In the above example type is passed twice. That is why type has value [ "f", "d" ].

Example 2:

console.log(parse(["--test", "t", "--test", "t2"]));

// { _: [], test: [ "t", "t2" ] }

underscore(_) here is like a collection of rest params. If arguments do not follow the standard -- or - prefix. All arguments collected in _ as an array of data. We are extracting dir as the directory name from rest _.

Example 3:

const { _ } = parse(["--test", "t", "examples"]);
console.log(_); // _ == [ "examples" ]
const [dir = "."] = _;
console.log(dir);

// examples

For more info read: https://deno.land/std/flags

2. Traverse files and directory trees

Since now we have arguments parsed, let’s add some logic to read the directory.

The first thing we can do, We can resolve the path or directory where files need to be searched. We can use the resolve method from the path module.

import { parse } from "https://deno.land/std/flags/mod.ts";
import { resolve } from "https://deno.land/std/path/mod.ts";

async function main(args: string[]) {
  const {
    type,
    name,
    not,
    help,
    _: [dir = "."]
  } = parse(args);
  const dirFullPath = resolve(Deno.cwd(), String(dir));
  console.log(dirFullPath);
}
main(Deno.args);

Run:

deno run -A examples/minifind.ts examples

Output:

_/Users/xdeepakv/github/deno-by-example/examples_

resolve require --allow-read permission. For the time being, I have given all permission passing flag -A. you can read more about permissions

Deno.cwd() is used to get current running path. We had to convert dir as a string. Since parse can convert it to string | number based on the input type.

Reading a directory can be done using Deno.readDir. But we are traversing the entire tree of directories and files. Writing the traverse method can be tricky. You can try by yourself.

Here, I will take the help of walk function from https://deno.land/std/fs/mod.ts.

import { parse } from "https://deno.land/std/flags/mod.ts";
import { resolve } from "https://deno.land/std/path/mod.ts";
import { walk } from "https://deno.land/std/fs/mod.ts";

async function main(args: string[]) {
  const {
    type,
    name,
    not,
    help,
    _: [dir = "."]
  } = parse(args);
  const dirFullPath = resolve(Deno.cwd(), String(dir));
  for await (let entry of walk(dirFullPath)) {
    console.log(entry);
  }
}
main(Deno.args);

Run:

deno run -A --unstable examples/minifind.ts examples

Output:

{
 path: "/Users/xdeepakv/github/deno-by-example/examples/sample_employee.csv",
 name: "sample_employee.csv",
 isFile: true,
 isDirectory: false,
 isSymlink: false
}
{
 path: "/Users/xdeepakv/github/deno-by-example/examples/06_readfile_chunk.ts",
 name: "06_readfile_chunk.ts",
 isFile: true,
 isDirectory: false,
 isSymlink: false
}

Since walk function is not a stable function. We have to use --unstable flag while running the example.

Walk function returns an async generator of entries. Each entries have name and path along with other flags like isDirectory and isFile.

Nice: The toughest part has been done. Now we can read entire directories along with files in it.

3. Filter files/directory based on the arguments

Walk function accepts WalkOptions as the second argument. We can use this option to add our logic.

Interface:

export interface WalkOptions {
  maxDepth?: number;
  includeFiles?: boolean;
  includeDirs?: boolean;
  followSymlinks?: boolean;
  exts?: string[];
  match?: RegExp[];
}

Code:

// rest of the code
async function main(args: string[]) {
  // rest of the code
  const dirFullPath = resolve(Deno.cwd(), String(dir));
  let includeFiles = true;
  let includeDirs = true;
  let types = type ? (Array.isArray(type) ? type : [type]) : ["f", "d"];
  if (!types.includes("f")) {
    includeFiles = false;
  }
  if (!types.includes("d")) {
    includeDirs = false;
  }
  const options = {
    maxDepth: 2,
    includeFiles,
    includeDirs,
    followSymlinks: false,
    skip: [/node_modules/g]
  };
  for await (const entry of walk(dirFullPath, options)) {
    console.log(entry.path);
  }
}
main(Deno.args);

Run:

deno run -A --unstable examples/minifind.ts examples

Output:

/Users/xdeepakv/github/deno-by-example/examples
/Users/xdeepakv/github/deno-by-example/examples/subfolder
/Users/xdeepakv/github/deno-by-example/examples/subfolder/dummy.ts

The default type would include both file and dir ["f","d"] . Users can pass the flag --type=f and --type=d to override behavior.

Run- Dirs only:

deno run -A --unstable examples/minifind.ts --type=d examples

Run- Files only:

deno run -A --unstable examples/minifind.ts --type=f examples

WalkOptions supports regexp to include and exclude patterns. We can use this to filter entries by name.

async function main(args: string[]) {
  /// rest of the code
  let matchRegexps: RegExp[] | undefined = name
    ? (Array.isArray(name) ? name : [name]).map(
        (reg: string) => new RegExp(reg)
      )
    : undefined;
  const options = {
    maxDepth: 2,
    includeFiles,
    includeDirs,
    followSymlinks: false,
    match: matchRegexps,
    skip: [/node_modules/g]
  };
  for await (const entry of walk(dirFullPath, options)) {
    console.log(entry.path);
  }
}
main(Deno.args);

Run- Get all file name have logger in it:

deno run -A --unstable examples/minifind.ts --type=f --name=”.*logger.*” examples

Now we have working minifind. Noice!

4. Logger, better logging information

/// rest of the code
import { Logger } from "https://deno.land/x/deno_util/logger.ts";
const usesFormat = `Uses:\n\n  minifind %s`;
const logger = new Logger();
function printHelp(command: string) {
  logger.info(`Welcome to minifind [v%s]`, "1.0.0");
  logger.warn(usesFormat, command);
}
async function main(args: string[]) {
  /// rest of the code
  if (help) {
    printHelp(`--type=f --name=".*logger.*" --help examples`);
    Deno.exit(0);
  }

  /// rest of the code
  for await (const entry of walk(dirFullPath, options)) {
    logger.inverse(entry.path);
  }
}
main(Deno.args);

The last missing piece is to tell your user about your CLI. For that, we have add helping messages for users. I am using logger-util created by me. You can read more here https://deno.land/x/deno_util.

Run with help:

deno run -A --unstable examples/minifind.ts --help

Output:

Run with other options:

deno run -A --unstable examples/minifind.ts --help

Output:

TaDa! 👏👏 Now you know how to create a CLI.

Bonus:

Now we have working minifind CLI. However, we had to use deno run and filename to run the command, which is not intended/feasible. Deno provides install the command. Using that, We can convert any program to an executable tool.

Let’s convert our minifind to executable. It is very simple.

deno install -f --allow-read --unstable examples/minifind.ts

Once you run above command you will see output like:

# Add /Users/xdeepakv/.deno/bin to PATH

export PATH="/Users/xdeepakv/.deno/bin:$PATH"

If you see that, just add export PATH="/Users/xdeepakv/.deno/bin:$PATH" this line to your .bashrc or .bash_profile(Depending upon your OS type). Once you add .deno/bin in PATH. Open a new terminal and try below-mentioned command.

minifind --type=f --name=".*logger.*" examples

Now your minifind is ready to use for production(CLI). :-)

I hope you like this tutorial. Please have a look at some other tutorials on our website: https://decipher.dev/deno-by-example/

All working examples can be found in my Github: https://github.com/deepakshrma/deno-by-example/tree/master/examples

No doubt Typescript is one of the best programming language/frameworks came in recent years. TypeScript helps you with the typings to write clean and modular JavaScript. However, Writing and setting up the library is a very tedious task. You can use TypeScript CLI to build a library, Still testing is a pain. In this tutorial, I will explain how you can ditch WebPack, Jest, or Rollup and write a beautiful library just using tools provided by Awesome Deno.

Deno is around town for a while. Since the beginning, it getting the attention of the developers. It has runtime for JavaScript and TypeScript that uses V8 and is built-in Rust. Rust means, it is fast and secure at the same time.

So how Deno will help you to ditch the things mentioned above. Let’s understand Deno a little bit. We will build a small nodejs/npm library using Deno just Deno.

Overview of library

The library we are going to build will be lodash, Our own lodash. It will have some util methods like find unique, get values by props.

Initial setup for library

1. Create folders and Initialize npm and git
2. Add basic test case and Implement the method unique
3. Run and test it working

1. Create a folders and Initilize npm and git

# Create a folder
md dash-lodash
md lib test

## Create files
touch test/index.js
touch lib/index.js

# Git init
git init
echo ".vscode\nnode_modules\nlib" > .gitignore

# npm init
npm init --y

If all good, You will see structure as below.

Note: If you noticed, I have added lib in .gitignore. Since we are building the TypeScript library. We will not need a compiled version of it.

2. Add basic test case and Implement method unique

Open file test/index.js and add below lines.

const { unique } = require("../lib");

const uniqueValues = unique([1, 2, 3, 1]);

if (uniqueValues.length === 4) throw new Error("Unique is not working");

console.log("✅ All looks good");

Open file lib/index.js and add below lines.

const unique = (arr) => arr;

module.exports = { unique };

Openpackage.json add below lines

{
  "name": "dash-lodash",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "test": "node test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. Run and test it working

Since our npm is set now, You can run and test using npm test command. Once you run npm test, You will see error message like. Error: Unique is not working

Add below code in lib/index.js

const unique = (arr) => [...new Set(arr)];
module.exports = { unique };

Run the test again, If you see the message ✅ All looks good meaning all good to go. Your library is working.

Deno as TypeScript Runtime

Our code is already running and tested. This is good to publish in npm. However, We want to use TypeScript as a source code. Good thing, The biggest selling point for Deno is TypeScript runtime. Saying that means you can run TypeScript without any external trans-compiler. Even you don't need typescript cli. Using Deno we can run typescript and same time Deno provides tools like a bundle. We can compile typescript and convert it to JavaScript.

Prerequisite: Deno 1.1.0 and above

You can install Deno from here. installation

Let's move to TypeScript.

1. Create a TypeScript lodash library
2. Update npm scripts, add Deno test task

1. Create a TypeScript lodash library

md src
touch src/lodash.ts

Add below lines in file src/lodash.ts

export const unique = (arr: any[]) => [...new Set(arr)];

2. Update npm scripts, add Deno test task

Let's add a few test cases.

Since we are moving to Deno. We have to convert test cases to the TypeScript file.

touch test/lodash.test.ts

Replace content of file with below given lines.

import { assertEquals } from "https://Deno.land/std/testing/asserts.ts";
import { unique } from "../src/lodash.ts";

Deno.test("unique #1", () => {
  assertEquals(typeof unique, "function", "Unique is not defined!");
});

Deno.test("unique #2", () => {
  const uniqueValues = unique([1, 2, 3, 1]);
  assertEquals(uniqueValues.length, 3, "Unique is not working");
  assertEquals(uniqueValues, [1, 2, 3]);
  console.log("✅ All looks good");
});

Update test command in package.json

{
  // rest
  "scripts": {
    "test": "Deno test"
  }
}

Run the test again. npm test. You will see a message like test result: ok. 2 passed;

Now we have successfully moved our source code to typescript. However, If notice we cant directly consume our src/lodash.ts in nodejs. Our dash-lodash still pointing to lib/index.js. to consume this in nodejs. We need to convert typescript to JavaScript to consume in nodejs without webpack[bundler].

To convert TypeScript to JavaScript, we will use typescript CLI tool. To setup, bundler follow below given steps.

1. Add typescript as dev dependencies
2. Add tsconfig.json file
3. Update package.json

1. typescript as dev dependencies:

npm i -D typescript

2. Add tsconfig.json file:

{
  "compilerOptions": {
    "target": "es6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./lib",
    "moduleResolution": "node"
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/test/*"]
}

3. Update package.json:

Add bundle command in package.json

{
  // rest
  "scripts": {
    "test": "Deno test && node test",
    "bundle": "tsc"
  }
}

Run bundle command:

npm run bundle

Note: We have to update, test/index.js import/require statement. Since tsc using commonjs as a module in tsconfig.json, All the files will be compiled and converted to the same name ie. lib/lodash.js.

After update, test/index.js

const { unique } = require("../lib/lodash");

// rest of the code

Try and run again test.

npm test OR node test

Tada!! congrats you are all good to publish your nodejs-typescript module. To publish your module to npm you can follow this blog.

Some final touch TypeScript module need to define the type defination locaction. We can add meta data for that in package.json

Add below lines in package.json

{
  "name": "dash-lodash",
  "version": "1.0.0",
  "description": "\"demo deno typescript, testing bundling\"",
  "types": "lib/lodash.d.ts",
  "main": "lib/lodash.js",
  "files": ["lib/lodash.js"]
  //rest of the code
}

Once you publish your module on npm. You can use your module as below.

In NodeJS:

const { unique } = require("dash-lodash");

const uniqueValues = unique([1, 2, 3, 1]);

if (uniqueValues.length === 4) throw new Error("Unique is not working");

console.log("✅ All looks good");

In TypeScript:

import { unique } from "dash-lodash";

const uniqueValues = unique([1, 2, 3, 1]);

if (uniqueValues.length === 4) throw new Error("Unique is not working");

console.log("✅ All looks good");

For source code, You can refer to dash-lodash-deno-typescript-sample repo.

Thanks. Keep Calm, Keep Coding.

Javascript is a dynamic language. This makes Javascript a supercool language. However, Same time it is very hard to write secure code. One small mistake can lead to a bigger issue. Error handling plays a vital role to reduce the number of bugs. If you handle error elegant way, it will save a lot of time in the future. So the bigger question is how you should handle the error.

Let's take one example.

const express = require("express");
const app = express();
app.get("/", (_, res) => res.end("OK"));
app.listen(80);

The above code is a sample code written in nodejs on an express framework. This code trying to run a server at port 80. What if we know that port 80 is already taken by some other app and we try to run the above code. How do we know what will happen? Will it run or break with some error? This is very unclear while seeing this code. Even you want to handle an error, you may have to read the documentation. But don’t worry, just like any natural language. The programming language has some grammar. Even there is no standard specification in ECMA standard for Error handling. But the Javascript community follows certain coding guidelines.

Topics

1. Types of Errors
2. How To Handle Errors
   1. Synchronous
      1. try-catch
   2. Asynchronous
      1. callback-error-data
      2. promise-then-catch
      3. try-catch-await
3. Custom Error
4. Advanced Error Handling
   1. Error handle with Loop
   2. Multiple errors in try-catch
   3. Multiple errors in promise-then-catch
5. Error Handling Coding Practices

Types of Errors

Since JavaScript has a different flavor of the compiler and most of the have written and maintained by a different organization. Except for SyntaxError, There is no very definite or consistent distribution among the type of error. Even the message varies compiler to compiler. However, You can find a list fo the errorshere. Since Javascript is a dynamic language, most of the errors are runtime errors.

Example:

console.log(Number(10).toPrecision(200));

If we run the above code, It will throw RangeError. RangeError: toPrecision() argument must be between 1 and 100

How to handle Error

Base on the nature of the API(method) call sync/async, Error can be handle differently.

Synchronous

try-catch: You can use try-catch block to handle Synchronous error.

try {
  console.log(Number(10).toPrecision(200));
} catch (error) {
  // RangeError: toPrecision() argument must be between 1 and 100
  console.log(error instanceof RangeError); // true
}

If you don't want to catch the error and perform any operation. In the newer version of JavaScript compiler you can do so.

try {
  console.log(Number(10).toPrecision(200));
} catch {}

If you want to perform some default operation on error, You can use finally block after the catch block.

let average;
try {
  average = getAverage(); // Sum function does not exits.
} catch {
} finally {
  average = 0;
}
console.log(`Average is ${average}`);
// Average is 0

Finally block is mainly used to clean the resources like some open file, open connection.

Photo by NordWood Themes on Unsplash

Asynchronous:

An API is called asynchronous in nature when the outcome will come on some next event cycle of the EventLoop. Normally, All network call and IO operation are an async in nature. To get data from async call we either use callback or promise object.

Error handle in async-callback API(callback-error-data): Core Browser base javascript has very limited async APIs. You can create an async function either using timer APIs like setTimeout and setInterval Or you can create an AJAX call using fetch. setTimeout and setInterval do not throw any such error that can be handle. And fetch is a promised based async call(We will learn later to handle promise-based error). However, nodejs has a lot of standards and third-party APIs which throws an error. Just like our first express.js example.

const express = require("express");
const app = express();
app.get("/", (_, res) => res.end("OK"));

const server = app.listen(80);
server.on("error", function handleListen(error) {
  console.log(error);
});

Here in the above example, Express does not try to handle error for you. Instead, it returns the core server instance of nodejs. You can catch error on the error handler callback function.

Nodejs follows certain rules. As a coding standards, all the async APIs accept a callback. In the callback, the first argument will be an error generated by API and the second argument will be data on success. This standard has been followed by the overall community too.

fs.readFile("a file that does not exist", (err, data) => {
  if (err) {
    console.error("There was an error reading the file!", err);
    return;
  }
  // Otherwise handle the data
});

Info: You can not handle async callback error in try-catch block. However, there is an exception. A recent version of ECMA Script, using async-await now we can handle error in try-catch. We will learn that later.

// This will not work

try {
  app.listen(80);
} catch (error) {
  // never called
  console.error(error);
}

Error handle in promise-based API(try-catch-await): After ES5, Javascript introduce a new design pattern to handle callback for async API. That is a promise design pattern. This solves the previous issue of callback hell.

const promise = new Promise((response, reject) => {
  // some async code here
});

promise
  .then(function onSuccess(data) {
    console.log("SUCCESS");
  })
  .catch(function onError(err) {
    console.error(err);
  });

To get error form a promise object, you have to use the catch method and pass a callback function. To understand the promise/deferred pattern, You can read my blog here.

The promise is much cleaner than that callback. However, It is very hard to understand the flow in a big codebase. The recent version of ECMA Script has introduced async-await. Using async-await we can write asynchronous code in a synchronous way.

async function main() {
  try {
    await promise1;
    const data = await promise2;
  } catch (error) {
    console.log(error); // SOME ERROR
  }
}
main();

Using try-catch-await, you can handle multiple errors in one block which was not possible/complicated in the promise-then-catch pattern.

Now we know how to handle the error. However, while writing code we don’t have to handle error only. We may want to create a custom error. This will help to write clean and maintainable code. It is good practice, you should create custom errors for business logics

Photo by Isis França on Unsplash

Custom Error

Creating a custom error is very simple. You can use any custom class and throw it as an error.

class SomeNetworkError {
  constructor(status) {
    this.status = status;
  }
}
try {
  throw new SomeNetworkError(4000);
} catch (error) {
  console.log(error instanceof SomeNetworkError); // true
  console.log(`SomeNetworkError Status: ${error.status}`); // SomeNetworkError Status: 4000
}

Above we have SomeNetworkError class and we use an instance of this class to throw an error. This is a valid code. However, as a coding practice, we should extend default(standard) error-classes. The base of all error-class is Error and call with a super method with the message.

class SomeNetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.status = status;
  }
}
try {
  throw new SomeNetworkError("Network Error", 4000);
} catch (error) {
  console.error(error instanceof Error); // true
  console.log(`> ${error}`); // > Error: Network Error
  console.error(error); // SomeNetworkError: Network Error
  console.error(error.stack); // stacktrace here
}

If you notice, extending the Error class and calling super automatically get .toString method of the SomeNetworkError class and print a nice message. Similarly, you can extend other standard Error class too.

class ArithmeticRangeError extends RangeError {
  constructor(message) {
    super(message);
  }
}
try {
  const zero = 0;
  if (zero === 0) {
    throw new ArithmeticRangeError("zero cant be 0");
  }
} catch (error) {
  console.log(error instanceof RangeError); // true
  console.error(error.toString()); // RangeError: zero cant be 0
}

Advanced Error Handling

Error handle with Loop: Keep try-catch out of the loop, if you want to break loop on error. Else put try-catch inside a loop to continue

Break on error:

try {
  const numbers = [10, 2, 0, 5];
  numbers.forEach((num) => {
    if (num === 0) {
      throw new ArithmeticRangeError("zero cant be 0");
    }
    console.log(num);
  });
} catch (error) {}

Continue on error or skip:

const numbers = [10, 2, 0, 5];
numbers.forEach((num) => {
  try {
    if (num === 0) {
      throw new ArithmeticRangeError("zero cant be 0");
    }
  } catch (error) {}
  console.log(num);
});

Without try-catch, Logical handle:

// filter zero, no need handle zero

const numbers = [10, 2, 0, 5].filter((num) => num !== 0);
numbers.forEach((num) => {
  console.log(num);
});

// Use some to break loop

const numbers = [10, 2, 0, 5];

numbers.some((num) => {
  const isZero = num === 0;
  if (isZero) return true;
  // logic here
  console.log(num);
});

As you can see, based on your need you may not need to throw error always. You can handle it logically.

Multiple errors in try-catch:

try {
  let name;
  /// some operation
  if (name === "") throw new RangeError("Cant be blank");
  if (name.match(/\W/)) throw new TypeError("name cant be non alph-numric");
  throw new Error("Some other error");
} catch (error) {
  if (error instanceof RangeError) console.log("RangeError");
  else if (error instanceof TypeError) console.log("TypeError");
  else console.log("Other Error");
}

Multiple errors in promise-then-catch:

new Promise((resolve) => {
  let name;
  // some logic
  resolve(name);
})
  .then((name) => {
    if (name === "") throw new RangeError("Cant be blank");
    else return name;
  })
  .then((name) => {
    if (name.match(/\W/)) throw new TypeError("name cant be non alph-numric");
    else return name;
  })
  .catch((error) => {
    if (error instanceof RangeError) console.log("RangeError");
    else if (error instanceof TypeError) console.log("TypeError");
    else console.log("Other Error");
  });

Error Handling Coding Practices

Above all code are very standard and simple use cases to handle the error. However, when you work on the project. The code maybe not this simple as it is given here. So we need to write some boilerplate codes. Below, I have listed some of the patterns that I follow in my projects.

1. Create Enum Class or Error Constants
2. Use localization from beginning
3. Common util module or file to handle logic and generate an error
4. Try to minimize try-catch uses, Instead write more unit test cases
5. Catch and Throw a custom error on API calls
6. Use typescript as much as possible
7. Minimize the use of magic number/string
8. Avoid higher level of nested object
9. Avoid global object pollution
10. Use Error-Boundaries as much as possible(React)
11. Proper logging, use console.error for error logging.
12. Log level to minimize log messages
13. Don’t print credential in logs
14. Use more visuals than console in the case of WebApps.

In this article, I will explain how you can protect your data using some basic tips. You don't have to be super technical to protect you.

Overview

To protect your assets, First, you have to understand what assets do you have with you. Data is everywhere. First thing you see, when you wake-up could be mobile and laptop, based on age. If you close to teen, most probably mobile and your messengers. As you terns on mobile, You start sharing data. You have like multiple messaging apps like Whatsapp/Facebook/WeChat.

1. Advertisement(Ads) Phishing

So question is, how much you should concern about your data? To understand that let’s understand the revenue model of Facebook, Google, and other tech giants.

You can clearly guess, Your small data is the 98.5% revenue for Facebook. In last year, The yearly estimated revenue for Facebook was around 70 Billion [source]. The total number of users on Facebook is around 2.6 billion [source]. So you contribute, almost ~27$ to Facebook yearly. If you have 5 members at your home, So around 100$ just watching videos and memes on Facebook.

:::note Fact Check: Out of 2.6 billion, 1.8 billion are real accounts. Rest are either fake or bots. :::

Other companies are not far away. A company like WeChat, TikTok goes extra miles. You event track your key movements.

Read More: https://www.businessofapps.com/data/tik-tok-statistics/

2. Sharing is not caring

This tag line does not work for the data. Personal information is the worst thing to share with someone else. The more you share information, The more you will become vulnerable. Google is the biggest example of that. Whenever you search for something on Google. You actually let Google know, what may you can buy in the next few weeks. And Google starts sending you a Focused message, notification to remind you what you should buy. To understand this effect, You should watch the 2015 movie Focus>).

One day, I search for how to learn swimming. The next day, I see ADs of the Eyes protection glass Ads as a suggestion on multiple websites. The biggest among those, When I actually decided to buy the glasses and I visit Lazada(one of the shopping app in Singapore). I saw same glasses in my recommended section. It was the WTF moment for me.

So definitely sharing is not caring.

To understand how prediction(Not Suggestion) algorithms work for Google. You can read https://www.blog.google/products/search/how-google-autocomplete-works-search/

3. The solution is the problem

Previously, The quote was “necessity is the mother of innovation”. That is changed not to “problem is the source of innovation”. Meaning, The new moto around the tech world is, Find a problem and solve it better than the others.

Let’s discuss a scenario. I have a small cotton business, I won't open my own store and sell product online. Ok. So I need to buy a domain and I need to create a website and host on platform. You will say, The title was this article is for non-technical. But now i am getting too technical. But you have to understand this.

No doubt, AWS(Amazon Web Service) is ahead in this field. However, does it worth investing money on something which is wearing more than me ??

Companies in banking sectors, Invest huge amounts of money to buy the products and use it in name of simplicity. But the question we should ask, Do we really needed it?

You can ask a question where is data(personal) here. The answer is, you are right there is no real data-data shared here. But you are given an idea of data to these companies so that they can find the solution to a problem which never exits or can be solved simply.

:::info This is mostly applicable to big companies. And very much opinionating. :-D :::

Solution: So mota-moti(a Hindi word for roughly), We have a few problems to solve. So how??

The answer is very simple. Delete the App.

I did so. Past few months, I am using my mobile without Facebook, Instagram, and Chrome. I never have to install TikTok for more than 10min. That also to watch, what are the feature provided by TikTok.

Deleting is not the proper solution. In this era of data, You don't want to be backward by not letting you learn something new. So what to do.

Browser:

Recently, I found the Browser like Brave. The tagline for Brave is You deserve a better Internet. Yes, We do deserve. This browser is built on top Chromium which is the open-source version of the chrome. Meaning that it is the most closet thing you can get as an alternative to Chrome.

Brave, does not track your activity without your permission. You let the browser to track you, you get paid for your data. To understand more, Please just go to there landing page. https://brave.com/

Search Engine:

Brave comes with multiple search engines, including Google and Duck Duck Go. I start using DuckDuckGo. The search result is not as good as Google(reason less data capture). But it has lots of good features like rating of the page. Every time you open a page you see rating of the page. A grade with green signal is a good sign for your data security.

You can go and check out https://duckduckgo.com/app

Alternative to Apps:

In the end, how we can use social sites without the apps. I know it is tough, I have deactivated few of my social networking account. But you don’t have to be hard on your self. Most of the app has a website for there products. If you are only visitor, not contributors. You can view all the posts from your friends on the browser and still connected with friends. Like I use Instagram, on my Brave browser. I know I can't upload pics here. But good for me till now.

text title="Quotes of the Day" "Change is painful but Change is good for you"