{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blog/explained-open-close-principle-in-2-minutes/","result":{"data":{"site":{"siteMetadata":{"name":"Huzaifa Rasheed","title":"Huzaifa Rasheed","description":"Software Engineer","about":"\n      Hey, I'm Huzaifa.\n      <br/><br/>\n      Engineer by trade, builder by instinct - I believe in owning my stack, shipping fast, and occasionally running on chai (tea) and stubbornness. I work best in that sweet spot between deep focus and fast feedback - solo or in sync with a good team.\n      <br/><br/>\n      This site's my little corner of the internet - part portfolio, part lab - where I document what I build, break, or learn.\n      <br/><br/>\n      Outside work, I'm into long walks, pixel-perfect headshots in FPS games (eventually... maybe), plants I probably overwater, and the occasional \"classified\" hobby to stay curious.\n      <br/><br/>\n      Reach out anytime - my digital door's always open. 👋\n    ","twitter":"https://twitter.com/huzRasheed","github":"https://github.com/huzaifa-99","linkedin":"https://www.linkedin.com/in/huzaifa-rasheed/","devto":"https://dev.to/huzaifa99","stackoverflow":"https://stackoverflow.com/users/12579290/huzaifa","leetcode":"https://leetcode.com/rhuzaifa","discord":"https://discordapp.com/users/rhuzaifa","email":"dev@rhuzaifa.com","projects":[{"name":"FFMpeg Web","description":"An experimental browser-based terminal that runs FFmpeg using WebAssembly, enabling media processing directly in the browser.","link":"https://ffmpeg-web.rhuzaifa.com/","github":"https://github.com/huzaifa-99/ffmpeg-web"},{"name":"Feed base 2","description":"A mini browser game where players manipulate 4-bit binary blocks to match target BCD values - part puzzle, part binary logic trainer.","link":"https://feedbase2.rhuzaifa.com/","github":"https://github.com/huzaifa-99/feed-base-2"},{"name":"Fabric browser extension","description":"A Chrome extension that injects engineered Fabric prompts directly into the ChatGPT interface for enhanced workflow automation.","link":"https://github.com/huzaifa-99/fabric-browser-extension","github":"https://github.com/huzaifa-99/fabric-browser-extension"},{"name":"Pure Cinema","description":"An experimental, tongue-in-cheek text-to-video generator that stitches together footage, synthesized voiceovers, and background music with a Node.js + ffmpeg pipeline. Not quite Hollywood, but it renders.","link":"https://cinema.rhuzaifa.com","github":null},{"name":"Aria2c Packload","description":"A Bash script for bulk downloading magnet links or torrents using aria2c - optimized for series or list-based transfers.","link":"https://github.com/huzaifa-99/aria2c-packload","github":"https://github.com/huzaifa-99/aria2c-packload"},{"name":"RSS Watchdog","description":"A lightweight Bash script that watches RSS/Atom feeds and compiles a Markdown-based reading checklist for Unix systems.","link":"https://github.com/huzaifa-99/rss-watchdog","github":"https://github.com/huzaifa-99/rss-watchdog"},{"name":"QuoteGen","description":"A quote graphic generator that produces stylized quote images with random selection and a built-in editor for customization.","link":"https://quotegen.rhuzaifa.com/","github":null},{"name":"WebRTC Video Chat","description":"A basic WebRTC-powered app enabling peer-to-peer video and audio calls between two users.","link":"https://webrtc-video-chat.rhuzaifa.com/","github":null}],"experience":null,"skills":[{"name":"Languages & Frameworks","description":"JavaScript, TypeScript, Python, Bash - Frameworks include Node.js, React, Next.js, Vue, React Native, FastAPI."},{"name":"Databases & Storage","description":"PostgreSQL, MySQL, MongoDB - Experience with schema design, indexing, query optimization, and migrations."},{"name":"Cloud & Infrastructure","description":"AWS (EC2, RDS, S3, Lambda), Vercel, Netlify, Heroku - Comfortable with serverless, autoscaling, and cost optimization."},{"name":"DevOps & Tooling","description":"Docker, Git, CI/CD pipelines (GitHub Actions, GitLab CI) - Experience with observability, containerization, and release workflows."},{"name":"Testing & QA Automation","description":"Jest, Playwright, Puppeteer, Selenium - Focus on E2E testing, mocking APIs, and maintaining test coverage."}]}},"markdownRemark":{"id":"f1660e6c-6f5c-5bf1-9140-48af71c32d16","excerpt":"Repost of https://dev.to/rhuzaifa/explained-open-close-principle-in-2-minutes-29dd Before we begin. Ever heard about SOLID ?. SOLID are 5 software development…","html":"<blockquote>\n<p>Repost of <a href=\"https://dev.to/rhuzaifa/explained-open-close-principle-in-2-minutes-29dd\">https://dev.to/rhuzaifa/explained-open-close-principle-in-2-minutes-29dd</a></p>\n</blockquote>\n<h3>Before we begin.</h3>\n<p>Ever heard about SOLID <strong>?</strong>.</p>\n<blockquote>\n<p>SOLID are 5 software development principles or guidelines based on Object-Oriented design making it easier for you to make your projects scalable and maintainable.</p>\n</blockquote>\n<p>They are more like best practices than rules. <strong>Open/Close</strong> is a principle of SOLID Design.</p>\n<h3>So What Is It?</h3>\n<p>Open/Close is the <strong>O</strong> of SOLID.</p>\n<p>It says</p>\n<blockquote>\n<p>Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. <strong><a href=\"https://en.wikipedia.org/wiki/Bertrand_Meyer\">Bertrand Meyer</a></strong> </p>\n</blockquote>\n<p>Like you should not re-write your existing code to be compatible with the newer one.</p>\n<h4>Meaning</h4>\n<p>✔️ Can add more code.<br/>\n✔️ Can Extend functionality to old code by adding new code.<br/>\n❌ Can Modify old code used by other modules.</p>\n<h4>Goal</h4>\n<p>Get the system to a point where you can never break the core of your system. You can add more functionality but not modify the one used by other modules.</p>\n<p>It is easier to follow this principle if you already follow the <strong><a href=\"/blog/why-you-should-be-following-the-single-responsibility-principle\">Single Responsibility Principle</a></strong> and it really comes in handy once you also follow the <strong><a href=\"/blog/is-the-liskov-substitution-principle-really-useful\">Liskov Substitution Principle.</a></strong></p>\n<p>This prevents those situations in which changing one class also requires you to update all depending classes. </p>\n<p>We will use inheritance to demonstrate an example.</p>\n<h3>A SIMPLE USE CASE</h3>\n<p>Let’s say someone is paying for items bought from an E-commerce store. This is what it might look like in <code class=\"language-text\">payment.ts</code> (ignore the syntax)</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">Payment</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token function\">payWithCash</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle cash pay logic here</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">payWithCredit</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n  \t<span class=\"token comment\">// handle credit pay logic here</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">makePayment</span><span class=\"token punctuation\">(</span>payMethod<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> payment <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Payment</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>payMethod <span class=\"token operator\">===</span> <span class=\"token string\">'cash'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    payment<span class=\"token punctuation\">.</span><span class=\"token function\">payWithCash</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>payMethod <span class=\"token operator\">===</span> <span class=\"token string\">'credit'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    payment<span class=\"token punctuation\">.</span><span class=\"token function\">payWithCredit</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>⚠️ What if we want to add a new payment type? We would have to add a new method and modify our code.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">Payment</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token function\">payWithCash</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle cash pay logic here</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">payWithCredit</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle credit pay logic here</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">public</span> <span class=\"token function\">payWithCoupon</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle coupon pay logic here</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">makePayment</span><span class=\"token punctuation\">(</span>payMethod<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> payment <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">Payment</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>payMethod <span class=\"token operator\">===</span> <span class=\"token string\">'cash'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    payment<span class=\"token punctuation\">.</span><span class=\"token function\">payWithCash</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>payMethod <span class=\"token operator\">===</span> <span class=\"token string\">'credit'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    payment<span class=\"token punctuation\">.</span><span class=\"token function\">payWithCredit</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>payMethod <span class=\"token operator\">===</span> <span class=\"token string\">'coupon'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    payment<span class=\"token punctuation\">.</span><span class=\"token function\">payWithCoupon</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>This is not in line with the Open/Close Principle.</p>\n<hr>\n<p>With the <strong>Open/Close</strong> Principle we would modify our code <code class=\"language-text\">payment.ts</code> as follows.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">interface</span> <span class=\"token class-name\">PaymentMethod</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">pay</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">:</span> <span class=\"token builtin\">boolean</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">Cash</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">PaymentMethod</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token function\">pay</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle cash pay logic here</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">CreditCard</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">PaymentMethod</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token function\">pay</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n  \t<span class=\"token comment\">// handle credit pay logic here</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">makePayment</span><span class=\"token punctuation\">(</span>payMethod<span class=\"token operator\">:</span> PaymentMethod<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>payMethod<span class=\"token punctuation\">.</span><span class=\"token function\">pay</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>Now if we, later on, want to add a new payment option like wire transfer then we only need to add a new class, no changes needed to the existing code.</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">WireTransfer</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">PaymentMethod</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">public</span> <span class=\"token function\">pay</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// handle wire transfer pay logic here</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>Since we are using the interfaces, be sure to check out if you are following <strong><a href=\"/blog/is-it-practical-to-use-interface-segregation-principle\">Interface Segregation</a></strong> principle of <strong>SOLID</strong>.</p>\n<hr>\n<h3>Should You Use It?</h3>\n<p>You should use Open/Close if you want clean code but there are situations in which you should just go ahead and do your own stuff. It really depends on what you are doing.</p>\n<h3>Tip</h3>\n<p>You can get away with modifying your existing unit tests and just write a new one for the code you added.</p>\n<hr>\n<p>So here it is. Do you like the article? Be sure to leave a comment.</p>\n<h3>What’s Next</h3>\n<p>Why The <strong><a href=\"/blog/why-the-dependency-inversion-principle-is-worth-using\">Dependency Inversion</a></strong> Principle Is Worth Using.</p>","frontmatter":{"title":"Explained: OPEN/CLOSE Principle In 2 Minutes","date":"March 29, 2021","description":"Learn about the Open/Close Principle of SOLID design, which advocates for extending software functionality without modifying existing code."}}},"pageContext":{"slug":"/blog/explained-open-close-principle-in-2-minutes/","previous":{"fields":{"slug":"/blog/is-the-liskov-substitution-principle-really-useful/"},"frontmatter":{"title":"Is The Liskov Substitution Principle Really Useful?"}},"next":{"fields":{"slug":"/blog/2-simple-tips-to-clean-nested-if-else-conditions/"},"frontmatter":{"title":"2 Simple Tips To Clean Nested IF/ELSE Conditions."}}}},"staticQueryHashes":["2276319502"]}