간단한 뉴스레터 신청부터 복잡한 기업 애플리케이션까지 양식은 디지털 세계 어디에나 있습니다. 기본 양식은 Formik 또는 React Hook Form과 같은 널리 사용되는 도구를 사용하여 쉽게 처리할 수 있지만 엔터프라이즈 수준 양식은 기존 솔루션이 해결하기 어려운 중요한 과제를 계속해서 제시합니다.
엔터프라이즈 수준 양식은 단순한 입력 필드와 제출 버튼 이상의 역할을 합니다. 이는 금융, 은행, 보험과 같은 산업에서 복잡한 워크플로의 중추입니다. 이러한 양식은 고급 기능, 확장성, 사용자 경험의 균형을 유지해야 하며 단순한 양식과 근본적으로 달라야 합니다.
대출 신청: 이자율, 월 상환금 및 부채-소득 비율 실시간으로요. 신용 점수 및 소득 확인 요건을 기준으로 최대 대출 금액과 같은 규정 준수 규칙을 시행해야 합니다.
세금 신고: 다양한 소득원, 공제 및 세금. 세무 당국 규칙을 검증하고, 여러 세션에 걸쳐 초안 저장을 지원하고, 항목별 공제 및 표준 공제와 같은 복잡한 워크플로를 통해 사용자를 안내해야 합니다.
: 청구 유형(자동차, 집, 생명) 및 보험 세부 정보에 따라 조정되는 정교한 양식입니다. 기존 고객 데이터를 사용하여 필드를 미리 채우고, 증거 첨부 파일을 처리하고, 복잡한 확인 규칙(예: 청구 금액이 정책 한도를 초과할 수 없음)을 구현하고, 다양한 보험 상품 전반에 걸쳐 일관된 브랜드를 유지하여 경쟁사와 차별화합니다. .
업무상 중요하지만 비용이 많이 드는 이러한 양식을 저는 "엔터프라이즈 수준 양식"이라고 부릅니다.
엔터프라이즈 수준
비기술적 이해관계자 참여: 대출은 일반적으로 비기술적 이해관계자가 보유한 전문 지식인 재무, 회계 및 법률 분야의 전문 지식을 포함하는 복잡합니다. 이러한 이해관계자는 "신청자의 신용 점수가 650점 미만인 경우 공동 서명자가 필요합니다." 또는 "월 총 소득을 다음으로 나누어 소득 대비 부채 비율을 계산합니다."와 같은 복잡한 비즈니스 규칙을 이해합니다. 월별 부채 총액". 중요한 과제는 이러한 이해관계자가 개발자에게 모든 규칙을 가르치는 데 과도한 시간을 들이지 않고도 양식 디자인을 효율적으로 이끌도록 하는 동시에 극단적인 경우를 처리하기 위한 원활한 협업을 보장하는 것입니다.
브랜드 UI 및 맞춤형 UX: 개발자도 중요합니다! 회사는 틀에 박힌 형태의 디자인을 원하지 않습니다. 모든 진지한 기업은 브랜드를 구축하고 고유한 사용자 경험을 제공하기를 원하며, 이를 달성하려면 개발자 전문 지식이 필요합니다. 예를 들어, 은행은 대출 신청이 브랜드 색상과 일치하도록 하거나, 사용자 정의 입력 구성 요소를 사용하거나, "개인 정보", "고용 세부정보" 및 "대출 조건".
계산, 공식 및 동적 동작: 대출 신청서에는 다양하고 복잡한 실시간 계산과 동적 동작이 필요할 수 있습니다.
자동 저장 및 재개: 복잡한 양식에는 수백 개의 필드가 있을 수 있습니다. 사용자는 실수로 브라우저를 닫은 경우 다시 시작하고 싶지 않습니다.
기타 기술적 과제:
이것은 특정 시나리오에 특정한 틈새 문제가 아니라 기업이 복잡한 양식을 작성할 때 직면하는 일반적인 과제입니다. 비즈니스 복잡성, 기술 요구 사항 및 사용자 경험 요구 사항이 결합되어 기업 수준 양식을 효과적으로 구현하는 것이 특히 어렵습니다.
Formik 및 React Hook Form과 같은 인기 있는 양식 라이브러리는 기본 양식을 처리하는 데 탁월하지만 기업 요구 사항을 염두에 두고 구축되지 않았습니다. 이전에 논의한 과제의 맥락에서 이러한 도구를 검토하면 다음과 같은 몇 가지 제한 사항이 분명해집니다.
현재 양식 라이브러리는 개발자 중심이므로 양식 논리를 정의하려면 JavaScript/TypeScript 지식이 필요합니다.
이를 통해 사용자 정의 기능이 강화되지만 복잡한 규칙이 포함된 양식을 전달하는 효율성이 크게 감소됩니다. 예:
양식 규칙에 복잡한 계산이 포함되는 경우 이해관계자는 "최대 대출 금액을 연 소득의 4배로 계산하세요"와 같은 구두 설명을 사용하여 개발자에게 단계별로 설명해야 합니다. , 신용 점수가 700점 미만인 경우 15%로 조정되고, 총 월 소득에 대한 기존 월별 부채 지불 비율만큼 추가로 감소하며, 고용 이력이 적은 경우 추가로 10% 감소합니다. 2년 이상", 비록 이러한 계산이 해당 전문 분야에서는 상식일 수도 있습니다.
대출 한도 조정 등 양식 규칙을 수정해야 하는 경우 이해관계자는 여전히 개발자에게 변경 사항을 적용해야 하므로 프로세스가 길어지고 배송 시간이 길어집니다.
두 기존 라이브러리 모두 이러한 측면에서 뛰어나며(개발자 중심 특성으로 인해) 강력한 사용자 정의 기능을 제공합니다. 예를 들어 React Hook Form은 제어된 입력 구성 요소를 조정하기 위한 컨트롤러 구성 요소를 제공합니다.
기존 라이브러리는 "단순한" 계산 기능을 제공하지만 복잡한 계산을 위한 추상화 및 구성 기능이 부족합니다.
React Hook Form에서 대출 계산기 구현을 고려해보세요.
function LoanForm() {
const { watch, setValue } = useForm()
const [loanAmount, interestRate, term] = watch([
'loanAmount',
'interestRate',
'term',
])
useEffect(() => {
if (loanAmount && interestRate && term) {
const monthlyRate = interestRate / 100 / 12
const months = term * 12
const payment =
(loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
(Math.pow(1 + monthlyRate, months) - 1)
setValue('monthlyPayment', payment.toFixed(2))
}
}, [loanAmount, interestRate, term, setValue])
return (
<form>
{/* ... */}
<input type="number" {...register('monthlyPayment')} />
{/* ... */}
</form>
)
}
이 접근 방식에는 몇 가지 단점이 있습니다.
이러한 라이브러리에는 자동 저장 및 재개를 위한 내장 솔루션이 없습니다. 자동 저장 기능을 구현하려면 중요한 사용자 정의 코드가 필요합니다. 개발자는 다음을 처리해야 합니다.
이러한 제한으로 인해 엔터프라이즈 애플리케이션에 상당한 개발 오버헤드, 출시 기간이 길어지고 유지 관리 비용이 높아집니다. 해결 방법이 존재하더라도 유지 관리 및 확장이 어려운 복잡하고 부서지기 쉬운 솔루션이 되는 경우가 많습니다.
FormML은 다음 섹션에서 살펴보겠지만 기업 수준 양식을 위해 특별히 설계된 도메인별 언어와 아키텍처를 통해 이러한 문제를 해결합니다.
FormML(Form Modeling Language의 약자)은 "공식"으로 발음되며 엔터프라이즈 수준 양식의 과제를 해결하기 위해 특별히 설계된 새로운 오픈 소스 프레임워크입니다. 다른 도구가 남긴 공백을 메우는 방법은 다음과 같습니다.
"Form Modeling Language"라는 정식 이름에서 알 수 있듯이 FormML은 직관적이고 개발자에게 친숙하지 않은 도메인 특정 언어(DSL)를 도입합니다. 간단한 구조, 최소한의 구문 및 자연스러운 용어를 사용하면 금융 전문가, 법률 전문가 및 기타 비기술적 이해관계자가 프로그래밍 기술 없이도 양식을 모델링할 수 있습니다.
프로그래밍 지식이 없는 숙련된 회계사가 실행 가능한 가장 간단한 세금 작성 양식을 단 5분 안에 작성할 수 있습니다.
function LoanForm() {
const { watch, setValue } = useForm()
const [loanAmount, interestRate, term] = watch([
'loanAmount',
'interestRate',
'term',
])
useEffect(() => {
if (loanAmount && interestRate && term) {
const monthlyRate = interestRate / 100 / 12
const months = term * 12
const payment =
(loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
(Math.pow(1 + monthlyRate, months) - 1)
setValue('monthlyPayment', payment.toFixed(2))
}
}, [loanAmount, interestRate, term, setValue])
return (
<form>
{/* ... */}
<input type="number" {...register('monthlyPayment')} />
{/* ... */}
</form>
)
}
FormML은 UI 표현에서 양식 로직을 깔끔하게 분리하는 강력한 모델-뷰 분리 아키텍처를 사용합니다. 도메인 전문가는 FormML DSL을 사용하여 .fml 파일에서 양식의 구조, 유형 및 동작("모델")을 정의합니다.
이러한 분리를 통해 개발자는 기본 비즈니스 로직에 대해 걱정할 필요 없이 다른 양식 라이브러리와 동일한 유연성을 사용하여 세련된 사용자 정의 UI 환경('뷰')을 만드는 데 전적으로 집중할 수 있습니다.
function LoanForm() {
const { watch, setValue } = useForm()
const [loanAmount, interestRate, term] = watch([
'loanAmount',
'interestRate',
'term',
])
useEffect(() => {
if (loanAmount && interestRate && term) {
const monthlyRate = interestRate / 100 / 12
const months = term * 12
const payment =
(loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
(Math.pow(1 + monthlyRate, months) - 1)
setValue('monthlyPayment', payment.toFixed(2))
}
}, [loanAmount, interestRate, term, setValue])
return (
<form>
{/* ... */}
<input type="number" {...register('monthlyPayment')} />
{/* ... */}
</form>
)
}
FormML은 동적 동작을 일류 시민으로 취급합니다. JavaScript 표현식 또는 Excel과 유사한 수식 시스템(WIP)을 사용하여 DSL에서 직접 실시간 계산을 지원합니다. 예를 들어, 위 예의 입력 필드를 기반으로 세금을 계산하는 것은 간단하며 최소한의 노력만 필요합니다.
FormML은 자동 저장 및 재개를 일류 시민으로 취급합니다. 상태 지속성, 충돌 해결, 데이터 동기화, 진행률 추적 및 오류 복구를 즉시 지원할 계획입니다.
기본 형식은 대부분 해결되었지만 기업 수준 형식은 계속해서 고유한 과제를 제시합니다. FormML은 강력함, 유연성, 사용 편의성의 균형을 갖춘 포괄적인 솔루션을 제공하여 이러한 지속적인 문제를 해결하는 데 한발 더 나아갔습니다.
복잡한 계산, 동적 동작 또는 팀 간 협업으로 어려움을 겪고 있는 경우 FormML은 기업 수준의 양식 문제를 위해 특별히 설계된 프레임워크를 제공합니다.
기업 형태의 과제를 해결할 준비가 되셨나요? X나 Bluesky에서 내 계정을 팔로우하고, 첫 출시 후 사용해 보세요!
위 내용은 기본 양식을 넘어서: 엔터프라이즈 수준 양식이 여전히 과제로 남아 있는 이유(및 FormML이 이를 해결하는 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
