What is Olives?
- Olives is a JS MV* framework that helps you create scalable and realtime UIs.
- It offers a powerful virtualised and two way data binding tool
- It has an open API for adding custom features via plugins
- It declaratively attaches behaviour to an HTML template
- It's based on Emily and socket.io to facilitate the communicaton with server side services on node.js
Olives is part of TodoMVC.com
Example of a simplified todo list:
<!-- Typing something in the input field will trigger the addTask function --> # Task Action <!-- The data binding plugin will repeat the following template--> <!-- The getId function will be called on this td --> id <!-- The innerHTML of this td will be replaced by the value contained in the model We will also add a custom plugin that will change the background of this DOM element --> Name <!-- Clicking on this will trigger the removeTask function -->
// OObject is a container for DOM elementsvar widget = ; // List will be our model, it's an array of valuesvar list = ; // We tell the event plugin where to find the methods to call when en event is triggeredvar event = // Add task will add a task in the model { if eventkeyCode == 13 list; nodevalue = ''; } // Remove task will remove it { list; }; // The data binding plugin needs to know where to find the datavar bind = list // Get id can be an extra formatter { thisinnerHTML = list; }; // I'm adding the plugins to the widgetwidgetplugins; // Apply the behaviour to the DOM element selected via CSS selectorwidget;
How do I install it?
npm install olives
var olives = ; // Register your instance of socket.io if you want to use socketio-transport.olives;
Integration tests:
OObject
;
Plugins
;
Event.plugin
;
Bind.plugin
;
Place.plugin
;
LocalStore
;
SocketIOTransport
Check out documentation here And see example here
Stack
;
LocationRouter
;
Live examples
- The todo application Available on TodoMVC
- Ideafy by Taiaut
- Eyeswitch
Changelog
3.0.8 - 13 SEP 2015
- Update to latest local-observable-store
3.0.7 - 13 SEP 2015
- Update to data-binding-plugin 0.0.6
- Fix license field in package.json
3.0.6 - 30 AUG 2015
- Update to Emily 3.0.7
3.0.5 - 02 JUNE 2014
- Clean up
3.0.4 - 02 JUNE 2014
- Fix issue preventing Olives from loading on the server side in Event-plugin
3.0.3 - 02 JUNE 2014
- Fix issue preventing Olives from loading on the server side
3.0.1 - 28 APR 2014
- Doc update.
3.0.0 - 28 APR 2014
- Remove each library's implementation and use npm modules instead. Backward compatible appart from DomUtils which has been removed.
- The browserified version isn't built anymore, it'll have to be done as part of the package of the final app.
2.0.0 - 26 FEB 2014
- The OObject doesn't create or hold a reference to a Store by default.
2.0.0 beta - 04 FEB 2014
- Remove dependency on require.js
1.6.0 - 07 SEP 2013
- Fix a bug in locationRouter causing a route to be called two times
- locationRouter can start at a default route
- Stack can also transit between two views by showing the new one and hiding the previously displayed
1.5.2 - 04 SEP 2013
- Fix a bug in LocationRouter that caused the URL not to be updated while navigating
1.5.1 - 03 SEP 2013
- Fix a bug in stack preventing a hidden element to be displayed back at its original place
- Fix a bug in LocationRouter that caused the URL not to be updated while navigating
- LocationRouter clears the previous history on start
1.5.0 - 04 AUG 2013
- Add Stack for stacking up UI elements, ordering, showing and hiding them by taking them out of the DOM. The preferred way for managing what should be displayed on the screen while caring about the performance of your app.
- Add Location Router based on Emily's Router for managing routes based on the URL's hashmark.
- Add "use strict" statements
1.4.2 - 10 JUNE 2013
- Fixed performance and memory issues with data-binding's item renderer when using virtualised grid. Check a 1,000,000 rows Grid using Olives data-binding: http://podefr.github.io/olives-virtualised-grid/
1.4.1 - 13 MAY 2013
- Improved virtualisation performances in the data binding plugin when used with large data sets (>100,000 items)
1.4.0 - 24 MAR 2013
- Added Bind.plugin.getItemIndex for getting the index of a foreach generated item in a store
- Plugins constructor can be called with the list of plugins
- Updated all documentations
- SocketIOTransport doesn't initialise the socket anymore, the socket must be given
1.3.2 - 15 MAR 2013
- Incorporating 1.3.1 changes, tests + docs clean up
- Updated Emily
1.3.0 - 17 DEC 2012
- Olives modules are now anonymous. When downloading Olives you can get its source file and decide by yourself how you want to use them/pack them into your application. A standalone file is still available for rapid prototyping.
- Model-plugin is now called Bind.plugin
- Transport is now called SocketIOTransport
- UI-pugin is now called Place.plugin
- Plugins are now name as "name.plugin.js" instead of "name-plugin.js"
- Updated JSDocs