Realtime.js - a fast frontend framework based on Web-Components.

Overview

realtime.js

Realtime.js is a fast frontend framework based on Web-Components and Proxies. It has a lot of features to simplify your way of live as a vanillajs developer. The framework is programmed in such a way, that you can edit it yourself if you need additional features.

Depending on which clever Web-Components you need the framework renders these components from the Start.

The framework introduces two different technologies:

  • Proxies => Xvar
  • Web Components => f.e. x-div

If you combine these two technologies you don't need to care about refreshing UI anymore if everything has been set. All you need to do is change Data and the GUI manipulating will occure itself, without any additional react render overhead you cannot debug.

You need a webserver to see the files working. So either you move the extracted zip to an apache or you build the added webserver.go.

  go build webserver.go

If you start the executable (doesn't matter which OS) you cann access the files with => http://localhost:1338

To use this framework you can just import the js. file. Afterwards you need to tell the programm which Components you want to have clever and on which attributes it should listen. Everything start with the Xvar class.

  Xvar.createXel('div',['color',"background-color"]);

This tells the class to create a webComponent named "x-div" on which you can change the content with data-link or the style with style-color f.e.. If you give the style-attributes an Xvar data Type you just need to change data to manipulate UI. The data and the element listens on its own changes. To make this happen we create a Xvar data type.

  var xdata = new Xvar()

xdata is now an Object/Array which you can change and link with the custom element attributes.

  xdata["divcolor"] = "blue"
  xdata["text"] = "This is a sample text!"

now you link the xdata["divcolor"] to the custom Element.

"">
  <div is="x-div" style-color="xdata['divcolor']" data-link="xdata['text']"></div>"

if you just change the data like:

  xdata["divcolor"] = "red"
  xdata["text"] = "This is another text!"

The UI gets updated accordingly.

  • See example file => simpleexample.html

But what would a real framework be without templates! So we use x-template as a view controller. Before you can use templates you need to preload them in javascript with:

Xvar.loadTemplates(
    [
      {name:'blank', url:"blank.html"},
      {name:'login', url:"login.html"},
      {name:'main', url:"main.html"}
    ]
  );

you don't need to write html in your html files.

The complete code to use templates can be seen in index.html

If you link the template to an Xvar you can change the viewcontroller just by changing the xvar data.

">
  <x-template x-name="site['view']" x-props="x['props']"></x-template>

you can add props which will be changed if you write props in corresponding element attributes. The same with x-repeat which you can use on each x-element.

Test bg Color
">
  <tbody id="table1" is="x-tbody" x-repeat="datax">
          <tr>
              <td> <div is="x-div" style-color="props['color']" style-background-color="props['color']">Test bg Color</div></td>
              <td is="x-td" data-link="props['name']"></td>
              <td is="x-td" data-link="props['Supername']"></td>
          </tr>
  </tbody>

You can see a working example in the main.html file. Just login with any Username and the main.html file will be rendered.

Filtering and handling data gets much more convenient, when you don't need to hassle with UI so much. Just change the data and load the new data in the attribute:

  document.getElementById("table1").setAttribute("x-repeat","tabledata");

and everything will be rendered accordingly.

To build this (sorry "UGLY") table just took me 4 hours with all functions from scratch. Using React with learning a new library for clever tables which then doesn't have that one feature I need... You see where I'm getting at.

You just need Proxies and WebComponents to render everything in your app yourself!

Additional functions

If you open 1.html you can see additional functions in action. You can link different Xvar-attributes with a function like in svelte but it's in relatime => no prerender:

  var x = new Xvar();
  x[1] = 10;
  x[4] = 20;
  x[2] = '$: x[1] + x[4]';
  x[3] = "$: 2*x[2]";
  console.log(x[3]);
  x[1] = 15;
  console.log(x[3]);
  x[4] = 10;
  console.log(x[3]);
  x[2] = `
  $:()
      var a = 3;
      var b = 2;
      return a*x[1] + b*x[4];
  `;
  console.log(x[2]);

If one of these functions gets attached to a x-element UI will refresh automatically if any of the data inside these functions changes. Further below you can see an excel like example programmed with this technology.

You might also like...

Proof of concept for the Quark.js web framework

Proof of concept for the Quark.js web framework

Quark.js Proof of Concept Proof of concept for the Quark.js web framework. Examples Express.js Implimentation using express.js as a web server: im

Feb 18, 2022

Cross-platform project template using Electron and Angular with the Phaser game engine. Project has Flexbox integrated for easy and responsive organization of components around the Phaser canvas.

Cross-platform project template using Electron and Angular with the Phaser game engine. Project has Flexbox integrated for easy and responsive organization of components around the Phaser canvas.

Coher3nTS Project This is an Angular project template with Phaser nested inside, set up to run with Electron. Cross-Platform & Responsive The template

Dec 17, 2022

The React Framework

Next.js Getting Started Visit https://nextjs.org/learn to get started with Next.js. Documentation Visit https://nextjs.org/docs to view the full docum

Jan 5, 2023

The Intuitive Vue Framework

The Intuitive Vue Framework

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful. Links 📘 Documentation: https:/

Jan 9, 2023

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀

A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest is a framework for building efficient,

Dec 31, 2022

The Simple, Secure Framework Developers Trust

The Simple, Secure Framework Developers Trust

@hapi/hapi The Simple, Secure Framework Developers Trust Build powerful, scalable applications, with minimal overhead and full out-of-the-box function

Dec 31, 2022

A framework for real-time applications and REST APIs with JavaScript and TypeScript

A framework for real-time applications and REST APIs with JavaScript and TypeScript

A framework for real-time applications and REST APIs with JavaScript and TypeScript Feathers is a lightweight web-framework for creating real-time app

Jan 1, 2023

🚀 The Node.js Framework highly focused on developer ergonomics, stability and confidence

🚀 The Node.js Framework highly focused on developer ergonomics, stability and confidence

Sponsored by FOSS United is a non-profit foundation that aims at promoting and strengthening the Free and Open Source Software (FOSS) ecosystem in Ind

Dec 31, 2022

:rocket: Progressive microservices framework for Node.js

:rocket: Progressive microservices framework for Node.js

Moleculer Moleculer is a fast, modern and powerful microservices framework for Node.js. It helps you to build efficient, reliable & scalable services.

Jan 4, 2023
Owner
Kilian Hertel
Kilian Hertel
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Dec 23, 2022
Actionhero is a realtime multi-transport nodejs API Server with integrated cluster capabilities and delayed tasks

Actionhero The reusable, scalable, and quick node.js API server for stateless and stateful applications NPM | Web Site | Latest Docs | GitHub | Slack

Actionhero 2.3k Jan 4, 2023
Fast, unopinionated, minimalist web framework for node.

Fast, unopinionated, minimalist web framework for node. const express = require('express') const app = express() app.get('/', function (req, res) {

null 59.5k Jan 5, 2023
Fast and low overhead web framework, for Node.js

An efficient server implies a lower cost of the infrastructure, a better responsiveness under load and happy users. How can you efficiently handle the

Fastify 26k Jan 2, 2023
🦄 0-legacy, tiny & fast web framework as a replacement of Express

tinyhttp âš¡ Tiny web framework as a replacement of Express ?? tinyhttp now has a Deno port (work in progress) tinyhttp is a modern Express-like web fra

v 1 r t l 2.4k Jan 3, 2023
Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.

Catberry What the cat is that? Catberry was developed to help create "isomorphic/Universal" Web applications. Long story short, isomorphic/universal a

Catberry.js 801 Dec 20, 2022
Component based MVC web framework for nodejs targeting good code structures & modularity.

Component based MVC web framework for nodejs targeting good code structures & modularity. Why fortjs Based on Fort architecture. MVC Framework and fol

Ujjwal Gupta 47 Sep 27, 2022
Marble.js - functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS.

Functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS. Ecosystem Name Description @marblejs/core F

Marble.js 2.1k Dec 16, 2022
:evergreen_tree: Modern Web Application Framework for Node.js.

Trails is a modern, community-driven web application framework for Node.js. It builds on the pedigree of Rails and Grails to accelerate development by

Trails 1.7k Dec 19, 2022
A serverless web framework for Node.js on AWS (CloudFormation, CloudFront, API Gateway, Lambda)

---- Sorry, this project is not maintained anymore. ---- dawson is a serverless web framework for Node.js on AWS (CloudFormation, CloudFront, API Gate

dawson 717 Dec 30, 2022