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 `
      <div id="loading" class="absolute inset-0 flex justify-center items-center z-50">
        <div class="bg-white p-5 rounded shadow-lg">
          <p>Memuat Data...</p>
        </div>
      </div>
    `;
  }

  renderTemplate() {
    if (this.data.length > 0) {
      return `
        <section id="dataView" class="py-20">
          <div class="mx-auto w-7/8 flex justify-center items-center h-1/5">
            <div class="w-7/8 mx-auto relative h-full z-30 pt-2 inter">
              ${this.data.map(item => `
                <div class="data-item" id="item-${item.id}">
                  <p>${item.name}</p>
                </div>
              `).join('')}
            </div>
          </div>
        </section>
      `;
    } else {
      return `<p>Error loading data. Please try again later.</p>`;
    }
  }
}

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 `
        <section id="dataView" class="py-20">
          <div class="mx-auto w-7/8 flex justify-center items-center h-1/5">
            <div class="w-7/8 mx-auto relative h-full z-30 pt-2 inter">
              <div class="data-item" id="item-${selectedItem.id}">
                <p>${selectedItem.name}</p>
              </div>
            </div>
          </div>
        </section>
      `;
    } else {
      return `<p>Error loading data. Item with ID ${itemIdToShow} not found.</p>`;
    }
}

// ...
// 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 `
        <section id="dataView" class="py-20">
            <div class="mx-auto w-7/8 flex justify-center items-center h-1/5">
                <div class="w-7/8 mx-auto relative h-full z-30 pt-2 inter">
                    <div class="data-item" id="item-${this.data.id}">
                        <p>${this.data.name}</p>
                    </div>
                </div>
            </div>
        </section>
        `;
    } else {
        return `<p>Error loading data. Please try again later.</p>`;
    }
}

// ...
// 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 `
      <section id="dataView" class="py-20">
        <div class="mx-auto w-7/8 flex justify-center items-center h-1/5">
          <div class="w-7/8 mx-auto relative h-full z-30 pt-2 inter">
            <form id="addForm" class="mt-4">
              <label for="usersName">User Name:</label><br>
              <input type="text" id="usersName" name="usersName"><br>
              <button type="submit">Submit</button>
            </form>
          </div>
        </div>
      </section>
    `;
  }
}

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 `
      <section id="dataView" class="py-20">
        <div class="mx-auto w-7/8 flex justify-center items-center h-1/5">
          <div class="w-7/8 mx-auto relative h-full z-30 pt-2 inter">
            <form id="dataForm" class="mt-4">
              <label for="selectedId">Select ID:</label><br>
              <input type="text" id="selectedId" name="selectedId"><br>
              <label for="formName">New Name:</label><br>
              <input type="text" id="formName" name="formName"><br>
              <button type="submit">Submit</button>
            </form>
          </div>
        </div>
      </section>
    `;
  }
}

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 `
      <section id="deleteView" class="py-20">
        <div class="mx-auto w-7/8 flex justify-center items-center h-1/5">
          <div class="w-7/8 mx-auto relative h-full z-30 pt-2 inter">
            <form id="deleteForm" class="mt-4">
              <label for="selectedId">Select ID to Delete:</label><br>
              <input type="text" id="selectedId" name="selectedId"><br>
              <button type="submit">Delete</button>
            </form>
          </div>
        </div>
      </section>
    `;
  }
}

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Bee Framework

Development

Production

Using ApiService

GET

POST

PUT

DELETE

Error Handling (optional)

Example GET Data From APIService

- Array Object

- Objects by ID

- Single Object

Example POST Data From APIService

Example PUT Data From APIService

Example DELETE Data From APIService

Using Routing

Using AOS (Animation On Scroll)

Support

Folder Structure

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
node_server		node_server
public		public
src		src
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
sss.png		sss.png
tailwind.config.js		tailwind.config.js
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

License

fitri-hy/bee-framework

Folders and files

Latest commit

History

Repository files navigation

Bee Framework

Development

Production

Using ApiService

GET

POST

PUT

DELETE

Error Handling (optional)

Example GET Data From APIService

- Array Object

- Objects by ID

- Single Object

Example POST Data From APIService

Example PUT Data From APIService

Example DELETE Data From APIService

Using Routing

Using AOS (Animation On Scroll)

Support

Folder Structure

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages