Some fun libraries or framework summary

About 541 wordsAbout 2 min

javascript

2022-05-27

Here are some fun libraries or frameworks of various types.

Client Framework

Lit

lit is a simple, efficient, lightweight library for building web components.

It replaces polymer as the preferred library for WebComponent/customElement development.

my-element.ts

import { LitElement, html, css } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('my-element')
export class MyTimer extends LitElement {
  static styles = css`...`

  @property() count = 0

  render() {
    return html`<div>${this.count}</div>`
  }
}

index.html

<!doctype html>
<head>
  ...
</head>
<body>
  <my-timer count="7"></my-timer>
</body>

solid-js

A JavaScript library for building user interfaces, simple, efficient, and excellent performance.

Solid stands on the shoulders of giants like React, Knockout, etc. If you have developed it with React Hooks before, Solid should look natural. In fact, the Solid model is simpler and has no Hook rules. Each component is executed once, and as the dependencies are updated, the hooks and bindings are executed multiple times.

Solid follows the same philosophy as React, with one-way data streaming, read/write isolation, and immutable interfaces. But we gave up on using virtual DOM and used a completely different implementation.

A library that is claimed to be even more react than react

import { render } from "solid-js/web";
import { onCleanup, createSignal } from "solid-js";

const CountingComponent = () => {
 const [count, setCount] = createSignal(0);
 const interval = setInterval(
 () => setCount(count => count + 1),
 1000
 );
 onCleanup(() => clearInterval(interval));
 return <div>Count value is {count()}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));

inferno

inferno is a fast, React-like library for building high-performance user interfaces on clients and servers.

import { render, Component } from 'inferno'

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }
  render() {
    Return(
      <div>
        <h1>Header!</h1>
        <span>Counter is at: {this.state.counter}</span>
      </div>,
    )
  }
}

render(<MyComponent />, document.getElementById('app'))

cycle-js

cycle.js

Cycle.js is a minimalist JavaScript framework that provides a functional and responsive human-computer interaction interface.

Different from other frameworks such as React/Vue, Cycle.js provides a complete development paradigm that needs to be developed based on its paradigm, and is relatively not It is easy to get started, but its functional and responsive ideas will bring very good inspiration and learning.

import { run } from '@cycle/run'
import { div, label, input, hr, h1, makeDOMDriver } from '@cycle/dom'

function main(sources) {
  const input$ = sources.DOM.select('.field').events('input')

  const name$ = input$.map((ev) => ev.target.value).startWith('')

  const vdom$ = name$.map((name) =>
    div([label('Name:'), input('.field', { attrs: { type: 'text' } }), hr(), h1('Hello ' + name)]),
  )

  return { DOM: vdom$ }
}

run(main, { DOM: makeDOMDriver('#app-container') })

svelte

Svelte is a completely new way to build a user interface. Traditional frameworks such as React and Vue require a lot of work in the browser, and Svelte puts this work into the compilation phase of building the application.

Different from using virtual DOM differences. Svelte's code is written to update the DOM like a surgical procedure when the application's state changes.

<script>
  let count = 0

  function handleClick() {
    count += 1
  }
</script>

<button on:click="{handleClick}">Clicked {count} {count === 1 ? 'time' : 'times'}</button>