Minimal MEAN:

Full-Stack TypeScript

Doguhan Uluca

Technical Fellow  at

@duluca

We're hiring, including fully remote positions!

excella.com/careers

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

github.com/duluca/lemon-mart-server

github.com/duluca/minimal-mean

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

AngularForEnterprise.com

AngularEvergreen.com

@duluca