Today’s plan is, again, to make more progress on Atencio.

Day 4 Talks / Articles

What’s New in Vue3

A video from 2020 – it’s topic is the differences between Vue 2 and Vue 3 (the latest release as of 2021), and it gives some feel for Vue.js.

JoJ

Chapter 4 Functions

  • I mostly skimmed this chapter as it covers basic FP concepts. The TypeScript intro mentions that point-free style is cumbersome to annotate and not usually worthwhile with TypeScript, but it seems simple in pure JavaSCript (with implemnetations of pipe() and compose()).

  • To run the countWords example, I had to import the node module import fs as \fs`. In turn, node said that only modules can use imports, so the file needed to be a .mjs file instead of .js`.

There is an interesting implemnetation of curry:

const curry = fn => (...args1) =>
  args1.length === fn.length
    ? fn(...args1)
    : (...args2) => {
        const args = [...args1, ...args2]
        return args.length >= fn.length ? fn(...args) : curry(fn)(...args)
      };
  • The property fn.length is a bit surprising, but it seems to work:
> const fn = function (a, b, c) { return a + b  + c; };
undefined
> fn.length
3
  • And the spread syntax can be used as a convenient, literal concat:
> arr1 = [1,2,3]
[ 1, 2, 3 ]
> arr2 = [4,5,6]
[ 4, 5, 6 ]
> [...arr1, ...arr2];
[ 1, 2, 3, 4, 5, 6 ]

Chapter 5 Higher-Kinded Composition

  • Functors and monads in JS

  • Javascript [tuple proposal((https://github.com/tc39/proposal-record-tuple) – immutable records and tuples with the # prefix

  • Ramda: JS FP library

Chapter 6 Modules

-ECMA Script Modules (aka ECMA262 modules, which began as ECMA 2015 modules)

  • A few prior approaches to module / context management, e.g. object namespaces (“nother common technique was to use your company’s reverse URL notation. “..!, immediately invokved function expressions (IIFE), factory functions…

  • Modern JS way: use static import and export definitions

  • ESM modules automatically enter in struct mode

  • imports can be performed asynchronously

  • console.log(import.meta);

JoJ Code

Day 4 Code

Not much of substance, again mostly copy-pasting code to see if imports are required, if functions are built-in, etc, and testing the module import and export basic syntax.

Other Code

Day 4 Code

I did some more JS and TS practice from the Eloquent JavaScript objects chapter, using both the class pattern and Object.create pattern from JoJ.

For the iterator exercises for groups, TypeScript didn’t let me compile with the prototype-setting formula from the Eloquent JavaScript, with an error that the function keyword shadowed the reference to this:

Group.prototype[Symbol.iterator] = function() {
  return new GroupIterator(this.members);
};

I’m not sure why the book code doesn’t work (JavaScript version issue? Typescript strictness?), but this formulation worked:

[Symbol.iterator] = () => new GroupIterator(this.members);

Wrapping Up

Since the JoJ chapters were focused on FP, I was able to zoom through them (though I can’t say I can now construct my own functors and monads in JS, with the overhead that it entails…). It’s encouraging to see interest in FP becoming more widespread.

It now seems like I sdhould try to push through the Atencio book fairly quickly, and get to writing more code, to start to apply and internalize at least some of the fundamentals. What’s a good two-day-ish project to tackle?

Todo / To Read

  • builder pattern
  • More chapters of Atencio
  • Eloquent JavaScript has exercises at the end of chapters, which might be worth exploring
  • Figure out how to use outDir(?) to compile .js files to separate subdirectory
  • Compiling with both TypeScript with Babel
  • Kyle Simpson, You Don’t Know JS
  • Composing Software, by Eric Elliot (https:// leanpub.com/composingsoftware)