eval everything - Running Student Code at Code School

Talk originally given at JSConf 2014, My 30, 2014 at 16:30 in track B.

1. eval everything Running Student Code at Code School Adam Fortuna
2. Body Level One
4. +
5. A Case Study
6. Title
8. Multiple Tasks 2 ways to get help
9. Dynamic Feedback angular.module('banana', []);
10. Extra Help angular.module('banana', []);
11. Targeted Editor
12. Live Preview
13. iframes Preview
14. This is why W3Schools did it 15 years ago
15. iframe var iframe; ! $(function() { var iFrameEl = $('iframe')[0]; iFrameEl.sandbox = 'allow-scripts'; iframe = iFrameEl.contentDocument; ! ! ! ! ! ! ! }); allow-scripts allow-same-origin allow-forms allow-popups $('textarea').on('keyup', function() { iframe.innerHTML = ''; iframe.open(); iframe.write($(this).val()); iframe.close(); });
16. Preview DSL <script>window.angular = null;</script> <source-file file='index.html'> <script> <source-file file='app.js'> </script> DSL for creating previews
17. Web Workers JSHint Feedback
18. self.onmessage = function(message) { ! ! ! }; var worker = new Worker('worker.js'); $('textarea').on('change', function() { worker.postMessage({ code: $(this).val() }); }); worker.onmessage = function(message) { // message.data.errors }; JSHINT(message.data.code); importScripts('jshint.js'); self.postMessage({ errors: JSHINT.errors }); app.js worker.js
19. No DOM access No access to parent page Web Workers Background processing Math/Computation Heavy Compression Games & Graphics
20. Client Side Execution
21. Custom Error Messages
22. Custom Error Message === Failing Test
23. describe('angular module', function() { it('Make sure to create an Angular module using the `angular.module` method.', function() { … }); });
24. var app; Sound like a lot of iFrames? Mocha Test Suite Test
25. If iframes aren’t working for you, then you aren’t using enough of them.
26. var app; Mocha Test Suite Test Trusted
27. var app; Mocha Test suite Test Placeholder iframe (on other domain) Untrusted
29. Browserify chai & sinon & jshint Mocha Custom Tests + + test runner question specific Stuff.js + transport
30. 30 60 90 120 November January March May Use of Browserify Uses of Wow!
31. Mocha var code = 'var app;'; ! describe('angular module', function() { it('Make sure to create an Angular module using the `angular.module` method.', function() { }); }); Shown only when incorrect in this way
32. Don’t Really eval eval would contaminate all tests eval(code); var code = 'var app;'; it('Make sure to create an Angular module using the `angular.module` method.', function() { }); }); describe('angular module', function() {
33. Libraries Browserify in some libraries var assert = require('chai').assert, sinon = require('sinon'), angular = require('angular'), sandbox = require('javascript-sandbox'); var code = 'var app;'; describe('angular module', function() { it('Make sure to create an Angular module using the `angular.module` method.', function() { }); });
34. ok, eval in an iframe ! ! ! var sandbox, spy; before(function() { spy = sinon.spy(angular, 'module'); sandbox = new Sandbox({ variables: { 'angular': angular } }); sandbox.evaluate(code); }); it(…); Setup an iframe and pass student code in var code = 'var app;'; … describe('angular module', function() { });
35. it('Make sure to create an Angular module using the `angular.module` method.', function() { ! }); spy ! ! ! 
 ! assert(spy.callCount > 0); ! Let the stub do the work var code = 'var app;'; describe('angular module', function() { }); … ! ! …
36. Dynamic Messages You created a module named banana, but we’re looking for one named gemStore. var code = 'var app = angular.module(\'banana\', [])'; it('Not used message', function() { }); var moduleName = spy.getCall(0).args[0]; assert(moduleName == "gemStore", "You created a module named `" + moduleName + "` but we're looking for a module named `gemStore`.”);
38. Combines stuff.js, browserify and mocha
39. while(true) { alert('You shall not pass!'); } Don’t stall the browser
40. alert = function() {}; console.log alert prompt
41. Infinite Loop Protection github.com/Constellation/escodegen ! while(true) { ! alert('You shall not pass!'); ! } github.com/benjamn/recast var iteration = 0; iteration++; if(iteration > 100000) { throw "Infinite Loop Error"; }
42. What’s Next?
43. https://twitter.com/seriouspony/status/454327888657932288
44. Thanks, ! Adam Fortuna Technical Director Code School @adamfortuna 5 Minutes of JavaScript Podcast fivejs.envylabs.com Code School codeschool.com