About Me

Example 1: Hello JavaScript API

Requirements

  • Use TypeScript to develop client-side JavaScript APIs.
  • Lint TypeScript source code when needed (e.g.: watch, build).
  • Run unit tests to check the logic of API methods.
  • Generate TAP output and generate a report after testing.
  • Support development mode by starting a dev server.
    • We can test these APIs under the JavaScript console.
    • Recompile APIs as soon as a source file changes.
    • Support verbose output to show how long the bundling took.
    • Reload the dev server as soon as API bundle recompiled.
    • Send a desktop notification when the build fails.
  • Build NPM package to provide APIs that runs on a web browser.

Project Folder Structures

$ tree hello-api
├── Makefile
├── README.md
├── api.js
├── dist
│   ├── babel
│   ├── release
│   └── ts
├── package.json
├── hello-api.tar.gz
├── server.js
├── src
├── test
├── tsconfig.json
├── tsconfig.prod.json
└── tslint.json

Getting Started

In GNU Make, you must start a command with a [tab] character. 

$(TARGET): $(DEP1) $(DEP2) $(DEP3)
	# `$?` contains a list of dependencies.
	@echo $?
	# `$@` evaluates to current TARGET name.
	@echo $@
	@$(COMMAND1); $(COMMAND2); $(COMMAND3)

.PHONY: build-babel
build-babel: $(JS_DIR)
	@$(RM) $(BABEL_DIR)
	@NODE_ENV=production $(BABEL) $(JS_DIR) -d $(BABEL_DIR)

$(BABEL_DIR): $(JS_DIR)

Variable Assignment

Operator Type Description
= Lazy Set Values within it are recursively expanded when the variable is used, not when it's declared.
:= Immediate Set Values within it are expanded at declaration time.
?= Set If Absent Setting of a variable only if it doesn't have a value.
+= Append Appending the supplied value to the existing value.

Dependency Graph

You can create a graph of dependencies from GNU Make using makefile2graph.

Options Description
-B Unconditionally make all targets.
-n Print the commands that would be executed, but do not execute them.
-d Print debugging information in addition to normal processing.

make build

make-build.png

make dist

make-dist.png

make watch

make-watch.png

NPM scripts

{
  "scripts": {
    "clean": "make clean",
    "distclean": "make distclean",
    "lint": "make lint",
    "build:ts": "make build-ts",
    "build:babel": "make build-babel",
    "build": "make build",
    "dist": "make dist",
    "watch": "make watch",
    "serve": "make serve",
    "start": "make start",
    "test": "make test",
    "release": "make release"
  }
}

Fetch Posts from Reddit

index.ts: 

import { fetchPosts } from "./reddit";
export const reddit = { fetchPosts };

reddit.ts: 

export const fetchPosts = async (reddit: string) => {
  try {
    const json = validate(fetchPostsSchema, await get(`/r/${reddit}.json`).end());
    return json.data.children.map((child) => child.data);
  } catch (error) {
    throw error;
  }
};

API Dev server

  1. make watch & make serve
  2. Open http://localhost:3003/.
  3. Open JavaScript console (⌥⌘J).
  4. Fetch vuejs reddits via fetchPosts.
api.reddit
  .fetchPosts('vuejs')
  .then(x => console.log(x));

Build hello-api NPM package

  1. Run make dist to build NPM package.
  2. Run tar tvf hello-api.tar.gz to check the its content.
drwxr-xr-x  0 carlsu staff       0 11  8 17:51 ./
-rw-r--r--  0 carlsu staff     210 11  8 17:51 ./index.js
-rw-r--r--  0 carlsu staff    1169 11  8 17:51 ./package.json
-rw-r--r--  0 carlsu staff    2506 11  8 17:51 ./reddit.js
-rw-r--r--  0 carlsu staff    2349 11  8 17:51 ./reddit.schema.js
drwxr-xr-x  0 carlsu staff       0 11  8 17:51 ./utils/
-rw-r--r--  0 carlsu staff    5725 11  8 17:51 ./utils/agent.js
-rw-r--r--  0 carlsu staff    1289 11  8 17:51 ./utils/index.js

Example 2: Hello Reddit App

Add Hello API Example to NPM dependencies

This package comes from Hello API dev server which built with make dist.

Add hello-api to NPM dependencies and install it immediately.

package.json: 

"dependencies": {
    "hello-api": "http://localhost:3003/hello-api.tar.gz"
}

Fetch Posts from Reddit

src/sagas/index.js: 

import { reddit as redditApi } from 'hello-api';
export function* fetchPosts(reddit) {
  yield put(requestPosts({reddit}));
  const posts = yield call(redditApi.fetchPosts, reddit);
  yield put(receivePosts({
    reddit,
    posts,
    receivedAt: Date.now()
  }));
}

Start the App

  1. Run npm install to install the package we just built.
  2. Run npm start to start the app.
  3. Open http://localhost:3000/ to see if it works.

Thank you!