radioactive

radioactive

npm install radioactive
76 downloads in the last month

Radioactive Coffeescript

Pure Coffeescript DSL for building scalable reactive HTML5 UIs

Radioactive Logo

Status

Please provide feedback on the API, usability, etc. I don't recommend trying to fix things by yourself since the codebase is undergoing heavy changes and most of the work is now happening elsewhere ( we are refactoring parts of the framework to their own projects ). That being said, contributions are always welcome.

Example

index.html

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://aldonline.github.io/radioactive/release/radioactive-0.3.4.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body></body>
</html>

main.coffee

time = radioactive.poll -> new Date() + ''
name = radioactive.cell init: 'Bob'

$ ->
  $('body').append 'div'._ ->
    'h1'._ time
    'div'._ ->
      'input'._ type:'text', bind: name
      'p'._ name

Remember to compile main.coffee to main.js

coffee -c -w main.coffee

The -w flag means "watch for changes and recompile"

Using/Installing

Compiled and minified releases are available and served directly from Github ( using Github pages ). Note: jQuery must be loaded first.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://aldonline.github.io/radioactive/release/radioactive-0.3.4.min.js"></script>

You can also clone this repo and build a minified version yourself using grunt

git clone https://github.com/aldonline/radioactive.git
cd radioactive
grunt build

RAML Tags, Attributes and Events

Tags

All HTML5 tags are supported

"p"._ "Hello"
"ul"._ ->
  "li"._ "Item 1"
  "li"._ "Item 2"

Attributes

  • All attributes supported by jQuery.attr() are available
"input"._ type:"text"
"div"._ id:"my-div"
"span"._ "class":"nice"

Styles

  • All CSS Styles supported by jQuery.css() are available
  • You must prefix style names with a dollar sign ( $ )
"div"._ $height: 50, $width: 50, $backgroundColor: "white"

Just like in jQuery.css() the following two lines are equivalent:

"div"._ $backgroundColor: "white"
"div"._ "$background-color": "white"

Events

  • All events supported by jQuery.on() are supported
  • You must prefix jQuery event names with a bang ( ! )
"button"._ "!click":( -> console.log "boom" ), "Explode"

You can alternatively use the following syntax.

"button"._ onclick:( -> console.log "boom" ), "Explode"

Special Tags, Attributes and Events

On top of HTML, RAML adds a few elements of its own. For clarity, all RAML specific Tags, Attributes and Events are prefixed with an underscore.

Special Tags

  • _text = Creates a DOM Text Node

This allows you to write markup that mixes DOM Elements with DOM Text Nodes. For example:

<p>this paragraph has one <strong>bold</strong> word</p>

Is equivalent to the following RAML fragment:

"p"._ ->
  "_text"._ "this paragraph has one "
  "strong"._ "bold"
  "_text"._ " word"
  • _insert = Inserts a DOM Node on a given position

Special Attributes

_content

Allows you to pass tag content as a property. The following tag declarations are equivalent:


'p'._ $color:'red', 'Hello'
'p'._ $color:'red', _content: 'Hello'

_html

Sets the inner HTML of a node


'div'._ $width: 50, _html: '<p>M&amp;M</p>'

_bind

_ref

Special Events

  • _aftercreate
  • _beforeadd
  • _afteradd
  • _beforeremove
  • _afterremove
  • _beforedestroy

API

Reactivity

radioactive.cell

Cells are "reactive variables". They hold one value. They are are the M in your MVC.

# create a cell with an initial value
name = radioactive.cell init: 'Aldo'
# get the current value

console.log 'the name is ' + name()

# set a new value
name 'Bob'
console.log 'the name is now ' + name()

# use the cell in a RAML fragment
# whenever you change the value of name
# the paragraph's text will update
'p'._ name

# since radioactive uses native reactivity
# you can transparently use cells within functions
# they will automatically become reactive

name_name = -> name() + ' ' + name()
uc_name_name = -> name_name().toUpperCase()
'p'._ uc_name_name # will render <p>BOB BOB</p>

# and if we change name back to Aldo
# the UI will update automatically
'p'._ uc_name_name # will magically change to <p>ALDO ALDO</p>


# bidirectional binding is also possible
'input'._ type:'text', _bind: name

# since cells are so common there is a shortcut to create them
name = radioactive 'Aldo'

radioactive.poll

RAML

radioactive.attach

TODO

Use RAML on top of an existing DOM Node ( Every now and then you don't control the creation of a Node )

radioactive.attach $('body'), $backgroundColor: 'white', onclick: -> alert 'clicked on body'

Sync/Async Helpers

radioactive.sync

radioactive.async

radioactive.busy

Ajax

Coming soon.

radioactive.ajax

Building

git clone https://github.com/aldonline/radioactive.git
cd radioactive
npm install -d
npm test
grunt build
cd ./exampes/minimal-html-app
open index.html
coffee -c -w main.coffee
npm loves you