Skip to main content

Fenice Framework

Overview​

Fenice is a versatile application framework designed to support both React Native mobile applications and Electron+ReactJS desktop applications. The framework provides a unified codebase that allows for efficient development across multiple platforms while maintaining platform-specific optimizations where needed.

Project Structure​

fenice/
├── config/          # contains environment-specific configurations and setup files
├── reader/          # Reader module (temporal folder to hold the remote reader bundle)
├── src/             # Source code
│   ├── assets/      # Static assets (images, fonts, etc.)
│   ├── components/  # Reusable UI components
│   ├── hooks/       # Custom React hooks
│   ├── locales/     # Internationalization files
│   ├── managers/    # Business logic managers
│   ├── navigation/  # Navigation configuration
│   ├── screens/     # Application screens/pages
│   ├── services/    # Service layer (API calls, utilities)
│   ├── state/       # State management (Redux store and actions)
│   ├── theme/       # Theming and styling
│   └── routes.js    # Route definitions
└── tenant/          # Client-specific customization module (GitLab submodule)

Key Features​

  • Cross-Platform Support: Built to work seamlessly on both mobile (React Native) and desktop (Electron) platforms
  • Customizable Theming: Flexible theming system for client-specific branding
  • Internationalization: Built-in support for multiple languages
  • State Management: Centralized state management architecture
  • Component Library: Extensive collection of reusable UI components
  • Custom Hooks: Shared business logic through React hooks
  • Navigation: Platform-specific navigation implementations
  • Service Layer: Abstracted service layer for API communications

Tenant Customization​

The framework includes a tenant module system that allows for client-specific customizations. This is managed through a GitLab submodule in the tenant/ directory, which contains:

  • Client-specific configurations
  • Custom theme overrides
  • Brand assets
  • Feature toggles
  • Custom components and overrides

Platform-Specific Implementation​

File Naming Convention​

  • .native.js - React Native specific implementations
  • .ios.js - React Native iOS specific implementations
  • .android.js - React Native Android specific implementations
  • .js - Web/Electron implementations
  • .js - Mixed implementations (React Native and Web/Electron)

Key Directories​

Components Directory​

The components/ directory contains all reusable UI elements organized by feature or functionality:

  • Platform-specific components: Separate implementations for mobile and desktop using the .native.js and .js extensions
  • Shared components: Common UI elements that work across all platforms
  • Higher-Order Components (HOCs): Component wrappers that add additional functionality
  • Layout components: Structural elements like containers, grids, and navigation bars
  • Form components: Input fields, buttons, and form-related UI elements

Services Directory​

The services/ directory handles business logic and external interactions:

  • Platform-specific services: Separate implementations for mobile and desktop using the .native.js and .js extensions
  • API Services: Handles all external API communications
  • Authentication: User authentication and authorization services
  • Data Processing: Services for data transformation and handling
  • Utility Services: Helper functions and shared business logic

Development​

Prerequisites​

  • Node.js
  • Yarn package manager
  • React Native development environment (for mobile)
  • Electron development environment (for desktop)

Getting Started​

  1. Install dependencies:

    yarn install
X

Graph View