Drawing the line between 3rd party and custom code

Slide 1

Slide 1 text

Drawing the line between 3rd party and custom code @glnnrys · glennreyes.com

Slide 2

Slide 2 text

@glnnrys

Slide 3

Slide 3 text

@glnnrys

Slide 4

Slide 4 text

Glenn Reyes @glnnrys

Slide 5

Slide 5 text

Why do we love building apps? @glnnrys

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Open Source is ❤ @glnnrys

Slide 8

Slide 8 text

Vincent van Gogh “Great things are done by a series of small things brought together.” @glnnrys

Slide 9

Slide 9 text

@glnnrys

Slide 10

Slide 10 text

How do we decide on things? @glnnrys

Slide 11

Slide 11 text

Which form library in React? @glnnrys

Slide 12

Slide 12 text

Which form library? formik final-form redux-form Vanilla @glnnrys

Slide 13

Slide 13 text

Which date library? @glnnrys

Slide 14

Slide 14 text

Which date library? moment dayjs date-fns Native luxon @glnnrys

Slide 15

Slide 15 text

Which id generator? nanoid cuid shortid my own @glnnrys

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Making decisions are hard and time consuming. @glnnrys

Slide 18

Slide 18 text

Approaches @glnnrys

Slide 19

Slide 19 text

Just pick any @glnnrys

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

What I need vs what my users need @glnnrys

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

👩💻👨💻 @glnnrys

Slide 28

Slide 28 text

In any case ... @glnnrys

Slide 29

Slide 29 text

@glnnrys 🤓 👩💻 👷 @glnnrys

Slide 30

Slide 30 text

@glnnrys 🤓 👩💻 👷 🐒 👩🎤 🔮 🥑 🍌 @glnnrys

Slide 31

Slide 31 text

Architectural Decision @glnnrys

Slide 32

Slide 32 text

Complexity Speed API Size Bugs Dependency Documentation Time Constraints Development Environment License @glnnrys

Slide 33

Slide 33 text

How to measure complexity? @glnnrys

Slide 34

Slide 34 text

// $(el).toggleClass(className) function toggleClass(el, className) { if (el.classList) { el.classList.toggle(className); } else { var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); } } youmightnotneedjquery.com @glnnrys

Slide 35

Slide 35 text

// $(el).toggleClass(className) var classes = el.className.split(' '); var existingIndex = classes.indexOf(className); if (existingIndex >= 0) classes.splice(existingIndex, 1); else classes.push(className); el.className = classes.join(' '); } @glnnrys

Slide 36

Slide 36 text

Slide 37

Slide 37 text

@glnnrys

Slide 38

Slide 38 text

Slide 39

Slide 39 text

// $(el).toggleClass(className) function toggleClass(el, className) { el.classList.toggle(className); } @glnnrys

Slide 40

Slide 40 text

element.classList.toggle(className); @glnnrys

Slide 41

Slide 41 text

Bundle size @glnnrys

Slide 42

Slide 42 text

https://bundlephobia.com/result?p=react @glnnrys

Slide 43

Slide 43 text

Import Cost VSCode Extension @glnnrys

Slide 44

Slide 44 text

@glnnrys

Slide 45

Slide 45 text

@glnnrys

Slide 46

Slide 46 text

On the web there's new libraries every day @glnnrys

Slide 47

Slide 47 text

Use what works best for you @glnnrys

Slide 48

Slide 48 text

Community Support ❤ @glnnrys

Slide 49

Slide 49 text

@glnnrys

Slide 50

Slide 50 text

People love solving problems @glnnrys

Slide 51

Slide 51 text

NO PROBLEMS === NO 🤑 🤑 🤑

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

How are problems solved in web development? @glnnrys

Slide 54

Slide 54 text

Decisions @glnnrys

Slide 55

Slide 55 text

How to decide what library to use? @glnnrys

Slide 56

Slide 56 text

Is it over-engineered? @glnnrys

Slide 57

Slide 57 text

@glnnrys

Slide 58

Slide 58 text

@glnnrys

Slide 59

Slide 59 text

Look into the source code 🤓 @glnnrys

Slide 60

Slide 60 text

The node_modules folder is your friend @glnnrys

Slide 61

Slide 61 text

Let maintainers know about your problem, ideas & improvements @glnnrys

Slide 62

Slide 62 text

It should solve your problem @glnnrys

Slide 63

Slide 63 text

Dealing with picking the most popular library @glnnrys

Slide 64

Slide 64 text

@glnnrys

Slide 65

Slide 65 text

⭐ GitHub stars 🛠 Active maintenance 🍃 Active community 💻 Platforms @glnnrys

Slide 66

Slide 66 text

Should I pick the most popular library? @glnnrys

Slide 67

Slide 67 text

@glnnrys

Slide 68

Slide 68 text

How about just roll my own? @glnnrys

Slide 69

Slide 69 text

¯\_(ツ)_/¯ @glnnrys

Slide 70

Slide 70 text

Rolling your own code allows you to Tailor code to your exact needs @glnnrys

Slide 71

Slide 71 text

Rolling your own code gives you full control @glnnrys

Slide 72

Slide 72 text

With full control it's your responsibility to maintain and keep track of your code @glnnrys

Slide 73

Slide 73 text

Where to draw the line? @glnnrys

Slide 74

Slide 74 text

Find the right balance intuitively @glnnrys

Slide 75

Slide 75 text

Understand the importance of decisions @glnnrys

Slide 76

Slide 76 text

Harm reduction @glnnrys

Slide 77

Slide 77 text

Try to get the best outcome but reduce potential risks @glnnrys

Slide 78

Slide 78 text

Make decisions @glnnrys

Slide 79

Slide 79 text

Make good decisions @glnnrys

Slide 80

Slide 80 text

Make good decisions Make clean decisions @glnnrys

Slide 81

Slide 81 text

Make good decisions Make clean decisions Make right decisions @glnnrys

Slide 82

Slide 82 text

Make good decisions Make clean decisions Make right decisions Make smart decisions @glnnrys

Slide 83

Slide 83 text

Make good decisions Make clean decisions Make right decisions Make smart decisions Make reasonable decisions @glnnrys

Slide 84

Slide 84 text

Everytime we add more code into our library we increase the spectrum for new bugs @glnnrys

Slide 85

Slide 85 text

Take risks and keep moving forward @glnnrys

Slide 86

Slide 86 text

Always start simple @glnnrys

Slide 87

Slide 87 text

Keep good practices that worked in the past. @glnnrys

Slide 88

Slide 88 text

Don't let new things intimidate you @glnnrys

Slide 89

Slide 89 text

Write the best code possible @glnnrys

Slide 90

Slide 90 text

One day old code becomes legacy. And if they are great, we'll enjoy using older code even more. @glnnrys

Slide 91

Slide 91 text

“ ” Kent C. Dodds We should be mindful of the fact that we don't really know what requirements will be placed upon our code in the future. @glnnrys