blueberryjs
Advanced tools
Blueberry is an easy to use JavaScript framework for modern browsers and also allows for easy devlopment alongside other JavaScript libraries such as jQuery.
Blueberry can be installed using the following npm command:
npm install blueberryjs
Blueberry can also be cloned from the repo and then gulp(d) using gulp build.
We can create a basic HTML file and load blueberry in it.
Then we load our blueberry component(s).
The div has two noticable attributes blueberry and component,
each can be used as is or can be used with the prefix data-.
Both work since Blueberry is smart enough to figure it out.
<html>
<head>
<title>My First Blueberry App</title>
<script src="/path/to/blueberry.min.js"></script>
<script src="/path/to/MyClickComponent.js"></script>
</head>
<body>
<!-- Blueberry attribute:
A blueberry attribute tells the JavaScript that
"This is a blueberry object".
The value is the name of the object
-->
<!-- Component attribute:
A component attribute can have multiple components,
they just need to be separated with a space.
Components define in the DOM are automatically
added to a blueberry object at load time.
-->
<div blueberry="My Object" component="myComponent">
I am an awesome div!
</div>
</body>
</html>
A component is fairly easy to build, as it is just a simple class that extends
BerryBehavior which allows you to adds extra behaviors to your object.
The following component only uses a couple of the many messages that you
can add to your custom component.
// Creates a new component that can be resused
// on multiple Blueberry objects.
class MyClickComponent extends BerryBehavior {
// This is a message that is sent from Blueberry
// when a Blueberry object is created and it is only
// called once per object per component.
// We can not assume that all objects are active
// at this point. This should be done using the
// "start" message (see below). We can however,
// save reference other attached componets on this object.
awake(){
alert('I am awake!');
}
// This is a message that is sent from Blueberry
// when a Blueberry object is created and it is only
// called once per object per component and after "awake"
// Here we can assum that all objects are accessible
// unlike "awake". Here we could find objects on the page
// and save a reference to them.
start(){
alert('I have started!');
}
// This is a message that is sent from Blueberry
// when it sees something has been clicked.
// Any object with this component attached to it
// will fire a click event when clicked.
// If "click" was not defined, nothing would happen.
click(){
// Deletes the Object in 5 seconds
berryObject.destroy(this.berryObject, 5);
}
}
// Registers the component for usage.
// Components should only be registered one time on a page.
// As you can see "myComponent" matches the one in the HTML DOM
window.myComponent = MyClickComponent;
FAQs
JavaScript Blueberry Framework
We found that blueberryjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.