add input/output section

Author: filipesilva

public/docs/js/latest/cookbook/ts-to-js.jade

@@ -165,7 +165,7 @@ a(id="class-metadata")
   For example, a component must have a 
   [`@Component`](../api/core/index/Component-decorator.html) decorator.
 
-  On ES6 or ES5 Javascript we can instead attach an `annotations` array to a class/constructor 
+  On ES5/6 Javascript we can instead attach an `annotations` array to a class/constructor 
   to provide metadata. 
   Each item in the array corresponds to a decorator.
 
@@ -177,7 +177,6 @@ a(id="class-metadata")
   method call. 
   The argument to `Class` is an object that defines the constructor and the instance methods
   of the component.
-
   Similar APIs are also available for other decorators. You can define a directive with
   `ng.core.Directive` or a pipe with `ng.core.Pipe`.
 
@@ -210,7 +209,7 @@ a(id="class-metadata")
   `ngOnInit` is defined in the `OnInit` interface.
 
   TypeScript interfaces are purely for developer convenience and are not used by Angular at runtime.
-  This means that in ES6 or ES5 JavaScript code we don't need to substitute anything for interfaces.
+  This means that in ES5/6 JavaScript code we don't need to substitute anything for interfaces.
   We can just implement the methods.
 
 +makeTabs(`
@@ -231,46 +230,35 @@ a(id="property-metadata")
 :marked
   ## Input and Output Metadata
 
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Input and Output Decorators
-
-        In TypeScript, property decorators are often used to provide additional metadata
-        for components and directives.
+  ### Input and Output Decorators
 
-        For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
-        we use `@Input` and `@Output` property decorators.
-        They may optionally specify input and output binding names if we want them to be
-        different from the class property names.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-io.component.ts')(format="." )
-
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use the `inputs` and `outputs` array metadata 
-          instead of the `@Input` and `@Output` property decorators.
-    td
-      :marked
-        ### Inputs and Outputs in Component Metadata
-
-        There is no equivalent of a property decorator in ES5 JavaScript. Instead, 
-        we add comparable information to the `Component` (or `Directive`) metadata.
-        
-        In this example, we add `inputs` and `outputs` array attributes
-        containing the input and output property names. 
-        If we need a binding name that is different from the
-        property itself, we use the `propertyName: bindingName` syntax.
-
-      +makeExample('cb-ts-to-js/js/app/hero-io.component.js')(format="." )
+  In TypeScript and ES6 with decorators, property decorators are often used to provide additional 
+  metadata for components and directives.
+  For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), we use `@Input` and 
+  `@Output` property decorators. 
+  They may optionally specify input and output binding names if we want them to be different 
+  from the class property names.
 
+  There is no equivalent of a property decorator in ES5/6 JavaScript. 
+  Instead, we add comparable information to the `Component` (or `Directive`) metadata.
+  
+  In this example, we add `inputs` and `outputs` array attributes containing the input and
+  output property names. 
+  If we need a binding name that is different from the property itself, we use the 
+  `propertyName: bindingName` syntax.  
+  
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-io.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6,
+    cb-ts-to-js/js-es6/app/hero-io.component.es6,
+    cb-ts-to-js/js/app/hero-io.component.js
+  `,`
+  `,`
+    Typescript,
+    ES6 Javascript with decorators,
+    ES6 Javascript,
+    ES5 Javascript
+  `)
 
 .l-main-section
 :marked