octopus-js-native
v1.1.4
OctopusJS 🐙 | High-performance distributed intelligence frontend development framework.
0/weekUpdated yesterdayMITUnpacked: 67.6 KB
Published by Miguel Candeira Carrera
npm install octopus-js-nativeOctopusJS 🐙
Develop smart frontend components with the raw power of native HTML, CSS and JavaScript using this high-performance distributed intelligence framework.
-seagreen?style=for-the-badge&logo=octostop){kind=icon}
Render 1,000 reactive components in ~11ms (logic execution) using only native web standards.
>Check out the Live Demo.
+ What It Is
+ Advantages
+ Quick Start
+ How To Use
+ OctopusJS Features
+ Advanced Use Cases
+ Release Notes
+ Live Demo
+ Benchmarks & Comparison
+ Contact & Community
+ License & Acknowledgments
OctopusJS is a high-performance, distributed intelligence frontend development framework designed for web developers who demand an intuitive DX (Developer Experience) alongside "science-fiction" execution speeds.
Unlike traditional frameworks, OctopusJS does not alter the underlying behavior of web technologies. Instead, it leverages them directly, ensuring full compatibility with all native features. This allows developers to build sophisticated components without sacrificing the freedom and raw power of native HTML, CSS, and JavaScript.
To achieve this, OctopusJS distributes its logic across Octopus Components. These components represent a new paradigm in web development, allowing you to manage encapsulated logic, styles, and templates using pure web standards.
+ As fast as Vanilla: It sounds impossible, but it's real. Benchmarks show OctopusJS outperforming manual DOM manipulation in complex renders by using a highly optimized, near-browser logic that minimizes reflows.
+ Featherweight: At only 3.8kB Gzipped, it flies on any device and keeps the memory footprint at an absolute minimum.
+ True Encapsulation: Build truly independent components with scoped logic and styles without the complexity of Shadow DOM if you don't need it.
+ Raw Power: You have direct access to the full potential of the web platform. No abstractions to limit your creativity or performance.
+ Developer Friendly: Incredibly easy to pick up and lightning-fast to master.
+ Ecosystem Ready: Fully compatible with any other frontend library or backend framework. It plays well with others.
Test this quick example in less than 60 seconds:
+ Prepare your environment: Open VS Code and install the Live Preview extension.
+ Create the file: Create a new component.html file.
+ Paste the code: Copy and paste the following snippet:
`` html`
Quick OctopusJS Example 🐙
8{for movie in movies}
{{ movie.name }}
8{endfor}
+ Launch: Right-click on the code or on the name of the file and select "Show Preview". That's it!
$3
+ Experiment: Change the HTML code to whatever you want.
+ Program: Change all the JS code to whatever you want. OctopusJS only adds utility functions but you can manipulate the DOM directly.
+ Design: Change the CSS styles to whatever you want.
$3
To seriously use OctopusJS, continue reading.
You can integrate OctopusJS into your project using your preferred method:
#### 1\. Via NPM (Recommended for modern workflows)
Install the package using your favorite package manager:
`bash`
npm install octopus-js-native
Then, you can import it in your JavaScript modules:
`javascript`
import { octopus } from 'octopus-js-native'
#### 2\. Via CDN (Quick start)
For rapid prototyping or small projects, you can include OctopusJS directly from a CDN like Unpkg or JSDelivr:
`html`
#### 3\. Local Download
If you prefer total control, simply download the octopus.min.js file from the dist folder in our GitHub repository and include it in your project.
An Octopus Component is primarily defined by a block-level HTML element that acts as a wrapper for the component. Inside this wrapper you can place the structure, behavior and style of your component without worrying about anything outside the wrapper. Your Octopus Component always will work exactly as you designed it.
To learn how to use an Octopus Component, continue reading:
+ #### Create a wrapper for the Octopus Component:
First, you have to use a block-level HTML element (e.g.
) that serves as a wrapper for the Octopus Component. Then you can divide it conceptually into three sections: Structure, Behavior and Style.
`html
`+ #### Make the Structure of the Octopus Component:
In the Structure section you can use any HTML element you want. For example:
html
Octopus Component
8{if active}
The {{ name }} is here.
8{endif}
` Inside each
element you can define structural fragments that are not rendered initially but can be injected dynamically using JavaScript. In this case, we use the 8-branch octopus syntax (inspired by Twig Syntax) to inject dynamic values ("{{ val }}") and handle logic ("8{if condition} ... 8{endif}" or "8{for item in list} ... 8{endfor}").+ #### Code the Behavior of the Octopus Component:
To code the behavior of an Octopus Component you have to use an HTML
`
For example, we could take the code inside the
element and inject it in the structure. To do this, we will import the OctopusJS framework and use the class="octopus" attribute as follows:
`html
Octopus Component
8{if active}
The {{ name }} is here.
8{endif}
` (!) The
attribute: This helps OctopusJS identify and resolve the component's scope instantly. (!) The
this keyword: In a
`
(!) Best Practice: Use appropriate CSS combinators (like
) to target elements precisely within your component's scope.And that's it\! You now have a fully encapsulated, high-performance Octopus Component. You can drop it anywhere in your HTML, confident that its logic, structure, and styles will remain isolated and conflict-free. It just works, perfectly.
OctopusJS is built on an atomic architecture. To nest an Octopus Component inside another, you simply place it within the parent's structure. Each component remains an independent entity, managing its own scope, logic, and life cycle without interfering with its neighbors.
`html
Octopus Components
I am a nested child
Child render: Success!
Parent render: Also success!
`The OctopusJS library provides a robust API through the
"constant". It is designed to handle everything from DOM manipulation to complex inter-component state management.$3
Accessed via octopus.getComponent(), these methods provide granular control over the component's internal universe:*
ref: (Getter) Returns the native DOM reference of the component wrapper.
* getChild(selector): A scoped query selector to safely access elements within the component.
* set(prop, val): Set the property of the underlying HTML element.
* get(prop): Get the property value of the underlying HTML element.
* use(method, ...args): Invokes any native method of the underlying HTML element.
* deleteAll(selector): Efficiently removes all matching child elements from the DOM.
* onMount(callback): Executes code as soon as the component is effectively attached to the DOM.
* onUnmount(callback): Triggers when the component is removed from the DOM.
* render(input, position, relativeElement): The high-performance engine that injects templates or strings at abyssal speeds.$3
Built-in methods to bridge the gap between nested components:*
setProp() & getProp(): Allows a parent to pass data down to its children (Top-down data flow).
* sendParent() & listenChild(): Enables a child to emit data or signals up to its parent (Bottom-up event flow).$3
These functions allow any two components to talk to each other, even if they aren't related in the DOM tree:*
setVal() & getVal(): A lightweight global state manager to share reactive values.
* setHelper() & getHelper(): Register and reuse utility functions across your entire application.
* setAction() & triggerAction(): A powerful command pattern to trigger specific behaviors remotely.
* setSecret() & getSecret(): Unique Feature: Secure data sharing using password-protected keys for sensitive information.$3
* fullActive(): Enables OctopusJS to orchestrate all server-side information exchange, turning your app into a high-performance, reactive SPA (Single Page Application) engine.OctopusJS doesn't impose arbitrary limits on your creativity. Its architecture is designed to scale with your component's complexity.
+ #### Advanced Structure:
In an Octopus Component, everything outside of