Minimal MEAN:

Full-Stack TypeScript

Doguhan Uluca

Technical Fellow  at

@duluca

We're hiring, including fully remote positions!

Sandbags of Complexity

Do

more

 with less

Become

a minimalist

Think

Wait

Fast

Prioritize DX

Ease of use

Happiness

Effectiveness

MongoDB

Express.js

Angular

Node.js

Template Project

Sample Project

  1. Anatomy of Minimal MEAN
  2. Why Typescript?
  3. Docker Compose
  4. RESTful APIs
  5. MongoDB ODM with DocumentTS

Modern Web Architecture

  • High cohesion
  • Low coupling
  • Asynchronous
  • Non-blocking I/O
  • Multi-threaded
  • Parallel execution
  • High availability
  • Self-healing
  • Auto-scaling
  • RTO and RPO expressed in minutes/seconds

Presentation

API

Business

Persistence

Best Practices

IDE

Patterns

Libraries

Testing

Angular

Express.js

Node.js

MongoDB

VS Code

npm

GitHub

jasmine

TypeScript

CI

Docker

Node

TypeScript

duluca/minimal-node-web-server

duluca/minimal-node-build-env

Lightweight and efficient JavaScript runtime, using an event-driven, non-blocking I/O model

Runs everywhere

TypeScript

Covers the

JavaScript Feature Gap

Monorepo structure

lemon-mart-server
├───bin
├───web-app (default Angular setup)
├───server
│ ├───src
│ │ ├───models
│ │ ├───public
│ │ ├───services
│ │ ├───v1
│ │ │ └───routes
│ │ └───v2
│ │ └───routes
│ └───tests
│ package.json
│ README.md

Configuring a Node project with TypeScript

$ mkdir server 
$ cd server

$ npm init -y

$ npm i -g mrm-task-typescript-vscode

$ npx mrm typescript-vscode

Generated Files for Server

server
│ .gitignore
│ .nycrc
│ .prettierignore
│ .prettierrc
│ example.env
│ jasmine.json
│ package-lock.json
│ package.json
│ pull_request_template.md
│ tsconfig.json
│ tsconfig.src.json
│ tslint.json
│
├───.vscode
│ extensions.json
│ launch.json
│ settings.json
│
├───src
│ index.ts
│
└───tests
│ index.spec.ts
│ tsconfig.spec.json

Verify Project

server
│
├───dist
│ index.js
│ index.js.map
$ npm test

Docker

Covers the Configuration Gap

Branch

Merge

GitHub Flow

Branch

Merge

Ship

The Configuration Gap

Dockerfile

Anatomy of a Dockerfile

FROM
SETUP
COPY
CMD

Anatomy of a Dockerfile

FROM

Operating Environment

Dockerfile Inheritance

FROM
FROM
FROM
scratch
nginx
alpine

Anatomy of a Dockerfile

FROM
SETUP

Security

Dependencies

Operating Environment

Docker Security

Host OS
Docker
Runtime
Container
Web Server
App

Anatomy of a Dockerfile

FROM
SETUP
COPY

Security

Dependencies

Operating Environment

Compiled Code

Assets

Anatomy of a Dockerfile

FROM
SETUP
COPY

Security

Dependencies

Operating Environment

Compiled Code

Assets

Copying Code

Host OS
Docker
Runtime
Docker Image
Web Server
App Code

Copying Code

Host OS
Docker
Runtime
minimal-nginx-web-server
nginx
Angular
/dist
/usr/src/app

Anatomy of a Dockerfile

FROM
SETUP
COPY
CMD

Security

Dependencies

npm Scripts for Docker

bit.ly/npmScriptsForDocker

  • Create living documentation

  • Achieve DevOps

  • Close the configuration gap

RESTful APIs

with Express.js

Express

body-parser

cors

morgan

passport

Fast, unopinionated, minimalist web framework for Node.js

Vast plugin eco-system

Design APIs using Swagger

Mongo ODM

with

Mongo

mongodb

document-ts

Document-oriented database with dynamic JSON-like schemas

Mature, performant and capable

  • Mono repo
  • docker & docker compose
  • Secret management with .env
  • Infrastructure/Configuration as Code
  • Evergreen
  • Avoid unnecessary DAO transformations
  • Same language in full-stack
  • Same testing tools
  • Similar patterns
  • Avoid unnecessary abstraction layers

Express.js

Nest.js

REST

GraphQL

Mongo Driver

Mongoose

jasmine

Jest

Become a minimalist

No FOMO, boring is okay!

Master the fundamentals

Think, wait, and fast