No.1 웹 애플리케이션 UI 컴포넌트

웹 애플리케이션 UI를 가장 완벽하게 만드는 방법, AX5

가장 진화된 HTML5 UI 컴포넌트

AX5는 jQuery/Bootstrap과 함께 사용하는 HTML5 웹표준 Javascript UI 컴포넌트 입니다.

Demo Github Repository

소개

AX5 UI

AX5는 웹 기술에 대한 끊임없는 연구와 경험으로 탄생한 UI 컴포넌트 입니다.

  • 어떻게 하면 개발자들의 개발시간을 단축 시킬 수 있을까?
  • 어떻게 하면 개발자들이 즐겁게 개발 할 수 있을까?
  • 어떻게 하면 개발자들이 원하는 기능을 언제든 편하게 추가 하고 공유 할 수 있을까?

AX5는 잘 설계된 UI 컴포넌트 입니다.

  • 컴포넌트들 간의 호환성이 뛰어납니다.
  • 각 컴포넌트들의 의존관계가 거의 없습니다.
  • NPM, Bower와 같은 의존성 관리 도구를 통해 쉽게 내려받을 수 있습니다.

AX5는 전 세계 웹 애플리케이션에서 사용하고 있는 검증된 UI 컴포넌트 입니다.

jQuery

브라우저 호환성을 위해 jQuery를 메인 라이브러리로 사용합니다. jQuery 기반의 AX5 코드는 간결하고 직관적이어서 누구나 쉽고 빠르게 컴포넌트 사용법을 익힐 수 있습니다.

Bootstrap

웹 애플리케이션 개발에 가장 많이 사용되는 HTML,CSS 프레임워크, Bootstrap과 100% 호환되도록 설계되었습니다. Bootstrap과 함께 아름답게 동작하는 AX5를 만나보세요.

특징

풍부한 예제와 문서

ax5ui.axisj.com 사이트에 풍부한 예제와 문서가 제공됩니다. 웹 애플리케이션 개발에 반복적으로 나타나는 상황에 대한 예제와 문서가 제공됩니다.

뛰어난 확장성

컴포넌트의 기능이 부족할 경우 쉽고 간단하게 확장할 수 있도록 설계되어 있습니다.

지속적인 업데이트

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 코드 기여자로 참여하기

  1. 원본 저장소의 소스를 당신의 저장소로 포크합니다.
  2. 저장소를 데스크탑으로 복제하십시오.
  3. 터미널을 엽니다.
  4. git 폴더로 이동 (폴더 이름 : AX5-kernel)
  5. 다음 명령어를 입력하십시오 : npm install
  6. Gulp task 실행
  7. 테스트 환경 실행 (src/AX5-**/test) > bower install
  8. 코딩 및 테스트

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파일을 열어 개발중인 코드를 테스트 할 수 있습니다.

© AXISJ 2014-2017

Sponsors