Things Shell is a user development tool for Things Board platform. # How to install ## Pre-requisites * nodejs - v7.6.0 or greater * yarn - https://yarnpkg.com/ ## Install from github source ``` $ git clone https://github.com/hatiolab/things-shell.git $ c


License
NTP
Install
npm install @hatiolab/things-shell@1.0.0-alpha

Documentation

things-shell

npm version

[ Application 구조 ]

app-layout 적용 (deprecated 컴포넌트들 제거)

  • paper-drawer-panel => app-drawer-layout
  • paper-menu => paper-listbox
  • iron-flex-layout => display=flex, flex-direction, flex

app-route 적용

redux 패턴 적용

  • polymer-redux 적용
  • src/reducer 폴더의 컴포넌트들을 참조

i18n

  • 모듈별 i18n 정의 기능을 지원하기 위함임.
  • app-localize-behavior 적용함.
  • 기존 리소스파일을 재활용하기 위해 webpack-json-loader 를 적용함.

webfont (미진행)

  • 서버리스 구성을 위한 방안 필요함.
  • 웹폰트 기능을 Model에 추가하는 방안.
  • things-resource-combo 제거.

lit-html template (미진행 - https://github.com/nhnent/fe.javascript/wiki/December-11---December-15,-2017)

  • 내부에서 HTML 템플릿을 동적으로 만드는 경우에 적용.
  • 향후 Polymer 3 내부에서 광범위하게 사용될 것으로 예상되므로, 미리 익숙해지기 위함임.

폴더 구조

  • src : 소스폴더
  • libs : import 할 수 없는(모듈화 지원하지 않는) javascript 라이브러리들을 배치함 (예를 들어 dataludi는 모듈을 지원하지 않으므로 libs에 별도로 배치한다.)
  • licenses : 필요한 라이선스 파일을 배치함
  • assets : 각종 이미지, 아이콘, 그 밖의 manifest 관련 리소스

소스(src) 폴더 구조

  • components : 어플리케이션 종속성이 없는 독립 컴포넌트들을 배치함 (Redux Pattern을 사용하지 않아야 함.)
  • commons : 어플리케이션 내부 여러곳에서 재활용되는 컴포넌트들과 유틸리티 컴포넌트들을 배치함
  • app-shell : 어플리케이션 Shell 을 배치함
  • layouts : 최상위 레이아웃에서 독립적으로 사용될 구성들을 배치함 (drawer, sidebar 등)
  • pages : 라우팅에 연결될 페이지들을 배치함
  • reducer : Redux 패턴을 위한 Mixin과 reducer들을 배치함
  • styles : 전체 어플리케이션의 공유 스타일과 테마 스타일을 배치함
    • shared-styles : 어플라케이션 종속성이 없는 독립 컴포넌트들을 제외하고, 대부분의 컴포넌트에서 shadow dom 렌더링을 위해 include 함.
    • things-shell-theme : custom-style 로 각 컴포넌트에서 정의한 스타일 변수를 설정하는 파일임.

[ Polymer 3 ]

bower => npm

  • npm group 생성 (@hatiolab, @things-scene, ..)
    • @hatiolab
      • @hatiolab/things-scene
      • things-scene-core 불필요
    • @things-scene
      • @things-scene/table
      • @things-scene/chartjs
      • @things-scene/form
      • @things-scene/gauge
      • @things-scene/mqtt
      • @things-scene/firebase
      • @things-scene/stomp
      • @things-scene/random
      • @things-scene/restful
      • @things-scene/google-map
      • @things-scene/indoor-map
      • @things-scene/wheel-sorter
      • ...

HTML import => ES6 import

Component Migration

구조

  • 기존 things-designer-elements 의 editor 컴포넌트들은 프로젝트의 components 안에 내장함
  • things-scene-viewer 는 프로젝트의 components/things-scene-viewer 컴포넌트로 내장함
  • paper-color-picker 는 프로젝트의 components/paper-color-picker 컴포넌트로 내장함
  • polymer 3를 위한 작업
    • hybrid 또는 polymer 2 모델로 마이그레이션
    • npm dependency와 import 연결 작업
    • js코드 내로 template 포함작업 - 일부 polymer modulizer 를 활용해서 변환, 일부는 Polymer 2(ES6 클래스모델)로 전환함
    • behaviors properties => Behaviors Mixin
    • listner property 마이그레이션
    • 'is' 컴포넌트들 마이그레이션. dom-if, dom-repeat, things-editor-number-input, things-editor-angle-input
    • content => slot
    • $$ => root.querySelectorAll
    • ..

컴포넌트들

  • paper-color-picker
    • polymer 3 작업
    • things-editor-color 에서 활용할 때, paper-color-picker를 동적으로 생성하고 사용후 소멸시키도록 함.
  • paper-tree
  • paper-fab-speed-dial
  • things-scene-viewer
  • things-player
  • things-editor-xxxx
    • things-editor-properties와 things-editor-property 이벤트 연결 관계 단순화 작업
    • things-editor-script 를 대체할 수 있는 things-editor-code 를 추가
    • things-editor-image는 제거하고, 단순한 text input 으로 대체함.

[ Webpack 적용 ]

[ Serverless - 서버프레임워크 종속성을 제거하기 위함임 ]

1. Firebase App 적용 - 진행보류

  • polymer-firebase의 polymer 3 미지원으로 진행 보류중임

2. Github integration 적용 - 진행중

  • Online 모델 리파지토리 용도로 github 리파지토리를 활용하는 방안임.
  • github API를 활용하여 모델을 관리하는 기능을 구현 예정임.

3. Electron 적용 - 진행중

  • Online 모델 리파지토리 용도로 로컬호스트 폴더를 활용하는 방안임.

4. image embedding model

  • 서버프레임워크의 종속성을 없애기 위해서, 이미지 리파지토리 기능을 제거함
  • 모델에 이미지 삽입은 로컬호스트의 이미지를 드래그&드롭 기능으로 넣거나, 외부의 리소스 URL을 입력하도록 함

[ Component Generator ]

  • 컴포넌트 개발 및 테스트 환경을 만들고자 함.
  • things-shell 을 포함한 개발 환경으로 될 것임.
  • 로컬호스트의 코드와 모델을 참조할 수 있도록 서버리스 구성이 포함될 것임.
  • 매뉴얼 자동화 작업이 포함될 것임.

[ Styling - 진행중 ]

  • shadow-dom v1에 맞게 selector 작업
  • :before => ::before
  • /deep/ ::shadow 제거 => ::slotted(..) 적용
  • :host.. => :host(..)
  • display: grid 적용

[ 기타 ]

ace-builds => codemirror

  • ace-builds의 API 복잡성때문에 대안으로 codemirror를 적용하여 things-editor-code 라는 컴포넌트를 추가함.
  • 에디터뷰가 inactive 상태에서 에디터 value가 바뀌고, 에디터가 active 되었을 때 바뀐 value가 반영되지 않는 문제는 여전히 해결되지 않음.
  • 텍스트 데이타 overflow시 scroll 관련한 스타일링을 보완할 필요가 있음.

Grid replacement for Table and Chart Data - 방안 고민중

  • dataludi를 제거하기 위함임