Everything below is currently a concept I'm working on and beginning to write, asking for thoughts or suggestions.
Hello! Recently I've been brain storming tons, my mind went back to web development this time around. So I thought about some issues or annoyances, and I thought of a few that with this concept I would like to resolve and guage everyone's thoughts. So in a few words my concept is resource packaging for the web.
What does this mean? Ever worked on a project, or used a front end framework? Sometimes depending on the scale of the project you can have a large and sometimes confusing directory structure containing resources for your page including client Javascript, CSS, Images and so forth. What if you write some awesome front end code, but want to send it to a friend? Most times you're going to have to compress it into a zip file or something to send it through email or other uploading service, all of these things can be a pain. This is where "Jug" would come in.
Jug is a program that packages all of these resources together in one file, but this is not a compressed zip as unzipping to fetch resources would just be extra over head for your web application. Jug would function as multiple things, resource packaging for requests from the server (all examples below) and easy distribution of resource packages.
Say you have a directory structure like this:
resources
js/
example.js
css/
example.css
img/
example.png
application (PHP code or some other server side language for your application)
index.php
Sometimes this could be a pain for fetching resources. For example if you were to write a little html page that requires all of these resources it would look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Jug - Resource Packaging</title>
<link rel="stylesheet" type="text/css" href="//example.com/resources/css/example.css">
</head>
<body>
This is a picture of a piece of cake:
<img src="//example.com/resources/img/example.png">
<script type="text/javascript" src="//example.com/resources/js/example.js"></script>
</body>
</html>
Sometimes things like this can be a big pain especially if you have tons of resources! It would be much easier if you could just fetch all of these things from a centralized place on your server and not have to remember a directory structure. Or even if you're using a front end framework such as bootstrap you could just refer to this central location to grab everything you need for your web pages. The great thing about this is that it doesn't even need to be on your server, other people could host free to use "Jug's" on their server.
I still haven't shown you what this thing will do, just reasons you could use it so here we go... For example here is the above html document but using a Jug to fetch resources instead of the server paths:
<!DOCTYPE html>
<html>
<head>
<title>Jug - Resource Packaging</title>
<link rel="stylesheet" type="text/css" href="//example.com/res.jug?res=css.example">
</head>
<body>
This is a picture of a piece of cake:
<img src="//example.com/res.jug?res=img.example">
<script type="text/javascript" src="//example.com/res.jug?res=js.example"></script>
</body>
</html>
This may or may not look that exciting or different to you. All we're doing is sending a GET request to this "Jug" and it's sending back the requested resource. Names of these files can be very configurable, mentioned here in the next section.
Lets add a file to the current directory strucure:
resources
js
example.js
css
example.css
img
example.png
manifest <-- this is the new file
application (PHP code or some other server side language for your application)
index.php
This manifest file will contain configurations for the "Jug" including how it will be packaged, http headers for specific types of content, how resources will be accessed etc... An example of a manifest is below:
# This is an example Manfiest file for Jug
# Attributes for the example.css file
File "example.css" {
Content-type: text/css;
alias: "css.example";
}
# Attributes for the example.png file
File "example.png" {
Content-type: image/png;
alias: "img.example";
}
# Attributes for example.js
File "example.js" {
Content-type: text/javascript;
alias: "js.example";
}
Of course more options will be able to be set in the future, again this is just a concept.
This is all I can really talk about at the moment, this is a concept but I am beginning work on making this happemn. Please give me your thoughts/criticisms on this. I've talked to a few people and they think it's brilliant but I don't think I can trust them xD.
Thanks for any feedback or ideas!
