1.
Tales Of An Open
Source Library

2.
Adam Klein
CTO @ 500Tech

3.
MAKE A POINT
https://angular2-tree.readme.io/

4.
MVP
Customizable & Extendible

5.
MVP
Customizable & Extendible
Listenable

6.
MVP
Customizable & Extendible
Listenable
API

7.
MVP
Customizable & Extendible
Listenable
API
Killer Feature - Keyboard Navigation

8.
A year later…
222 stars
87 forks
187 github issues
80 support tickets
29 pull requests

9.
Version 3.2.3
Async Data
Drag & Drop
Filter
Virtual Scroll
Integration tests
And more…

10.
TIPS FOR THE OPEN
SOURCERER

11.
LIBRARY

12.
SystemJS
Webpack
UMD
Tree Shaking
AoT Typescript

13.
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-
production-build-rollup-javascript/
Read This

14.
import { TreeModule } from ‘angular-tree-component’

15.
Typescript
• components
• tree.component.ts
• tree-node.component.ts
• models
• tree.model.ts
• components
• tree.component.js
• tree-node.component.js
• models
• tree.model.js

16.
Typescript
• components
• tree.component.ts
• tree-node.component.ts
• models
• tree.model.ts
• components
• tree.component.js
• tree.component.d.ts
• tree-node.component.js
• tree-node.component.d.ts
• models
• tree.model.js
• tree.model.d.ts

17.
Webpack
• components
• tree.component.ts
• tree-node.component.ts
• models
• tree.model.ts
• components
• tree.component.js
• tree.component.d.ts
• tree-node.component.js
• tree-node.component.d.ts
• models
• tree.model.js
• tree.model.d.ts

18.
SystemJS

19.
SystemJS
rollup

20.
SystemJS
rollup
bundle vendors

21.
SystemJS
rollup
bundle vendors
tree shaking

22.
SystemJS
rollup
bundle vendors
tree shaking
UMD

23.
SystemJS
• components
• tree.component.js
• tree.component.d.ts
• tree-node.component.js
• tree-node.component.d.ts
• models
• tree.model.js
• tree.model.d.ts
• angular-tree-component.umd.js

24.
AoT
ngc
metadata.json

25.
Versioning
SemVer

26.
MAKE A POINT

27.
Versioning
SemVer
Backwards Compatibility & Deprecation

28.
Versioning
SemVer
Backwards Compatibility & Deprecation
Doc versions

29.
readme.io

30.
Versioning
SemVer
Backwards Compatibility & Deprecation
Doc versions
Changelog

31.
OH THE ISSUES….

32.
SOME KIND WORDS

33.
“I saw your project named angular2-tree-component
and got happy. I guess you are the first one who
developed a tree-view component with latest
angular2 version. Congratulations!”
“Hi Adam,
Thanks for the awesome tree menu. It's great
and easy to use.“
“Hey,
Nice work done on the tree component!”

34.
CALL FOR
CONTRIBUTORS

35.
slidehare.net/500tech
@adamklein500
Thank You