module to manage your static resources, full-stack UI component library, layout generator
Full stack UI component library and layout generator
cosyJS is still experimental and should not be used for production environment
cosyJS has also some nice features out of the box like:
- A layout generator using Bootstrap (and later Foundation and Cosy Grid Stystem)
- A powerfull client-side library which allows you to play easily with your HTML and/or the cosyJS components.
- A library of full-stack components which has a set of UI element you use all the time (text, button, image).
This is published mainly to give the possibility to try cosy and give me feedbacks. Please, do not use this in a production environment.
npm install cosy
The idea behind cosy is to shared the templates you use to render your data between client-side and server-side.
Here is a list of task you could collaborate:
- Create new full-stack components
- Improve performance
- Share your opinions and comments
##Roll your own
Right now Cosy required an express instance in order to work, here is the code to add Cosy to your existing express instance.
var express = require'express'http = require'http'app = expresscosy = require'cosy'app;cosystarthttpcreateServerapplistenappget'port'console.log"Express server listening on port " + appget'port';;;
By using node.js we are able to run the same code client and server side. Cosy tries to take this to its advantage and allows you to share lots of code between them.
The place where you will put the logic of your component. This component is a wrapper for a Backbone.Model anb a Backbone.View. So you can use all the backbone syntax in it.
A basic component definion:
_ccomponentname: "basicComponent"events:"click .someClass": "doSomething"alert"hello world";
The template uses handlbar syntax (client/server) to produce the HTML.
Here is a template for the "basicComponent" above:
In order to register a component which has only a template, all you need is to defined a type and an id. The type will be the "Klass" of the component, on the other the ID will be used to access your component on client side.
When you have some components, you now need to add them to a page. But a page needs a layout. The layout is mainly used to define some custom stylesheets, some script (GA),...
Layout uses the JADE notation.
Here is a really simple layout:
The required part of this layout is the 3 last lines.
NOTE: Please note, we are trying to improve this part to use our other module called "Hygge" (a script file loader). More information will come.
##The Page Structure
Your page will also need a page structure, this page structure could be reused by multiple pages.
Here is an example of a Page Structure:
"id": "cosy""name": "root""order": "0""columns":"name": "content""size": "12""parent": "root""order": "0"
The page structure defines the placeholders you want to add in your page.
You could use cosy without a CSS grid but cosy assumes you are using one, and let you define the size of the Column you want.
The page contains all the component information and where the component are located for a specific route.
Here is an example:
"layout": "layout""name": "index""route": "/""components":"type": "text""category": "h1""id": "Logo""order":1"dynamic": true"placeholder":"logo""data": "text": "Cosy Js"
As you can see, the page is defined by a name (title of the Page), a route (the URL in your adress bar), the layout (he needs to use) and a list of components. Each component needs to have the name of the placeholder you want to insert itself and a data object. This data will be used by the component.
##Put it all together
What cosyJS does under the hood is to assembly all these static definitions to produce a dynamic website.
##Dealing with Data
As you can see, there is nothing related to Data communcation, cosy lets you defined how and where you want to fetch your Data. The idea is to extend the APP object and to create a REST API using express. Hence, in your component, you will be able to fetch the data you want.
TODO: We will try to find an easy way for you to work "out of the box" with a REST Api.
As you can see, this is an ambitious project and currently you are just able to produced really basic website with it but we are working hard to enhance this and you are welcome to contribute to the project.