@leanup/cli

Make things pure ... to become lean.

leanup ^CLI

The @leanup CLI contains all required popular tools in there minimal default, transparent and extensible configuration to develop JavaScript/TypeScript web applications.

• Motivation
• Principles
• Demo
• Installation
• Features
• Structure
  • Frameworks
  • Extensions
  • Thinks
• Replaced environment variables
• Dependencies
• Peer dependencies
• Optional tools

Motivation

• Learnability
• Controllability
• Universality
• Flexibility
• Scalability
• Durability
• Transparency

Principles

• convention over configuration
• pure commands under the hood
• don't repeat yourself
• following the generic instead of the influenced way
• keep the dependencies always up to date

Demo

There are some working examples:

• https://github.modevel.de/poc/
• PoC - Flexible web application architecture
• Hello World - Comparison

Installation

To install the @leanup CLI execute the following command:

npm install @leanup/cli typescript --save-dev

And a non-framework or framework strategy must also be selected:

Non-framework:

npm install @leanup/cli-vanilla --save-dev

Or with framework:

npm install @leanup/cli-angular --save-dev or
npm install @leanup/cli-angularjs --save-dev or
npm install @leanup/cli-aurelia --save-dev or
npm install @leanup/cli-inferno --save-dev or
npm install @leanup/cli-lit-element --save-dev or
npm install @leanup/cli-preact --save-dev or
npm install @leanup/cli-react --save-dev or
npm install @leanup/cli-svelte --save-dev or
npm install @leanup/cli-vue --save-dev or
npm install @leanup/cli-vue3 --save-dev

Install the peer dependencies chromedriver, geckodriver or selenium-server in the required version, if you need that features.

• npm install chromedriver --save-dev
• npm install geckodriver --save-dev
• npm install selenium-server--save-dev

Features

Tool/Technology	Description	Status	Note	Rating
TypeScript	Language	✔️	ready
Webpack	Bundler	✔️	ready
Snowpack	Bundler	⌛	in progress
Vite	Bundler	⌛	in progress
ESBuild	Transpiler	✔️	ready
Babel	Transpiler	✔️	ready
Mocha	Unit-Test-Runner	✔️	ready
Chai	Assertion	✔️	ready
Sinon	Mocking	✔️	ready
NYC	Code-Coverage	✔️	ready
ESLint	Code-Checker	✔️	ready
Nightwatch.js	E2E-Test-Runner	✔️	ready
Allsure	Report	✔️	ready
Cucumber	BDD	✔️	ready
robotframework	BDD	⌛	will be evaluated
Storybook	Documentation	⌛	in progress
OpenAPI	API	✔️	ready
GraphQL	API	✔️	ready
Workbox	PWA	✔️	ready
Lerna	Mono-Repo	✔️	ready
Ant-Design	Design-System	✔️	proved
Bootstrap	Design-System	✔️	proved
Material	Design-System	✔️	proved
Tailwindcss	Design-System	✔️	proved
WindiCSS	Design-System	✔️	proved
Nexus IQ	Vulnerabiliy-Gate	✔️	ready
Less	CSS	✔️	ready
Sass	CSS	✔️	ready
PostCSS	CSS	✔️	ready
TSArch	Architecture	⌛	in progress
Webhint	Webhint	✔️	moved ***
TestCafe	E2E-Test-Runner	⌛	will be evaluated ****
TSLint	Code-Checker	❌	removed **
Cypress	E2E-Test-Runner	❌	excluded *

* Arguments agains Cypress:

• reinvent wheel
  • detect css selectors
  • BDD test syntax
  • principals
• large tooling
• a lot of binaries
• many dependencies
• ci integration vs selenium hub

It is difficult to keep focus with Cypress as it is more a nice tool than an effective tool. It is expected that a lot of time will be invested to justify the requirements of a project.

** TSLint is deprecated.

*** Webhint is not practical for the development of components, since component tags often have no relation to standard HTML. In addition, the webhint package alone is over 100 MB in size. I have good by using a IDE webhint plugin, like VSCode webhint.

**** TestCafe The idea that defined TestCafe architecture was that you don't really need an external driver to run end-to-end tests in the browser. That's interesting.

Structure

Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

• @leanup/cli ✔️
• @leanup/cli-vanilla (optional) ✔️

Frameworks

Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

The selection of the following frameworks depends in parts on the following references:

• report,
• benchmark and
• survey

Currently the following framework extensions are available:

• @leanup/cli-angular ✔️
• @leanup/cli-angularjs ✔️
• @leanup/cli-aurelia ✔️
• @leanup/cli-inferno ✔️
• @leanup/cli-lit-element ✔️
• @leanup/cli-preact ✔️
• @leanup/cli-react ✔️
• @leanup/cli-svelte ✔️
• @leanup/cli-vue ✔️
• @leanup/cli-vue3 ✔️ (RC)

Extensions

A separate package contains some nice but not required addons for webpack.

• @leanup/cli-addons ✔️
• @leanup/cli-cucumber ✔️
• @leanup/cli-graphql ✔️
• @leanup/cli-pwa ✔️
• @leanup/cli-webhint ✔️

Thinks

There a separate packages for important application features.

• @leanup/git-hooks ✔️
• @leanup/form ✔️
• @leanup/lib ✔️
• @leanup/ul ⌛

Replaced environment variables

The following variable names are replaced by the values from package.json file in the bundle:

Name	Description
APP_AUTHER	The value of the author attribute from the package.json file.
APP_HOMEPAGE	The value of the homepage attribute from the package.json file.
APP_NAME	The value of the name attribute from the package.json file.
APP_VERSION	The value of the version attribute from the package.json file.
NODE_ENV	The value of the version attribute from the package.json file.

For example:

package.json:

{
  "name": "@scope/my-app",
  "version": "1.1.0",
  "description": "This CLI brings along all required tools to serve, test and build multi framework SPAs",
  "author": "Martin Oppitz <[e-mail]>",
  "homepage": "https://leanupjs.org",
  ...

App code:

const APP_METADATA = {
  author: '$$APP_AUTHER$$',
  homepage: '$$APP_HOMEPAGE$$',
  name: '$$APP_NAME$$',
  version: '$$APP_VERSION$$',
  environment: '$$NODE_ENV$$', // development | test | production ⌛
};
console.log(APP_METADATA);

Dependencies

Package	Size	Vulnerabilities
@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators
@babel/preset-env
@babel/preset-typescript
@types/node
babel-loader
chalk
commander
copy-modules-webpack-plugin
css-loader
esbuild-loader
file-loader
less
less-loader
postcss
postcss-loader
sass
sass-loader
string-replace-loader
style-loader
webpack
webpack-cli
webpack-dev-server

Peer dependencies

Package	Size	Vulnerabilities
chromedriver
geckodriver
graphql
selenium-server
typescript

Optional tools

Package	Size	Vulnerabilities
@leanup/git-hooks
allure-commandline
lerna
workbox-cli