Solidum is a powerful and comprehensive development toolkit designed specifically for SolidJS, aiming to enhance development efficiency and code maintainability. Inspired by Angular, Solidium integrates advanced features such as IoC (Inversion of Control), annotations, services, and AOP (Aspect-Oriented Programming) to help developers build and maintain complex applications.
Solidium's design philosophy is similar to Angular, particularly in the way it handles dependency injection, annotations, and service layers. These core features enable developers to create modular, maintainable, and testable applications:
- Inversion of Control (IoC) and Dependency Injection: Solidium provides a robust dependency injection mechanism, making the dependencies between components and services clearer and more manageable. With decorator-based configuration, developers can easily define and inject dependencies, improving code testability and modularity.
- Decorator System: Solidium's decorator system allows developers to implement features such as signals, storage, and HTTP requests using simple decorator syntax.
- Service Layer: Solidium emphasizes a service-oriented architecture where business logic and data management are encapsulated within services. This is similar to Angular's approach, ensuring that business logic is separated from the UI components, promoting code reuse and modularity.
- Aspect-Oriented Programming (AOP): Solidium offers comprehensive AOP support, allowing developers to define aspects and pointcuts through annotations. This enables the addition of features such as logging, performance monitoring, and security checks without altering the core business logic.
Solidium emphasizes the development principle of separating view and business logic, bringing numerous benefits:
-
Enhanced Maintainability: The separation of view and business logic results in more modular code, making maintenance and extension easier while reducing the risk of introducing errors during modifications.
-
Improved Testability: Independent business logic can be tested separately, simplifying unit and integration testing, making them more reliable.
-
Increased Development Efficiency: Clear responsibility division enables developers to focus on specific tasks, improving development speed and efficiency. Frontend and backend development can proceed in parallel, further accelerating project progress.
-
Better Code Reusability: Independent business logic modules can be reused across multiple views, reducing code duplication and enhancing code reuse and consistency.
-
Improved Project Structure: A separated architecture results in a clearer project structure, facilitating team collaboration and code management, and lowering the learning curve for new team members.
-
Simplicity and Strong Extensibility: Solidium is designed with simplicity in mind, ensuring ease of use and strong extensibility. It provides a straightforward and intuitive API for managing state in your SolidJS applications.
-
IoC Container and AOP Support: Solidium goes beyond basic state management by offering an Inversion of Control (IoC) container. It supports Aspect-Oriented Programming (AOP) principles and features like
IntantiationAwareProcessor
. Dependency injection and decorators are seamlessly integrated for enhanced flexibility. -
Code Organization and Dependency Visualization: With Solidium, organizing your code becomes a breeze. The library facilitates clear dependency relationships between different modules in your application. Additionally, Solidium can generate dependency diagrams or graphs, providing a visual representation of your application's architecture.
-
Optimized for SolidJS Performance: Leveraging the outstanding features of SolidJS, Solidium is able to achieve superior performance . You can benefit from SolidJS's reactivity model and efficient rendering to build high-performance user interfaces for your applications.
Solidium is committed to continually expanding and optimizing its features to meet the evolving needs of developers. In the future, Solidium will:
-
Expand Decorator Features: Cover more application scenarios, such as form validation and cache management, further simplifying developers' work.
-
Provide Rich Plugin Support: Introduce a plugin mechanism allowing community developers to create and share plugins, enriching the ecosystem to meet customization needs.
-
Strengthen Integration with Other Libraries and Frameworks: Offer integration support with other popular libraries and frameworks, such as Redux and React Router, enabling developers to seamlessly incorporate Solidium's features into existing projects.
-
Optimize Performance and Development Experience: Continuously optimize the library's performance to ensure efficient operation in large projects. Provide detailed documentation and abundant examples to improve the learning curve and user experience for developers.
import { Solidium, useService, Signal, Computed } from '@vgerbot/solidium';
// Define a service using Solidium
class CounterService {
@Signal
public count: number = 0;
@Computed
public get double() {
return this.count * 2;
}
public increment() {
this.count ++;
}
}
// Main Application Component
function App() {
return <Solidium>
<ShowCount />
<IncrementCount/>
</Solidium>
}
// Component displaying count and double from CounterService
function ShowCount() {
const service = useService(CounterService);
return <div>
count: {service.count}
double: {service.double}
</div>
}
// Component incrementing count in CounterService
function IncrementCount() {
const service = useService(CounterService);
return <button onClick={() => service.increment()}></button>
}
Explanation:
- Reactive State with @Signal:
Use the
@Signal
decorator to make thecount
property ofCounterService
reactive. Any changes tocount
will automatically trigger reactivity. - Computed Properties with @Computed:
Utilize the
@Computed
decorator for thedouble
property inCounterService
. This property is automatically cached, preventing unnecessary recomputation when dependent signals remain unchanged. - Shared CounterService Instance:
Both
ShowCount
andIncrementCount
components share the same instance ofCounterService
, obtained from the Inversion of Control (IoC) container using theuseService
hook. This ensures they operate on the same reactive state.
For detailed usage instructions, check out our Documentation
We welcome contributions! If you find a bug or have a feature request, please open an issue. For pull requests, please follow our contribution guidelines.
This project is licensed under the MIT License.