풀스택웹애플리케이션개발프레임워크 AX5UI & AXBOOT Framework 공개 SW 개발자 Lab 오픈소스프론티어 3 기장기영
웹애플리케이션은크게사용자가인터랙션하는프런트엔드 (Front-end) 영역과, 사용자가요청한데이터를저장, 수정, 삭제하는백엔드 (Back-end) 영역으로나눌수있다. 웹애플리케이션개발에는다양한기술이사용된다. 최근에는더급격한속도로웹기술이발전되고있으며현대의웹애플리케이션은단순한인터랙션을넘어서빠르고편리한 UI/UX 프런트엔드기술과수천만, 수억의데이터를빠르고효율적으로관리할수있는백엔드기술이더욱중요해졌다. 또한각기술들은점점세분화되어고도의전문성을요구하고있다. 현대의웹애플리케이션은수가지 ~ 수십가지의기술들과도구를조합하여개발하게되며, 개발이완료된애플리케이션을배포하여운영할때는더많은기술과도구가필요하다. 이처럼어렵고복잡한웹애플리케이션을쉽고빠르게개발할수있는풀스택프레임워크 AXBOOT를이글을통해설명하겠다. 프로젝트명개요특징목표기대효과리퍼지토리 AX5UI & AXBOOT Framework AX5UI를 Front-end 프레임워크로사용하고, 자바 (Java) 와스프링프레임워크 (Spring Framework) 를 Back-end 프레임워크로사용하는풀스택웹애플리케이션프레임워크인 AXBOOT Framework - 풀스택프레임워크 - 운영 / 시스템관리기능내장 - UI 플러그인룩앤필통합관리기능 - 커스텀태그지원 - ORM API 개발을위한코드자동생성 - AX5UI와완벽호환국내개발환경에최적화된웹 UI를제공하고, 복잡한자바 & 스프링기반의개발환경을쉽고단순하게바꿈으로써타프레임워크에비해월등히빠른개발생산성과높은유지보수성을제공개발자와기업이우리가공개한오픈소스기술을기반으로성장하여오픈소스가또다른오픈소스를낳고, 기술이더나은기술을낳을수있음 https://github.com/ax5ui https://github.com/axboot 하위리퍼지토리들전부
[ 목차 ] 1 Google V8 과자바스크립트 2 자바스크립트기반 UI 프레임워크 3 AX5UI Overview 4 AXBOOT Overview 5 AX5UI 빌드및배포자동화소개 6 확장성가능한 AX5UI 테마설계기법 7 AXBOOT 소개 8 AXBOOT 개발환경 - Java - Browser - Web Server - Web Application Server - Database 9 맺음말 1 Google V8 과자바스크립트 2008년, 구글은크롬웹브라우저를발표하면서가장큰장점으로 V8이라불리는자바스크립트엔진을소개했다. 이는자바스크립트가느리다는인식을완전히바꿔놓았고, 다른브라우저제조사들의경쟁을주도하며 Node.js라는새로운생태계를만들었다. 이러한변화는자바스크립트의성능, 확장성, 역할을완전히바꾸어놓았고현재자바스크립트는웹브라우저를넘어서서버, 모바일앱, 로봇제어에까지활용되고있다. 2 자바스크립트기반 UI 프레임워크 웹에대한오랜경험과발전을함께해온오픈소스그룹 AXISJ는자바스크립트와역사를함께하며 2008년부터자바스크립트기반의 UI 컴포넌트를개발해왔다. 2013년오픈소스로처음공개했던 AXISJ UI 프레임워크는전자정부프레임워크경진대회우승을비롯해많은기업과개발자들사이에서주목받는 UI 프레임워크로성장했다. AXISJ를개발, 배포하면서겪
었던다양한경험과수많은사용자로부터받은피드백을바탕으로더빠르고, 더아름답고, 더쉬운 UI 프레임워크를설계하기시작했다. 1 년여간의설계와개발끝에 2016 년 3 월, AX5UI 라는새로운웹 UI 프레임워크를공개했다. 3 AX5UI Overview AX5UI 프레임워크는달력, 메뉴, 그리드, 콤보박스, 토스트, 피커등 10여가지의컴포넌트를제공하고있으며현재도파일업로드, 대시보드, 에디터를비롯한새로운컴포넌트를지속해서개발하고있다. 각컴포넌트는개발자가자유롭게확장, 변경할수있도록유연하게설계되어있으며전세계적으로가장많이사용되는웹프레임워크인 Bootstrap을기반으로룩앤필 (Look&Feel) 을일관되게적용할수있는테마확장기능또한제공하고있다. 4 AXBOOT Overview 한발더나아가, AX5UI를 Front-end 프레임워크로사용하고자바 (Java) 와스프링프레임워크 (Spring Framework) 를 Back-end 프레임워크로사용하는풀스택웹애플리케이션프레임워크인 "AXBOOT" 또한개발이진행되고있다. AXBOOT를사용하면 AX5UI를미리구성된자바 & 스프링환경에서쉽고빠르게사용할수있을뿐만아니라업무개발에바로사용할수있는 10여가지의템플릿코드를제공하기때문에, 다른어떤프레임워크보다높은생산성을제공한다. (https://github.com/axboot/ax-boot-framework) 5 AX5UI 빌드및배포자동화소개 GitHub: https://github.com/ax5ui Site: http://ax5.io/
[ 그림 1] AX5UI jquery, Bootstrap UI Plugins AX5UI 초기설계당시, AXISJ 를개발하면서봉착했던모듈화및배포문제를해결하기위해 Git Subsplit(https://github.com/dflydev/git-subsplit) 과 Jenkins 를도입했고, 현재 17 개의컴 포넌트를모두자동으로빌드하여 NPM Registry 와 Bower 에배포하고있다. 모든컴포넌트소스는 ax5ui-kernel 프로젝트의하위디렉토리로관리되며 Gulp를사용하여 Babel ES2015 컴파일, Script Concat, Minify를하고있다. 변경된코드가 Github에푸시 (Push) 되면 2분주기로리퍼지토리를감시하는 Jenkins가 ax5ui-kernel 소스코드를풀 (Pull) 한후, 버저닝 (Versioning) 을하게된다. 커밋메시지에 MAJOR@, MINOR@, PATCH@ 포함여부를검사하여, 메시지포함여부에따라메이저, 마이너, 패치버저닝을진행하게되고변경된각코드들을 Git Subsplit 명령을통해각각의컴포넌트리퍼지토리에푸시 (Push) 하게된다.
[ 그림 2] AX5UI 빌드및배포자동화과정 최근에는테스트코드작성과더불어테스트코드를다양한브라우저환경에서테스트할 수있도록 TravisCI 와 SauceLabs(https://saucelabs.com/) 테스트환경을구성하고있다. 6 확장성가능한 AX5UI 테마설계기법 AX5UI 는 CSS 전처리기로 SASS(http://www.sass-lang.com/) 를사용하고있다. Bootstrap SCSS 와호환되도록설계되어있어쉽고효율적으로컴포넌트의룩앤필을변경할수있다. 예1) ax5dialog.scss @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss"; @import "node_modules/bourbon/app/assets/stylesheets/_bourbon.scss"; @import "node_modules/ax5core/src/_ax5-ui-mixin.scss";
@import "scss/ax5dialog_variables"; @import "scss/ax5dialog"; [ 그림 3] AX5UI Dialog Test 예 2) app.scss @import "../../plugins/ax5core/src/ax5-ui-mixin"; @import "../../plugins/ax5ui-dialog/src/scss/ax5dialog_variables"; @import "../../plugins/ax5ui-dialog/src/scss/ax5dialog"; $ax5mask-bg-opacity: 0.4; @import "../../plugins/ax5ui-mask/src/scss/ax5mask_variables"; @import "../../plugins/ax5ui-mask/src/scss/ax5mask";
//$ax5modal-easing-time-open: 0.0S; @import "../../plugins/ax5ui-modal/src/scss/ax5modal_variables"; @import "../../plugins/ax5ui-modal/src/scss/ax5modal"; $ax5picker-easing-time-open: 0.1s; $ax5picker-easing-time-close: 0.1s; @import "../../plugins/ax5ui-picker/src/scss/ax5picker_variables"; @import "../../plugins/ax5ui-picker/src/scss/ax5picker"; app.scss파일의보다상세한내용은 https://github.com/axboot/ax-boot-framework/blob/master/ax-bootadmin/src/main/webapp/assets/scss/axboot.scss 와 https://github.com/axboot/ax-boot-framework/blob/master/ax-bootadmin/src/main/webapp/assets/scss/axboot.scss 에서구현된코드를통해확인할수있다. AX5UI 프레임워크의모든컴포넌트는 http://ax5.io 에서소개와함께간단한예제를통해만 나볼수있다. [ 그림 4] http://ax5.io
7 AXBOOT 소개 [ 그림 5] http://demo.axboot.com 동적컨텐츠를제공하는웹애플리케이션을개발할때는서버사이드기술이필요하다. PHP, JSP, ASP 등과같은대표적인서버사이드기술들은데이터베이스에데이터를저장, 조회, 수정, 삭제하고언어에특화된제어, 반복구문들을해석하여최종적인 HTML 컨텐츠를브라우저에전달한다. 웹이성장함에따라복잡하고다양한비즈니스로직을처리하는웹애플리케이션들이많아졌고, 서버사이드기술을더욱효율적으로사용할수있도록도와주는여러프레임워크들이생겨났다. 이에 AXISJ는 AX5UI와대한민국에서가장대중적이며많은개발자가사용하는자바 (Java), 스프링프레임워크 (Spring Framework) 를서버사이드기술로사용하는풀스택웹애플리케이션개발프레임워크인 AXBOOT를 2016년봄부터개발하기시작했다. AX5UI 를사용하여동적컨텐츠를제공하는웹개발을위해서는결국 PHP, ASP, JSP 등의기 술들을조합하여프로젝트를구성해야하기때문에, AX5UI 를더쉽고간편하게사용할수 있는방법으로서버사이드기술까지한데모은 AXBOOT 를개발하게되었다.
AXBOOT는 AX5UI, 자바8, 스프링프레임워크4.x, 톰캣을기반으로미리구성된프로젝트를제공하기때문에, 서버를구동하는즉시 AX5UI와자바, 스프링을기반으로개발을시작할수있다. 또한, 다년간의웹애플리케이션개발경험을바탕으로개발한사용자관리, 시스템메뉴, 권한관리, 세션관리를내장기능으로제공하기때문에구현하고자하는비즈니스로직에만집중할수있다. [ 그림 6] AXBOOT 프레임워크기본구성요소에포함된메뉴관리기능 또한, 애플리케이션을운영하면서발생하는모든에러를추적할수있는기능이내장되어 있어에러발생시사용자정보, HTTP 요청정보, 스택트레이스를수집하여자동으로로깅하 며, 이메일, Slack, SMS 등다양한방법을통해실시간으로에러를전송할수도있다. 자바기반의웹애플리케이션개발자들이익숙한 JSP 를템플릿엔진으로사용했고, AX5UI 컴포넌트를 JSP 내에서쉽고편리하게사용할수있도록 JSTL(Java Standard Tag Library) 로 확장하여가독성과유지보수성이높은코드를작성할수있다.
[ 그림 7] https://api.axboot.com gitbook.com 서비스를이용하여제작중인 AXBOOT 매뉴얼사이트 또다른 AXBOOT의강력한기능중하나는현존하는모든 DBMS의테이블을역공학 (Reverse Engineering) 으로분석하여대상테이블에 CRUD를위한코드 (Controller, Service, Entity, Repository) 를자동으로생성해주는모델추출기능이다. 모델추출기능을활용하면테이블설계후반복적이고패턴화된 200여줄의코드를단 1초만에얻을수있다.
8 AXBOOT 개발환경 [ 그림 8] AXBOOT 개발환경 Java JDK 1.8 이상 Browser Internet Explorer : 9 버전이상 Google Chrome : 32.0.1700 이상 Opera : Opera 2014 이상 Safari : Safari 7 이상 Firefox : 32.0 버전이상 Web Server 웹서버는 AXBOOT 로개발한애플리케이션을운영시에부가적으로필요한 Proxy, Load Balancer 의역할로버전에대한제한이없다.
Web Application Server Servlet 3.0 스펙을이상을지원하는 WAS. Tomcat 7.x 이상 JBoss EAP 7 이상 Wildfly 8 이상 WebLogic 12c 이상 WebSphere 8 이상 JEUS 7 이상 Database 데이터베이스에대한별도의제한은없다. 기본적으로 H2 데이터베이스를내장하고있으며, 개발및테스트용도로 H2를사용할수있다. 구현하고자하는시스템에맞는데이터베이스종류및버전을사용하면된다. 9 맺음말 AXISJ는대한민국웹기술을더욱풍요롭고발전적으로이끌기위해다양한노력과시도를해왔다. 2번의오픈소스 UI 프레임워크를공개했고, 서버사이드기술을결합한풀스택프레임워크또한공개를앞두고있다. 앞으로더많은개발자와기업이우리가공개한오픈소스기술을기반으로성장하여오픈소스가또다른오픈소스를낳고, 기술이더나은기술을낳을수있는선순환구조가되기를바라며이글을마친다.