DEV Community: Dani Chu

I created a framework with JSX components on generators*, a fast mobx-like state management and an exclusive cssx styling system

Dani Chu — Wed, 27 Jul 2022 19:40:08 +0000

Hi guys!

My name is Dani. For several years now, I have been experimenting with different approaches to front-end development. I tried many different ideas, the best of which I collected in my framework Whatsup. In this article, I want to briefly tell you about architectural decisions and discuss them with you in the comments.

Short features list

🎉 easy to use: simple api, just write code
🚀 own reactivity system with high performance
🌈 cool styling system based on css modules
⛓ glitch free, autotracking and updating of dependencies
🥗 written in typescript, type support out of the box
🗜 small size: ~7kB gzipped (state + jsx + cssx)

JSX components on generators

It seems to me that one day the React team really wanted to get rid of class components in order to leave only functional ones. But there was a problem - the functional components are called every time when rendering and you need to somehow transfer the state from render to render. They came up with hooks... Now we all use hooks... When javascript has generators... Just take a look at how using native language constructs you can describe the life cycle of a component.

function* App() {
    // componentWillMount
    try { 
        while (true) { 
            // main life cycle
            yield <div>Hello</div>
        }
    } catch (e) {
        // componentDidCatch
    } finally {
        // componentDidUnmount
    }
}

It may seem unusual at first glance, but believe me - it's very simple. All variables you declare in the componentWillMount phase will be available from render to render, no magic - that's the nature of generators.

With try{}catch{} you can easily handle errors. And it's native javascript capabilities, isn't that great?

However, you are not required to write try{}catch{}finally{} in each component, only where it's really needed. For example, we only need to control the componentWillMount and componentDidUnmount phases:

function* App() {
    // componentWillMount
    try { 
        while (true) { 
            // main life cycle
            yield <div>Hello</div>
        }
    } finally {
        // componentDidUnmount
    }
}

Or we only need the componentWillMount phase:

function* App() {
    // componentWillMount 
    while (true) { 
        // main life cycle
        yield <div>Hello</div>
    }
}

And if we don’t need to control any phases at all, then we just use a regular functional component:

function App() {
    return <div>Hello</div>
}

Mobx-like state management

I have been using React + Mobx for many years. I love that Mobx allows you to write intuitive code that is easy to read and maintain. But I always lacked the ability to use generators to create computed atoms.

const timer = computed(function*(){
    const count = observable(0)
    const intervalId = setInterval(()=> count(count() + 1), 1000)

    try {
        while(true){
            yield count()
        }
    } finally {
        clearInterval(intervalId)
    }
})

autorun(()=> console.log(timer())
//> 1
//> 2
//> 3

In this example, all the components necessary for the timer to work are encapsulated in the body of the generator. I find this to be a very slick solution. Mobx does not provide us with such opportunities.

A computed atom can also be created from a normal function

const count = observable(0)
const text = computed(()=> `Count is: ${count()}`)

autorun(()=> console.log(text())
//> Count is: 0
count(1)
//> Count is: 1

As you may have noticed, getting a value from a computed or an observable is done with a call without arguments (count() text()), and setting a value in an observable is a call with an argument (count(1)).

In all other respects, the state management API is very similar to Mobx and includes the following components:

observable - creates a trackable atom
array, map, set - creates a trackable array, map, set
computed - creates a derived atom
action, runInAction - allows multiple updates in one operation
autorun, reaction - trigger side effects when observed values change
mutator - allows you to create new data based on previous

CSSX styling system

This is a hybrid of css-modules and jsx namespaces, that uses the sass language to describe the styles of the components.
Consider this example:

// styles.scss

.box {
    width: 50px;
    height: 50px;
}

We can use it like regular css modules

import styles from './styles.scss'

function Box(){
    return <div className={styles.box} />
}

We can bind styles to a component using the cssx function and then apply the .box class to an element using a namespaced property css:box

import styles from './styles.scss'
import { cssx } from 'whatsup/cssx'

const Div = cssx('div', styles)

function Box(){
    return <Div css:box />
}

Or we can immediately import the component with binded styles from the css file (this way we can import any standard html tag)

import { Div } from './styles.scss' 

function Box(){
    return <Div css:box />
}

Among other things, you can import style files and access their styles, for example:

// styles.scss
@import 'grid.scss';

.box {
    width: 50px;
    height: 50px;
}

And now we can arrange our box according to the grid rules

import { Div } from './styles.scss' 

function Box(){
    return <Div css:box css:sm_col_2 css:md_col_3 />
}

And for all this, Whatsup provides intellisense

Our first component

Well, let's summarize our knowledge and write our first component. Let's make a box that changes color on click.

// styles.scss 
.box {
    width: 50px;
    height: 50px;
}
.coral {
    background-color: coral;
}
.green {
    background-color: green;
}

import { observable } from 'whatsup'
import { render } from 'whatsup/jsx'
import { Div } from './styles.scss'

export function Box() {
    const color = observable('coral') 
    const onClick = () => color(color() === 'coral' ? 'green' : 'coral')

    while (true) { 
        yield (
            <Div 
                css:box
                css:coral={color() === 'coral'} 
                css:green={color() === 'green'} 
                onClick={onClick}
            /> 
        )
    }
}

render(<Box />)

And we can look at the result and sources

Want to try?

Just run this in your terminal

npx @whatsup/cli create project

Conclusion

The frontend world is rapidly evolving. New projects come to replace the old ones. Only the most courageous and ambitious survive.I like to search and find original ideas, I hope that my article was useful to you.
Thank you for reading, and let's connect!

whatsup / whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

What is it?

Whatsup is a modern frontend framework with own reactivity system and JSX components based on pure functions and generators.

Features

🎉 easy to use: simple api, just write code
🚀 own reactivity system with high performance
🌈 cool styling system based on css modules
🚦 built-in router with intuitive api
⛓ glitch free, autotracking and updating of dependencies
🥗 written in typescript, type support out of the box
🗜 small size: ~7kB gzipped (state + jsx + cssx)

Example

import { observable } from 'whatsup'
import { render } from 'whatsup/jsx'
function* App() {
    const counter = observable(0)
    const increment = () => counter(counter() + 1)

    while (true) {
        yield (
            <div>
                <p>You click {counter()} times</p>
                <button onClick=

…

View on GitHub

Candy - new way of styling react components

Dani Chu — Sat, 12 Mar 2022 11:48:13 +0000

Hello! My name is Dan.

I developed a new approach to styling react components. In this article, I want to tell you about it.

The idea is very simple. We write the usual css, sass, less.

/* styles.css */

.root {
    color: white;
}

.red {
    backgroung-color: red;
}

And then we import html-tags-components from the style file. Each such component tag has boolean properties associated with the names of css classes.

import { Div } from './styles.css'

function Component(props) {
    return (
        <Div root red={props.red}>
            ...
        </Div>
    )
}

This opportunity is provided by a special webpack-loader - candy-loader.

We get the opportunity to write the usual css and the same familiar html. You can import any standard html tag. Tags are capitalized and extended with an additional set of properties, from which the className property is generated under the hood.

You can include css files and access their styles.

/* styles.css */
@import 'grid.css';

/*...*/

import { Div } from './styles.css'

function Component(props) {
    return (
        <Div root red={props.red} col_xs_12 col_sm_8>
            ...
        </Div>
    )
}

Easy configurable

candy-loader is based on postcss, so you can use the standard config file for further customization.

// .postcssrc.js

module.exports = {
    plugins: {
        autoprefixer: isProduction,
    },
    processOptions: {
        map: isDevelopment,
    },
}

Intellisense

There is a typescript-plugin-candy for that. A fairly easy to install and configure plugin that allows you to get autocomplete and type checking.

Conclusion

What do you think about this idea? Should it be further developed and improved?

Below I have provided links to the source code and a pre-made starter repo in case you want to play around with it.

I will be glad to your comments and suggestions for development.

Thanks!

WhatsUp - front-end framework based on ideas of streams and fractals. Part 2.

Dani Chu — Mon, 05 Apr 2021 14:47:38 +0000

Hi guys!

My name is Dan. This is the second article about my project.

In the first article I talked about how state management can be organized using WhatsUp. Today I will tell you how easy and simple it is to organize the display of data in a react-like way - with jsx.

JSX

WhatsUp has its own jsx-renderer. There are two packages for this - @whatsup/jsx & @whatsup/babel-plugin-transform-jsx. And a simple HelloWorld would look like this.

import { cause } from 'whatsup'
import { render } from '@whatsup/jsx'

const app = cause(function*(){
    while(true){
        yield <div>Hello world</div>
    }
})

render(app)

Example

His work is based on mutators. Unlike React, WhatsUp never creates the entire virtual house as a whole for further comparison and modification. It incrementally modifies the thread-specific fragment. In addition, WhatsUp can render directly to the body element (by default).

Fragments and their syntax (<></>) are also supported, and components are only defined as pure functions, have no internal state, and are only responsible for markup.

Fractals

This is perhaps the main component of my framework. Looking for inspiration, I looked on YouTube a lot of videos of traveling to fractals, for example one, two, three. Just take a look. Imagine that you are flying through the universe in a spaceship. It's incredibly beautiful!

There is mathematics behind all this beauty. If you look for a long time, you will notice some patterns. The fractal is designed in such a way that if we do not pay attention, then we do not notice the seams between the repeating patterns. They are not the same repeating pattern. Each time this is a new pattern, created in the context of the previous one according to the same rules.

Now imagine that our ship is not moving, it stands still, and the fractal gives us a stream of information towards us. This information reflects the internal state of the fractal. I really hope that I managed to describe it correctly. Let's move on to practice.

const app = fractal(function*(){
    while(true){
       yield <div>Hello world</div>
    }
})

It looks like Cause, right? This is true, the only difference is that for each consumer, the fractal creates a personal generator and context. The contexts connect to each other as parent-child and form a context tree. This allows you to organize the transfer of data down the tree, as well as the bubbling of events up. A cause, unlike a fractal, creates one iterator for all consumers, and one context without a reference to the parent (root context).

Sharing

This mechanism allows you to move data down the context. Any data shared somewhere in parent fractals will be available in child fractals. To do this, in the context there are methods ctx.share(), ctx.get() and ctx.find().

import { fractal } from 'whatsup'
import { render } from '@whatsup/jsx'

class Theme {
    readonly name: string

    constructor(name: string) {
        this.name = name
    }
}

const app = fractal(function* (ctx) {
    const theme = new Theme('dark')

    ctx.share(theme)
    // share theme instance to children fractals

    while (true) {
        yield <div>{yield* page}</div>
    }
})

const page = fractal(function* (ctx) {
    const theme = ctx.get(Theme)
    // get theme instance from parent fractals

    while (true) {
        yield (
            <div>
                Theme name is <b>{theme.name}</b>
            </div>
        )
    }
})

render(app)

Example

The ctx.get() method searches for data based on a strict constructor match, but ctx.find() method uses instanceof.

class User {}
class Guest extends User {}

const guest = new Guest()

// then in parent fractal
ctx.share(guest)

// and in child fractal
const user = ctx.find(User)
//    ^^^^
// the user constant will contain the Guest instance

There is another way to share data - factors.

import { factor } from 'whatsup' 

const Token = factor(null)
//     default value ^^^^ if factor is not found 

// then in parent fractal
ctx.share(Token, 'i am a secret token')

// and in child fractal
const token = ctx.get(Token)
//> 'i am a secret token'

A factor is a key by which you can share data in a context and get data out of a context.

Event system

This system allows sending events between fractals up the context. To work with events in context, there are ctx.on(),ctx.off() and ctx.dispatch() methods.

import { fractal, Event } from 'whatsup'
import { render } from '@whatsup/jsx'

class TimeEvent extends Event {
    readonly time: number

    constructor(time: number) {
        super()
        this.time = time
    }
}

const app = fractal(function* (ctx) {
    ctx.on(TimeEvent, (e) => console.log('Time', e.time))
    // attach listener for TimeEvent instances

    while (true) {
        yield <div>{yield* page}</div>
    }
})

const page = fractal(function* (ctx) {
    const onClick = () => {
        const event = new TimeEvent(Date.now())
        ctx.dispath(event)
        // trigger event bubbling
    }

    while (true) {
        yield (
            <div>
                <button onClick={onClick}>Print time</button>
            </div>
        )
    }
})

render(app)

Example

Look at an example - when you click on the button, a message with the current time will appear in the console.

The ctx.off() method is needed to remove the event handler. In most cases, it does not need to be called manually - all handlers are automatically removed when the fractal is destroyed.

Extended example

The fractal function is shorthand for creating fractals. There is a base class Fractal available for extension. When extending, we need to implement a whatsUp method that returns a generator.

The following example demonstrates the use of the event system and data sharing.

import { Fractal, Conse, Event, Context } from 'whatsup'
import { render } from '@whatsup/jsx'

class Theme extends Conse<string> {}

class ChangeThemeEvent extends Event {
    readonly name: string

    constructor(name: string) {
        super()
        this.name = name
    }
}

class App extends Fractal<JSX.Element> {
    readonly theme = new Theme('light');
    readonly settings = new Settings()

    *whatsUp(ctx: Context) {
        // sharing this.theme for child fractals
        ctx.share(this.theme)

        // attach ChangeThemeEvent event listener
        ctx.on(ChangeThemeEvent, (e) => this.theme.set(e.name))

        while (true) {
            yield (<div>{yield* this.settings}</div>)
        }
    }
}

class Settings extends Fractal<JSX.Element> {
    *whatsUp(ctx: Context) {
        // get Theme from context
        const theme = ctx.get(Theme)
        // dispatch ChangeThemeEvent on click button
        const change = (name: string) => 
            ctx.dispatch(new ChangeThemeEvent(name))

        while (true) {
            yield (
                <div>
                    <h1>Current</h1>
                    <span>{yield* theme}</span>
                    <h1>Choose</h1>
                    <button onClick={() => change('light')}>light</button>
                    <button onClick={() => change('dark')}>dark</button>
                </div>
            )
        }
    }
}

const app = new App()

render(app)

Example

Errors catching

Throwing an exception at the framework level is common. The error propagates along the streams, like any other data, and is handled by the standard try {} catch {} construction. In this case, the reactivity system preserves the state of dependencies in such a way that when the situation is corrected and the error disappears, the threads recalculate their data and return to their normal operating state.

import { conse, Fractal } from 'whatsup'
import { render } from '@whatsup/jsx'

class CounterMoreThan10Error extends Error {}

class App extends Fractal<JSX.Element> {
    *whatsUp() {
        const clicker = new Clicker()
        const reset = () => clicker.reset()

        while (true) {
            try {
                yield <div>{yield* clicker}</div>
            } catch (e) {
                // handle error  
                if (e instanceof CounterMoreThan10Error) {
                    yield (
                        <div>
                            <div>Counter more than 10, need reset</div>
                            <button onClick={reset}>Reset</button>
                        </div>
                    )
                } else {
                    throw e
                }
            }
        }
    }
}

class Clicker extends Fractal<JSX.Element> {
    readonly count = conse(0)

    reset() {
        this.count.set(0)
    }

    increment() {
        const value = this.count.get() + 1
        this.count.set(value)
    }

    *whatsUp() {
        while (true) {
            const count = yield* this.count

            if (count > 10) {
                throw new CounterMoreThan10Error()
            }

            yield (
                <div>
                    <div>Count: {count}</div>
                    <button onClick={() => this.increment()}>increment</button>
                </div>
            )
        }
    }
}

const app = new App()

render(app)

Example

I tried to design the framework in such a way that it was easy and intuitive to use it.

Performance

Performance is very important. I added whatsapp to the krausest/js-framework-benchmark project. Below is an excerpt from the results table showing WhatsUp position against the background of the most popular libraries and frameworks such as Inferno, Preact, Vue, React and Angular.

In my opinion, the position is already quite worthy.

Conclusion

I hope you enjoyed the article. These are not all the features of the WhatsUp framework. In the next article I will talk about delegation, routing, asynchronous tasks. You can find more examples here, their sources.

If you liked the idea of my framework - leave your feedback or a star on the github, also contributing welcomed. I'll be very happy. Thanks!

whatsup / whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

WhatsUp - front-end framework based on ideas of streams and fractals

Dani Chu — Fri, 02 Apr 2021 09:20:59 +0000

Hi guys!

My name is Dan. Today I want to share my project with you. It is a frontend framework. I collected my most exotic ideas in it.

npm i whatsup

It is built on generators, provides functionality similar to react + mobx out of the box, has good performance, and weighs less than 5kb gzip. With a reactive soul. With minimal api. With the maximum use of native language constructs.

The architectural idea is that our entire application is a tree structure, along the branches of which the flow of data is organized in the direction of the root, reflecting the internal state. During development, we describe the nodes of this structure. Each node is a simple self-similar entity, a full-fledged complete application, all work of which is to receive data from other nodes, process it and send it next.

This is the first part of my story. We'll take a look at state management here.

Cause & Conse

Two basic streams for organizing reactive data state. For ease of understanding, they can be associated with the familiar computed and observable.

const name = conse('John')

whatsUp(name, (v) => console.log(v))
//> "John"

name.set('Barry')
//> "Barry"

Example

Nothing special, right? conse creates a stream with an initial value, whatsUp - add the observer. Through .set(...) we change the value - the observer reacts - a new entry appears in the console.

Cause is created from a generator, inside which the yield* expression is the "connection" of an external thread to the current one. The situation inside the generator can be viewed as if we are inside an isolated room, in which there are several yield* inputs and only one return output

const name = conse('John')

const user = cause(function* () {
    return {
        name: yield* name,
        //    ^^^^^^ connect stream name 
    }
})

whatsUp(user, (v) => console.log(v))
//> {name: "John"}

name.set('Barry')
//> {name: "Barry"}

Example

yield* name sets the dependence of the user stream on the name stream, which in turn also leads to quite expected results, namely - change the name - the user changes - the observer reacts - the console shows a new record.

What is the advantage of generators?

Let's complicate our example a little. Let's imagine that in the data of the user stream, we want to see some additional parameter revision, that reflects the current revision.

It's easy to do - we declare a variable revision, the value of which is included in the dataset of the user stream, and each time during the recalculation process, we increase it by one.

const name = conse('John')

let revision = 0

const user = cause(function* () {
    return {
        name: yield* name,
        revision: revision++,
    }
})

whatsUp(user, (v) => console.log(v))
//> {name: "John", revision: 0}

name.set('Barry')
//> {name: "Barry", revision: 1}

Example

But something is wrong here - revision looks out of context and unprotected from outside influences. There is a solution to this - we can put the definition of this variable in the body of the generator, and to send a new value to the stream (exit the room) use yield instead of return, which will allow us not to terminate the execution of the generator, but to pause and resume from the place of the last stops on next update.

const name = conse('John')

const user = cause(function* () {
    let revision = 0

    while (true) {
        yield {
            name: yield* name,
            revision: revision++,
        }
    }
})

whatsUp(user, (v) => console.log(v))
//> {name: "John", revision: 0}

name.set('Barry')
//> {name: "Barry", revision: 1}

Example

Without terminating the generator, we get an additional isolated scope, which is created and destroyed along with the generator. In it, we can define the variable revision, available from calculation to calculation, but not accessible from outside. At the end of the generator, revision will go to trash, on creation - it will be created with it.

Extended example

The functions cause and conse are shorthand for creating streams. There are base classes of the same name available for extension.

import { Cause, Conse, whatsUp } from 'whatsup'

type UserData = { name: string }

class Name extends Conse<string> {}

class User extends Cause<UserData> {
    readonly name: Name

    constructor(name: string) {
        super()
        this.name = new Name(name)
    }

    *whatsUp() {
        while (true) {
            yield {
                name: yield* this.name,
            }
        }
    }
}

const user = new User('John')

whatsUp(user, (v) => console.log(v))
//> {name: "John"}

user.name.set('Barry')
//> {name: "Barry"}

Example

When extending, we need to implement a whatsUp method that returns a generator.

Context & Disposing

The only argument accepted by the whatsUp method is the current context. It has several useful methods, one of which is update - allows you to force initiate the update procedure.

To avoid unnecessary and repeated computation, all dependencies between threads are dynamically tracked. When the moment comes when the stream has no observers, the generator is automatically destroyed. The occurrence of this event can be handled using the standard try {} finally {} language construct.

Consider an example of a timer thread that generates a new value with a 1 second delay using setTimeout, and when destroyed, calls clearTimeout to clear the timeout.

const timer = cause(function* (ctx: Context) {
    let timeoutId: number
    let i = 0

    try {
        while (true) {
            timeoutId = setTimeout(() => ctx.update(), 1000)
            // set a timer with a delay of 1 sec

            yield i++
            // send the current value of the counter to the stream 
        }
    } finally {
        clearTimeout(timeoutId)
        // clear timeout
        console.log('Timer disposed')
    }
})

const dispose = whatsUp(timer, (v) => console.log(v))
//> 0
//> 1
//> 2
dispose()
//> 'Timer disposed'

Пример на CodeSandbox

Mutators

A simple mechanism to generate a new value based on the previous one. Consider the same example with a mutator based timer.

const increment = mutator((i = -1) => i + 1)

const timer = cause(function* (ctx: Context) {
    // ...
    while (true) {
        // ...
        // send mutator to the stream
        yield increment
    }
    // ...
})

Example

A mutator is very simple - it is a method that takes a previous value and returns a new one. To make it work, you just need to return it as a result of calculations, all the rest of the magic will happen under the hood. Since the previous value does not exist on the first run, the mutator will receive undefined, the i parameter will default to -1, and the result will be 0. Next time, zero mutates to one, etc. As you can see, increment allowed us to avoid storing the local variable i in the generator body.

That's not all. In the process of distributing updates by dependencies, the values are recalculated in streams, while the new and old values are compared using the strict equality operator ===. If the values are equal, the recalculation stops. This means that two arrays or objects with the same data set, although equivalent, are still not equal and will provoke meaningless recalculations. In some cases this is necessary, in others it can be stopped by using the mutator as a filter.

class EqualArr<T> extends Mutator<T[]> {
    constructor(readonly next: T[]) {}

    mutate(prev?: T[]) {
        const { next } = this

        if (
            prev && 
            prev.length === next.length && 
            prev.every((item, i) => item === next[i])
        ) {
            /*
            We return the old array, if it is equivalent 
            to the new one, the scheduler will compare 
            the values, see that they are equal and stop 
            meaningless recalculations
            */
            return prev
        }

        return next
    }
}

const some = cause(function* () {
    while (true) {
        yield new EqualArr([
            /*...*/
        ])
    }
})

In this way, we get the equivalent of what in other reactive libraries is set by options such as shallowEqual, at the same time we are not limited to the set of options provided by the library developer, but we ourselves can determine the work of filters and their behavior in each specific case. In the future, I plan to create a separate package with a set of basic, most popular filters.

Like cause and conse, the mutator function is shorthand for a short definition of a simple mutator. More complex mutators can be described by extending the base Mutator class, in which the mutate method must be implemented.

Look - this is how you can create a mutator for a dom element. The element will be created and inserted into the body once, everything else will boil down to updating its properties.

class Div extends Mutator<HTMLDivElement> {
    constructor(readonly text: string) {
        super()
    }

    mutate(node = document.createElement('div')) {
        node.textContent = this.text
        return node
    }
}

const name = conse('John')

const nameElement = cause(function* () {
    while (true) {
        yield new Div(yield* name)
    }
})

whatsUp(nameElement, (div) => document.body.append(div))
/*
<body>
    <div>John</div>
</body>
*/
name.set('Barry')
/*
<body>
    <div>Barry</div>
</body>
*/

Example

Actions

Actions are designed to perform batch updates of data in streams.

import { cause, conse, action, whatsUp } from "whatsup";

const name = conse("John");
const age = conse(33);

const user = cause(function* () {
  return {
    name: yield* name,
    age: yield* age
  };
});

whatsUp(user, (v) => console.log(v));
//> {name: "John", age: 33}

// without action
name.set("Barry");
age.set(20);

//> {name: "Barry", age: 33}
//> {name: "Barry", age: 20}

// with action

action(() => {
  name.set("Jessy");
  age.set(25);
});

//> {name: "Jessy", age: 25}

Example

Conclusion

In this article, I described the basic capabilities of WhatsUp for organizing state management. In the next article, I will tell you how WhatsUp can work with jsx, about the event system and the exchange of data through the context.

If you liked the idea of my framework - leave your feedback or a star on the github. I'll be very happy. Thanks!

whatsup / whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

What is it?

Whatsup is a modern frontend framework with own reactivity system and JSX components based on pure functions and generators.

Features

🎉 easy to use: simple api, just write code
🚀 own reactivity system with high performance
🌈 cool styling system based on css modules
🚦 built-in router with intuitive api
⛓ glitch free, autotracking and updating of dependencies
🥗 written in typescript, type support out of the box
🗜 small size: ~7kB gzipped (state + jsx + cssx)

Example

import { observable } from 'whatsup'
import { render } from 'whatsup/jsx'
function* App() {
    const counter = observable(0)
    const increment = () => counter(counter() + 1)

    while (true) {
        yield (
            <div>
                <p>You click {counter()} times</p>
                <button onClick=

…

View on GitHub

A small set of three beautiful dark themes for VS Code

Dani Chu — Wed, 09 Dec 2020 14:45:24 +0000

Today is a beautiful day and a great mood.
It seems like it's time to refresh your workspace. I haven't changed the theme of my editor for a long time, so I happily spent a couple of hours looking for something really fresh. I want to share the results of my searches with you.

Good mood and productive work to all!

Why am I here ?

Dani Chu — Tue, 08 Dec 2020 08:04:18 +0000

I asked myself this question after reading @madhunimmo's post. And this is my answer...

I have obsessed with the ideas of fractals and energy flows in the structure of our world. I study the writings of Benoit Mandelbrot and try to apply the knowledge gained in practice.

I believe that the ideal mechanism can be built only by being guided by the principles of self-similarity. Take a look around - every day on the way home or to the office we see beautiful trees around us and do not even think that these are fractals. Each branch is essentially a complete tree. This principle is repeated right down to the leaves. This simple law of self-repetition produces such complex things. Isn't that brilliant?

But what do we look deeper? We learn that inside there is a whole network of delivery of nutrients from the root to the leaves, as well as photosynthetic products from the leaves to the root. This network is also arranged according to the fractal law. It is like rivers - small streams flow into rivers, rivers flow into large rivers, and so on all the way to the sea.

These simple and original solutions haunt me, they blow up my brain. For the last two years I have been trying to apply this knowledge in my project.

So why am I here?

I just finished developing the first version of my front-end framework, but I still can't figure out if I'm moving in the right direction.

@fract/core - this is my project and I would be very grateful for any feedback. In the end - maybe I'm wasting my time on it?

Thanks

P.S. Why are you here?

DEV Community: Dani Chu

I created a framework with JSX components on generators*, a fast mobx-like state management and an exclusive cssx styling system

Short features list

JSX components on generators

Mobx-like state management

CSSX styling system

Our first component

Want to try?

Conclusion

Links

whatsup / whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

What is it?

Features

Example

Candy - new way of styling react components

Easy configurable

Intellisense

Conclusion

WhatsUp - front-end framework based on ideas of streams and fractals. Part 2.

JSX

Fractals

Sharing

Event system

Extended example

Errors catching

Performance

Conclusion

whatsup / whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

WhatsUp - front-end framework based on ideas of streams and fractals

Cause & Conse

What is the advantage of generators?

Extended example

Context & Disposing

Mutators

Actions

Conclusion

whatsup / whatsup

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

What is it?

Features

Example

A small set of three beautiful dark themes for VS Code

1. Horizon

2. Tokyo Night

3. Community Material Theme Palenight

Why am I here ?