국산 Javascript UI 프레임워크 AX5 UI - jQuery Bootstrap
AX5 UI
A
가장 진화된 HTML5 UI 컴포넌트
AX5는 jQuery/Bootstrap과 함께 사용하는 HTML5 웹표준 Javascript UI 컴포넌트 입니다.
소개
AX5 UI
AX5는 웹 기술에 대한 끊임없는 연구와 경험으로 탄생한 UI 컴포넌트 입니다.
- 어떻게 하면 개발자들의 개발시간을 단축 시킬 수 있을까?
- 어떻게 하면 개발자들이 즐겁게 개발 할 수 있을까?
- 어떻게 하면 개발자들이 원하는 기능을 언제든 편하게 추가 하고 공유 할 수 있을까?
AX5는 잘 설계된 UI 컴포넌트 입니다.
- 컴포넌트들 간의 호환성이 뛰어납니다.
- 각 컴포넌트들의 의존관계가 거의 없습니다.
- NPM, Bower와 같은 의존성 관리 도구를 통해 쉽게 내려받을 수 있습니다.
AX5는 전 세계 웹 애플리케이션에서 사용하고 있는 검증된 UI 컴포넌트 입니다.
jQuery
브라우저 호환성을 위해 jQuery를 메인 라이브러리로 사용합니다. jQuery 기반의 AX5 코드는 간결하고 직관적이어서 누구나 쉽고 빠르게 컴포넌트 사용법을 익힐 수 있습니다.
Bootstrap
웹 애플리케이션 개발에 가장 많이 사용되는 HTML,CSS 프레임워크, Bootstrap과 100% 호환되도록 설계되었습니다. Bootstrap과 함께 아름답게 동작하는 AX5를 만나보세요.
특징
풍부한 예제와 문서
ax5.io 사이트에 풍부한 예제와 문서가 제공됩니다. 웹 애플리케이션 개발에 반복적으로 나타나는 상황에 대한 예제와 문서가 제공됩니다.
뛰어난 확장성
컴포넌트의 기능이 부족할 경우 쉽고 간단하게 확장할 수 있도록 설계되어 있습니다.
지속적인 업데이트
AX5는 지속적으로 버그픽스 및 기능개선이 이루어지고 있으며, 웹 애플리케이션 트렌드에 따라 필요한 컴포넌트가 지속적으로 업데이트 됩니다.
높은 생산성
간결한 API를 기반으로 쉽고 빠르게 컴포넌트를 애플리케이션과 통합할 수 있습니다.
확장성
다양한 웹 애플리케이션의 요구사항의 변경 또는 추가에 대해 확장하고 진화할 수 있도록 설계되어 있습니다.
개방성
순수한 웹 기술로 개발되었으며, 완전한 오픈 소스 입니다.
신뢰성
AX5는 전 세계 웹 애플리케이션에서 사용하고 있는 검증된 UI 컴포넌트 입니다.
사용법
1. 설치
다음 방법을 통해 AX5를 설치할 수 있습니다.
- Github에서 직접 다운로드.
- NPM 패키지 매니지먼트 이용.
- Bower 패키지 매니지먼트 이용.
- Github에서 Clone
git clone https://github.com/AX5/AX5-kernel하기
소스코드에 직접 Import 하는 경우는 다음과 같이 script 태그를 추가하면 됩니다.,
...html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/ax5core/master/dist/ax5core.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/AX5/AX5-dialog/master/dist/ax5dialog.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/AX5-dialog/master/dist/ax5dialog.min.js"></script>
...
2. 구조
AX5가 로드되면, 브라우저에 ax5 오브젝트를 셍성됩니다.
ax5오브젝트안에는 ax5.util, ax5.mustache, ax5.info, ax5.ui등의 모듈이 존재합니다. 만약 UI클래스를 추가하게 되면 ax5.ui 모듈 아래에 추가 됩니다.
ax5core
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/ax5core/master/dist/ax5core.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/AX5/AX5-dialog/master/dist/ax5dialog.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/AX5-dialog/master/dist/ax5dialog.min.js"></script>
add AX5-dialog
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/ax5core/master/dist/ax5core.min.js"></script>
console.log(ax5);
// {guid: 1, info: Object, util: Object, ui: Object, mustache: Object}
3. 질문
궁금한 점이 있으시면 Github 이슈를 통해 질문을 남겨주세요. https://github.com/AX5/AX5-kernel/issues
AX5 코드 기여자로 참여하기
- 원본 저장소의 소스를 당신의 저장소로 포크합니다.
- 저장소를 데스크탑으로 복제하십시오.
- 터미널을 엽니다.
- git 폴더로 이동 (폴더 이름 : AX5-kernel)
- 다음 명령어를 입력하십시오 : npm install
- Gulp task 실행
- 테스트 환경 실행 (src/AX5-**/test) > bower install
- 코딩 및 테스트
npm 설치
npm install
npm (노드 패키지 모듈)을 설치하여 node.js 모듈을 관리합니다. 인터넷을 참조하십시오.
- 다음 명령을 입력하십시오 : gulp default
- cf1> 또는 다음 명령을 입력하십시오 : gulp
- cf2> 현재 위치 : AX5-kernel
Gulp
toms-mac:AX5-kernel tom$ gulp default
[13:25:56] Using gulpfile ~/Works-OSS/AX5/AX5-kernel/gulpfile.js
[13:25:56] Starting 'default'...
[13:25:57] Finished 'default' after 227 msa
성공했다면 이 화면을 보실 수 있을 것입니다. 만약 Gulp 실행에 실패했다면, 그 이유는 [‘you don’t have permission’ or ‘npm is not installed’] 이 키워드로 인터넷을 참조하십시오 :
- npm init
- npm install -g gulp
- npm install –global gulp-cli
- sudo npm install –global gulp-cli
Bower
각각의 UI 폴더안에는 test폴더가 있습니다. test폴더는 각각의 UI를 개발 할 때 테스트 하는 용도로 사용됩니다.
bower.json은 test폴더에서 필요한 plugins들을 관리하는 파일입니다.
npm install -g bower
bower install
test폴더로 이동후에 위의 명령을 터미널에 실행하면 test폴더안에 bower_components 폴더가 생성되고 필요한 플러그인들이 다운로드 됩니다.
그런다음 html파일을 열어 개발중인 코드를 테스트 할 수 있습니다.
