Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fitri-hy/bee-framework
Bee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development.
https://github.com/fitri-hy/bee-framework
bee-framework framework framework-javascript frontend frontend-framework javascript pure-javascript routes templates
Last synced: about 13 hours ago
JSON representation
Bee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development.
- Host: GitHub
- URL: https://github.com/fitri-hy/bee-framework
- Owner: fitri-hy
- License: mit
- Created: 2024-06-08T10:39:14.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-11T10:47:41.000Z (5 months ago)
- Last Synced: 2024-06-11T12:13:04.414Z (5 months ago)
- Topics: bee-framework, framework, framework-javascript, frontend, frontend-framework, javascript, pure-javascript, routes, templates
- Language: JavaScript
- Homepage:
- Size: 708 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bee Framework
Bee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development.
## Development
```
git clone https://github.com/fitri-hy/bee-framework.git
cd bee-framework
npm install
npm start
```
## Production
- Build project: `npm run build`.
- upload the `dist` folder to your hosting service.
- Open Setup Node.js App
- Set Application startup file: `server.js`
## Using ApiService
- Import ApiService
Import ApiService from the appropriate path in any JavaScript file in your project.
`import ApiService from '../services/ApiService';`
- Use `getData` Method
Use the `getData` method to retrieve data from the given URL.
#### GET
`const response = await ApiService.getData('http://api.example/data');`
#### POST
`const response = await ApiService.postData('http://api.example/data');`
#### PUT
`const response = await ApiService.putData('http://api.example/data');`
#### DELETE
`const response = await ApiService.deleteData('http://api.example/data');`
#### Error Handling (optional)
Add error handling according to your needs.
```
try {
const response = await ApiService.... // Method
} catch (error) {
console.error('Failed to fetch data:', error);
}
```
## Example GET Data From APIService
### - Array Object
```
import BeeComponent from '../components/BeeComponent';
import ApiService from '../../services/ApiService';
import Layout from '../Layout';
class Home extends BeeComponent {
constructor() {
super();
this.data = '';
this.loading = true;
this.init();
}
async init() {
this.render();
try {
const response = await ApiService.getData('http://api.example/data');
this.data = response || [];
} catch (error) {
console.error('Error loading data:', error);
this.data = [];
} finally {
this.loading = false;
this.render();
}
}
render() {
const content = this.loading ? this.loadingTemplate() : this.renderTemplate();
document.getElementById('app').innerHTML = new Layout().render(content);
}
loadingTemplate() {
return `
Memuat Data...
`;
}
renderTemplate() {
if (this.data.length > 0) {
return `
${this.data.map(item => `
${item.name}
`).join('')}
`;
} else {
return `Error loading data. Please try again later.
`;
}
}
}
document.addEventListener('DOMContentLoaded', () => {
new Home();
});
export default Home;
```
### - Objects by ID
```
// ...
// Script Same as before
// ...
renderTemplate() {
const itemIdToShow = 2; // Misalnya, kita ingin menampilkan item dengan ID 2
const selectedItem = this.data.find(item => item.id === itemIdToShow);
if (selectedItem) {
return `
${selectedItem.name}
`;
} else {
return `Error loading data. Item with ID ${itemIdToShow} not found.
`;
}
}
// ...
// Script Same as before
// ...
```
### - Single Object
```
// ...
// Script Same as before
// ...
async init() {
this.render();
try {
const response = await ApiService.getData('http://api.example/data');
this.data = response.length > 0 ? response[0] : null;
} catch (error) {
console.error('Error loading data:', error);
this.data = null;
} finally {
this.loading = false;
this.render();
}
}
// ...
// Script Same as before
// ...
renderTemplate() {
if (this.data) {
return `
${this.data.name}
`;
} else {
return `Error loading data. Please try again later.
`;
}
}
// ...
// Script Same as before
// ...
```
## Example POST Data From APIService
```
import BeeComponent from '../components/BeeComponent';
import ApiService from '../../services/ApiService';
import Layout from '../Layout';
class Home extends BeeComponent {
constructor() {
super();
this.render();
this.setupFormEventListener();
}
async handleFormSubmit(event) {
event.preventDefault();
const formData = new FormData(event.target);
const usersName = formData.get('usersName');
try {
const response = await ApiService.postData('http://api.example/data', { name: usersName });
console.log('Data successfully submitted:', response);
} catch (error) {
console.error('Error submitting data:', error);
}
}
setupFormEventListener() {
document.getElementById('addForm').addEventListener('submit', this.handleFormSubmit.bind(this));
}
render() {
const content = this.renderTemplate();
document.getElementById('app').innerHTML = new Layout().render(content);
}
renderTemplate() {
return `
User Name:
Submit
`;
}
}
document.addEventListener('DOMContentLoaded', () => new Home());
export default Home;
```
## Example PUT Data From APIService
```
import BeeComponent from '../components/BeeComponent';
import ApiService from '../../services/ApiService';
import Layout from '../Layout';
class Home extends BeeComponent {
constructor() {
super();
this.render();
this.setupFormEventListener();
}
async handleFormSubmit(event) {
event.preventDefault();
const formData = new FormData(event.target);
const formName = formData.get('formName');
const selectedId = formData.get('selectedId');
try {
// Get Data From API
const data = await ApiService.getData('http://api.example/data');
// Search products by id
const dataToUpdate = data.find(putData => putData.id === parseInt(selectedId));
if (!dataToUpdate) throw new Error('Product not found');
// Data update process
dataToUpdate.name = formName;
// Submit data editing requests to API
const response = await ApiService.updateData(`http://api.example/data/${selectedId}`, { name: formName });
console.log('Data successfully edited:', response);
} catch (error) {
console.error('Error editing data:', error);
}
}
setupFormEventListener() {
document.getElementById('dataForm').addEventListener('submit', this.handleFormSubmit.bind(this));
}
render() {
const content = this.renderTemplate();
document.getElementById('app').innerHTML = new Layout().render(content);
}
renderTemplate() {
return `
Select ID:
New Name:
Submit
`;
}
}
document.addEventListener('DOMContentLoaded', () => new Home());
export default Home;
```
## Example DELETE Data From APIService
```
import BeeComponent from '../components/BeeComponent';
import ApiService from '../../services/ApiService';
import Layout from '../Layout';
class Home extends BeeComponent {
constructor() {
super();
this.render();
this.setupFormEventListeners();
}
async handleFormSubmit(event) {
event.preventDefault();
const formData = new FormData(event.target);
const selectedId = formData.get('selectedId');
try {
const response = await ApiService.deleteData(`http://api.example/data/${selectedId}`);
console.log('Data successfully deleted:', response);
} catch (error) {
console.error('Error deleting data:', error);
}
}
setupFormEventListeners() {
document.getElementById('deleteForm').addEventListener('submit', this.handleFormSubmit.bind(this));
}
render() {
const content = this.deleteFormTemplate();
document.getElementById('app').innerHTML = new Layout().render(content);
}
deleteFormTemplate() {
return `
Select ID to Delete:
Delete
`;
}
}
document.addEventListener('DOMContentLoaded', () => new Home());
export default Home;
```
## Using Routing
```
# Path: src/routes/Route.js
import Home from '../templates/pages/Home';
// Add other import pages here ...
import DomUtils from '../utils/DomUtils';
const routes = [
{
path: '/',
component: Home,
meta: {
title: 'Welcome to Bee Framework | More Agile and Efficient User Interface',
description: 'Bee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development.',
keywords: 'Bee Framework, JavaScript, user interface, UI, web application, efficient, light, optimal performance'
}
},
// Add another route path here ...
];
// Other scripts ...
export { routes, handleRouteChange };
```
## Using AOS (Animation On Scroll)
- Install AOS (Animation On Scroll) using Yarn, Npm, Bower.
```
yarn add aos
npm install aos --save
bower install aos --save
```
- Open Files: `src/templates/Layout.js`
```
import Header from './components/Header';
import Footer from './components/Footer';
...
// == ADD == //
import AOS from 'aos';
import 'aos/dist/aos.css';
document.addEventListener('DOMContentLoaded', () => {
AOS.init();
});
// ========= //
class Layout {
...
```
- Add: data-aos="---" to the html element. look at the official site: Official AOS.
## Support
- .js | .jsx | .tsx
- Sass (.scss)
- Tailwind CSS
- AOS (Animation On Scroll)
- Dark / Light Mode
- Routing
- Templating / Layouting
- Api Services
- Any more ...
## Folder Structure
```
BeeFramework/
├── public/
│ ├── index.html
│ └── styles.css
├── src/
│ ├── assets/
│ │ └── css/
│ │ ├── global.css
│ │ └── style.scss
│ ├── models/
│ │ └── Model.js
│ ├── routes/
│ │ └── Route.js
│ ├── services/
│ │ └── ApiService.js
│ ├── templates/
│ │ ├── components/
│ │ │ ├── BeeComponent.js
│ │ │ ├── DarkMode.js
│ │ │ ├── Footer.js
│ │ │ └── Header.js
│ │ ├── pages
│ │ │ ├── Home.js
│ │ │ ├─ About.js
│ │ │ └── 404.js
│ │ └── Layout.js
│ ├── utils/
│ │ └── DomUtils.js
│ └── App.js
├── package.json
├── package-lock.json
├── postcss.config.js
├── tailwind.config.js
├── webpack.config.js
└── yarn.lock
```