차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 같이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
14. 문제들
기술적 know-how 축적 안됨
상용 라이브러리 사용시 비용 문제
경험이 누적되지 않아 차트 적용(디자인/개발)시,
매번 반복되는 리소스의 낭비
15. 물론, 처음엔 자체 개발
그러나, 성공적이진 못했다.
서비스 적용 이후, 메인터넌스 잘 안됨
개발 주체의 부재상황(이직 등)
또는 다른 서비스 개발 등으로 인한 지원 어려움
타 라이브러리 대비 범용성 부족
16. 그렇다면
오픈소스 사용은 어떨까?
지속적 업데이트, 기술적 트렌드 반영, 안정성 등을
기대할 수 있으니 합리적이지 않을까?
향후 오픈소스 업데이트 지속되지 않을 경우,
fork를 통한 유지 고려도 가능
공통된 라이브러리를 사용하면, 각각 다른 라이브러리 사용으로
인한 관리 및 기술경험 누적되지 않는 이슈 해결 기대
[참고] 그간 사용되었던 다양한 차트 라이브러리들:
, , , , , etc.NVD3 C3.js Chart.js Highcharts echarts
17. 직접 개발도 해봤고,
외부(상용/오픈)의 것도 사용해 봤으니
간접적인 형태로 접근해 보자
라이브러리의 발전은 생태계에 맡기자.
필요한 기능은 PR을 통해 해결
오픈소스는 일정 수준 검증 되었다.
다양한 문서, practice가 존재한다.
19. C3.JS 선정이유
가장 인기있는 D3.js 기반 한정
Popularity 비교:
→ GitHub star, 써드파티 앱, StackOverflow 질문 수, etc.
간결한 인터페이스
풍부한 문서, 예제 등
→ 구글검색 결과: C3.js(22만) Vs. NVD3(6만4천)
네이버 서비스들에서 이미 다수에서 사용
엔드 유저 대상이므로, 디자인/기능 커스터마이징 용이성 중요
32. C3+ GOAL
매번 다른 기술/라이브러리를 다루는
반복적인 비용 제거
기본적 디자인(테마)을 활용해
커스터마이징(디자인)에 따른 비용 제거
기술적 경험 축적: SVG, D3, C3.js
33. BUT, 현실적 문제직면
장기적 관점에서, C3+ 발전을 위해 외부 공개 목표
하지만,
래퍼/애드온 형태의 지속적 발전과 효용성 의문
기반 라이브러리인 C3.js 지속성 의문
오픈소스의 발전에 기댈 수 있을 것이란 기대는
C3.js의 더딘 발전(또는 중단?)으로 위기 직면
47. 그래, FORK 하자
'향후 오픈소스의 업데이트 지속 안될 경우,
fork를 통한 유지'의 명제
당면한 C3.js의 미해결 과제들:
D3 최신버전 v4+ 미지원
모바일 환경에 대한 지원 부족
오래된 개발 스타일 코드 (ES3)
SVG polyfill 제거
등등...
48. 합리성, 당위성 & 신뢰
Fork 한다고 해서 사용자가 오진 않는다.
기존 커뮤니티에 당위성이 제시 필요
과연 이 사람(개발자)이 믿을만 한가?
50. OOPS~, D3 V4
v3 → v4: Breaking Changes
공식 문서( ) 있으나,
마이그레이션 가이드 없고 만들지 않을거임.
Changes in D3 4.0
[참고] https://github.com/d3/d3/issues/2893
D3 V4 - What's new?
51. D3 V4로 업그레이드
변경된 모듈에 대한 목록을 모두 작성
v3 v4
d3.time.scale d3.scaleTime
d3.svg.line() d3.line
d3.behavior.drag d3.drag
...
모듈의 behavior 변경되어, 기존과 유사한 것도 있지만
다르게 처리되는 것들이 대다수
이전 버전과 변경된 문서를 읽고 비교하고, 테스트 하고...
52. 그외 작업들
차트 생성 흐름에 따른 오류들의 순차적 해결/변환
ES3 → ES6로 전환 병행 및 개발 환경 변경
API 문서화 ( )
테스트 코드 업데이트(d3 v4 호환) 및 커버리지 개선
JSDoc
54. 어느 날, 갑자기 두둥~
갑작스러운 C3.js 차기 릴리즈 계획과 새로운 커미터 추가
[참고] https://github.com/c3js/c3/issues/2033
55. 고민
이미 많은 진전을 통해 릴리즈를 앞둔상황
계획만을 통한 발전에 대한 의문
커미터 추가 후에도 활발한 활동 없어,
빠른 시일 내 D3 v4 지원 어렵다는 판단
계획대로
릴리즈 하자.
56. 오픈소스 네이밍
원래는 C3+ 2.0으로 계획, 그러나 C3.js 연관성의 부정적 의견
'billboard'는 음악 차트
의미는 다르지만 '차트'를 연관
오랫동안 친숙한 이름
FE 프로젝트에서는 기 등록된 npm 모듈명 확인 필요
[참고] Open Source Project Name Checker
63. GITHUB STAR
공개 후, 첫 6일간 700개
14일 후, 1,000개도달!
Star의 가치는?
cdnjs 등록은 최소 200개 요구됨
Vuejs도 첫 6일간 615개
How I Got From 0 to 1 000 Stars on GitHub in Three Months
64. THIRD-PARTY APPS!
Angular, React, R, Web Components 등의
자발적인 프로젝트들의 등장
[참고] https://github.com/naver/billboard.js/wiki/Third-party-applications
65. 지속적 성장
월 npm 다운로드 수
June 370
July 479
Aug 862
Sep 1,124
[참고] npm-stat: billboard.js, 2017.6.8 ~ 9.30
66. 충실한 문서
문서 작성은 아주, 아주 중요하다.
대표 사이트:
C3.js에서 마이그레이션 하기 가이드
잘 작성된 API 문서
왜 Fork 하게 되었나?
Readme
https://naver.github.io/billboard.js/
67. 80여개의 풍부한 예제
많은 예제는 '무엇'이 가능 또는 할수 있는지 보여줄 수 있다.
https://naver.github.io/billboard.js/demo/
68. 이제 부터가 시작
Star의 수는 보다 발전할 수 있도록 도와주는 역할
이슈에 대한 빠른 대응 필요
신규 기능과 버그에 대한 처리
을 통해 향후 방향에 대한 정보제공Roadmap
71. 신규 옵션들과 문서
C3+ 경험들을 통한 신규 옵션
꾸준한 문서 업데이트
API는 한번 작성되면 끝이 아니다.
정확한 의미와 동작을 기술 그리고 지속적 업데이트
72. 오픈소스의 중요한 요소들
안정성, 충분한 문서 그리고 책임감
[참고] http://opensourcesurvey.org/2017/
73. 오픈소스의 어려움
누군가의 노력이 대가없이 제공되는 것.
그러나, 쉽게 비난 받기도 한다.
https://twitter.com/spf13/status/907403135592878080
74. 의연하게 대처하기
You shouldn’t let strangers on the internet
negatively affect your mood or your drive
...
The trolls feed on your
annoyance and discourse.
— Sindre Sorhus
[참고] Between the Wires: An interview with open source developer Sindre Sorhus
1,139 npm Packages
75. WHY DO
OPEN SOURCE?
세상에서 내가 도움 받은 것에 대해
다시 기여하는 의미있고 가치있는 행동
[참고] 네이버 오픈소스 가이드
GitHub Open Source Guides