Application

Use the component way to generate a master application component as the start of your project. From this you can add all your dependent components and create a nice simple project structure.

How Do I Create an Application?

Well, just the same way as you would a component, in fact, an application is a component, just a bit bigger. You can then import the application component as the entry point to your application and have it pull all dependent components from the application component. Why mess around with one structure for components and one for apps, just create a new component to house your app called my-app, and then go from there.

Your First Application

Well this is pretty much the same as components, the only thing to note here is that you may want to fade in the content or delay it's render until ready, to stop FOUC.

Create a demo app called demo-app.html, we can also import our component in...

<!--
* demo-app
* @author You
* @site Your Site
-->

<!-- DEPENDANCIES -->
<link rel="import" href="my-component.html">

<!-- STYLE - Encapsulate all css to tag name, plain css people -->
<style>
  demo-app { display: block; }
</style>

<!-- TEMPLATE -->
<template id="demo-app">
    <p>Your app goes in here, you can use binding with Razilo Bind in here and ref the model objects below.</p>
    <my-component></my-component>
</template>

<!-- LOGIC -->
<script>
  new RaziloComponent('demo-app', {
    propertyOne: 'bind data using bind.razilo.net',

    created: function() {
      // run when the element is first created
    },

    attached: function() {
      // run when element is added to dom

      // uncloak the app on load
      this.getHost().setAttribute('uncloak', '');
    },

    detached: function() {
      // run when element is removed from dom
    },

    attributeChanged: function(name, oldVal, newVal) {
      // run when attributes change on the host
    },

    fireEvent: function(name, details) {
      // use this to fire events on element
    },

    getHost: function() {
      // use this to get the host element
    },

    cloneObject: function(objA, objB) {
      // use this to clone an object
    },

    dateFormat: function(dateObject, format) {
      // use this to format dates using dateFormat [https://github.com/felixge/node-dateformat]
    },

    someFunction: function() {
      // Your own function, you can access this function from the template, pelase refer to bind.razilo.net

      // PEOPLE BE CLEVER WITH BOUND PROPERTIES !!

      // Write once where possible !!

      // Be carefull iterating/adding properties people, be clever, any bound properties have getters and setters to track changes
      // Playing with properties can eventually slow things down, always build new objects first and push/add as and when, dont' itterate
      // over bound properties adding data on one at a time.
      //
      // When binding, you want to change properties on the model as little as possible to maximize speed, each change of a property
      // and its children will promote a check to update the bindings, a loop could do this lots of times, if you do this on a clean var first
      // and then copy it to the proeprty once, you only have to update bindings once!

      // WITH GREAT POWER COMES GREAT RESPONSIBILITY

      // ONE BINDING UPDATE = GOOD
      var something = [];
      for (var i = 0; i < 100; i++) {
            something[i] = 'whatever';
      }
      this.propertyTwo = something;

      // 100 BINDING UPDATES = BAD
      for (var i = 0; i < 100; i++) {
            this.propertyTwo[i] = 'whatever';
      }

      // Like anything people, making great things means knowing how all the parts work, all binding tools have the ability to be evil, use them with caution!
    }
  });
</script>

A couple of things to note here, the binding rules above, be carefull when itterating over bound data, much better to work on new objects and copy over in one go. in time we may switch to observables in raziloBind, but for now we use proxy, so dont get caught out changing deep bound data in loops. This is good practice anyway, as you may have heard about the move towards immutability in programming (don't alter existing data, copy it to a new var in the format you want). It is much more intensive to change existing data than to create a new copy in the way you want it. This is exactly how streams work in RxJS, which is what we may move to in the future once the next rev is stable with object observing support.

Next, you may want to cloak your app contents, showing it when component is attached to the dom (ready). To do this put a simple style rule in your index.html file (to ensure parsing of the style before displaying, important), then just add the cloak attribute to your element and you can override it from within the application component as above using unlcoak...

<!DOCTYPE html>
<html>
  <head>
    <title>Boom!</title>

    <!-- Add cloak to ensure applied before page shown -->
    <style>
      *[cloak] { display: block; opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
      *[uncloak] { opacity: 1; }
    </style>

    <script type="text/javascript" src="/node_modules/razilocomponent/build/razilocomponent.min.js"></script>
    <link rel="import" href="demo-app.html" async/>
  </head>
  <body>
    <demo-app cloak></demo-app>
  </body>
</html>

Further Enhancments?

For sure, we are playing with observables at present, seeing if this is a better solution for object watching and change binding in raziloBind, the immutablity and streams would be a good replacement for proxy, solving deep binding change issues, but that is for another day as object observing is not up to date in the latest version.