مكتبتي

شريط جانبي متعدد الجذور

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

لكم
بيلايريم
سأكون كذلك.

نقوم بإنشاء أدوات تربط بين الواجهة الأمامية والخلفية مع التركيز على استقرار النوع وإنتاجية التفاعل.
الواجهة الأمامية: RxJS/React/Next · الخلفية: WebFlux/MongoDB
مفتوح المصدر
الواجهة الأمامية · RxJS
@byeolnaerim/typed-rx-http

عميل HTTP آمن من حيث النوع يعتمد على RxJS

HTTP
RxJS
العميل
npm i @byeolnaerim/typed-rx-http rxjs
الواجهة الأمامية · واجهة React
@byeolnaerim/flex-layout

مكون تخطيط React لعرض مقسم قابل لإعادة الحجم

React
عرض مقسم
قابل لإعادة الحجم
npm i @byeolnaerim/flex-layout rxjs react
الواجهة الأمامية · حالة React
@byeolnaerim/global-rx-state

حالة React صغيرة تقدم حالة عالمية مسماة تعتمد على RxJS وreducer، مع إمكانية الاستمرارية الاختيارية

React
RxJS
الحالة
npm i @byeolnaerim/global-rx-state rxjs react
الواجهة الخلفية · WebFlux
com.byeolnaerim:webflux-fe-dev-assistant

تقليل الكتابة المكررة مع الواجهة الأمامية من خلال إنشاء OpenAPI·AsyncAPI، هيكل المعالج، وتعداد حقول MongoDB بناءً على مصدر الواجهة الخلفية

WebFlux
OpenAPI
AsyncAPI
implementation("com.byeolnaerim:webflux-fe-dev-assistant:<version>")
الواجهة الخلفية · MongoDB
com.byeolnaerim:reactive-mongo-dsl

DSL لتكوين MongoDB Reactive Streams Driver وReactor بناءً على query·aggregation·lookup·atomic update·bulk·Atlas Search·Vector Search.

MongoDB
تفاعلي
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
تخطيط مرن
طريقة استخدام FlexLayout الأساسية

مثال على تكوين عرض مقسم قابل لإعادة الحجم بأبسط شكل.
اليسار هو الكود، واليمين يعرض الشاشة الفعلية بنفس الهيكل.

كود

import { FlexLayout, FlexLayoutContainer } from "@byeolnaerim/flex-layout";

<FlexLayout direction="column" layoutName="column-layout">
  <FlexLayoutContainer containerName="top-container" isResizePanel>
    <FlexLayout direction="row" layoutName="top-layout">
      <FlexLayoutContainer containerName="top-left" isResizePanel grow={1.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="top-right" grow={0.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="bottom-container">
    <FlexLayout direction="row" layoutName="bottom-layout">
      <FlexLayoutContainer containerName="bottom-left" isResizePanel grow={0.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="bottom-right" grow={1.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>
</FlexLayout>
© 2026 بيولناريم. جميع الحقوق محفوظة.مقدمةسياسة معالجة المعلومات الشخصية