appendix B Implementing a Transparent Functional Reactive frontend

 

This appendix covers

  • Describing the JavaScript idiom we’ll be writing code in
  • Setting up a frontend in React and Parcel
  • Using React components to structure the frontend
  • Using MobX to react to changes transparently

In appendix A, we set up a development environment to develop JavaScript code with. In this appendix, we’re going to use that environment to learn how to implement a Transparent Functional Reactive frontend. We’ll use that knowledge in chapters 3 through 14 to implement the frontends of the Domain IDE and Runtime.

B.1 Establishing an idiom for JavaScript code

You can find JavaScript code written in quite diverse idioms. We happen to be writing JavaScript conforming to the ES2015 specification (https://262.ecma-international.org/6.0), but that leaves quite a bit of wiggle room with regard to coding style conventions.

Let’s establish a particular idiom for writing JavaScript, in the form of a list of conventions. I’ll stick to this idiom in both JavaScript files (with file extension .js) and in files in JSX syntax (with file extension .jsx). I’ll explain what those JSX source files are for in section B.2.

B.1.1 No semicolons to separate statements

Semicolons are just syntactic noise to me.

Syntactic sugar causes cancer of the semi-colons.
—Alan Perlis, “Epigrams on Programming,” SIGPLAN Notices 17, no. 9 [Sept. 1982], epigram #3

B.1.2 Indentation/whitespace conventions

B.1.3 Using const declarations for values wherever possible

B.1.4 Defining functions as const declarations using arrow function expressions

B.1.5 Exporting members from files

B.1.6 Object destructuring

B.1.7 Importing members

B.1.8 Favoring plain objects over classes

B.1.9 Using the spread syntax

B.1.10 Using template literals

B.1.11 Unit testing

B.2 Setting up a basic frontend with React and Parcel

B.3 Using React components to implement a frontend

B.3.1 Using destructuring to receive component parameters

B.3.2 Using application state

B.3.3 Nesting component calls