Ext JS는 어떻게 개발비용과 시간을 단축시키는가

Ext JS 진정한 의미의 올인원 자바스크립트 프레임워크

한마디로 Ext JS 는 100개 이상의 고품질 고기능을 지닌 UI 컴포넌트가 내장된 진정한 의미의 All-in-One 자바스크립트 프레임워크이기 때문입니다. React, Angular, Vue 처럼 HTML/CSS로 UI 를 다 손대야 할 필요도 없으며 Material UI, Styled component 와 같은 패키지를 일일이 설치하고 import 해야할 이유가 전혀 없기 때문입니다. 그리고 그 패키지들 업데이트 될때마다 프로젝트는 먹통이 되어버리는 일이 종종있습니다. 오픈은 닥쳤는데 어떤 패키지에서 문제를 일으키는지 알방법이 없고 이걸 해결하느라 또 시간은 소모됩니다. 대안이 없으면 모르겠는데 Ext JS 라는 대안이 있습니다. 오픈소스는 초기 비용은 공짜이지만 프로젝트를 마치고 나면 이미 투입된 인건비는 상용제품을 쓰는 것의 이미 몇 배를 뛰어 넘게 됩니다. Ext JS 는 고작 프리랜서 1MM 비용에 불과합니다. 과연 어떤 선택이 더 저렴한 선택일까요? Ext JS 는 React, Angular 대비 4 배이상의 생산성을 보장합니다. 왜냐면 개발자가 UI 컴포넌트를 직접 정의해야할 이유가 없으며 물리적으로 쳐야할 코드량도 정말 적기 때문이죠. 디자인 수정도 테마 파일 제작하여 한방에 전체 프로젝트에 적용할수도 있고 개별 화면에 대응하는 SCSS 파일을 열고 CSS 문법으로 수정을 하면 됩니다.

Ext JS 데스크탑과 모바일 화면에 모두 대응이 가능한 구조

Ext JS 는 처음부터 Responsible/Adaptive web 화면에 대응되게 아키텍쳐가 구성되어 있습니다. 그래서 View를 개발할때 데스크탑에 대응되는 화면은 Ext JS Classic 컴포넌트 셋트로 화면을 개발하고 모바일 화면은 Ext JS Modern 컴포넌트 셋트로 화면을 개발하면 사용자 환경에 유연하게 View 가 대응이 됩니다. 각각의 화면을 다른 기술 스택으로 가져가면 그 만큼 시간이 낭비될텐데 Ext JS는 이런 부분에서 시간을 절감해 줍니다. 그리고 Model, Store 는 이 각각의 View 에서 공유를 할 수가 있기 때문에 코드 재활용에서도 유리합니다. Controller 도 마찬가지 입니다. Ext JS 프레임워크의 장점은 이런 겁니다. 이런게 가능한 이유는 Ext JS 프레임워크 자체에서 구조화된 MVC 를 지원하기 때문입니다. 변수 상태 관리하나 하려고 Redux 깔고 그럴 이유가 없는 것입니다. 그리고 개발자가 임의로 MVC 구성 가져가면서 코드 꼬이고 협업에서 고생할 이유도 없습니다.

Bootstrap, Material 에서 제공하는 UI 컴포넌트들과 비교했을때 그 양과 질에서 비교가 되지 않습니다. 기본제공되는 UI 컴포넌트가 120여개 종류에 달하고 그리드만 해도 20가지가 넘습니다. 그리고 예제 페이지의 각각의 UI 컴포넌트 코드에 Details 탭을 눌러 소스코드를 확인하면 Ext JS 코드 체계가 얼마나 간결한지 알 수 있어요.

Ext JS Classic 컴포넌트 리스트(100여종 이상의 UI, 그리드, 차트, 그래프) https://examples.sencha.com/extjs/7.5.0/examples/kitchensink/?classic#all
Ext JS Modern 컴포넌트 리스트(UI, 그리드, 차트, 그래프) https://examples.sencha.com/extjs/7.5.0/examples/kitchensink/?modern#all

현존하는 가장빠른 자바스크립트 Grid

Ext JS Classic 에서 제공하는 Grid 컴포넌트는 현존하는 웹 컴포넌트중 가장 빠른 것으로 판명되었습니다. React, Angular 프로젝트에서 이런 그리드 직접 개발한다고 생각해 보면 그 시간과 비용은 얼마일까요? 그래서 또 별도의 외부 그리드 컴포넌트를 구매해서 추가해 주셔야 하는데 이런게 다 일이고 시간낭비 요인입니다.

Ext JS Grid 벤치마크 리포트 https://www.sencha.com/blog/ext-js-performance-benchmarks/
Ext JS Grid 데모 https://www.sencha.com/grid/demo/modern/#/column-operations/grouped-columns
고품질 대시보드 제작 예제 (일체의 외부라이브러리 없이 ExtJS 내장 컴포넌트 만으로 개발한 화면) https://examples.sencha.com/extjs/7.5.0/examples/admin-dashboard/#email https://examples.sencha.com/extjs/7.5.0/examples/classic/executive-dashboard/#kpi/clicks

Ext JS는 웹 애플리케이션 개발 비용과 시간을 획기적으로 줄여주는 제품

그 이유를 알려면 아래 Ext JS 활용 협업 시나리오를 한번 보면 됩니다

화면기획자 Ext JS 의 컴포넌트 목록을 리뷰하고 서비스 기획에 맞게 컴포넌트를 배치화여 화면 기획서를 작성합니다. 기획자, 디자이너, 개발자 모여서 따로 UI 스펙잡고 기능 정의하고 할 이유가 없는거죠. 컴포넌트 고유 ID이며 네이밍이 Ext JS에 이미 다 되어 있으니까요. 프로젝트는 협업입니다. 초기 협업을 위한 UI정의 작업에 드는 시간이 엄청나게 절감됩니다. 벌써 여기에서 어마어마한 시간이 절감되는거죠.

디자이너 화면기획안서 뭔지 볼 필요도 없습니다. 이번 프로젝트 Look & Feel 에 맞는 컬러시스템을 적용하여 Ext JS 테마만 디자인하면 됩니다. 이미 Ext JS 에 기본 디자인 시스템이 정리되어 있기 때문입니다.

백엔드 개발자 화면 기획서에 의거 화면 단위별로 뿌려줄 DB 작업과 프론트엔드에서 호출할 URL 주소를 정의하고 리턴해줄 JSON 값만 정의하고 확인합니다. 프론트엔드 개발자 디자인 시안 기다릴 필요 없이 화면 기획서에 의거 단위 화면별 Ext JS 컴포넌트를 배치하며 화면을 개발합니다.데이타 로드가 필요한 부분은 백엔드 개발자가 알려준 URL 주소만 삽입하면 되고 데이타가 컴포넌트에서 제대로 나오는 지만 검증한다. 최종적으로 완성된 디자인은 테마파일 하나만 수정해 주면 그걸로 프론트 엔드 개발자의 할일은 끝. 화면별로 추가 수정이 필요하면 CSS로 살짝 화면별로 개성을 줄수도 있습니다. 완벽한 분업이 가능하다. R&R 이 깔끔하게 분리된다 싸울일이 적어진다! 디자인 시안이 늦에 프론트 개발이 늦을 이유도 없고 프론트 엔드 파일이 안넘어와서 백엔드 개발을 못할일도 없는거죠. 백엔드 개발자는 화면 신경쓸 필요없이 각 화면별 데이타 호출 URL 주소에서 JSON이 잘 뿌려지는 지만 신경쓰면 됩니다. 백엔드 개발자가 할일은 비즈니스 로직이죠. 앞단 잘못 이니 뒷단 잘못 싸울 이유가 하나도 없어요. Ext JS를 쓰면 각자 자기 할인만 잘 하면 됩니다. 무엇보다 Ext JS를 활용한 이 작업방식은 3명의 역할자가 동시에 업무를 진행하기 때문에 프로젝트 기간이 기존 개발 방식에 비해 극적으로 줄어든 다는 점이 정말 중요하죠.

Ext JS 는 배워야 할 것 이 적고 쳐야 할 코드의 양이 정말 적다

Redux, JSX, Typescript, Styled, Hooks 이런거 배우느라 고생하셨죠? UI 하나 개발하려고 왜 이난리를 쳐야하는 걸까요? UI 컴포넌트 없는 프레임워크 가지고 UI 개발을 하기 때문에 일어나는 비극인 것입니다. 반면에 Ext JS 는 순수 자바스크립 문법만 알면 됩니다. JSON 이 뭔지 아는 사람이면 개발이 가능하다. 그걸로 끝. 쓸데 없는 것 배우느라 시간낭비할 필요가 없습니다.그리고 JSON 기반의 간결한 코드체계는 개발자의 혼란을 줄여줍니다. 버튼하나 만드려고 HTML, CSS, JS, TS 헤집고 다니면서 헤멜필요가 전혀없는거죠. 물리적으로 쳐야할 코드의 양이 1/4로 줄어듭니다. 직접 Trial 해보시면 압니다. 얼마나 간결한지. 그래서 한명의 리소스도 귀한 소규모 회사라면 Ext JS를 사용해서 업무량을 줄여주셔야 하구요. 팀원이 많은 회사라고 하면 더더욱 Ext JS를 사용해서 팀원 전체가 쓸데없이 패키지 설치하고 import 라인 타이핑 해대면서 낭비하고 있는 막대한 시간과 비용을 줄여야 하는거죠.

Java Doc 을 능가하는 수준의 Ext JS API 문서 제공

https://docs.sencha.com/extjs/7.5.0/modern/Ext.grid.Grid.html

UI 컴포넌트들은 어떻게 OOP적으로 상속 관계를 가지고 있는 지. 개별 컴포넌트에서 지원하는 이벤트 들과 메소드들에 대한 상세한 문서를 보실수가 있어요. 다른 프레임워크와 비교할수 없는 압도적인 API 문서 제공은 개발자 여러분의 개발을 편하게 해줄 것입니다. 그 어떤 자바스크립트 프레임워크도 이정도 수준의 문서를 제공하고 있지는 않습니다.

결론: UI 없는 프레임워크 가지고 UI 개발하는 넌센스를 이제는 중단해야 할 때

이상의 이야기는 기업용 업무용 웹애플리케이션 개발에 적합한 이야기입니다. Ext JS는 금융, 물류, 모니터링, ERP, CRM, 관리자화면 개발에서 엄청난 감정을 보이며 세계적인 기업들이 Ext JS를 사용하고 있습니다.Ext JS 를 사용하면 회사는 비용이 대폭 절감되어 좋습니다. 개발자는 프로젝트 기간이 단축되어 좋습니다. 삼성, 현대, LG, SK, CU 등 한번 Ext JS를 쓰는 고객들은 7년이상 이 제품을 계속 쓰고 있습니다. 한번 Ext JS 쓰면 React, Angular 로 돌아가기 힘듭니다.