Estre UI

클래식 웹과 네이티브 앱의 만남 Bridging Classic Web & Native Apps

Rimwork란? What is Rimwork?

Estre UI는 단순한 라이브러리가 아닌 "Runnable Frame"입니다. 필수적인 구조(Rim)와 라이프사이클을 제공하여, 여러분이 선호하는 도구로 내용을 채울 수 있게 합니다. Estre UI is a "Runnable Frame" that provides the essential structure (Rim) and lifecycle management, allowing you to fill in the content with your preferred tools.

주요 특징 Key Features

MVC Pattern

구조적인 관심사 분리 Structured separation of concerns

Lifecycle

네이티브 앱과 유사한 라이프사이클 Native-like page lifecycle

Native-like UI

부드러운 전환과 터치 인터랙션 Smooth transitions & touch interactions

jQuery 4.0

최신 jQuery 완벽 호환 Fully compatible with latest jQuery

## h2 { margin-top: 42px; } /* Local style for lifecycle visualization */ ## .lifecycle_list { position: relative; padding: 0; list-style: none; margin-left: 20px; border-left: 2px solid #ccc; } ## .lifecycle_item { position: relative; margin-bottom: 0; padding: 0; /* Layout wrapper only */ } /* Content Card - Moves on Hover */ ## .lifecycle_content { position: relative; padding: 10px 15px; border-radius: 0 8px 8px 0; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); margin-right: 50px; /* Space for the loop bracket */ background-color: #f9f9f9; /* Default backup */ } ## .lifecycle_item:hover .lifecycle_content { transform: translateX(5px); } /* Stem Connector - Attached to Content (moves with it) */ ## .lifecycle_content::before { content: ''; position: absolute; left: -20px; top: 50%; width: 20px; height: 2px; border-top: 2px solid #ccc; } /* Loop Visualization (Static Rail on Item) */ ## .lifecycle_item.loop_start::after { content: ''; position: absolute; right: 20px; width: 30px; top: 50%; bottom: 0; /* Center straight down */ border-top: 2px dashed #666; border-right: 2px dashed #666; border-top-right-radius: 12px; pointer-events: none; } ## .lifecycle_item.loop_conn::after { content: ''; position: absolute; right: 20px; width: 30px; top: 0; bottom: 0; /* Full height connection */ border-right: 2px dashed #666; pointer-events: none; } ## .lifecycle_item.loop_end::after { content: ''; position: absolute; right: 20px; width: 30px; top: 0; bottom: 50%; /* Top straight to center */ border-bottom: 2px dashed #666; border-right: 2px dashed #666; border-bottom-right-radius: 12px; pointer-events: none; } /* Arrow Head on loop_start (Back into Show) */ ## .loop_head_marker { position: absolute; right: 48px; top: 50%; /* Slightly overlap for seamless look */ width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid #666; /* Matching color, slightly larger */ transform: translateY(-50%); pointer-events: none; z-index: 10; /* Ensure on top of content */ } /* Loop Label code text */ ## .loop_label_marker { position: absolute; right: 0; top: 100%; /* Centered between Focus and Blur (approx middle of loop) */ transform: translate(50%, -50%) rotate(90deg); transform-origin: center center; font-size: 0.75rem; color: #555; background-color: #fcfcfc; /* Match bg to mask line */ padding: 2px 8px; white-space: nowrap; border-radius: 4px; pointer-events: none; z-index: 11; font-family: monospace; } /* Specific Colors - Applied to Content */ ## .lc_bring { background-color: #ECEFF1; border-left: 4px solid #B0BEC5; } ## .lc_open { background-color: #CFD8DC; border-left: 4px solid #90A4AE; } ## .lc_show { background-color: #B0BEC5; border-left: 4px solid #78909C; } ## .lc_focus { background-color: #90A4AE; border-left: 4px solid #607D8B; } ## .lc_blur { background-color: #FFE0B2; border-left: 4px solid #FF9800; } ## .lc_hide { background-color: #FFF3E0; border-left: 4px solid #FFB74D; } ## .lc_close { background-color: #FFF8E1; border-left: 4px solid #FFCC80; } ## .lc_release { background-color: #FFFAFA; border-left: 4px solid #FFE0B2; } ## .lifecycle_content code { background: #444; color: #81D4FA; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-family: monospace; }

소개 Introduction

EstreUI는 "Rimwork" (Runnable Frame)입니다. 클래식 웹 개발(jQuery 등)과 현대적인 네이티브 앱 경험 사이의 가교 역할을 합니다. EstreUI is a "Rimwork" (Runnable Frame). It bridges the gap between classic web development (jQuery, etc.) and modern native app experiences.

주요 특징 Key Features

  • MVC Pattern: 구조적인 관심사 분리. Structured separation of concerns.
  • Lifecycle: 네이티브 앱과 유사한 페이지 생명주기 관리. Native-like page lifecycle management.
  • Zero Build Step: 빌드 과정 없이 저장 후 즉시 실행. Run immediately after saving without any build process.
  • PWA & Hybrid Ready: 설치형 웹앱 및 스토어 배포 지원. Supports installable web apps and store deployment.

시작하기 Getting Started

Installation

npm create estreui@latest
# or
git clone https://github.com/SoliEstre/EstreUI.js.git

File Structure

  • index.html
    메인 진입점. "Rim" 역할을 합니다. Main entry point. Acts as the "Rim".
  • scripts/estreUi.js & scripts/main.js
    프레임워크 코어 및 애플리케이션 설정/로직. Framework core and application config/logic.
  • exported htmls (fixedTop.html, etc.)
    레이아웃 및 섹션별 분리된 HTML 파일들. Separate HTML files for layout and sections.
⚠️ 중요: PWA 캐시 관리 ⚠️ Important: PWA Cache Management

PWA가 기본 구현되어 있으므로, 코드를 수정하고 배포할 때 반드시 serviceWorker.js 내의 캐시 버전을 수동으로 업데이트해야 변경사항이 반영됩니다. Since there is no build step, you MUST manually update the cache version in serviceWorker.js when deploying changes to ensure users receive the updates.

핵심 개념 Core Concepts

Page System

EstreUI의 페이지는 웹 페이지보다는 Android Activity나 Fragment에 가깝습니다. EstreUI pages are closer to Android Activities or Fragments than traditional web pages.

Component (Section) (Screen Group, Bottom Tab) PID Prefix: =, Default ID: home
Container (Screen Feature) PID Prefix: #, Default ID: root
Article (Content View) PID Prefix: @, Default ID: main

PID (Page ID)

URL 라우팅 대신 PID와 Intent를 사용합니다. 단순히 페이지를 이동하는 것이 아니라, 다음 활동(Activity)을 시작하는 개념입니다. It uses PID and Intent instead of URL routing. It's not just navigating; it's starting the next Activity.

$s&m=home#root@main

Tip: 콘솔에서 pageManager.pages를 호출하면 등록된 페이지(호출 가능한 페이지) 및 PID를 확인할 수 있습니다. Check registered pages (callable pages) and PIDs by calling pageManager.pages in the console.

Lifecycle

  • onBring
    준비, DOM 생성 등 (Create) Preparation, DOM creation, etc. (Create)
  • onOpen
    DOM 준비 이후 초기화 (ViewCreated) Initialized after DOM ready (ViewCreated)
  • onShow
    화면에 표시됨 (Start) Visible on screen (Start)
  • pageManager.onShow(pid) or handle.show()
    onFocus*
    커서/입력 활성화 (Resume) Input/Cursor active (Resume)
  • onBlur*
    커서/입력 비활성화 (Pause) Input/Cursor inactive (Pause)
  • onHide
    화면에서 숨겨짐 (Stop) Hidden from screen (Stop)
  • onClose
    DOM 제거 전 정리 (DestroyView) Cleanup before DOM removal (DestroyView)
  • onRelease
    완전히 종료 (Destroy) Fully destroyed (Destroy)

* 표시된 항목은 현재 구현이 불완전하거나 실험적인 기능입니다. Marked items are currently incomplete or experimental.

Data Binding & Intent

Active Struct 시스템이 data-bind-* 속성을 통해 데이터를 UI에 자동 바인딩합니다. The Active Struct system automatically binds data to the UI via data-bind-* attributes.

  • Automatic: intentData가 변경되면 자동으로 반영됩니다. UI updates automatically when intentData changes.
  • Optimization: 여러 값을 한 번에 변경할 때는 handle.apply(data)를 사용하여 불필요한 오버헤드를 줄이세요. Use handle.apply(data) when updating multiple values to prevent unnecessary overhead.

UI/UX & 유틸리티 UI/UX & Utilities

  • UI Modes: vfv_scroll (기본), sv_scroll 등 다양한 스크롤 및 뷰포트 모드 지원. Supports various scroll/viewport modes like vfv_scroll (default), sv_scroll, etc.
  • Dialogs: estreAlert, estreConfirm, estreToast 등 비차단(Non-blocking) 네이티브 스타일 다이얼로그. Non-blocking native-style dialogs like estreAlert, estreConfirm, estreToast.
  • Local Style: <local-style> 태그와 ## 선택자를 사용하여 컴포넌트 단위 스타일 스코핑 지원. Supports scoped styling via <local-style> tag and ## selector.
  • Storage System: Local/Session Storage와 호환되는 Async Storage 및 자동 직렬화를 지원하는 Codded Storage 제공. (Native 앱 연동 시 Native Storage 맵핑) Provides Async Storage (compatible with Local/Session) and Codded Storage for auto-serialization. (Maps to Native Storage in app mode)

마이그레이션 가이드 Migration Guide

Classic Web (ASP/PHP/JSP) → EstreUI Classic Web (ASP/PHP/JSP) → EstreUI

  • SSR Hybrid: 초기 로드(`staticDoc`)에는 SSR을 사용할 수 있지만, 이후에는 SPA 경험을 위해 AJAX/Fetch를 사용해야 합니다. You can use SSR for the initial load (`staticDoc`), but use AJAX/Fetch afterwards to maintain the SPA experience.
  • AJAX Form: 페이지 새로고침(`form submit`) 대신 fetch와 EstreUI의 페이지 전환을 사용하세요. Replace full page reloads (`form submit`) with fetch calls and EstreUI page transitions.

Native App → EstreUI Native App → EstreUI

  • WVCA4EUI Wrapper: Flutter 기반 래퍼를 사용하여 앱 스토어에 배포하세요. PWA 캐싱과 웹뷰 헬퍼를 제공합니다. Use the Flutter-based wrapper to deploy to app stores. It handles PWA caching and WebView helpers. GitHub 저장소 방문 → Visit GitHub Repository →
  • Bridge Handler: JS ↔ Native 통신을 지원하여 네이티브 기능을 호출할 수 있습니다. Supports JS ↔ Native bridging to call native functions.

개발 시 주의사항 Development Cautions

iOS Memory Limits

iOS는 웹앱에 엄격한 메모리 제한이 있습니다. 이는 주로 페이지 로드 시점에 발생하며, onLoad 이후에는 영향이 적습니다. iOS has strict memory limits for web apps, mainly during initial load (less impact after onLoad).

  • 필요한 CSS만 분리하여 로드하거나 Lazy Loading <meta link="lazy">을 사용하세요. Split CSS or use Lazy Loading <meta link="lazy">.
  • 무거운 폰트 사용을 자제하고 스크립트에 defer를 사용하세요. Avoid heavy fonts and use defer for scripts.

기능 데모 Feature Demos

Dialogs

Toasts

Loading

관련 링크 Useful Links

Estre UI GitHub

Official Repository

App1 Example

Basic Implementation

APT Demo

Modern UI Demo

Mango Class

Live Education App

GMDG

Braille Viewer Utility