- Notifications
You must be signed in to change notification settings - Fork0
outbounder/componentjs
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
the code is a fork from flashjs projecthttp://code.google.com/p/flashjs/
- Visual component based development of web applications
- Component implementation usingtemplates andcode-behind
- Optimized to run on every browser
- Compose complex web application user interfaces with nested components
- runtime component compile and presentation
- integrated component caching (because of the above)
- works with any kind of html entities
- javascript helper methods using synch and asynch component loading
- fits well with jquery, prorotype, mooTools and any other.
- supports dom element and attribute namespaces, ie gives support to load & use SVG files
- auto appends link elements to head, ie makes components style independent
- every component implementation must have only a single root tag
- components can be loaded only under on cross-domain restrictions (but there are workarounds)
- runtime error reporting is limited to the component file path but not including the line.
- every component is first loaded at runtime, no support for minifying of web application based on components yet.
- Place component javascript code within
<script>//<![CDATA[and//]]></script>so that the browser's xml parser can do its job nice.
<!DOCTYPE html><html> <body> <script type="component" source="component/loggedbox"></script> <div> <script type="component" source="component/controlmenu"></script> <script type="component" source="component/search"></script> </div> </body></html><div class='rootdiv'> <script> //<![CDATA[ console.log(this.getAttribute('class')); // output: rootdiv //]]> </script> <div> <script> //<![CDATA[ console.log(this.getAttribute('id')); // output: child //]]> </script> </div> <div> <div> </div> </div> <script type="component" source="component/loginbox"> //<![CDATA[ console.log(this); // output: a component/loginbox domElement //]]> </script> <script> //<![CDATA[ console.log(this.child.getAttribute('id')); // output: child console.log(this.innerchild); // output: undefined, due the fact that the id is not immediate child of rootdir //]]> </script></div>// executes pathToFileWithoutExtension.js script where 'this' is the parent of the inlined script component-code.<script type="component-code" source="pathToFileWithoutExtension" /><div> <a href="[%=returnLinkHref(1);]">[%=returnLinkTitle(2)]<a/> <script type="component-code" source="components/linkdetails" /> <script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /></div>component templating is done using EJS (http://www.embeddedjs.com/). There is extender script of the componentjswhich simply pipes the raw component text code to EJS and then again constructs component dom element instance from it.
Typical implementation of component with EJS looks like
[%=this.getTitle()%]
- [% for(var i=0; i<supplies.length; i++) {%]
- [%= supplies[i] %] [% } %]
component eventing is added as generic methods using componentjs extender script 'emitter'.
Typical implementation of component who emits even look like
<script>//</script>
Typical implementation of component who listens for events
<script type="component" source="components/componentEmiter" /><script>// method signature on(eventName, eventHandler)this.emitter.on("loading", function(data) {console.log(data); // output: "assets"});</script>
- rewrite componentjs implementation so that it can be extended a lot more easily
- write down full stack of functional and unit tests
- improve error and exception reporting
- provide backend component generation, ie do not load components at runtime but leave the backend to serve all thecomponents in one request.