Schema based frontend framework

[rohiievych]

Here is the first naive implementation of metacomponents (Proof of Concept). NEED DISCUSSION AND INVESTIGATION.

Key features:

• Pure JavaScript only - no need to switch between HTML/CSS/JS syntax
• No 3rd party dependencies
• Tiny JIT compiler
• Dynamic module resolutions
• Declarative schema based definitions
• Component elements
• Component/element encapsulation
• Element dependency injection
• Element change detection
• Element local state
• Element lifecycle hooks
• Separate domain logics

Component button example:

export default (styles, sender) => ({
  tag: 'button',
  text: 'Send',
  styles,
  attrs: {
    name: 'sendBtn'
  },
  state: {
    count: 0
  },
  events: {
    async click() {
      this.state.count++;
      await sender.send();
      console.log(`Button clicked ${this.state.count} times`);
    }
  },
  hooks: {
    init() {
      console.log('Button init');
    }
  }
});

TODO:

• add full featured JIT compiler to compile components on the fly
• add server side AOT compiler and client rehydration to precompile components with node.js
• add component dependency injection
• add CSS rules generation
• enhance change detection
• support WebComponents
• investigate and add many more other features

[zibet27]

I like StyleSheet and "CSS-like" styles generation in React Native. What do you think about it? I suppose it could be a great choice for your framework.

[rohiievych]

I like StyleSheet and "CSS-like" styles generation in React Native. What do you think about it? I suppose it could be a great choice for your framework.

We need a proprietary high level abstraction over css rules, so that it'll be easier to style elements with it.

[zibet27]

We need a proprietary high level abstraction over css rules, so that it'll be easier to style elements with it.

For example?

[rohiievych]

We need a proprietary high level abstraction over css rules, so that it'll be easier to style elements with it.

For example?

Assume this pseudo code as style config example for particular element. We can also add some props to control surrounding element styles like next, prev, child, children, parent, etc. Using this config we can create a single rule for all elements of this type, i.e. share. Then encapsulate it with uniquely generated selector and output some valid css. Precompilation is also possible. In any case this approach is supposed to be 'css-in-js' like as we write it in js.

{
  position: 'relative',
  padding: '5px 10px',
  borderRadius: '2px',
  opacity: 0,
  transition: 'opacity 0.2s ease',
  hover: {
    opacity: 1
  },
  after: {
    content: '',
    position: 'absolute',
    top: 0,
    left: 0,
    width: '20px',
    height: '20px'
  }
}