{"action":"created","issue":{"url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/issues/74","labels_url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/issues/74/labels{/name}","comments_url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/issues/74/comments","events_url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/issues/74/events","html_url":"https://github.com/cascadiajs/2015.cascadiajs.com/issues/74","id":56061609,"number":74,"title":"Talk: Using statecharts for clean & scalable UX","user":{"login":"thure","id":855039,"avatar_url":"https://avatars.githubusercontent.com/u/855039?v=3","gravatar_id":"","url":"https://api.github.com/users/thure","html_url":"https://github.com/thure","followers_url":"https://api.github.com/users/thure/followers","following_url":"https://api.github.com/users/thure/following{/other_user}","gists_url":"https://api.github.com/users/thure/gists{/gist_id}","starred_url":"https://api.github.com/users/thure/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thure/subscriptions","organizations_url":"https://api.github.com/users/thure/orgs","repos_url":"https://api.github.com/users/thure/repos","events_url":"https://api.github.com/users/thure/events{/privacy}","received_events_url":"https://api.github.com/users/thure/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/labels/BrowserJS%20Day","name":"BrowserJS Day","color":"fbca04"},{"url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/labels/Proposal","name":"Proposal","color":"0052cc"},{"url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/labels/ServerJS%20Day","name":"ServerJS Day","color":"009800"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-01-30T17:33:19Z","updated_at":"2015-03-09T20:06:24Z","closed_at":null,"body":"# Using statecharts for clean & scalable UX\r\n\r\n* Name      : Will Shown\r\n* Location  : Seattle\r\n* Email     : w@willshown.com\r\n* Twitter   : [@wwwillshown](https://twitter.com/wwwillshown)\r\n* GitHub    : [thure](https://github.com/thure)\r\n* Url(s)    : [willshown.com](http://willshown.com/)\r\n\r\n## The what, why, and how of statecharts in JavaScript\r\n\r\nStatecharts are awesome. They’re so much more than ‘state’ in Ember.js or React, and they can be used in conjunction with any framework. Using statecharts you can translate interaction designs directly into code that runs on the browser or in Node (or even in embedded systems).\r\n\r\nBecause statecharts are such a fantastic way to discretize user input into useful transitions between an app’s views, I’ll focus chiefly on how to develop with statecharts for the front-end. The talk will include a description of designing with statecharts, translating those designs to [SCXML](http://www.w3.org/TR/scxml/) (or the new SCJSON), and working with [SCION](https://github.com/jbeard4/scion) in an example app.\r\n\r\n## Speaker Bio\r\n\r\n<img src=\"http://i.imgur.com/A0KbLDwl.jpg\" width=\"256\" title=\"Will Shown’s head\" />\r\n\r\nHello, CascadiaJS! I’m Will Shown, a UX designer and front-end web developer. I’ve been working with the connection between browsers and humans since building my first web app in 2008 while learning Cognitive Science at McGill University.\r\n\r\nSince then I’ve been part of the team that redesigned [MSN.com](http://www.msn.com/) and started a sci-fi game engine called [GEOF](https://github.com/G-E-O-F/). I’m an avid fan of RuPaul’s Drag Race and my favorite weather is fog."},"comment":{"url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/issues/comments/77931008","html_url":"https://github.com/cascadiajs/2015.cascadiajs.com/issues/74#issuecomment-77931008","issue_url":"https://api.github.com/repos/cascadiajs/2015.cascadiajs.com/issues/74","id":77931008,"user":{"login":"thure","id":855039,"avatar_url":"https://avatars.githubusercontent.com/u/855039?v=3","gravatar_id":"","url":"https://api.github.com/users/thure","html_url":"https://github.com/thure","followers_url":"https://api.github.com/users/thure/followers","following_url":"https://api.github.com/users/thure/following{/other_user}","gists_url":"https://api.github.com/users/thure/gists{/gist_id}","starred_url":"https://api.github.com/users/thure/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thure/subscriptions","organizations_url":"https://api.github.com/users/thure/orgs","repos_url":"https://api.github.com/users/thure/repos","events_url":"https://api.github.com/users/thure/events{/privacy}","received_events_url":"https://api.github.com/users/thure/received_events","type":"User","site_admin":false},"created_at":"2015-03-09T20:06:24Z","updated_at":"2015-03-09T20:06:24Z","body":"Sure! In JS, statecharts are interpreted with [SCION](https://github.com/jbeard4/scion) (link is also in the description), both in browsers and in Node. The [readme for SCION](https://github.com/jbeard4/SCION/blob/master/README.md) has a great introduction to getting started.\r\n\r\nI've also been writing tutorials for SCXML – they can be found in my [scxml-tutorials](https://github.com/thure/scxml-tutorials) repository."}}