# Writing Our First Component

As we specified in `tsconfig.json` location for our first component will be `src/app.ts`. Within the file we import from the ngBackbone core module class `View` and decorator `@Component`. By using `@Component` we declare that underlying view has to bind to `ng-hello` element of the DOM and use `Hello World!` string as template:

```javascript
import { Component, View } from "ng-backbone";

@Component({
  el: "ng-hello",
  template: `Hello World!`
})

class HelloView extends View {
}

let hello = new HelloView();
hello.render();
```

To compile TypeScript in JavaScript we run:

```
npm run build
```

In HTML we just need to set binding element `ng-hello` that we refer in the component:

```markup
<html>
  <head>
    <title>Hello world!</title>
    <meta charset="utf-8">

  </head>
  <body>
    <ng-hello>Loading ...</ng-hello>
  </body>
</html>
```

Something is missing, isn't it? Of course we need to load Backbone and its dependencies:

```markup
<!-- Backbone -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
```

Well, we have Backbone, but have to oad the app itself. According to the `tsconfig.json` TypeScript compiler has generated CommonJS-compliant module. Thus to run it we have at least two options:

* We can use SystemJs/Webpack to load it asynchronously
* We can bundle it for in-browser use with Browserify

## Bundling App with Browserify

Browserify bundles the source CommonJS module with all the dependent modules encountered recursively into a single file, suitable for in-browser use. If you have not installed Browserify you can do it that easy:

```
sudo npm i browserify -g
```

With Browserify we bundle our app source like that:

```
browserify build/src/app.js -o build/app.bundled.js
```

When we have `build/app.bundled.js` we load our app straight in the HTML:

## Loading App with SystemJS

On the contrary to Browserify, SystemJs loads the module and all the encountered dependencies on-the-fly. If we choose this way, here is what we need to add to HTML:

```markup
<!-- Module loader -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.37/system.js"></script>

<script>

  System.config({
    paths: {
        "*": "node_modules/*"
     },
    packageConfigPaths: [ "./node_modules/*/package.json" ],
    packages: {
      ".": {
        format: "cjs",
        defaultExtension: "js"
      }
    }
  });
  System.import( "./build/app" );
</script>
```

In any case we result with 'Hello World!' string rendered in the browser:

![](https://265109865-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-wwTI6fjCWU9_0%2F-LdyKJXH0z26CupROfdA%2F-LdyKKYWXZS4TFLj_mIJ%2Fhello-world.PNG?generation=1556897687231912\&alt=media)
