Doguhan Uluca PRO
Author of the best-selling Angular for Enterprise-Ready Web Apps. Google Developers Expert in Angular. Agile, JavaScript and Cloud expert, Go player.
Minimal MEAN:
Full-Stack TypeScript
2
Doguhan Uluca
Technical Fellow
Excella
😰
🤮
🤬
😱
😎
Doguhan Uluca
- Shipping Code
- Choosing of the Right Stack
- Anatomy of Minimal MEAN
- Code Demo
- GitHub Flow
- Anatomy of the Dockerfile
- How to configure CircleCI
-
n-to-n Deployments
Choosing the Right Stack
What is in a name?
name
stack
Ease of use
Happiness
Effectiveness
stack is key
for a great
Developer Experience
Presentation
API
Business
Persistence
Best Practices
IDE
Patterns
Libraries
Testing
Full Stack Nirvana
Do
more
with less
Think
Wait
Fast
Become
a minimalist
Minimal MEAN
Angular
Express
Node
Mongo
VS Code
npm
GitHub
jasmine
TypeScript
CI
Docker
Angular
Angular Material
Angular Evergreen
angular-unit-test-helper
Fundamentals
duluca/minimal-nginx-web-server
Capable, reliable development platform
Well understood, great community
Express
body-parser
cors
morgan
passport
Fast, unopinionated, minimalist web framework for Node.js
Vast plugin eco-system
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
Mongo
mongodb
document-ts
Document-oriented database with dynamic JSON-like schemas
Mature, performant and capable
VS Code
Free, fast and extensible
TypeScript
Covers the
JavaScript Feature Gap
Credit: Anders Hejlsberg
npm
Cross-platform scripting platform
GitHub
Kanban support, enables GitHub Flow
Docker
Covers the Configuration Gap
Branch
Merge
GitHub Flow
Branch
Merge
Ship
The Configuration Gap
.
Free and container-based
jasmine
Batteries included
Fast
Full-stack
[demo]
- Mono repo
- docker & docker-compose
- Secret management with .env
- Actions taken by devs are recorded in scripts
- Evergreen
- No needless data-object transformations
- Same language in full-stack
- Same testing tools
- Similar patterns
- No unnecessary abstraction layers
GitHub Flow
Branch
Commit
Open Pull Request
Discuss and Review
Deploy
Merge
-
enforce standards
-
isolate changes
-
make it repeatable
Dockerfile
Anatomy of a Dockerfile
FROMSETUP
COPY
CMD
Anatomy of a Dockerfile
FROMOperating 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
.circleci/config.yml
.circleci/config.yml
FROMjobs
build
deploy
.circleci/config.yml
FROMbuild
env
steps
Docker
checkout
run
store build artifacts
store test results
Multi-Stage Dockerfile
FROM
FROM
FROM
as builder
as tester
COPY
from builder
CMD
copy end result
duluca/lemon-mart
FROM
FROM
FROM
as builder
as tester
COPY
from builder
CMD
minimal-node-build-env
alpine-node-chromium
minimal-nginx-web-server
50+ Mb
200+ Mb
7 Mb
Execution
docker build -f Dockerfile.integration . -t lemon-martgithub.com/duluca/lemon-mart
-
Use declarative tools
-
Achieve Infrastructure-as-Code
-
Repeatable Integration
n ➡️ n Deployments
Local build
CI-x build
...
.circleci/config.yml
FROMjobs
build
deploy
.circleci/config.yml
FROMdeploy
restore
steps
Build artifact
Sign in to container repo
Publish to repo
Trigger deployment
npm Script for AWS
bit.ly/npmScriptsForAWS
npm run aws:fargate-releaseheroku container:push web -a lemon-martgcloud beta run deploy --image lemon-martGoogle Cloud Run
-
Use declarative tools
-
Achieve Infrastructure-as-Code
-
Repeatable deployments
-
n ➡️ n Flexibility
⛴ 👈 or 👉 😣 🤷
Minimal MEAN 2
By Doguhan Uluca
Minimal MEAN 2
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.
