Mithril.js(+Node.js+MongoDB)에서 회의실 예약 웹 앱

ReserveApp
(Web Storage를 사용한 모의 버전입니다)

개요

회의실 예약을위한 웹 응용 프로그램입니다.
예약이 들어간 시간대가 채워지기 때문에
몇시에 어느 회의실이 비어 있는가
이해하기 쉽습니다.

예약된 블록을 클릭하면
예약 정보와 취소 버튼이 표시됩니다.

(회의실이 4개 이상일 때는 어떻게 해야 하는지에 대해서는 봐 주세요)

※버그(3/23)
예약 블록의 맨 위 이외를 클릭하면
예약 시간이 어긋나 표시되어 버리는 것 같습니다. 나중에 수정합니다.

개발 환경

프런트 엔드

JavaScript

프레임워크

Mithril.js

백엔드

Node.js

데이터베이스

MongoDB

관리

git

gulp

webpack

GitHub

ReserveApp

Mithril.js

shibukawa씨
「Mithril――최속 클라이언트 측 MVC」 에서 학습을 시작했습니다.

그때까지 MVC 패턴에 익숙하지 않았기 때문에
좋은 공부가되었다고 생각합니다.
(ReserveApp이 스바라시이 설계가 되어 있는지는 제쳐두어)

보기

Mithril.js의 view는 이런 식으로 쓸 수 있습니다.

Mithril.js

m("p" , "Hellow Mithril")

//↓出力されるHTML

<p>Hellow Mithril</p>

중첩할 때는

Mithril.js

m( ".say" , [ 
    m("p" , "Hellow Mithril")
])

//↓出力されるHTML

<div class="say">
    <p>Hellow Mithril</p>
</div>

라고 씁니다.

쓰기에 버릇이 있었지만
익숙해지면 별로 신경이 쓰이지 않았습니다.

model → view,
view → model에의 바인딩도

reserve.js

//model → view
m( "input", vm.person() )

//view  → model
m.withAttr( "data-place" , vm.place )

처럼 쓸 수 있습니다.

또한 Mithril.js는 다시 그리기 시스템이 우수합니다.
차이 감지로 뷰를 그리기 때문에
여러가지 처리를 담아도 비교적 고속으로 그려 주었습니다.

Mithril.js에 익숙해지면 view 부분의 구현은 원활했습니다.
반면, model, viewModel, controller의 취급에 헤매는 결과가
코드에 나타나고 있다고 생각합니다.

여담이지만
다른 제작에서는 view를 component 관리하고 있습니다.
이것은 매우 편리하고, 콘텐츠의 관리·교환이 편합니다.
JavaScript상에서 HTML을 효율적으로 취급할 수 있는 것은 (개인적으로는) 기분이 좋네요!

지금은 개인으로 깔끔하게 만들 때
Mithril.js를 사용하려고 노력하고 있습니다.

Web Storage 버전(Node.js, MongoDB)

공개하고 있는 것은 Node.js + MongoDB의 부분을
Web Storage에 이식한 모의 버전입니다.
아무리 예약해도 아무에게도 폐를 끼치지 않기 때문에
간간 예약합시다! w

Node.js는 ES6로 작성되었습니다.
애로우 함수, Promise(co를 사용)를 사용할 수 있으면
코드가 깔끔하고 기분 좋네요!

쓰고 기억했지만
도중까지 WebSocket 비동기 통신으로
예약 상황을 실시간으로 공유했습니다.
사내의 일부의 단말로 WebSocket가 잘 움직이지 않고 창고 들어갔습니다만.

만든 배경

사내 회의실 예약 시스템을 보다 편리하게 하고 싶다(초기에는 스레드에 판서)
라는 요망이 있어, SPA의 공부가 테라 제작을 시작했습니다.
(여러 사정에 따라 사내 운용은 창고 포함)

요약

Mithril.js 좋아!

SPA는 설계가 중요

ES6 전망이 좋아지고 처리도 편하다

앞으로는 조금 더 작은 웹 앱을 만들면서
MVC 패턴이라고 할까 데이터의 흐름을 견실하게 설계해 가려고 생각합니다.