nyolamike / pxp

Page By Page is a very simple javascript library for building single page application (SPAs) based on jquery

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.js

Roadmap 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

About

Page By Page is a very simple javascript library for building single page application (SPAs) based on jquery

License:MIT License


Languages

Language:JavaScript 100.0%