Instroduction

Last updated: 19 days ago

Category: Get Started

Describe the development journey of the OrcaUI framework—it is both an accumulation of experience and a culmination of persistent effort. Staying true to our original vision, we remain committed to th...

Preface

OrcaUI is a self-contained UI framework that delivers the power and elegance of native Web Components. Like its namesake orca, it combines comprehensive features with intuitive usability - offering ready-to-use components that work across all modern browsers. Designed for developers who need production-ready UI solutions without framework dependencies.

We embrace a minimalist black-and-white philosophy - no over-engineering, no feature bloat, just pure, reliable web components. This simplicity enables beginners to get started in under 10 minutes while allowing professional developers to focus on business logic.

Simplicity is the ultimate sophistication - true technical power comes from mastering the essentials. We believe simple is powerful.

Directory Structure

The framework's code structure primarily consists of dist and src directories:

• dist: Production-ready files (generated from source files)
• src: Development files (TypeScript and Less modules)

Usage recommendations:

• For JavaScript development: Use files from dist directory
• For TypeScript development: Work with src directory files

Note: The src and types folders aren't publicly distributed by default since most users employ the framework as-is. Professional developers can download them separately from the resources section.

                      
dist/----------------Production environment files
|-- js/----------------JavaScript scripts folder
|   |-- orca.js------------UMD format
|   |-- orca.min.js--------Minified UMD format
|   |-- orca.cjs.js--------CJS format
|   |-- orca.cjs.min.js----Minified CJS format
|   |-- orca.esm.js--------ESM format
|   `-- orca.esm.min.js----Minified ESM format
|-- css/---------------CSS folder
|   |-- orca.css-----------Main stylesheet
|   `-- orca.min.css-------Minified main stylesheet
src/-----------------Development environment files (TS and LESS modules)
types/---------------TypeScript types folder
|-- rollup.config.js---Rollup config file
|-- package.json-------NPM config file
|-- tsconfig.json------TypeScript config file
                    
                

Usage Scenarios

The framework provides multiple formats for different needs:

File Formats

• Scripts: JavaScript and TypeScript
• Styles: CSS and Less
• dist: Compiled production files (JS/CSS)
• src: Source files (TS/Less)

Primary Use Cases:

1. Quick Results & Project Completion:

   • Use dist directory
   • No environment setup required (Node/NPM/TypeScript/Rollup/Webpack/Git)

2. Integration & Custom Development:

   • Use src directory
   • Requires full dev environment setup

Script Module Formats:

1. UMD:

   • Bundled modules/components/utils
   • Include via <script src="url"></script>
   • Access via orca.* namespace

2. ESM:

   • Standard ES modules (import/export)
   • Include via <script src="url" type="module"></script>

3. CJS:

   • CommonJS (exports/require)
   • Designed for Node (not recommended for frontend)

Note: While CJS is included, we recommend UMD/ESM for UI development.

Minified Files:

• Remove comments/whitespace
• Optimize variable names
• Smaller size, faster loading

Usage Guidelines:

• Debugging: Use non-minified versions
• Production: Use minified versions