# john-smith

Latest version **4.0.1-alpha.28** (published 2025-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install john-smith
pnpm add john-smith
yarn add john-smith
bun add john-smith
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1-alpha.28 |
| Published | 2025-06-09 |
| First published | 2018-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 115.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | guryanovev |
| Keywords | typescript, interactive, UI, framework |

## Links

- npm: https://www.npmjs.com/package/john-smith
- Repository: https://github.com/guryanovev/JohnSmith
- Homepage: https://github.com/guryanovev/JohnSmith#readme
- Issues: https://github.com/guryanovev/JohnSmith/issues
- npm.io page: https://npm.io/package/john-smith

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 4.0.1-alpha.28 (latest) — 2025-06-09
- 4.0.1-alpha.27 — 2025-05-14
- 4.0.1-alpha.26 — 2024-06-10
- 4.0.1-alpha.25 — 2024-06-03
- 4.0.1-alpha.24 — 2024-05-27
- 4.0.1-alpha.23 — 2024-05-24
- 4.0.1-alpha.22 — 2024-05-20
- 4.0.1-alpha.21 — 2024-05-13
- 4.0.1-alpha.20 — 2024-05-08
- 4.0.1-alpha.19 — 2024-05-05
- 4.0.1-alpha.18 — 2024-04-27
- 4.0.1-alpha.17 — 2022-03-07
- 4.0.1-alpha.16 — 2022-03-07
- 4.0.1-alpha.15 — 2022-02-28
- 4.0.1-alpha.14 — 2022-02-28
- … 14 more at https://npm.io/package/john-smith/versions

## README

![Coverage](https://john-smith-library.github.io/coverage/badge-lines.svg)

**John Smith** is a lightweight no-magic typescript frontend mini-framework for building interactive UI.

John Smith utilizes classic Model-View-ViewModel pattern where ***ViewModel*** is a class encapsulating core business logic:

```typescript
export class UserViewModel
{
    name = 'John Smith';
    
    age = new ObservableValue<number>(9);
    
    getOlder() {
        this.age.setValue(this.age.getValue());
    }
}
```

ViewModel can expose:

* static (often readonly) members;
* dynamic observable values;
* methods.

```mermaid
classDiagram
  direction RL
  class ViewModel {
    name: string
    age: Observable
    getOlder()
  }
```

***View*** is a function that transforms a ViewModel to a fragment of a dynamic DOM tree. JSX syntax is used to define a view:

```jsx
export const UserView = (viewModel: UserViewModel) =>
    <section>
        <h1>{viewModel.name}</h1>

        Age: <p>{viewModel.age}</p>
        
        <button _click={() => viewModel.getOlder()}>One More Year Passed</button>
    </section>
```

Even though the code looks like react the meaning is different. JSX syntax is supported by TypeScript on language level and the JSX gets transformed to John Smith's special function call during the build time.

The View defines DOM structures and connects particular parts of the DOM to the observable properties of the corresponding ViewModel. This combination of HTML Elements and observable connections attached is called ***Dynamic DOM***: 

```mermaid
flowchart LR
    name -.-> h1
    age --> p
    getOlder --- button
    subgraph View
    h1
    p
    button
    end
    subgraph ViewModel
    name
    age
    getOlder
    end
```

The last step would be ***rendering*** of the defined Dynamic DOM to an HTML Element:

```typescript
const
    application = new Application(),
    applicationViewModel = new ApplicationViewModel();

/**
 * Main entry point -- rendering the application
 * to #root element.
 */
application.render(
    'root', // we assume there is an element with id=root somewhere on the page
    ApplicationView,
    applicationViewModel);
```

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