barneycarroll/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Amok is a live editing tool for javascript development. It is beyond awesome. It is the future of javascript development.
Mithril is a javascript framework for building brilliant applications.
This simple test case shows how we can use Amok's event handlers to trigger redraws as and when code is dynamically recompiled in the browser. It's a little taste of the awesome to come.
To use this demo:


Install Amok

You'll need Node
Run npm install amok -g


Clone or download this gist:
git clone git@gist.github.com:/de16bdff255344873439.git mithrilAmok && cd mithrilAmok


Open index.js in your text editor of choice


Run amok index.js --client chrome


Start making changes to index.js, and save


Watch the application change!


Go to 5


## index.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			Mithril + Amok : dream development workflow
		</title>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.33/mithril.js"></script>
		<script src="index.js"></script>
	</body>
</html>

## index.js
// Amok sends events to the window.
// 'source' means Amok has recompiled the run-time code
// in session. Mithril needs to redraw to persist any
// changes that might have occured - but otherwise the
// session, state and history persist!
window.addEventListener( 'source', m.redraw, false );

m.route( document.body, '/', {
	':path...' : {
		view : function( ctrl ){
			return m( 'div', {
				style : {
					margin      : 'auto',
					'max-width' : '30em',
					font        : 'normal 1em/1.5 sans-serif'
				}
			},
				m( 'h1', 'Welcome to Mithril running Amok!' ),
				m( 'h2', 'How cool is this? Edit the code to find out.' ),
				m( 'p',  'You are here:' ),
				m( 'pre',
					'// m.route()',
					'\r\n',
					m.route(),
					'\r\n',
					'// window.location.toString()',
					'\r\n',
					window.location.toString()
				),
				m( 'br' ),
				m( 'ol',
					m( 'li',
						m( 'a', {
							href   : '/page1',
							config : m.route
						}, 'Page 1' )
					),
					m( 'li',
						m( 'a', {
							href   : '/page2',
							config : m.route
						}, 'Page 2' )
					)
				)
			)
		}
	}
} );

## install.sh
npm install amok -g

## run.sh
amok index.js --client chrome
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>
	Mithril + Amok : dream development workflow
	</title>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.33/mithril.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	// Amok sends events to the window.
	// 'source' means Amok has recompiled the run-time code
	// in session. Mithril needs to redraw to persist any
	// changes that might have occured - but otherwise the
	// session, state and history persist!
	window.addEventListener( 'source', m.redraw, false );

	m.route( document.body, '/', {
	':path...' : {
	view : function( ctrl ){
	return m( 'div', {
	style : {
	margin : 'auto',
	'max-width' : '30em',
	font : 'normal 1em/1.5 sans-serif'
	}
	},
	m( 'h1', 'Welcome to Mithril running Amok!' ),
	m( 'h2', 'How cool is this? Edit the code to find out.' ),
	m( 'p', 'You are here:' ),
	m( 'pre',
	'// m.route()',
	'\r\n',
	m.route(),
	'\r\n',
	'// window.location.toString()',
	'\r\n',
	window.location.toString()
	),
	m( 'br' ),
	m( 'ol',
	m( 'li',
	m( 'a', {
	href : '/page1',
	config : m.route
	}, 'Page 1' )
	),
	m( 'li',
	m( 'a', {
	href : '/page2',
	config : m.route
	}, 'Page 2' )
	)
	)
	)
	}
	}
	} );