Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Drawing the line between 3rd party and custom code
Glenn Reyes
October 11, 2019
Programming
0
40
Drawing the line between 3rd party and custom code
Glenn Reyes
October 11, 2019
Tweet
Share
More Decks by Glenn Reyes
See All by Glenn Reyes
glennreyes
0
42
glennreyes
0
13
glennreyes
1
7
glennreyes
0
42
glennreyes
0
48
glennreyes
0
28
glennreyes
0
55
glennreyes
0
55
glennreyes
1
49
Other Decks in Programming
See All in Programming
tourismgeek
1
130
williln
0
220
osyo
0
320
emmaglorypraise
0
130
grapecity_dev
1
190
hanasuke
1
510
danilop
1
730
gernotstarke
0
380
joergneumann
0
140
pirosikick
4
950
legalforce
PRO
0
630
numeroanddev
1
230
Featured
See All Featured
vanstee
117
4.9k
stephaniewalter
260
11k
keithpitt
401
20k
3n
163
22k
bryan
31
3.4k
bkeepers
321
53k
bermonpainter
342
26k
bryan
100
11k
shlominoach
176
7.5k
tenderlove
53
3.5k
lara
15
2.7k
jnunemaker
PRO
40
4.6k
Transcript
Drawing the line between 3rd party and custom code @glnnrys
· glennreyes.com
Decisions @glnnrys
@glnnrys
Glenn Reyes @glnnrys
Why do we love building apps? @glnnrys
None
✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ @glnnrys
None
Open Source is ❤ @glnnrys
Vincent van Gogh “Great things are done by a series
of small things brought together.” @glnnrys
@glnnrys
How do we decide on things? @glnnrys
Which form library in React? @glnnrys
Which form library? formik final-form redux-form Vanilla @glnnrys
Which date library? @glnnrys
Which date library? moment dayjs date-fns Native luxon @glnnrys
Which id generator? nanoid cuid shortid my own @glnnrys
Making decisions are hard and time consuming. @glnnrys
Approaches @glnnrys
Just pick the whatever @glnnrys
None
None
None
None
None
What I need vs what my users need @glnnrys
None
@glnnrys
In any case ... @glnnrys
@glnnrys @glnnrys
@glnnrys @glnnrys
Architectural Decision @glnnrys
Complexity Speed API Size Bugs Dependency Documentation Time Constraints Development
Environment License @glnnrys
How to measure complexity? @glnnrys
// $(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
// $(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(' '); } } } 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(' '); } @glnnrys
// $(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(' '); } } } 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(' '); } @glnnrys
@glnnrys
// $(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(' '); } } @glnnrys
// $(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(' '); } } // $(el).toggleClass(className) function toggleClass(el, className) { el.classList.toggle(className); } @glnnrys
element.classList.toggle(className); @glnnrys
How to determine bundle size? @glnnrys
https://bundlephobia.com/result?p=react @glnnrys
Import Cost VSCode Extension @glnnrys
Measuring performance @glnnrys
@glnnrys
@glnnrys
@glnnrys
@glnnrys
⏰ @glnnrys
On the web there's new libraries every day @glnnrys
Use what works best for you @glnnrys
Community Support ❤ @glnnrys
Powerful @glnnrys
@glnnrys
People love solving problems @glnnrys
How are problems solved in web development? @glnnrys
Decisions @glnnrys
How to decide what library to use? @glnnrys
Is it over-engineered? @glnnrys
@glnnrys
@glnnrys
Look into the source code @glnnrys
The node_modules folder is your friend @glnnrys
Let maintainers know about your problem, ideas & improvements @glnnrys
Dealing with picking the most popular library @glnnrys
@glnnrys
⭐ GitHub stars Active maintenance Active community Platforms @glnnrys
https://npm-stat.com @glnnrys
https://trends.google.com @glnnrys
Should I pick the most popular library? @glnnrys
@glnnrys
How about just roll my own? @glnnrys
¯\_(ツ)_/¯ @glnnrys
Rolling your own code allows you to Tailor code to
your exact needs @glnnrys
Rolling your own code gives you full control @glnnrys
With full control it's your respobility to maintain and keep
track of your code @glnnrys
Where to draw the line? @glnnrys
Find the right balance intuitively @glnnrys
Understand the importance of decisions @glnnrys
Harm reduction @glnnrys
Try to get the best outcome but reduce potential risks
@glnnrys
Make decisions @glnnrys
Make good decisions @glnnrys
Make good decisions Make clean decisions @glnnrys
Make good decisions Make clean decisions Make right decisions @glnnrys
Make good decisions Make clean decisions Make right decisions Make
smart decisions @glnnrys
Make good decisions Make clean decisions Make right decisions Make
smart decisions Make reasonable decisions @glnnrys
Everytime we add more code into our library we increase
the spectrum for new bugs @glnnrys
Take risks and keep moving forward @glnnrys
Take risks and be creative @glnnrys
Always start simple @glnnrys
There's a reason why things are being open-sourced. @glnnrys
Keep good practices that worked in the past. @glnnrys
You don't have to use it because it's new. @glnnrys
Don't let new things intimidate you @glnnrys
Write the best code possible @glnnrys
One day old code becomes legacy. And if they are
great, we'll enjoy using older code even more. @glnnrys
“ ” 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
Keep using code what you know best @glnnrys
Never stop learning @glnnrys
Never stop learning new things @glnnrys
Thank you @glnnrys · glennreyes.com