JS and NPM Libraries

The Good, Bad & Ugly

Agenda

  • Usage Considerations
  • Native Alternatives
  • Extreme Case

Considerations - Obvious

  • Size & Performance
  • Complexity
  • DX
  • Ease of Adaptation

Not So Obvious

  • Supply chain
  • Hidden problems
  • Technical debt & Obsolescence
  • Considerations are all related

Size & Performance

  • moment.js
  • dayjs
  • angular
  • react
  • ant design

Complexity

  • Number of moving parts
  • Size - lines of code
  • Magic - nesting and dependencies
  • Cognitive load

Some Examples

  • mwc - cannot implement table after many years
  • vuetify - too long to migrate from v2 to v3

DX

  • Learning curve & knowledge retention
  • Productivity
  • Breaking changes - size and frequency
  • Adoption (angular vs react)
  • Career enhancer? / employability

Ease Of Adaptation

Look into the code, can you fix it yourself?

Supply Chain

Many places can go wrong

VueJS -> vue-apollo -> apollo-client -> ...dependencies

Hidden Problems

Creator did not know any better

An Example To Illustrate

Technical Debt & Obsolecence

How much work needed for...

  • Dependency changes
  • New language features

Native Alternatives

Package Alternative
HTTP Calls Fetch API
Date & time
Currency & Number
Language (plurals, rtl)		 Intl API
Validation HTML5 Form Validation
lodash Native has most features

Extreme Case

  • No bundler / build tool
  • use ES Module
  • Web Components
  • Vanilla router & state manager

Conclusion

  • Must have & Nice to have
  • Review considerations and alternatives
  • Make Decision