Eliminating noise from your code

Transcript

1. Radoslav Stankov Eliminating noise from your code
2. 👋
3. Radoslav Stankov @rstankov
5. https://tips.rstankov.com
6. https://speakerdeck.com/rstankov
8. https://speakerdeck.com/rstankov
16. Why code gets bad overtime? 🤔
17. What is a good code? 🧐
21. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
22. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
23. 😱
24. Is this good code? 🙄
25. Why not? 🤕
27. ... too much information density
28. ... too much information noise 💨
29. “In cognitive psychology, cognitive load refers to the used amount of working memory resources. ” - WikipediA Cognitive load
30. “Ego depletion refers to the idea that self- control or willpower draws upon a limited pool of mental resources that can be used up.” - WikipediA Ego depletion
37. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 } else {
 }
 });
 });
38. $('.accordion-menu .item a').each(function() {
 $(this).bind('click', function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
 }); 

39. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
40. <ul class="accordion-menu">
 <li class="item">
 <a href="#" class="section-1">Section 1</a>
 <ul id="section-1">
 <li>...</li>
 <li>...</li>
 <li>...</li>
 </ul>
 </li>
 </ul>
41. $('.accordion-menu .item a').click(function() {
 var title = this.className;
 var theul = $('#' + title);
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
42. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 } else {
 theul.slideUp();
 var theli = dropa.parent('li');
 theli.animate({'padding-bottom': '20px'});
 }
 }
 });
43. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul');
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 var theli = dropa.parent('li')
 theli.animate({'padding-bottom': '20px'});
 }
 });
44. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.css('display') == 'none') {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
45. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 if (theul.is(':visible')) {
 theul.slideDown()
 } else {
 theul.slideUp()
 }
 }
 });
46. $('.accordion-menu .item a').click(function() {
 var theul = $(this).next('ul')
 if (theul.length > 0) {
 theul.slideToggle();
 }
 });
47. $('.accordion-menu .item a').click(function() {
 $(this).next('ul').slideToggle();
 });

48. $('.accordion-menu .item a').live('click', function() {
 $(this).next('ul').slideToggle();
 });
49. $('.accordion-menu .item a').click(function() {
 $(this).next('ul').slideToggle();
 });

50. $(document).on('click', '.accordion-menu .item a', function() {
 $(this).next('ul').slideToggle();
 });

51. $(document).on('click', '.js-accordion-item a', function() {
 $(this).next('js-accordion-section').slideToggle();
 });
52. $(document).on('click', '[data-accordion="item"]', function() {
 $(this).next('[data-accordion="section"]').slideToggle();
 });
54. So, React doesn't make the code automatically better than jQuery? 🤔 It, never did 😈
57. “It is better to be a good programmer with great habits, than a great programmer.” - Kent Beck
58. Broken windows theory
59. “Social psychologists and police of fi cers tend to agree that if a window in a building is broken and is left unrepaired, all the rest of the windows will soon be broken.” - WikipediA Broken windows theory
60. The Scout Rule
61. “Leave your code better than you found it.” The Scout Rule
62. Eliminating noise from your code
63. Eliminating 💥 Code Smells 💥
65. Code smell is any symptom in the source code of a program that possibly indicates a deeper problem. Code smells
66. Code smells are usually not bugs—they are not technically incorrect and don't currently prevent the program from functioning. Instead, they indicate weaknesses in design that may be slowing down development or increasing the risk of bugs or failures in the future. Code smells
67. Code refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior Refactoring
70. Refactoring
71. #1 Useless Code
72. function LoadMoreBaseOnDevice(props) { return ( <> <Device.Mobile> <LoadMoreButton {...props} /> </Device.Mobile> <Device.TabletOrDesktop> <LoadMoreOnScroll {...props} /> </Device.TabletOrDesktop> </> ); }
73. function LoadMoreBaseOnDevice(props) { return ( <Device.Mobile> {isMobile => isMobile ? ( <LoadMoreButton {...props} /> ) : ( <LoadMoreOnScroll {...props} /> ) } </Device.Mobile> ); }
74. function LoadMoreBaseOnDevice(props) { const isMobile = useIsMobile(); return isMobile ? ( <LoadMoreButton {...props} /> ) : ( <LoadMoreOnScroll {...props} /> ); }
75. <Button onClick={(event) => click(event)} />
76. <Button onClick={(event) => click(event)} />
77. <Button onClick={click} />
78. function Component({ array }) { return ( <> {array && array.length > 0 && array.map(item => <Item item={item} />)} </> ); }
79. function Component({ array }) { return ( <> {array && array.length > 0 && array.map(item => <Item item={item} />)} </> ); }
80. function Component({ array }) { return ( <> {array && array.map(item => <Item item={item} />)} </> ); }
81. function Component({ array }) { return ( <> {array.map(item => <Item item={item} />)} </> ); }
82. function Component({ array }) { return ( <> {array.map(item => <Item item={item} />)} </> ); }
83. function Component({ array }) { return array.map(item => <Item item={item} />); }
84. <ABTest variant="newsletterForm"> {(variant, complete) => { return variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ); }} </ABTest>
85. <ABTest variant="newsletterForm"> {(variant, complete) => { return variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ); }} </ABTest>
86. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
87. #2 Too Much Conditional Logic
90. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
91. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.leftForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} /> ) ) : viewer ? ( !viewer.isSubscribedToNewsletter && ( <SubscribeForm email={viewer.email} className={style.topForm} contentClassName={styles.hideField} onSubscribe={complete} /> ) ) : ( <SubscribeForm className={styles.topForm} onSubscribe={complete} /> ) } </ABTest>;
92. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} viewer={viewer} /> ) : ( <SubscribeForm className={style.topForm} onSubscribe={complete} viewer={viewer} /> ) } </ABTest>
93. <ABTest variant="newsletterForm"> {(variant, complete) => variant == 'left' ? ( <SubscribeForm className={styles.leftForm} onSubscribe={complete} viewer={viewer} /> ) : ( <SubscribeForm className={style.topForm} onSubscribe={complete} viewer={viewer} /> ) } </ABTest>
94. <ABTest variant="newsletterForm"> {(variant, complete) => ( <SubscribeForm className={variant === 'left' ? styles.leftForm : styles.topForm} onSubscribe={complete} viewer={viewer} /> )} </ABTest>
95. function Card({ card }) { if (card.type === 'news') { return <NewsCard card={card} />; } if (card.type === 'post') { return <PostCard card={card} />; } if (card.type === 'user') { return <UserCard card={card} />; } return <DefaultCard card={card} />; }
96. const CARDS = { news: NewsCard, post: PostCard, user: UserCard, }; function Card({ card }) { const Component = CARDS[card.type] || DefaultCard; return <Component card={card} />; }
97. function ShareButton({ sharable, medium }) { const icon = medium === 'twitter' ? <IconTwitter /> : <IconFacebook />; const onClick = () => { if (medium === 'facebook') { shareOnFacebook(sharable); } else { shareOnTwitter(sharable); } }; return ( <Button icon={medium.icon} title={`Share on ${capitalize(medium)}`} onClick={onClick} /> ); }
98. function ShareButton({ sharable, medium }) { const icon = medium === 'twitter' ? <IconTwitter /> : <IconFacebook />; const onClick = () => { if (medium === 'facebook') { shareOnFacebook(sharable); } else { shareOnTwitter(sharable); } }; return ( <Button icon={medium.icon} title={`Share on ${capitalize(medium)}`} onClick={onClick} /> ); }
99. const MEDIUMS = { twitter: { icon: <IconTwitter className={styles.twitter} />, title: 'Share on Twitter', share: shareOnTwitter, }, facebook: { icon: <IconFacebook className={styles.facebook} />, title: 'Share on Facebook', share: shareOnFacebook, }, }; function ShareButton({ sharable, medium }) { const medium = MEDIUMS[medium]; return ( <Button icon={medium.icon} title={medium.title} onClick={() => medium.share(sharable)} /> ); }
100. const MEDIUMS = { twitter: { icon: <IconTwitter className={styles.twitter} />, title: 'Share on Twitter', share: shareOnTwitter, }, facebook: { icon: <IconFacebook className={styles.facebook} />, title: 'Share on Facebook', share: shareOnFacebook, }, linkedin: { icon: <IconLinkedIn className={styles.linkedIn} />, title: 'Share on LinkedIn', share: shareOnLinkedIn, }, }; function ShareButton({ sharable, medium }) { const medium = MEDIUMS[medium]; return ( <Button icon={medium.icon} title={medium.title} onClick={() => medium.share(sharable)}
101. interface IProps { sharable: ISharable; medium: keyof typeof MEDIUMS; }
102. http://blog.rstankov.com/replace-conditional-with-map-refactoring/
103. #3 Too DRY code
105. Good DRY
106. The bad side of DRY
107. const API_GET = '/api/:source_type/:id'; const API_GET_DETAILS = '/api/:source_type/:id/details'; const API_GET_VERSION = '/api/:source_type/:id/on/:year/:date/:month'; const API_GET_SUBTYPE = '/api/:source_type/:id/sub/:subtype/:subtype_id';
108. const API = 'api'; const SOURCE_ID = '/:id'; const SOURCE_DATE = '/:year/:month/:day'; const SUBTYPE = '/:subtype'; const SUBID = '/:subtype_id'; const API_GET = API + SOURCE_TYPE + SOURCE_ID; const API_GET_DETAILS = API + SOURCE_TYPE + SOURCE_ID + '/details'; const API_GET_VERSION = API + SOURCE_TYPE + SOURCE_ID + '/on' + SOURCE_DATE; const API_GET_SUBTYPE = API + SOURCE_TYPE + SOURCE_ID + '/sub' + SUBTYPE + SUBID;
109. function path(rest = '') { return `${BASE_PATH}${rest}`; } function token(string) { return `${SEPARATOR}${string}`; } const SEPARATOR = '/'; const API = 'api'; const SOURCE_TYPE = ':source_type'; const SOURCE_ID = ':id'; const YEAR = ':year'; const MONTH = ':month'; const DAY = ':day'; const SUBTYPE = ':subtype'; const SUBID = ':subtype_id'; const DETAILS = 'details'; const ON = 'on'; const SUB = 'sub'; const BASE_PATH = token(API) + token(SOURCE_TYPE) + token(SOURCE_ID); const DATE_PART = token(YEAR) + token(MONTH) + token(DAY); const SUB_PART = token(SUBTYPE) + token(SUBID); const API_GET = path(); const API_GET_DETAILS = path(token(DETAILS)); const API_GET_VERSION = path(token(ON) + token(DATE_PART)); const API_GET_SUBTYPE = path(token(SUB) + token(SUB_PART));
111. Don't repeat yourself (DRY) is a principle of software development aimed at reducing repetition of software patterns, replacing it with abstractions or using data normalization to avoid redundancy. Don't repeat yourself
112. The DRY principle is stated as "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system" Don't repeat yourself
113. #4 Single Level of Abstraction
114. SLAP Single Level of Abstraction Principle SLAP
115. <Dropdown onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
116. <Dropdown trigger="click" /> <Dropdown trigger="hover" />
117. function Cart() { const [cart, setData] = useState<T>(getCartData(DataSource)); const callback = useCallback(getCartData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
118. function Cart() { const [cart, setData] = useState<T>(getCartData(DataSource)); const callback = useCallback(getCartData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
119. function Cart() { const [cart, setData] = useState<T>(getCartData(DataSource)); const callback = useCallback(getCartData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback]); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
120. function Cart() { const cart = useData(getCartData); return ( <aside> <h2> Cart <small>({cart.length})</small> </h2> <ul> {cart.map(item => ( <li key={item.product.id}> <CartItem item={item} /> </li> ))} </ul> </aside> ); }
121. function useData<T>(selectData: (data: DataSourceClass) => T): T { const [data, setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { const removeChangeListener = DataSource.addChangeListener(() => setData(callback(DataSource)), ); return removeChangeListener; }, [callback, setData]); return data; }
122. function useData<T>(selectData: (data: DataSourceClass) => T): T { const [data, setData] = useState<T>(selectData(DataSource)); const callback = useCallback(selectData, []); useEffect(() => { return DataSource.addChangeListener(() => setData(callback(DataSource)), ); }, [callback, setData]); return data; }
123. function useData<T>(selectData: (data: DataSourceClass) => T): T { const [data, setData] = useState<T>(selectData(DataSource)); useEffect(() => { return DataSource.addChangeListener(() => setData(selectData(DataSource)), ); }, [selectData, setData]); return data; }
125. real book
130. Thanks 😎
131. https://speakerdeck.com/rstankov