Ward - A client-side framework to build static websites and applications
source link: https://github.com/ColinEspinas/ward
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The full documentation is not available for now, the project is still in early stages.
WARD
A fast & simple client side framework for building websites
Explore the docs » View Demo · Report Bug · Request Feature
Table of Contents
About
Ward is a simple client sided framework that helps you create fast websites. It is really easy to use and comes with routing and templating.
Getting Started
Get your Ward project up and ready.
Prerequisites
Ward is a standalone framework, you don't need anything to make it work but you will need Node.js and a package manager to serve it easely with ward-server .
Installation
CLI
It is recommended to use the ward-cli to create and serve your Ward projects
- Install ward-cli:
npm install [-g] ward-cli
- Create a new Ward project and serve it:
# Create a new project ward new MyProject # Move into the project directory cd MyProject # Serve the project ward serve
Git Clone
- This repository can act as a skeleton for Ward projects so you just need to clone it:
git clone https://github.com/ColinEspinas/ward.git
- Install dependencies ( ward-server ):
npm install
- Now if you want to serve your Ward project use:
npm start
NOTE: Nothing stops you from serving Ward projects with Apache servers by tweeking your .htaccess
file. If you do so, do not hesitate to share your methods to help the development of the project.
Usage
The content below is just explaining basic usages, consider cheking the documentation about more specific use cases.
Templating
Views
Ward uses view loading to display content on routes. Views uses the .ward.html
extension.
Views are defined by a head and a body like normal html pages:
<viewhead> <title>View title</title> </viewhead> <viewbody> <p>View content</p> </viewbody>
The name of a view will be the path of the view from the Views
folder without the extension:
"app/views/myhomepage.ward.html" => "myhomepage" "app/views/mypages/myhomepage.ward.html" => "mypages/myhomepage"
In javascript the View object is constructed with:
View(name, params/*optional*/));
Template engine
The Ward templating engine works with {# expression #}
and allows every javascript expression.
You can use it to pass parameters to a view:
<p>{# name #}</p>
NOTE: You can pass any javascript global variable too.
And you can also use logic structures and functions:
<viewbody> {# for(let item of items) { #} <p>{# item.name #}</p> {# console.log(item) #} {# } #} </viewbody>
Routing
Ward uses hash navigation by default, that means that your URI will look like /#this/is/a/route
.
The routing is done in app/routes/routes.js
.
To register a new route you should use:
router.register(new Route(path, callback));
// Exemple: router.register(new Route("/home", function() { return new View("home"); }));
Routes that return Views will load that view, you can pass arguments to a view with:
return new View(name, arguments);
To navigate to a new route use:
router.redirect(path);
// Exemple: router.redirect("/home");
To get the right path to a view use:
Route.link(path); // In javascript link(path) // Helper for templates
<!-- Exemple: --> <a href="{# link("/home") #}">Home</a>
Contributing
This project is developed by a somewhat beginner javascript developer, help is always welcome. Do not hesitate to contribute to the project.
- Fork the Project
- Create your Feature or Fix Branch (
git checkout -b feature/Feature
orgit checkout -b fix/Fix
) - Commit your Changes (
git commit -m 'Add some feature or fix'
) - Push to the Branch (
git push origin feature/Feature
orgit push origin fix/Fix
) - Open a Pull Request
License
Ward is distributed under the MIT License. See LICENSE
for more information.
Contact
Colin Espinas - Website - [email protected]
Project link: https://github.com/ColinEspinas/ward
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK