pxp
Page By Page is a very simple javascript library for building single page application (SPAs) based on jquery
Installation
First include jquery before you include pxp
<!DOCTYPE html>
<html>
<head>
<!-- header things go here -->
</head>
<body>
<div id="pxp-app" ></div>
<!-- jquery -->
<script src="js/jquery/jquery.min.js"></script>
<!-- pxp -->
<script src="js/pxp/pxp.min.js"></script>
<script src="js/pxp/pxpHtml.min.js"></script>
<!-- application scripts -->
<!-- the home page -->
<script src="pages/homePage/index.js"></script>
<!-- application routes -->
<script src="router.js"></script>
<script>
$(function(){
//run the pxp app
pxp.run("pxp-app");
});
</script>
</body>
</html>
Project Folder Structure
pxp does not impose a certain way that you should organise your project files, the structure below is just an example to put things into perspective as far as this readme file is concerned
|-- css
|
|-- js
| |
| |--pxp
| | |
| | |--pxp.min.js
| | |
| | |--pxpHtml.min.js
| |
| |--jquery
| |
| |-- jquery.min.js
|
|-- components
|
|-- pages
| |
| |--homePage
| |
| |--index.js
|
|-- index.html
|
|-- router.jsRoadmap v1.0.0
-
core pxp.js library
- global pxp objects
- pxp app container
- boot scripts
- router
- starting the pxp app
- components
- pages
- sections
- event bus
- utils
-
pxpHtml library
-
publishing
- npm
- cdn
-
Readme.md
-
wiki
-
contributors
-
youtube videos
-
example projects
Feature Sugestions
1.loading in of .html templates
2.@scx.title short hand syntax
3.lazy loading of resources or on demand loading of resources
4.context name spacing in events to allow different sections define the same name for an event but registered in a separate context e.g eventName_context