페라리 || 자바스크립트 프레임워크 Mithril.js

Mithril.js의 분위기가 2019년부터 심상치 않다. 

어느 순간부터 자바스크립트 프레임워크의 패러다임이 '편의성'에서 점차 '속도'로 옮겨가고 있다. 

Mithril.js의 수치를 보기전까지 학습곡선과 편의성이 중요할 뿐, 속도는 크게 중요할까 싶었다. 하지만 Mithril.js 프레임워크는 포지션은 상당히 매력적이었다. 그들은 컨셉을 '페라리'로 잡은 것 같다.(자동차로 따지면 '속도') 리액트나 앵귤러 같은 경우, suv처럼 넓은 시야(확장성)와 안전하면서 편안한 주행성능을 목표로 삼았다면 Mithril.js의 지향점은 스포츠카 브랜드다.

Mithril.js

일단 Mithril.js의 속도를 보자.

풀스택을 감안했을 때 전체적인 퍼포먼스는 vue보다 1.5배, 리액트보다는 거의 2배 정도 빠르다. 이 정도면 자바스크립트의 SPA프레임워크 중에서 가장 빠르다고 할 수 있다.

React vs Mithril

* 랜더링 성능(console.log, print)

React나 MithrilDOM 모두 가상 DOM을 랜더링한다. React의 가상랜더링은 Mithril보다 상대적으로 복잡한 솔루션 방식으로 설계가 되어 있다. React의 설계는 Mithril보다 다소 엔지니어 중심이다. 반면, Mithril은 JSX로 거치는 과정없이 자바스크립트로 모든 것을 제어한다.

 

Mithril의 랜더링 시간은 React보다 압도적이다.

* 로딩 시간

라이브러리 로딩시간을 비교해보자. <div>태그를 10,000개 로딩했을 때 Mitrhril은 React의 2배 이상의 속도를 보여준다. 

* 업데이팅 

웹 어플리케이션의 영역이 데스크탑에서 모바일까지 확장되고 있는 면에서 requestAnimationFrame과 같은 게임 알고리즘이 중요해진다. Mithril은 업데이트에 있어서도 상당한 퍼포먼스를 보여준다.

Angular vs Mithril

Angular는 1.0 이후에 급변한 자바스크립트 프레임워크다. 2.0부터 Typescript가 권장되기 때문에 학습곡선을 생각한다면 자바스크립트에 최적화 된 프레임워크라 부르기 힘들다. 특히, Angular의 복잡성을 생각한다면 편의성을 상쇄하고도 남는 수준이다. typescript, 바인딩, 파이프, 네비게이터, 아키텍처 개념, 컴포넌트, 서비스, 디렉티브 등... Angular는 속도여부를 떠나 자바스크립트 프레임워크라 말하기도 민망해졌다.

작고, 효율적인 코드단위, 100% 자바스크립트 구조를 생각한다면 Mithril은 Angular에 저항하기 위해 태어난 듯한 느낌이 든다. 

Vue vs Mithril

vue는 Mithril과 가장 고민되는 자바스크립트 프레임워크다. 양방향 바인딩, 가상DOM구조, 수명주기, Methods 등...  Mithril과 차이점도 많지만 겹치는 부분 역시 상당하다. 퍼포먼스 면에서 차이가 없다면 vue를 선택하는 편이 낫다. 

* 랜더링

웹 어플리케이션의 구조가 커질수록 모듈을 계속 결합해야하는 vue와 달리 Mithril의 속도는 떨어지지 않는다. Mithril은 Vue보다 개념이 훨씬 적고, 모듈이나 플러그인을 사용하지 않고 자바스크립트의 기능만 사용하여 동일한 계층적 구조를 만든다. 

*update

update에서도 mithril은 vue을 앞선다. 

결론

Mithril은 속도면에서 vue, react, angular보다 월등하게 앞선다. 하지만 개발자에게 있어 프레임워크의 문제는 학습곡선이 될 수 있는데, 아마도 앵글러보다는 좋을 듯하다.

* 학습곡선

Vue => Mithril >> React >>Angular  

풀스택으로 구성한다면 Mithril과 Vue의 학습곡선은 크게 차이나지 않을 것 같다. 아직 Mithril을 이용해서 풀스택 웹 어플리케이션을 구성해보지 않았기에 확실하게 말할 수 없지만 적어도 외부 모듈과 언어를 덕지덕지 붙이지 않아도 된다는 점에서 꽤 매력적이지 않을까한다.