Setup

Add the pre-compiled and combined js file directly and get going immediately, giving you everything you need in one file. Want to do something more advanced? Try importing the ES6 module directly and build into your own application logic.

Do you do node?

At this point we are going to ask one BIG question, do you do node? If you dont you need to. Being in this game at this time and playing with JS to this extend, you need to do node. Specifically you need to have npm the node package manager to allow you to pull in js modules, as well as any dependancies they may rely on, AUTOMATICALLY! So if you don't do node, you need to go do it, get it and use it, as from this point on we manage this project through npm.

Simple

If you want to get going right away, maybe your as impatient as i am, then we offer a pre-compiled build (well two really) that you can use right from the get go in your HTML view. It really is as simple as adding a script link, importing your component/s and then using them in your view.

Advanced

Feeling more adventurous, maybe you already have some js logic or are writing ES6 and want to compile everything in, you can do this too. Import raziloComponent and any dependancies, then compile your file with an ES6 tool such as babel to get ES5 code that can run natively in current browsers.

Installation

First things first, lets install raziloComponent and all the deps it needs, get ready for this.... Open a command line, go to your project folder, and install this sucka now (I assume you have node + npm already... remember).

npm install razilocomponent --save

Thats it, seriously, we configured all this to work with one install. Oh we also saved it to the package.json file with --save so next time, it's even quicker to install. with npm install to install everything saved to your package file.

Simple Usage

Dont want to know about how to build or setup a build tool and just want to get going, well ok, try this.

All you need to do is create yourself an index.html file (we call these views) and we hit that bad boy from the browser. In there you can place a link to the pre-built raziloComponent script file, then your good to go creating new components to use in your view (dont forget to import your new components with a html import 'my-component' or it wont work). You will also need all your polyfills which are the ones above the razilocomponent script tag, these polyfill missing functionality in old browsers.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Boom!</title>
    <script type="text/javascript" src="/node_modules/webcomponents.js/webcomponents-lite.js"></script>
    <script type="text/javascript" src="/node_modules/proxy-oo-polyfill/proxy-oo-polyfill.js"></script>
    <script type="text/javascript" src="/node_modules/promise-polyfill/promise.js"></script>
    <script type="text/javascript" src="/node_modules/razilocomponent/build/razilocomponent.min.js"></script>
    <link rel="import" href="my-component.html" async/>
  </head>

  <body>
    <h1>Example View</h1>
    <p>Show a component in action below...</p>
    <my-component></my-component>
    <p>We have pre built components, npm install razilocomponents (with an 's';)</p>
  </body>
</html>

Advanced Usage

So you dont mind build tools and building, and you want to be more selective or add in more to your own target file.

raziloComponent is an ES6 module, meaning you can import it with an ES6 import call. In order to pull in raziloComponent you will first need an app.js starting point for your logic, this is what gets passed to the build tool to start traversing and compile to ES5 code. If you do not already have a start point, create an app.js now and import in RaziloComponent and its deps. We can doing things this way, also take advantage of pulling in all other js files such as polyfills.

app.js
import 'node_modules/webcomponentsjs/lite.js'
import 'node_modules/proxy-oo-polyfill/proxy-oo-polyfill.js'
import 'node_modules/promise-polyfill/promise.js'

import RaziloComponent from 'razilocomponent'

// razilo modules are all ES6 modules so make them available on global
window.RaziloComponent = RaziloComponent;

We should be good to go now building your logic using an ES6 compiler (I use babel, if you want older IE support use es2015-loose config). Once compiled you will be abl eto use the output in place of the raziloComponent bundle.

Dont forget to include your component too, if you want to be able to use it in your view.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Boom!</title>
    <script type="text/javascript" src="targetoutput.min.js"></script>
    <link rel="import" href="my-component.html" async/>
  </head>

  <body>
    <h1>Example View</h1>
    <p>Show a component in action below...</p>

    <my-component></my-component>

    <p>We have pre built components, npm install razilocomponents (with an 's';)</p>
  </body>
</html>

Thats About It

Well thats about it, use it as is or compile in, it's your choice, the end result here is that we get a simple component library to help us build reusable HTML templates.

As you get using this more and more, and you have groups of components, you can take advantage of bundling if you wish, but this is another subject, to bundle or not to bundle, find your tipping point.

If you do wish to bundle, vulcanizing your components is the way to go, but beware, here be dragons!