https://github.com/daquirm/nexus

An FRP cell application framework
https://github.com/daquirm/nexus

Last synced: about 7 hours ago
JSON representation

An FRP cell application framework

• Host: GitHub
• URL: https://github.com/daquirm/nexus
• Owner: DaQuirm
• License: other
• Created: 2013-01-07T20:25:50.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2016-05-01T11:43:56.000Z (over 8 years ago)
• Last Synced: 2024-11-17T13:11:50.183Z (2 days ago)
• Language: JavaScript
• Homepage:
• Size: 463 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
##nexus

[![Code Climate](https://codeclimate.com/github/DaQuirm/nexus.png)](https://codeclimate.com/github/DaQuirm/nexus)

An MVVM-based client application framework

### Installation

Bower

```

$ bower i nexus

```

Node.js

```

$ npm i nexus-node

```

### Example

```coffeescript

# Temperature is “measured” and displayed in two scales

# Raw business domain model

class TemperatureModel

	constructor: ->

		# nx.Cell is a “spreadsheet cell”

		@celsius = new nx.Cell value:-20

# ViewModel describes data transformation for representation in views

class TemperatureViewModel extends TemperatureModel

	constructor: ->

		super

		@fahrenheit = new nx.Cell

		# Cell-oriented data flow

		@fahrenheit['<-'] @celsius, (celsius) -> celsius * 1.8 + 32

# Views are plain functions nested arbitrarily and written pseudo-declaratively

AppView = (context) ->

	nxt.Element 'main',

		nxt.Element 'div',

			# Pin-point rendering will only change this part when 

			# bound data is modified

			nxt.Binding context.celsius, (celsius) ->

				nxt.Text "#{celsius}℃"

		nxt.Element 'div',

			nxt.Binding context.fahrenheit, (fahrenheit) ->

				nxt.Text "#{fahrenheit}°F"

		nxt.Element 'button',

			nxt.Text 'Measure!'

			# fake measurement

			nxt.Event 'click', context.celsius, -> Math.round(Math.random()*50 - 25)

window.addEventListener 'load', ->

	window.model = new TemperatureViewModel

	# Attach the view to the DOM (can be any existing node)

	document.body.appendChild AppView(model).data.node

```