module to manage your static resources, full-stack UI component library, layout generator
Full stack UI component library and layout generator
cosyJS has also some nice features out of the box like:
The idea behind cosy is to shared the Templates you use to render your data between client-side and server-side. cosyJS expect an Express (or at least connect) server.
This is still currenly in development but you are free to collaborate on the project.
Here is a list of task you could do:
##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 and cosy tries to take this to its advantage and allows you to share lots of code between them.
A component needs 2 things in order to work, the definition and the template.
It is there 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 (client/server) syntax to produce the HTML.
Here is a template for the "basicComponent" above:
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
You page will also need a page structure, this page structure could be reuse by multiple pages.
Here is an example of a Page Structure:
var basicStructure =name: "root"order: 0columns:name: "header"columns:name: "logo" size:"4" parent: "header" order: 0name: "menu" size:"8" parent: "header" order: 1parent: "root"order: 0name: "content"columns:name: "main" size:"12" parent: "content" order: 0parent: "root"order: 1name: "footer"columns:name: "footerContent" size:"12" parent: "footer" order: 0parent: "root"order: 2;
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:
name: "index"layout: "layout"route: "/"components:type: "text" category: "h1" id: "Logo" order:1 dynamic: true placeholder: "logo" data: text: "Cosy Js"type: "image" source: "" id: "image" order:4 placeholder: "main"
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.