Veronica JS
Veronica ❤ Riot
Veronica JS is a framework to Riot JS library. Based on Facebook's flux architecture this framework is focused but not restricted to Mobile web. With its slim size and entirity in nature we tend to make mobile web a delightful experience again.
In footsteps of flux framework, veronica boots itself with a singleton dispatcher and ability to create singleton stores and actions (can have multiple instances).
How to use
With version 0.9.2 onwards, Veronica no longer pre-compiles itself with Riot. This means that you are free to use any version of Riot you wish for with veronica. Current we are tesing a no. of Riot's versions with Veronica all successfully working version's list will be update soon
<!-- to use veronica in your project include riot and veronica in the following order -->
Veronica Flux namespace
This namespace is the store Actions and Stores classes.
Actions and Stores have functions createActions/createStores and getAction/getStore which help you create/get instances of both.
Veronica Actions
Actions in veronica/flux are meant to perform jobs, api calls, perform async functions etc. and send the processed data to the './lib/dispatcher.js'
Creating an Action
{ this thisDispatcher; } //creating an actionveronicafluxActions; //accessing inside a viewvar itemActionObj=veronicafluxActions;itemActionObj;
Actions in veronica have inbuilt Ajax capabilities.
Ajax Usage in actions
{ this //this.http object exposes get/post/delete/put methods thishttp }
P.S. Only Actions can/should perform Ajax in veronica
Veronica Stores
Stores in veronica/flux are the data stores that expose data getters and have the capability to listen to events on './lib/dispatcher.js'.
Creating a Store
{ var _shoppingList=; thisDispatcher; this{ return _shoppingList; } this{ _shoppingList; } this{ thisDispatcher; //removing a listener }} //creating an storeveronicafluxStores; //accessing inside a view var itemStoreObj=veronicafluxStores; //this will be a siglethisitems=itemStoreObj;
Veronica Dispatcher
Actions and Stores in veronica have access to different access to specific APIs of Dispatcher so as to maintain the unidirectional flow of data.
Dispatcher has following 4 APIs
//only present in StoresthisDispatcherthisDispatcherthisDispatcher //only present in ActionsthisDispatcher
Veronica Router
Veronica comes with a push state router, allowing you to handle your urls without the hashbang.
API
//adding a routeveronica; //navigating to urlsveronica;veronica; //replace state //access current location dataveronica; //get current page urlvernocia; //get current state.vernocia; //route params and their valuesvernociadata; //get previous page urlvernocia; //enable or disable popstate listener in veronica routerveronicasettingslistenPopState=true;//orveronicasettingslistenPopState=false; //sample routes/person/:pid/account/:aid/: /account/123/ {aid:"123"pid:"p26"}
Veronica Promises
The Promise
object gives you a way to create $q
promises the new constructer.
You resolve/reject these promises and callbacks are registered with .success
or .error
Veronica Storage
This feature is only available for stores Veronica under its two namespaces DS/Session wraps localStorage and sessionStorage respectively, this not only allows session storage to be working even where it is not present but we plan to expose library which can be used to push data to either localstorage/indexedDB without changing the API structure.
Page Transitions
To enable page transition animations add the following two lines of code
veronicasettingsenablePageTransitions=true;veronicasettingsmaxPageTransitionTime=300;
Now upon state change outgoing state is given class "unmount/unmount-pop" and incoming component is given class "mounting"
Please use CSS3 Transitions upon these classes to put exit and entry animations of the various components.
Changelog
- 0.0.1 Basic APIs + push-state router to work with different components
- 0.5.0 Introduced Flux architecture and segregated API for different components
- 0.6.0 Introduced switch for page transitioning
- 0.6.1,0.6.2 Minor bug fixes
- 0.6.3 Adding replaceLocation functionality to router
- 0.6.4 Store and action creation name api change
- 0.6.5 Global Ajax and Data setter and getter
- 0.6.6 HTML remove function bug fix
- 0.7.0 Enabling page transitions
- 0.7.1 Switch for Pop State listener to default veronica router
- 0.8.0 Regex free router
- 0.8.1 Push state data bug fix
- 0.8.2 Unmount bug fix
- 0.9.0 Ajax enhancements
- 0.9.1 Strict versioning of node modules
- 0.9.2 Removing Riot as a pre-compiled dependency
- 1.0 beta Removing Storage Wrapper, Mounting only Routed Pages.
Roadmap to 1.0
Our roadmap to a 1.0 version currently includes introding the following stuff in the framework
- A good amount of test coverage
- Proper documentation