Upgrade to Pro — share decks privately, control downloads, hide ads and more …

eval everything - Running Student Code at Code School

eval everything - Running Student Code at Code School

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

8571728785e5e350ddb58cd458533b12?s=128

Adam Fortuna

May 30, 2014
Tweet

Transcript

  1. eval everything Running Student Code at Code School Adam Fortuna

  2. Body Level One

  3. None
  4. +

  5. A Case Study

  6. Title

  7. None
  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
  28. None
  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`.”);
  37. None
  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