OSPF makes easy to create single pages JavaScript apps, by using components as stand-alone rendered objects, in a MVC-way. It is pretty fast when it comes to development time, and has no external dependencies. In addition, it uses Vanilla Javascript only, allowing you to start developing right away without any additional installation. You are right, you can start developing directly in your browser just by downloading the .zip file. It works on desktop, mobile, Cordova, Electron.

Clone this repository inside a folder accessible by your webserver:

git clone https://github.com/omagerio/ospf.git

Visit the URL of that folder, for example http://localhost/myfolder

Et voilà. The framework is up and running strong. Easy right?

The application starts with the App component you can find inside ospf/components/custom/App. This code should be self explanatory, let's take a look:

class App extends Component {
    async init({}={}) {
        await super.init(); // always call super.init() first

        let view = await this.addChild("view", new TabbedLayoutExample());
        await view.init();
    }
}

The init() method must always be present (it is inherited from Component) and must be called everytime you instantiate a new component. Here you can write the setup logic of the component. It is async (like most of the methods in this framework) so you can use await accordingly. In this method we create a new component called TabbedLayoutExample, adding it as a child of this component. The method addChild adds a child to the selected component, and accepts the component being created, and the key of the component. Read more about components below.

The app var is a global variable always referencing this component. Only one instance of the App component is allowed inside any app.

Now, the TabbedLayoutExample component will be rendered when you start the application.

ospf/					framework folder
	assets/
		css/
			core.css	core css file. Do not edit this file (override in custom.css if needed)
			custom.css	Editable custom css file
		images/
			core/		Core images. Do not edit.
			custom/		Custom images of your app.
		libs/
	components/			Components folder
		core/			Core components. Do not edit this file.
		custom/			Custom components. Create your components here.
	config.json
	ospf.js				Main framework file
index.html				Entry point of your application
README.md				This file

An example component was made for you to start with, you can find it inside ospf/components/custom/_blank.

• Duplicate the _blank folder to MyComponent
• Rename HelloWorld.js and HelloWorld.html to _blank.js and _blank.html
• Open _blank.js

This file is, not surprisingly, the logic of your new component. Every component class must extend the Component class, or any direct child of it.

class MyComponent extends Component {
	// ...
}

You are almost there. Now we have to tell OSPF about your new component, but do not worry, it is faster than you think.

• Open ospf/config.json and add custom/MyComponent to the customComponents array.

"customComponents": [
        "custom/App",
		"custom/MyComponent" /* add your component here */
]

The HTML file represents the template of the component. Let's see the default tpl:

<div id="<%= c._id %>" class="_blank">
</div>

Here you place the HTML of your component. Be sure to set the id attribute of the tag (can be any tag you want, here is a div) to <%- c._id %> to allow the framework to recognize the component later on.

As you can see, this framework uses the extraordinary ejs library. Find more here: https://ejs.co/. The library is already included and minimized, no need to install it again.

Components have different methods you must know:

• async init(): this is a fundamental method of the components. Always call this method after you created your component. You can use this method to pass variables to your component. Always call await super.init() before your custom code.
• renderEvent(string eventName, any parameter, Event javascriptEvent): renders an event, for example: onclick="<%- c.renderEvent("clickHandler") %>" will call component.clickHandler(parameter, javascriptEvent).
• async databind(): loads panel data. You should never override this method. Use the method async onDatabind() to handle the databind on your component.
• async refresh(): refreshes the component's template. You should never override this method.
• async update(): calls refresh() and databind() sequentially. You should never override this method.
• render(): returns the HTML of the component. Use this method inside your template to render children components.
• async addChild(name, component): adds a child component to the current component.
• async removeChild(name): get the child of the current component by name.
• getChild(name): get the child of the current component by name.
• getChildren(): get all the children of the component.
• async fireEvent(string eventName, any parameter): fires a global event with parameter.

Inside the template file, you can use c to reference your component (for example c.name).

• async onFirstRender(): called when the component is rendered for the first time.
• async onBeforeRefresh(): called before the component is refreshed. Please note: render() does not count as a refresh.
• async onAfterRefresh(): called after the component is refreshed. Please note: render() does not count as a refresh.
• async onBeforeReplace(): called before a component is replaced (with addChild() to a new component for example);
• async onAfterReplace(): called before a component is replaced (with addChild() to a new component for example);
• async onBeforeDestroy(): called before a component is destroyed (removed with removeChild(), cascades to children);
• async onParseInput(): parses user input to update components status. It is automatically called when an event is handled. Use this method when you want to alter the state of the component based on user input.

• async onBeforeEvent(event): called when an event is fired, but before other calls.
• async onEvent(event): called when an event is fired. Handle your logic here.
• async onAfterEvent(event): called after an event is fired.

This step is optional.

By default, components are loaded one by one when the application start. You can speed up the startup process by compiling your components in one single file. You can use tools/compile.js to perform this operation (requires nodejs and an internet connection): node tools/compile.js.

Then, set up the production mode in the config.json file:

/*
    Set to "false" if you want to test your application without compiling or you don't have nodeJS.
    Set to "true" and run "node tools/compile.js" to generate unified sources. Recommended.
*/
{
	"productionMode": true
}

You can start a local webserver by running: node tools/server.js

This is everything you must know if you want to start using OSPF!

Happy coding

This framework is under heavy development and it may change or break at every update. Please check back frequently.