fbmytest1 v0.0.24

Spyne.js

Spyne is a full-featured, Javascript framework that reactively renders to the Real DOM.

Spyne.js’ key features includes:

• Real DOM architecture provides clarity and performance over Virtual DOM abstractions
• Chainable ViewStreams reactively maintains state
• Intuitive Channel data layer harnesses the power of RxJs
• Versatile process of extending components with pure, static functions
• Spyne debugger assists in 'wiring' Channels and ViewStreams
• Two dependencies, RxJs and ramda

Getting Started

View Documentation https://spynejs.org

Install

npm install spyne

Hello World Edit in codepen

// INIT SPYNE APP
const spyneApp = new spyne.SpyneApp({debug:true});

// PROPERTIES
const channelName    = 'CHANNEL_HELLO_WORLD';
const channelAction  = 'CHANNEL_HELLO_WORLD_DEFAULT_EVENT';
const channelConfig  = {sendCachedPayload:true};
const channelPayload = {text: "Hello World!"}

// CHANNEL INIT
let helloWorld$ = new spyne.Channel(channelName, channelConfig);
// REGISTER ACTION
helloWorld$.addRegisteredActions = ()=>[channelAction];
// REGISTER CHANNEL
spyneApp.registerChannel(helloWorld$)
// SEND CHANNEL PAYLOAD
helloWorld$.sendChannelPayload(channelAction, channelPayload);

// VIEWSTREAM
class App extends spyne.ViewStream {
  constructor() {
    super();
  }
  addActionListeners() {
    return [
      [channelAction, 'onHelloWorld'],
    ];
  }
  onHelloWorld(e){
     this.props.el.innerText = e.props().text;
  }
  onRendered() {
     this.addChannel(channelName);
  }
 
}

new App().appendToDom(document.body);


 

Download or Fork Example App (Tutorial to be added soon) https://github.com/spynejs/spyne-example-app

Todos Example https://todos.spynejs.org

Feedback

Spyne was just released as an open source project in May, 2019, and any feedback would be greatly appreciated! To suggest a feature or report a bug: https://github.com/spynejs/spyne/issues

BrowserStack.com supports open source projects like Spyne.js Unit and Integration tests will run on real browsers and devices using BrowserStack's Automate system.

Copyright (c) 2017-Present Frank Batista, Relevant Context LLC