How to shared code between JavaScript project ? + Copy and paste + Extract to modules + NPM package + Monorepo + Git sub-module + Bit.dev

1. © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved.
การ Shared code ของ projects
BKK.JS

2. © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !2

3. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !3

4. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !4

5. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !5
Line 1

6. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !6
Line 1
Line 2

7. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !7
Line 1
Line 2
Line 3

8. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !8
Line 1
Line 2
Line 3
Line 4

9. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !9
Line 1
Line 2
Line 3
Line 4
Line 5

10. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !10
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

11. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !11
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 1

12. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !12
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 1
Line 2

13. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !13
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 1
Line 2
Line 3

14. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !14

15. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !15
Duplication code in GitHub !!

16. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !16
https://www.theregister.co.uk/2017/11/21/github_duplicate_code/

17. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !17
How to remove duplication ?

18. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !18
Extract to somewhere !!

19. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !19
New function
New class
New module

20. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !20
New function
New class
New module
New layer (utilities !!)

21. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !21

22. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !22
Use before Reuse

23. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !23

24. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !24
1. Testing
2. Document
3. Discoverable
4. Easy to use

25. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !25
Use cases

26. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !26
My Project

27. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !27
My Project

28. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !28
My Project

29. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !29
My Project

30. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !30
My Project

31. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !31
My Project

32. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !32
How to solve ?

33. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !33
Fail 1
Common project, reference to project
Common

34. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !34
Fail 2
Use NPM package

35. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !35
Difficult to use
Difficult to organize
Difficult to discover

36. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !36
Dependency between packages
How to change ?

37. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !37

38. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !38
Try to fail …

39. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !39
Try to learn from fail …

40. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !40
Try to improve

41. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !41
Fail 3

42. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !42
Lerna
https://lerna.js.org/

43. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !43
Single repository
Multiple package.json
Multiple build
Multiple test

44. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !44
Single repository
Good for change and update
But
Difficult to discover

45. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !45
Fail 4

46. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !46

47. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !47
Back to basic
Common project, reference to project
Common

48. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !48
Back to basic
Communication and collaboration

49. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !49
Shared code is about people

50. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !50
Try new way …

51. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !51
https://bit.dev/

52. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !52
https://bit.dev/primefaces/primereact/chart

53. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !53

54. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. !54