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

Minimal MEAN: All About the Stack

By Doguhan Uluca

Minimal MEAN: All About the Stack

It can be daunting to pick the right stack to deliver your idea to the cloud. Without realizing, you can introduce one too many "sandbag of complexity" between you and something you can release. It is possible to do full-stack development with a consistent set of tools and best practices using the same language, JavaScript. No more to context switching between front-end and back-end languages, libraries, and tools. However, it is important to not to dig yourself into a hole. My easy to learn and use stack 'Minimal MEAN' will get you started and deployed on the cloud over a lazy weekend, without requiring a MongoDB install, while leveraging the latest tools like async/await with Typescript, Angular and Node.

  • 1,222

More from Doguhan Uluca