raziloComponent

ES6 JS Web Component Library

An ES6 Javascript, custom web component thingy, for generating re-usable custom HTML components with ease. Use as an ES6 module in your own app, or use the built standalone version direct in the head of your HTML pages. Dont be silly, be lazy, build simple clean re-usable things.

KABLOOWEE

Follow the project here, or the code on github. Feel free to share the love if you think we're onto something, or just share your usage.

raziloComponent

raziloComponent

Code Docs

raziloComponent is a simple clean ES6 module that allows you to build, as native as possible, custom web components, without needing to know the native process. It wraps native processes inside a helpfull tool, giving you some sugar to boot. Where support for older browsers is needed, we polyfill these API's. Web components will follow the API standard for web components as much as possible, adding in things like templates, content splicing, data binding etc.

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

    <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>
COMPONENT HTML
<style>
  my-component { display: block; }
</style>

<template id="my-component">
  <p bind-text="propertyOne"></p>
</template>

<script>
  new RaziloComponent('my-component', {
    propertyOne: 'bind with raziloBind bind.razilo.net',

    attached: function() {},
    detached: function() {},
    attributeChanged: function(name, oldVal, newVal) {}
    ...
  });
</script>

...Waidaminute

Why is there ANOTHER framework?

Well it's not a framework, it's a tool that wraps native stuff and offers sugar, but yes... it's another.

What is It?

raziloComponent is an ES6 JS custom web component helper library for creating dynamic web components to consume in your web applications. It will allow you to take the mystery away from web components and bring them down to earth, let you see them simply, cleanly and cut through the chaff. You can use it pre-built, import it into an ES6 app and use that, just use components or make an app component and shove stuff in that.

What does It Do?

Well, in short it takes the process of adding a custom web component, and bundbles it into a single simple process, creating a new RaziloComponent. It also offers binding (raziloBind) from component model to template in isolation, before applying to the dom, letting you do templates, style and bind them with logic. Use them by importing them through html imports, which offer caching, asynchronous importing, cascading dependancies, and then just drop them in your view.

Whats Supported?

Well you can use any proper evergreen modern browser, evergreen meaning a browser that updates itself routinely to keep it's self, well, up to date. We can do this through the use of a polyfill to patch up the missing Proxy object, which we use for monitoring models, on any browser that does not have it natively. Then we move on to Internet Explorer, well we reluctantly support IE9 and up, ensure you compile your ES6 with babels es2015-loose preset for IE9 and up support.

How Large is it?

300kb raw 140kb minified

The size is not straight forward to work out, but it is quite the athlete, whilst it is 300kb combined and uncompiled, this includes raziloBind (full), dataFormat, webcomponentsjs, proxy polyfill, promise polyfill as well as raziloComponent.

Ok ok, I get all that, so where are all the examples then?

raziloComponents

Pre-built components, everything from controls, structure, modals and more.

Code Docs

razilo-icon

Icons using font-awesome.

razilo-message

Self clearing red toast type message.

Something happened!

razilo-modal

Default black modal.

Heading with Close Icon
Main Content, will add scroll when large enough!

Download

Github

The tool can be downloaded via Github, I would recommend using npm though people, it's really very simple and takes care of dependencies for you. Any how, heres the main projct on github. Installing manually from a download will mean you will have to look recursively through all package files to ensure you get all dependencies, seriously, it's not good!

Node and npm

Got npm? Install the tool and all dependencies simply with a single command via your command line terminal thingy. Use the flag to save to your applications package file.

npm install razilocomponent --save