https://github.com/rpdevjesco/inspiredjsframework
https://github.com/rpdevjesco/inspiredjsframework
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/rpdevjesco/inspiredjsframework
- Owner: RPDevJesco
- Created: 2024-07-07T04:24:13.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-09T01:38:57.000Z (about 2 years ago)
- Last Synced: 2025-10-30T23:31:28.846Z (9 months ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom Web Component Framework
This custom JavaScript framework is designed to create reusable web components with a reactive state management system. It draws inspiration from several popular front-end frameworks and libraries, combining their best features with the power of native Web Components.
## Inspirations and Similarities
### 1. Web Components
The framework is built on the Web Components standard, extending `HTMLElement` and utilizing Shadow DOM. This provides a native, framework-agnostic approach to creating reusable components.
### 2. React
- **State Management**: The `setState` method and the use of a proxy for reactive updates are reminiscent of React's state handling.
- **Lifecycle Methods**: Methods like `componentDidMount` and `componentWillUnmount` are similar to React's class component lifecycle methods.
### 3. Vue.js
- **Template Syntax**: The use of double curly braces `{{}}` for data binding in templates is very similar to Vue.js's template syntax.
### 4. Angular
- **Attribute Binding**: The `[bind]` attribute for two-way data binding is reminiscent of Angular's property binding syntax.
### 5. Svelte
- **Reactivity**: The framework automatically updates the DOM when state changes, without using a virtual DOM, similar to Svelte's approach to reactivity.
### 6. Polymer
- **Custom Element Definition**: The overall structure of defining custom elements and the use of HTML templates is reminiscent of the Polymer library.
### 7. Ember
- **Computed Properties**: The `defineComputedProperty` method allows for defining computed properties that automatically update, similar to Ember's computed properties.
### 8. LitElement
- **Template Handling**: The asynchronous template loading and rendering process is somewhat similar to how LitElement handles templates, although this framework uses external HTML files instead of template literals.
### 9. Backbone
- **Custom Events**: The `dispatchCustomEvent` method for creating and dispatching custom events is reminiscent of Backbone's event system.
### 10. Salesforce Lightning Web Components (LWC)
- **Web Components Base**: Like LWC, this framework is built on top of the Web Components standards.
- **Template Separation**: The approach of loading templates from external files is similar to how LWC separates HTML templates from JavaScript files.
- **Reactive Properties**: The reactive nature of the state and how it automatically updates the view when changed is very similar to LWC's reactive property system.
- **Event Handling**: The way events are bound using attributes (e.g., `on="click:{{handleClick}}"`) is similar to LWC's event handling syntax.
- **Lifecycle Hooks**: The use of lifecycle methods like `connectedCallback` and `disconnectedCallback` directly mirrors LWC's lifecycle hooks.
- **Attribute Observation**: The `observedAttributes` getter and `attributeChangedCallback` method closely resemble LWC's way of observing and reacting to attribute changes.
## Unique Features
While drawing inspiration from these various frameworks, this custom framework also introduces its own unique features:
1. **External Template Loading**: Unlike many frameworks that use inline templates or JavaScript template literals, this framework loads HTML templates from external files, promoting a clean separation of concerns.
2. **Automatic Event Cleanup**: The framework automatically tracks and cleans up event listeners when components are removed from the DOM, helping to prevent memory leaks.
3. **Theme Application**: The `applyTheme` method provides an easy way to apply CSS variables for theming components.
4. **Slot Rendering**: The framework includes built-in support for rendering slot content, making it easy to create composable components.
5. **Async Rendering**: The rendering process is asynchronous, allowing for better performance and the ability to handle asynchronous template loading.
This framework combines the strengths of various popular front-end technologies while leveraging the power of native Web Components, resulting in a flexible and efficient solution for building modern web applications.