난 더 이상 배우기 싫어, 문서 보고 싶지 않아. 그냥 쓸 수 있어? ofa.js를 먼저 배우지 않아도, 이를 기반으로 개발된 컴포넌트를 바로 재사용할 수 있습니다.
오픈소스 컴포넌트 작성자가 코드를 작성한 후, 다른 사람들은 예시를 따라 몇 줄만 복사하면 바로 기능을 자신의 프로젝트에 가져올 수 있습니다.
ofa.js
점진적 마이크로 프론트엔드 프레임워크
간단한 페이지 구축, 인터랙티브 앱 제작, 복잡한 시스템 구성에 이르기까지 ofa.js는 능숙하게 대응합니다.
거의 만능에 가까운 프론트엔드 프레임워크
어떤 애플리케이션 시나리오든 ofa.js를 사용하기에 적합합니다.
난 더 이상 배우기 싫어, 문서 보고 싶지 않아. 그냥 쓸 수 있어? 
낡은 프로젝트에 임시로 기능 하나 추가하고 싶어 
나는 개발 초보야, Nodejs와 npm 때문에 포기할 뻔했어 
거대한 쇼핑몰 시스템을 개발하는데, 여러분이 버틸 수 있나요? 
나는 백엔드 개발자야, 백엔드 템플릿 엔진으로만 개발하고 싶은데 ofa.js를 사용해도 괜찮을까? 난 더 이상 배우기 싫어, 문서 보고 싶지 않아. 그냥 쓸 수 있어? 낡은 프로젝트에 임시로 기능 하나 추가하고 싶어 기존 프로젝트에 script 태그로 ofa.js를 추가하기만 하면 즉시 사용할 수 있습니다.
추가한 후에는 다양한 컴포넌트를 쉽게 가져다 쓸 수 있습니다.
나는 개발 초보야, Nodejs와 npm 때문에 포기할 뻔했어 ofa.js는 초보자에게 매우 친숙합니다. Node.js, npm 등의 도구를 배울 필요가 없습니다.
브라우저 하나와 임의의 정적 서버만 있으면 개발을 시작할 수 있습니다.
Chrome 브라우저를 사용한다면 OFA Studio 온라인 도구를 열면 정적 서버를 준비할 필요 없이 바로 시작할 수 있습니다.
튜토리얼: 첫 번째 앱 만들기 거대한 쇼핑몰 시스템을 개발하는데, 여러분이 버틸 수 있나요? ofa.js는 대규모 프로젝트에 매우 적합합니다. 마이크로 프론트엔드 아키텍처 패턴을 채택하고 있기 때문입니다.
쇼핑몰 시스템을 충분히 세분화된 요구 사항으로 나누고, 각 컴포넌트를 개별 개발하여 별도의 폴더에 넣은 후 정적 서버를 통해 컴포넌트 효과를 바로 미리 볼 수 있습니다.
마지막으로 하나씩 조립하여 거대한 시스템을 만듭니다. ofa.js의 마이크로 프론트엔드 모드는 바로 모놀리식 애플리케이션을 해결하는 좋은 약입니다.
사례를 참고하세요: NoneOS, ofa.js로 개발된 운영체제로, 매우 규모가 큽니다.
나는 백엔드 개발자야, 백엔드 템플릿 엔진으로만 개발하고 싶은데 ofa.js를 사용해도 괜찮을까? ofa.js의 SSR은 Node.js와 바인딩될 필요가 없습니다. SCSR 규칙을 준수하기만 하면 어떤 백엔드 언어로든 템플릿 엔진 개발을 할 수 있습니다.
자세한 내용은 ofa.js SSR을 참조하세요.
생성형 AI에 더 적합한 프론트엔드 프레임워크
컴파일 과정 없이, 코드를 바로 실행합니다.
AI가 ofa.js를 사용하여 프론트엔드 프로젝트를 생성하는 흐름
AI 대규모 모델
정적 컨테이너에 코드 배포
프로젝트 미리보기
AI가 현재 주류 프론트엔드 프레임워크를 사용하여 프로젝트를 생성하는 흐름
AI 대규모 모델
클라우드 컨테이너 생성
의존성 설치
코드 배포 및 컴파일
프로젝트 미리보기
매우 낮은 사용 문턱
ofa.js 기반 컴포넌트를 사용하면 의존성과 설정 문제를 고려할 필요가 없습니다
야근 안 해
퇴근해 줘
조금 늦게 퇴근
주말 야근
한 번의 캡슐화로 번거로운 절차를 벗어나세요
과거에는 Node.js ➡️ npm ➡️ Webpack 등의 학습 과정을 거쳐야만 컴포넌트 캡슐화의 첫 단계를 시작할 수 있었습니다.
이제는 파일 하나만 있으면 됩니다.
다양한 템플릿 구문 지원
Web Components 기반 개발
당신은 Web Components를 지원하는 모든 플랫폼에서 ofa.js를 사용할 수 있습니다
마이크로 프론트엔드 베스트 프랙티스
현재 웹사이트의 모든 구성 요소는 독립적으로 사용, 조회, 참조할 수 있으며 특정 환경에 의존하지 않아 즉시 사용할 수 있습니다.
jQuery의 정신적 계승자
템플릿 구문을 지원하면서도 노드를 직접 조작할 수 있어, 유연성과 효율성을 모두 갖췄습니다
API 디자인은 jQuery와 비슷하지만, 더 직관적입니다
// jQuery Code
$("#target").html("some html code"); // html 설정
$("#target").text("set text"); // text 설정
var ele_text = $("#target").text(); // text 가져오기
var parents = $("#target").parents(); // 모든 상위 요소 배열 가져오기
var child = $("#target").children()[0]; // 첫 번째 자식 요소 가져오기
// ofa.js Code
$("#target").html = "some html code"; // html 설정
$("#target").text = "set text"; // text 설정
var ele_text = $("#target").text; // text 가져오기
var parents = $("#target").parents; // 모든 상위 요소 배열 가져오기
var child = $("#target")[0]; // 첫 번째 자식 요소 가져오기