##MOKUSO
A simple easy to use Single Page Application (SPA) framework with MVVM.
Get up and running quickly without the overhead of larger frameworks and build a modern app experience. Works great for both desktop browser applications and Cordova PhoneGap applications.
Libraries needed (CDN's already referenced in sample project):
- Require.js: Great JavaScript code organization tool, you have probably heard of it.
- Kendo UI: Very low startup overhead but deep in content.
- JQuery: required to run Kendo.
####What you get:
- Deep linking: Navigate using links, buttons, native browser buttons or whatever else and watch the smooth page animations without a page reload.
- Excellent JavaScript code organization: Group page specific content with a consistent naming convention for easy project management.
- Easy (I mean EASY) to use: Click around on the sample project and you will see what I mean.
- Render Liberation: Dont like MVVM? Mokuso comes with out-of-box support for React as well. Have you own opinions about renderers (who doesnt)? provide your own by extend the simple mokuso.Renderer class.
- Require.what?: Prefer browserify or some other method of resolving modules? Just like for rendering engines, extend the mokuso.Resolver class and pass it in the constructor options.
####Why Kendo?
Unlike other frameworks, there is much less to learn to get started. With that said, most of the tooling you need is available. Looking for templates? Check. How about engaging widgets? Double check! Want to use Ionic widgets instead? No worries, only include what you need.
###Basic Overview:
Use mokuso to load a HTML file into an element:
new mokuso($("#nav"), { initial: "Navigation" });Specify an element to contain the main content for your application. In the case below, the page will navigate to 'http://yoursite.com#/Home' and will open 'Home.html' inside the content element.
new mokuso($("#content"), { initial: "Home" });For each HTML file, include a view model JavaScript file with the same name. View models should include the following functions:
- preinit - Run any logic required prior to the view being rendered.
- init - mokuso will preform any kendo MVVM data binding. Add any additional logic needed now that the view has been rendered
- deinit - This is run when a view is being transitioned out. Preform any clean up logic here.
Example template of a mokuso view model:
define([], function () {
return {
preinit: function (node, args) {
},
init: function (node, args) {
return kendo.fx(node.children()).fade("in").play();
},
deinit: function (node) {
return kendo.fx(node.children()).fade("in").reverse();
}
};
});Of course you can extend the view model or add any additional functionality as needed.
####Enjoy!
##Creators: Decisive Data - Web development consultants focused on line of business applications for business intelligence
Micah Parker, Trevor, Jason Cannon, Paige, John Jackson, James Huffaker