Single Page Application Micro Framework
Supports views, controllers and routing in 60 lines of code!
If you heard anything about MVC in web applications, in particular words like "views", "controllers", "routing" and don't feel that you need more than jQuery in your project then this small library is for you.
Let's consider structure of simple "contact list" web application:
<script type="text/javascript" src="spapp.js"></script>
<body>
<nav>
<a href="#contact-list">Contacts</a>
<a href="#about">About</a>
</nav>
<section id="contact-list" src="pages/contact-list.htm" default></section>
<section id="contact-details" src="pages/contact-details.htm"></section>
<section id="about" src="pages/about.htm"></section>
</body>
We have <nav>igation section here and collection of <section>s - views that need to be presented when user clicks
on one of hyperlinks in the nav bar (or anywhere else). Also, if you want to load a section by default, simply add the default attribute.
By definig <section id="some id"> element in your markup you actually define a route. When browser is navigated to
{url of your app}#id-of-section the SPApp module catches this event and shows <section> with that ID.
No special mechanism for declaring routes is required - simply declare <section>s with proper IDs.
Notice that each <section> above has src={url} attribute declared. That URL points to partial HTML fragment
that defines content of the view and its controller function.
Typical structure of a view looks like this:
<h2>Contact Details</h2>
<label>First name</label> <input name="firstName">
<label>Last name</label> <input name="lastName">
...
<script>
//|
//| view controller
//|
//| Note the name below shall match id of the section
//|
window.app.page("contact-details", function() // registering the controller
{
// initialize view variables in localscope
var $firstName = $(this).find('[name="firstName"]');
var $lastName = $(this).find('[name="lastName"]');
...
// presenter of the view - load data and show:
return function(params) {
var contactId = params;
contact = contacts[contactId];
// show values
$firstName.val(contact.firstName);
$lastName.val(contact.lastName);
...
}
});
</script>
As you see markup above contains two sections:
app.page("{name}",scopeInitializerAndController ) function.The scopeInitializerAndController function above serves two tasks:
initilizes the view and its scope variables and
returns function (a.k.a. "controller"). That function will be called each time the view needs to be presented/rendered.
The application can be switched to show different views in one of these ways:
{your app url}#name-of-the-view:optional-parameter;<a href="#name-of-the-view:optional-parameter"> hyperlinks on app page;window.app("name-of-the-view", parameters) function.In all cases the SPApp framework will call controller registered for the view passing given parameter to it.
While switching the view the SPAapp will trigger two events:
event.target set on <section> to be "closed" andevent.target set on <section> to be "shown".So by subscribing on these events any code inside or outside controllers can receive notification about application state change.
When the application navigates to particular view defined in <section id="view-a"> it is said that it is in "view-a" state. SPApp marks this state by assigning "view-a" class to the <body> element in your document. Having this you can define view visibility rules in your CSS:
/* all sections are off by default */
body > section { display:none; }
/* app state -> view visibility rules: */
body.view-a > section#view-a,
body.view-b > section#view-b,
body.view-c > section#view-c { display:block; }
Note that switching the view into different states may require not only to hide/show some sections but also to style some other indicators like nav-bar items highlighting:
/* nav highlightion rules */
body.view-a > nav > a[href="#view-a"],
body.view-b > nav > a[href="#view-b"],
body.view-c > nav > a[href="#view-c"] { background:white; color:black; }
It is not strictly required for controller's code to be placed inside the view markup, you can put them in separate script files and include as any other scripts:
<script type="text/javascript" src="controller-a.js"></script>
<script type="text/javascript" src="controller-b.js"></script>
...
The only thing that required is that scopeInitializerAndControoler function must be registered by calling
window.app.page("view-a", function() // registering the controller
{
... initialization ...
return function(params) {
... presentation ...
}
});
In the same way markup for views can be provided inline without use of external files:
<section id="view-a" >
... markup of view-a ...
</section>
<section id="view-b" >
... markup of view-b ...
</section>
#Live Demo
Check this SPApp in action demo. I've created it in explicitly simple and minimalistic fashion in order to highlight just SPAapp. I have projects where it works in Twitter Bootstrap environment for example.
FAQs
c-smile's minimal spa router
We found that spapp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.