   addDeprecations: (spec) ->
     deprecations = grim.getDeprecations()
     @deprecationCount += deprecations.length
-    @deprecations.show() if @deprecationCount > 0
+    @deprecations.style.display = '' if @deprecationCount > 0
     if @deprecationCount is 1
-      @deprecationStatus.text("1 deprecation")
-    else
-      @deprecationStatus.text("#{@deprecationCount} deprecations")
+      @deprecationStatus.textContent = "1 deprecation"
+    else
+      @deprecationStatus.textContent = "#{@deprecationCount} deprecations"
 
     for deprecation in deprecations
-      @deprecationList.append $$ ->
-        @div class: 'padded', =>
-          @div class: 'result-message fail deprecation-message', =>
-            @raw marked(deprecation.message)
-
-          for stack in deprecation.getStacks()
-            fullStack = stack.map ({functionName, location}) ->
-              if functionName is '<unknown>'
-                "  at #{location}"
-              else
-                "  at #{functionName} (#{location})"
-            @pre class: 'stack-trace padded', formatStackTrace(spec, deprecation.message, fullStack.join('\n'))
+      @deprecationList.appendChild(@buildDeprecationElement(spec, deprecation))
+
     grim.clearDeprecations()
 
+  buildDeprecationElement: (spec, deprecation) ->
+    div = document.createElement('div')
+    div.className = 'padded'
+    div.innerHTML = """
+      <div class="result-message fail deprecation-message">
+        #{marked(deprecation.message)}
+      </div>
+    """
+
+    for stack in deprecation.getStacks()
+      fullStack = stack.map ({functionName, location}) ->
+        if functionName is '<unknown>'
+          "  at #{location}"
+        else
+          "  at #{functionName} (#{location})"
+      pre = document.createElement('pre')
+      pre.className = 'stack-trace padded'
+      pre.textContent = formatStackTrace(spec, deprecation.message, fullStack.join('\n'))
+      div.appendChild(pre)
+
+    div
+
   handleEvents: ->
-    $(document).on "click", ".spec-toggle", ({currentTarget}) ->
-      element = $(currentTarget)
-      specFailures = element.parent().find('.spec-failures')
-      specFailures.toggle()
-      element.toggleClass('folded')
-      false
-
-    $(document).on "click", ".deprecation-toggle", ({currentTarget}) ->
-      element = $(currentTarget)
-      deprecationList = $(document).find('.deprecation-list')
-      deprecationList.toggle()
-      element.toggleClass('folded')
-      false
+    listen document, 'click', '.spec-toggle', (event) ->
+      specFailures = event.currentTarget.parentElement.querySelector('.spec-failures')
+
+      if specFailures.style.display is 'none'
+        specFailures.style.display = ''
+        event.currentTarget.classList.remove('folded')
+      else
+        specFailures.style.display = 'none'
+        event.currentTarget.classList.add('folded')
+
+      event.preventDefault()
+
+    listen document, 'click', '.deprecation-list', (event) ->
+      deprecationList = event.currentTarget.parentElement.querySelector('.deprecation-list')
+
+      if deprecationList.style.display is 'none'
+        deprecationList.style.display = ''
+        event.currentTarget.classList.remove('folded')
+      else
+        deprecationList.style.display = 'none'
+        event.currentTarget.classList.add('folded')
+
+      event.preventDefault()
+
+    listen document, 'click', '.stack-trace', (event) ->
+      event.currentTarget.classList.toggle('expanded')
+
+    @reloadButton.addEventListener('click', -> require('ipc').send('call-window-method', 'restart'))
+
+    document.addEventListener 'keydown', (event) ->
+      console.log event
 
   updateSpecCounts: ->
     if @skippedCount
       specCount = "#{@completeSpecCount - @skippedCount}/#{@totalSpecCount - @skippedCount} (#{@skippedCount} skipped)"
     else
       specCount = "#{@completeSpecCount}/#{@totalSpecCount}"
-    @specCount[0].textContent = specCount
+    @specCount.textContent = specCount
 
   updateStatusView: (spec) ->
     if @failedCount > 0
-      @status.addClass('alert-danger').removeClass('alert-info')
+      @status.classList.add('alert-danger')
+      @status.classList.remove('alert-info')
 
     @updateSpecCounts()
 
     rootSuite = spec.suite
     rootSuite = rootSuite.parentSuite while rootSuite.parentSuite
-    @message.text rootSuite.description
+    @message.textContent = rootSuite.description
 
     time = "#{Math.round((spec.endedAt - @startedAt) / 10)}"
     time = "0#{time}" if time.length < 3
-    @time[0].textContent = "#{time[0...-2]}.#{time[-2..]}s"
+    @time.textContent = "#{time[0...-2]}.#{time[-2..]}s"
 
   addSpecs: (specs) ->
     coreSpecs = 0
     bundledPackageSpecs = 0
     userPackageSpecs = 0
     for spec in specs
-      symbol = $$ -> @li id: "spec-summary-#{spec.id}", class: "spec-summary pending"
+      symbol = document.createElement('li')
+      symbol.setAttribute('id', "spec-summary-#{spec.id}")
+      symbol.className = "spec-summary pending"
       switch spec.specType
         when 'core'
           coreSpecs++
-          @coreSummary.append symbol
+          @coreSummary.appendChild symbol
         when 'bundled'
           bundledPackageSpecs++
-          @bundledSummary.append symbol
+          @bundledSummary.appendChild symbol
         when 'user'
           userPackageSpecs++
-          @userSummary.append symbol
+          @userSummary.appendChild symbol
 
     if coreSpecs > 0
-      @coreHeader.text("Core Specs (#{coreSpecs})")
-    else
-      @coreArea.hide()
+      @coreHeader.textContent = "Core Specs (#{coreSpecs})"
+    else
+      @coreArea.style.display = 'none'
     if bundledPackageSpecs > 0
-      @bundledHeader.text("Bundled Package Specs (#{bundledPackageSpecs})")
-    else
-      @bundledArea.hide()
+      @bundledHeader.textContent = "Bundled Package Specs (#{bundledPackageSpecs})"
+    else
+      @bundledArea.style.display = 'none'
     if userPackageSpecs > 0
       if coreSpecs is 0 and bundledPackageSpecs is 0
         # Package specs being run, show a more descriptive label
         {specDirectory} = specs[0]
         packageFolderName = path.basename(path.dirname(specDirectory))
         packageName = _.undasherize(_.uncamelcase(packageFolderName))
-        @userHeader.text("#{packageName} Specs")
+        @userHeader.textContent = "#{packageName} Specs"
       else
-        @userHeader.text("User Package Specs (#{userPackageSpecs})")
-    else
-      @userArea.hide()
+        @userHeader.textContent = "User Package Specs (#{userPackageSpecs})"
+    else
+      @userArea.style.display = 'none'
 
   specStarted: (spec) ->
     @runningSpecCount++
 
   specComplete: (spec) ->
-    specSummaryElement = $("#spec-summary-#{spec.id}")
-    specSummaryElement.removeClass('pending')
+    specSummaryElement = document.getElementById("spec-summary-#{spec.id}")
+    specSummaryElement.classList.remove('pending')
 
     results = spec.results()
     if results.skipped
-      specSummaryElement.addClass("skipped")
+      specSummaryElement.classList.add("skipped")
       @skippedCount++
     else if results.passed()
-      specSummaryElement.addClass("passed")
+      specSummaryElement.classList.add("passed")
       @passedCount++
     else
-      specSummaryElement.addClass("failed")
+      specSummaryElement.classList.add("failed")
 
       specView = new SpecResultView(spec)
       specView.attach()
       @failedCount++
     @addDeprecations(spec)
 
-class SuiteResultView extends View
-  @content: ->
-    @div class: 'suite', =>
-      @div outlet: 'description', class: 'description'
-
-  initialize: (@suite) ->
-    @attr('id', "suite-view-#{@suite.id}")
-    @description.text(@suite.description)
+class SuiteResultView
+  constructor: (@suite) ->
+    @element = document.createElement('div')
+    @element.className = 'suite'
+    @element.setAttribute('id', "suite-view-#{@suite.id}")
+    @description = document.createElement('div')
+    @description.className = 'description'
+    @description.textContent = @suite.description
+    @element.appendChild(@description)
 
   attach: ->
-    (@parentSuiteView() or $('.results')).append this
+    (@parentSuiteView() or document.querySelector('.results')).appendChild(@element)
 
   parentSuiteView: ->
     return unless @suite.parentSuite
 
-    if not suiteView = $("#suite-view-#{@suite.parentSuite.id}").view()
+    unless suiteViewElement = document.querySelector("#suite-view-#{@suite.parentSuite.id}")
       suiteView = new SuiteResultView(@suite.parentSuite)
       suiteView.attach()
-
-    suiteView
-
-class SpecResultView extends View
-  @content: ->
-    @div class: 'spec', =>
-      @div class: 'spec-toggle'
-      @div outlet: 'description', class: 'description'
-      @div outlet: 'specFailures', class: 'spec-failures'
-
-  initialize: (@spec) ->
-    @addClass("spec-view-#{@spec.id}")
+      suiteViewElement = suiteView.element
+
+    suiteViewElement
+
+class SpecResultView
+  constructor: (@spec) ->
+    @element = document.createElement('div')
+    @element.className = 'spec'
+    @element.innerHTML = """
+      <div class='spec-toggle'></div>
+      <div outlet='description' class='description'></div>
+      <div outlet='specFailures' class='spec-failures'></div>
+    """
+    @description = @element.querySelector('[outlet="description"]')
+    @specFailures = @element.querySelector('[outlet="specFailures"]')
+
+    @element.classList.add("spec-view-#{@spec.id}")
 
     description = @spec.description
     description = "it #{description}" if description.indexOf('it ') isnt 0
-    @description.text(description)
+    @description.textContent = description
 
     for result in @spec.results().getItems() when not result.passed()
       stackTrace = formatStackTrace(@spec, result.message, result.trace.stack)
-      @specFailures.append $$ ->
-        @div result.message, class: 'result-message fail'
-        @pre stackTrace, class: 'stack-trace padded' if stackTrace
+
+      resultElement = document.createElement('div')
+      resultElement.className = 'result-message fail'
+      resultElement.textContent = result.message
+      @specFailures.appendChild(resultElement)
+
+      if stackTrace
+        traceElement = document.createElement('pre')
+        traceElement.className = 'stack-trace padded'
+        traceElement.textContent = stackTrace
+        @specFailures.appendChild(traceElement)
 
   attach: ->
-    @parentSuiteView().append this
+    @parentSuiteView().appendChild(@element)
 
   parentSuiteView: ->
-    if not suiteView = $("#suite-view-#{@spec.suite.id}").view()
+    unless suiteViewElement = document.querySelector("#suite-view-#{@spec.suite.id}")
       suiteView = new SuiteResultView(@spec.suite)
       suiteView.attach()
-
-    suiteView
+      suiteViewElement = suiteView.element
+
+    suiteViewElement

    specs = runner.specs()
    @totalSpecCount = specs.length
    @addSpecs(specs)
    $(document.body).append this

    @on 'click', '.stack-trace', ->
      $(this).toggleClass('expanded')

    @reloadButton.on 'click', -> require('ipc').send('call-window-method', 'restart')

  reportRunnerResults: (runner) ->
    @updateSpecCounts()
    @status.addClass('alert-success').removeClass('alert-info') if @failedCount is 0
    if @failedCount is 1
      @message.text "#{@failedCount} failure"
    else
      @message.text "#{@failedCount} failures"

  reportSuiteResults: (suite) ->


path = require 'path'
_ = require 'underscore-plus'
grim = require 'grim'
marked = require 'marked'

