{"id":20956019,"url":"https://github.com/fitri-hy/bee-framework","last_synced_at":"2025-12-29T22:05:43.334Z","repository":{"id":243368578,"uuid":"812242063","full_name":"fitri-hy/bee-framework","owner":"fitri-hy","description":"Bee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development.","archived":false,"fork":false,"pushed_at":"2024-06-11T10:47:41.000Z","size":725,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-19T23:37:19.823Z","etag":null,"topics":["bee-framework","framework","framework-javascript","frontend","frontend-framework","javascript","pure-javascript","routes","templates"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fitri-hy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-08T10:39:14.000Z","updated_at":"2024-06-11T10:47:45.000Z","dependencies_parsed_at":"2025-01-19T23:33:18.051Z","dependency_job_id":"9ecaeb31-5dc3-4264-8237-8b8bb614fff3","html_url":"https://github.com/fitri-hy/bee-framework","commit_stats":null,"previous_names":["fitri-hy/bee-framework"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitri-hy%2Fbee-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitri-hy%2Fbee-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitri-hy%2Fbee-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitri-hy%2Fbee-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fitri-hy","download_url":"https://codeload.github.com/fitri-hy/bee-framework/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243351858,"owners_count":20276911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bee-framework","framework","framework-javascript","frontend","frontend-framework","javascript","pure-javascript","routes","templates"],"created_at":"2024-11-19T01:23:42.246Z","updated_at":"2025-12-29T22:05:43.263Z","avatar_url":"https://github.com/fitri-hy.png","language":"JavaScript","readme":"\u003cimg src=\"./sss.png\"\u003e\n\n# Bee Framework\n\nBee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development. \n\n## Development\n```\ngit clone https://github.com/fitri-hy/bee-framework.git\ncd bee-framework\nnpm install\nnpm start\n```\n\n## Production\n- Build project: `npm run build`.\n- upload the `dist` folder to your hosting service.\n- Open Setup Node.js App\n- Set Application startup file: `server.js`\n\n## Using ApiService\n\n- Import ApiService\n\nImport ApiService from the appropriate path in any JavaScript file in your project.\n\n`import ApiService from '../services/ApiService';`\n\n- Use `getData` Method\n\nUse the `getData` method to retrieve data from the given URL.\n\n#### GET\n`const response = await ApiService.getData('http://api.example/data');`\n#### POST\n`const response = await ApiService.postData('http://api.example/data');`\n#### PUT\n`const response = await ApiService.putData('http://api.example/data');`\n#### DELETE\n`const response = await ApiService.deleteData('http://api.example/data');`\n\n#### Error Handling (optional)\n\nAdd error handling according to your needs.\n\n```\ntry {\n  const response = await ApiService.... // Method\n} catch (error) {\n  console.error('Failed to fetch data:', error);\n}\n```\n\n## Example GET Data From APIService\n\n### - Array Object\n```\nimport BeeComponent from '../components/BeeComponent';\nimport ApiService from '../../services/ApiService';\nimport Layout from '../Layout';\n\nclass Home extends BeeComponent {\n  constructor() {\n    super();\n    this.data = '';\n    this.loading = true;\n    this.init();\n  }\n\n  async init() {\n    this.render();\n    try {\n      const response = await ApiService.getData('http://api.example/data');\n      this.data = response || [];\n    } catch (error) {\n      console.error('Error loading data:', error);\n      this.data = [];\n    } finally {\n      this.loading = false;\n      this.render();\n    }\n  }\n\n  render() {\n    const content = this.loading ? this.loadingTemplate() : this.renderTemplate();\n    document.getElementById('app').innerHTML = new Layout().render(content);\n  }\n\n  loadingTemplate() {\n    return `\n      \u003cdiv id=\"loading\" class=\"absolute inset-0 flex justify-center items-center z-50\"\u003e\n        \u003cdiv class=\"bg-white p-5 rounded shadow-lg\"\u003e\n          \u003cp\u003eMemuat Data...\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    `;\n  }\n\n  renderTemplate() {\n    if (this.data.length \u003e 0) {\n      return `\n        \u003csection id=\"dataView\" class=\"py-20\"\u003e\n          \u003cdiv class=\"mx-auto w-7/8 flex justify-center items-center h-1/5\"\u003e\n            \u003cdiv class=\"w-7/8 mx-auto relative h-full z-30 pt-2 inter\"\u003e\n              ${this.data.map(item =\u003e `\n                \u003cdiv class=\"data-item\" id=\"item-${item.id}\"\u003e\n                  \u003cp\u003e${item.name}\u003c/p\u003e\n                \u003c/div\u003e\n              `).join('')}\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/section\u003e\n      `;\n    } else {\n      return `\u003cp\u003eError loading data. Please try again later.\u003c/p\u003e`;\n    }\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  new Home();\n});\n\nexport default Home;\n```\n### - Objects by ID\n```\n// ...\n// Script Same as before\n// ...\n\nrenderTemplate() {\n    const itemIdToShow = 2; // Misalnya, kita ingin menampilkan item dengan ID 2\n    const selectedItem = this.data.find(item =\u003e item.id === itemIdToShow);\n\n    if (selectedItem) {\n      return `\n        \u003csection id=\"dataView\" class=\"py-20\"\u003e\n          \u003cdiv class=\"mx-auto w-7/8 flex justify-center items-center h-1/5\"\u003e\n            \u003cdiv class=\"w-7/8 mx-auto relative h-full z-30 pt-2 inter\"\u003e\n              \u003cdiv class=\"data-item\" id=\"item-${selectedItem.id}\"\u003e\n                \u003cp\u003e${selectedItem.name}\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/section\u003e\n      `;\n    } else {\n      return `\u003cp\u003eError loading data. Item with ID ${itemIdToShow} not found.\u003c/p\u003e`;\n    }\n}\n\n// ...\n// Script Same as before\n// ...\n```\n### - Single Object\n```\n// ...\n// Script Same as before\n// ...\n\nasync init() {\n    this.render();\n    try {\n        const response = await ApiService.getData('http://api.example/data');\n        this.data = response.length \u003e 0 ? response[0] : null;\n    } catch (error) {\n        console.error('Error loading data:', error);\n        this.data = null;\n    } finally {\n        this.loading = false;\n        this.render();\n    }\n}\n\n// ...\n// Script Same as before\n// ...\n\nrenderTemplate() {\n    if (this.data) {\n        return `\n        \u003csection id=\"dataView\" class=\"py-20\"\u003e\n            \u003cdiv class=\"mx-auto w-7/8 flex justify-center items-center h-1/5\"\u003e\n                \u003cdiv class=\"w-7/8 mx-auto relative h-full z-30 pt-2 inter\"\u003e\n                    \u003cdiv class=\"data-item\" id=\"item-${this.data.id}\"\u003e\n                        \u003cp\u003e${this.data.name}\u003c/p\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/section\u003e\n        `;\n    } else {\n        return `\u003cp\u003eError loading data. Please try again later.\u003c/p\u003e`;\n    }\n}\n\n// ...\n// Script Same as before\n// ...\n\n```\n## Example POST Data From APIService\n```\nimport BeeComponent from '../components/BeeComponent';\nimport ApiService from '../../services/ApiService';\nimport Layout from '../Layout';\n\nclass Home extends BeeComponent {\n  constructor() {\n    super();\n    this.render();\n    this.setupFormEventListener();\n  }\n  \n  async handleFormSubmit(event) {\n    event.preventDefault();\n    const formData = new FormData(event.target);\n    const usersName = formData.get('usersName');\n\n    try {\n      const response = await ApiService.postData('http://api.example/data', { name: usersName });\n      console.log('Data successfully submitted:', response);\n    } catch (error) {\n      console.error('Error submitting data:', error);\n    }\n  }\n\n  setupFormEventListener() {\n    document.getElementById('addForm').addEventListener('submit', this.handleFormSubmit.bind(this));\n  }\n\n  render() {\n    const content = this.renderTemplate();\n    document.getElementById('app').innerHTML = new Layout().render(content);\n  }\n\n  renderTemplate() {\n    return `\n      \u003csection id=\"dataView\" class=\"py-20\"\u003e\n        \u003cdiv class=\"mx-auto w-7/8 flex justify-center items-center h-1/5\"\u003e\n          \u003cdiv class=\"w-7/8 mx-auto relative h-full z-30 pt-2 inter\"\u003e\n            \u003cform id=\"addForm\" class=\"mt-4\"\u003e\n              \u003clabel for=\"usersName\"\u003eUser Name:\u003c/label\u003e\u003cbr\u003e\n              \u003cinput type=\"text\" id=\"usersName\" name=\"usersName\"\u003e\u003cbr\u003e\n              \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n            \u003c/form\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    `;\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e new Home());\n\nexport default Home;\n\n```\n\n## Example PUT Data From APIService\n```\nimport BeeComponent from '../components/BeeComponent';\nimport ApiService from '../../services/ApiService';\nimport Layout from '../Layout';\n\nclass Home extends BeeComponent {\n  constructor() {\n    super();\n    this.render();\n    this.setupFormEventListener();\n  }\n  \n  async handleFormSubmit(event) {\n    event.preventDefault();\n    const formData = new FormData(event.target);\n    const formName = formData.get('formName');\n    const selectedId = formData.get('selectedId');\n\n    try {\n      // Get Data From API\n      const data = await ApiService.getData('http://api.example/data');\n      \n      // Search products by id\n      const dataToUpdate = data.find(putData =\u003e putData.id === parseInt(selectedId));\n      \n      if (!dataToUpdate) throw new Error('Product not found');\n      \n      // Data update process\n      dataToUpdate.name = formName;\n      \n      // Submit data editing requests to API\n      const response = await ApiService.updateData(`http://api.example/data/${selectedId}`, { name: formName });\n      console.log('Data successfully edited:', response);\n    } catch (error) {\n      console.error('Error editing data:', error);\n    }\n  }\n\n  setupFormEventListener() {\n    document.getElementById('dataForm').addEventListener('submit', this.handleFormSubmit.bind(this));\n  }\n\n  render() {\n    const content = this.renderTemplate();\n    document.getElementById('app').innerHTML = new Layout().render(content);\n  }\n\n  renderTemplate() {\n    return `\n      \u003csection id=\"dataView\" class=\"py-20\"\u003e\n        \u003cdiv class=\"mx-auto w-7/8 flex justify-center items-center h-1/5\"\u003e\n          \u003cdiv class=\"w-7/8 mx-auto relative h-full z-30 pt-2 inter\"\u003e\n            \u003cform id=\"dataForm\" class=\"mt-4\"\u003e\n              \u003clabel for=\"selectedId\"\u003eSelect ID:\u003c/label\u003e\u003cbr\u003e\n              \u003cinput type=\"text\" id=\"selectedId\" name=\"selectedId\"\u003e\u003cbr\u003e\n              \u003clabel for=\"formName\"\u003eNew Name:\u003c/label\u003e\u003cbr\u003e\n              \u003cinput type=\"text\" id=\"formName\" name=\"formName\"\u003e\u003cbr\u003e\n              \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n            \u003c/form\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    `;\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e new Home());\n\nexport default Home;\n\n```\n\n## Example DELETE Data From APIService\n```\nimport BeeComponent from '../components/BeeComponent';\nimport ApiService from '../../services/ApiService';\nimport Layout from '../Layout';\n\nclass Home extends BeeComponent {\n  constructor() {\n    super();\n    this.render();\n    this.setupFormEventListeners();\n  }\n\n  async handleFormSubmit(event) {\n    event.preventDefault();\n    const formData = new FormData(event.target);\n    const selectedId = formData.get('selectedId');\n\n    try {\n      const response = await ApiService.deleteData(`http://api.example/data/${selectedId}`);\n      console.log('Data successfully deleted:', response);\n    } catch (error) {\n      console.error('Error deleting data:', error);\n    }\n  }\n\n  setupFormEventListeners() {\n    document.getElementById('deleteForm').addEventListener('submit', this.handleFormSubmit.bind(this));\n  }\n\n  render() {\n    const content = this.deleteFormTemplate();\n    document.getElementById('app').innerHTML = new Layout().render(content);\n  }\n\n  deleteFormTemplate() {\n    return `\n      \u003csection id=\"deleteView\" class=\"py-20\"\u003e\n        \u003cdiv class=\"mx-auto w-7/8 flex justify-center items-center h-1/5\"\u003e\n          \u003cdiv class=\"w-7/8 mx-auto relative h-full z-30 pt-2 inter\"\u003e\n            \u003cform id=\"deleteForm\" class=\"mt-4\"\u003e\n              \u003clabel for=\"selectedId\"\u003eSelect ID to Delete:\u003c/label\u003e\u003cbr\u003e\n              \u003cinput type=\"text\" id=\"selectedId\" name=\"selectedId\"\u003e\u003cbr\u003e\n              \u003cbutton type=\"submit\"\u003eDelete\u003c/button\u003e\n            \u003c/form\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    `;\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e new Home());\n\nexport default Home;\n```\n\n## Using Routing\n```\n# Path: src/routes/Route.js\n\nimport Home from '../templates/pages/Home';\n// Add other import pages here ...\n\nimport DomUtils from '../utils/DomUtils';\n\nconst routes = [\n  {\n    path: '/',\n    component: Home,\n    meta: {\n      title: 'Welcome to Bee Framework | More Agile and Efficient User Interface',\n      description: 'Bee Framework is a pure JavaScript framework designed to build lightweight and efficient user interfaces (UI), ensuring optimal performance and easy development.',\n      keywords: 'Bee Framework, JavaScript, user interface, UI, web application, efficient, light, optimal performance'\n    }\n  },\n  // Add another route path here ...\n];\n\n// Other scripts ...\n\nexport { routes, handleRouteChange };\n```\n\n## Using AOS (Animation On Scroll)\n- Install AOS (Animation On Scroll) using Yarn, Npm, Bower.\n```\nyarn add aos\nnpm install aos --save\nbower install aos --save\n```\n- Open Files: `src/templates/Layout.js`\n```\nimport Header from './components/Header';\nimport Footer from './components/Footer';\n...\n\n// == ADD == //\nimport AOS from 'aos';\nimport 'aos/dist/aos.css';\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  AOS.init();\n});\n// ========= //\n\nclass Layout {\n...\n```\n- Add: data-aos=\"---\" to the html element. look at the official site: \u003ca href=\"https://michalsnik.github.io/aos/\"\u003eOfficial AOS\u003c/a\u003e.\n\n## Support\n- .js | .jsx | .tsx\n- Sass (.scss)\n- Tailwind CSS\n- AOS (Animation On Scroll)\n- Dark / Light Mode\n- Routing\n- Templating / Layouting\n- Api Services\n- Any more ...\n\n## Folder Structure\n```\nBeeFramework/\n├── public/\n│   ├── index.html\n│   └── styles.css\n├── src/\n│    ├── assets/\n│    │    └── css/\n│    │          ├── global.css\n│    │          └── style.scss\n│    ├── models/\n│    │    └── Model.js\n│    ├── routes/\n│    │    └── Route.js\n│    ├── services/\n│    │    └── ApiService.js\n│    ├── templates/\n│    │    ├── components/\n│    │    │    ├── BeeComponent.js\n│    │    │    ├── DarkMode.js\n│    │    │    ├── Footer.js\n│    │    │    └── Header.js\n│    │    ├── pages\n│    │    │    ├── Home.js\n│    │    │    ├─ About.js\n│    │    │    └── 404.js\n│    │    └── Layout.js\n│    ├── utils/\n│    │    └── DomUtils.js\n│    └── App.js\n├── package.json\n├── package-lock.json\n├── postcss.config.js\n├── tailwind.config.js\n├── webpack.config.js\n└── yarn.lock\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitri-hy%2Fbee-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffitri-hy%2Fbee-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitri-hy%2Fbee-framework/lists"}