# modrn

> Web framework based on web components without virtual DOM

Latest version **0.1.7** (published 2021-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install modrn
pnpm add modrn
yarn add modrn
bun add modrn
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2021-08-08 |
| First published | 2021-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 495.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | alexbfr@github |
| Maintainers | alexbfr |
| Keywords | modrn, web component, web component framework, typescript, react, vue |

## Links

- npm: https://www.npmjs.com/package/modrn
- npm.io page: https://npm.io/package/modrn

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2021-08-08
- 0.1.3 (alpha) — 2021-08-08
- 0.1.6 — 2021-08-08
- 0.1.4 — 2021-08-08
- 0.1.2 — 2021-08-08
- 0.1.1 — 2021-08-08
- 0.1.0 — 2021-08-08

## README

# Introduction

Modrn.ts (https://github.com/alexbfr/modrn) is a pet project trying to resemble a Framework like 
vue.js or react.js while only focusing on modern browsers and web technologies. 
Since the browser landscape has shrunk considerably, almost all browsers should be compatible as long
as web components and ES6 are supported.

This started as an experiment to see if web components are able to replace the classical web framework
approach of a virtual DOM, and also to further my knowledge of typescript and ES6/modern browser features.

# Architecture

The approach in Modrn.ts is to use web components (aka custom elements) to render
the DOM. Meaning there is no need to build and traverse a virtual dom.

Instead, Modrn.ts renders components directly and clones, updates
and removes DOM elements without resorting to another abstraction in between. 
A component in Modrn.ts is created quite similar to other frameworks, but the
HTML template is not parsed separately (or created by emitted code). It is created
in a non-document attached DOM node instead, from which it is cloned as required.

# Performance
There was no focus on optimizing performance yet. The variable substition code is particularly
unoptimized. Nevertheless, the performance is right now broadly comparable to react/vuejs,
at least in the synthetic benchmarks under /examples/performance. 

# So?
Since this is an ongoing experiment, there isn't much of anything aside from code yet. But to 
provide something to feel and see, and to compare against other frameworks, there
are a few examples shamelessly copied from the Vue.js examples:

### elastic-header example
* vuejs: https://vuejs.org/v2/examples/elastic-header.html
* modrnjs: https://codesandbox.io/s/elasticdraggableheader-modrnjs-example-tr90t?file=/src/index.ts

### github-commits example
* vuejs: https://vuejs.org/v2/examples/commits.html
* modrnjs: https://codesandbox.io/s/github-commits-modrnjs-example-67768?file=/src/index.ts

### todo-mvc
* vuejs: https://vuejs.org/v2/examples/todomvc.html
* modrnjs: https://codesandbox.io/s/todomvc-modrnjs-example-g1y22?file=/src/index.ts

All of those examples work exactly the same as the Vue.js examples, to the best
of my knowledge.

# Code
Interesting bits:

* Custom element registration:
  https://github.com/alexbfr/modrn/blob/main/modrn.ts/js/source/core/component-registry.ts

* Scanning an html fragment for variables:
  https://github.com/alexbfr/modrn/blob/main/modrn.ts/js/source/core/variable-analysis/find-variables.ts
  
* Variable substition:
  https://github.com/alexbfr/modrn/blob/main/modrn.ts/js/source/core/variable-substition/substitute-variables.ts
  
* Dynamic child handling:
  https://github.com/alexbfr/modrn/blob/main/modrn.ts/js/source/core/hooks/templated-children-hooks.ts

---
_Source: https://npm.io/package/modrn · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._