Patterns.dev

 (patterns.dev)
2 पॉइंट द्वारा GN⁺ 2025-12-12 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • वेब एप्लिकेशन डिज़ाइन और परफॉर्मेंस ऑप्टिमाइज़ेशन पैटर्न पर केंद्रित एक मुफ्त ऑनलाइन रिसोर्स, जो JavaScript और आधुनिक फ्रेमवर्क आधारित लर्निंग कंटेंट प्रदान करता है
  • Vanilla JavaScript, React, Vue के लिए अलग-अलग, संरचित डिज़ाइन पैटर्न, rendering, loading और performance सुधार तकनीकों का व्यवस्थित संग्रह
  • कोड री-यूज, state management, rendering strategy और bundle optimization जैसी प्रैक्टिकल उदाहरणों के साथ CodeSandbox अभ्यास वातावरण उपलब्ध
  • डिजाइन पैटर्न को नियम नहीं, बल्कि रेफरेंस गाइड के रूप में प्रस्तुत किया गया है, ताकि दोहराने वाली समस्याओं के समाधान और कोड के सामान्य पैटर्न को आसानी से समझा जा सके
  • नवीनतम ES2017+ सिंटैक्स और React Hooks आधारित इम्प्लीमेंटेशन शामिल हैं, जिनका फोकस बड़े web apps की structural scalability और performance सुधार पर है

अवलोकन

  • Patterns.dev एक वेब ऐप आर्किटेक्चर सुधार के लिए मुफ्त ऑनलाइन संसाधन है, जिसमें डिज़ाइन, rendering और performance patterns पर मुख्य जोर दिया गया है
  • Vanilla JavaScript, React, Vue.js वातावरण में implementations के उदाहरणों के साथ प्रत्येक पैटर्न का उद्देश्य और उपयोग का तरीका समझाया गया है
  • eBook/PDF डाउनलोड और ऑनलाइन ब्राउज़ करने की सुविधा उपलब्ध है

JavaScript पैटर्न

  • बुनियादी JavaScript और Node.js पर केंद्रित कई पैटर्न उपलब्ध हैं
    • Singleton, Proxy, Prototype, Observer, Module, Mixin, Mediator, Flyweight, Factory जैसे पारंपरिक design patterns सम्मिलित हैं
  • performance और loading optimization patterns का व्यापक संग्रह मौजूद है
    • Dynamic Import, Route-based Splitting, Tree Shaking, Prefetch, Preload, PRPL, third-party optimization आदि
  • View Transitions API के साथ पेज ट्रांज़िशन animations, list virtualization और कोड मिनिफिकेशन जैसी आधुनिक browser features का इस्तेमाल दिखाया गया है

React पैटर्न

  • React और Next.js पर आधारित structural patterns और rendering strategies प्रदान किए गए हैं
    • Container/Presentational, HOC, Render Props, Hooks, Compound जैसे निर्माण पैटर्न शामिल हैं
  • rendering modes की तुलना
    • Client-side, Server-side, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR आदि
  • React Server Components तथा Next.js Core Web Vitals optimization पर गाइड उपलब्ध है
  • React Stack Patterns (2025/2026) दस्तावेज़ में framework, build tools, routing, state management और AI integration जैसे अपडेटेड टेक स्टैक का कवरेज है

Vue पैटर्न

  • Vue.js स्पेसिफ़िक पैटर्न के रूप में component structure और state management पर फोकस
    • Components, Async Components, Composables, Container/Presentational, Data Provider, Dynamic Components आदि
  • Composition API और <script setup> सिंटैक्स के साथ मॉडर्न code structure दिखाया गया है
  • Provide/Inject, Renderless Components, Render Functions जैसे advanced patterns शामिल हैं

पैटर्न अपनाने की फिलॉसफी

  • Patterns.dev में पैटर्न को कठोर नियम नहीं बल्कि संदर्भीय उपकरण के तौर पर दिखाया गया है
    • ये दोहराने वाली समस्याओं के लिए कॉमन सॉल्यूशन देते हैं, लेकिन हर जगह इन्हें फोर्सफुली लागू करने पर जोर नहीं देते
  • डिज़ाइन पैटर्न का मकसद कोड-स्तरीय समस्याओं की समानता को इंसान के लिए आसान तरीके से समझाना है
  • language/framework-specific patterns की अहमियत पर जोर देते हुए, पारंपरिक GoF patterns से आगे बढ़कर आधुनिक approach सुझाई गई है

लर्निंग और प्रैक्टिस सपोर्ट

  • CodeSandbox प्रैक्टिस उदाहरणों के जरिए हर पैटर्न का वास्तविक implementation देखना संभव है
  • विज़ुअल एनिमेशन मैटेरियल के साथ concept समझने में मदद मिलती है
  • वेब परफॉर्मेंस पैटर्न के जरिये code loading efficiency और बेहतर यूज़र एक्सपीरियंस लाने के तरीके बताए गए हैं

मुख्य विशेषताएँ

  • ES2017+ सिंटैक्स पर आधारित implementations के कारण यह आधुनिक JavaScript ecosystem के लिए optimized है
  • React developers के लिए targeted optimization और web performance सुधार पर खास ध्यान देता है
  • डिज़ाइन पैटर्न की मॉडर्न व्याख्या के जरिए उपयोगिता को जटिलता पर प्राथमिकता देता है
  • बड़े वेब ऐप्स की scalability और performance gains के लिए practical guide के तौर पर काम करता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-12-12
Hacker News की राय

  • पहले की नौकरी में .NET enterprise apps बनाते समय design patterns वाकई बहुत उपयोगी थे
    कई टीमें एक ही pattern इस्तेमाल करती थीं, इसलिए code परिचित लगता था और नए projects की structure भी consistent रहती थी
    लेकिन अब मैं 10 साल से ज़्यादा पुराने JS app पर काम कर रहा हूँ, और Java EE style के getter/setter के अत्यधिक उपयोग तथा जटिल factory structure की वजह से ये उल्टा नुकसानदेह लगते हैं
    जब लोग यह समझे बिना patterns का ज़रूरत से ज़्यादा इस्तेमाल करते हैं कि उन्हें क्यों इस्तेमाल किया जा रहा है, तो नतीजा अक्सर सीधे-सादे, आसानी से पढ़े जाने वाले code से भी बहुत खराब होता है (YAGNI principle याद आता है)

    • मेरा मानना है कि patterns को ‘बनाया’ नहीं जाता, उन्हें ‘खोजा’ जाता है
      एक developer के तौर-तरीके में कभी न कभी Adapter, Builder, Iterator जैसी संरचनाएँ स्वाभाविक रूप से उभर आती हैं
      design patterns की असली अहमियत यह है कि वे इन खोजे गए patterns को एक common language देते हैं, ताकि लोग आसानी से एक-दूसरे से communicate कर सकें
    • बहुत से patterns का मतलब सिर्फ C# या Java जैसी ज्यादा constraints वाली languages में ही बनता है
      C, Go, JavaScript जैसी सरल languages में वही चीज़ बहुत आसान तरीके से हल की जा सकती है
    • enterprise background से आने वाले developers को मैं अक्सर JS में भी वही OOP patterns ज़बरदस्ती लागू करते देखता हूँ
      यह उस language की philosophy से मेल नहीं खाता
    • मैंने भी पहले अच्छी नीयत से patterns लागू किए थे और उनसे maintenance nightmare पैदा कर दिया था
      शुरुआत में सब कुछ साफ-सुथरा दिखता है, लेकिन समय के साथ logic बिखर जाता है, और नई requirements आते ही pattern टूटने लगता है
      आखिर में साधारण switch statement की याद आने लगती है
    • जो लोग कहते हैं कि patterns बेकार हैं, उनमें से कईयों के पास large-scale systems का अनुभव नहीं होता
      यह वैसा ही नज़रिए का फर्क है जैसा छोटे app बनाने वाले और गगनचुंबी इमारत बनाने वाले में होता है

  • पहले Yahoo Design Pattern Library हुआ करती थी
    उसका फोकस UX patterns पर था, और वह user behavior (जैसे rating देना) को guide करने वाले कई उदाहरण बहुत अच्छे से व्यवस्थित करती थी
    मूल लिंक / web archive

    • इसी तरह का एक open source project The Component Gallery है
      यह 90 से ज़्यादा design systems के UI components का संग्रह है, और a11y/ARIA guidelines सीखने के लिए भी अच्छा है
      component.gallery
    • “accordion”, “carousel” जैसे terms इसी library की वजह से standardized हुए
      common language ने productivity बढ़ाई
    • इसे देखकर पुराने web दौर की feeling आती है और nostalgia उमड़ आता है
    • YUI भी अपने समय से आगे था
    • Yahoo engineering सच में शानदार थी, इसलिए उसका management failure की वजह से बिखर जाना अफसोसजनक है

  • यह resources का अच्छा collection है, इसलिए मैंने इसे bookmark कर लिया
    इसी तरह की कुछ sites भी साझा की गईं

    • deviq.com — Domain-driven design, design patterns, antipatterns
    • refactoring.guru — Refactoring और design patterns
    • Standard Patterns in Choice-Based Games
    • कई बार लोग किसी problem को pattern में ज़बरदस्ती फिट करने की कोशिश में समय बर्बाद कर देते हैं, इसलिए सावधान रहना चाहिए
    • component.gallery भी UI components बनाने के लिए एक अच्छा meta resource है
    • java-design-patterns.com भी देखने लायक है
    • Microsoft Cloud Design Patterns भी अच्छी तरह व्यवस्थित है
    • Portland Pattern Repository इस क्षेत्र की मूल site है
      कहा जाता है कि Ward Cunningham ने wiki इसी मकसद के लिए बनाई थी c2.com/ppr

  • जैसे-जैसे अनुभव बढ़ता है, design patterns पर निर्भरता कम होती जाती है
    junior developers अक्सर सोचते हैं कि patterns सीखना career shortcut है, लेकिन कई बार इससे उल्टा complexity बढ़ जाती है
    असली बात है problem की nature और data structures को समझना
    उदाहरण के लिए, दो arrays के common items ढूँढने में HashMap का उपयोग करके O(n) तक लाना कहीं ज्यादा उपयोगी simple pattern है
    इसका शायद कोई नाम नहीं, लेकिन practical काम में यह रोज़ इस्तेमाल होने वाला core pattern है
    आखिरकार अहम चीज़ principles और context हैं, न कि textbook जैसी form

    • common language के रूप में patterns की value है
      अगर कोई कहे “मैंने singleton बनाया”, तो बात तुरंत समझ में आ जाती है
      लेकिन tools पर अंधविश्वास करना समस्या है
    • ऊपर बताया गया HashMap वाला उपयोग DB दुनिया में hash join कहलाता है
      इसे Postgres query planner में भी देखा जा सकता है
    • “factory” जैसे terms इस्तेमाल करना शर्म की बात नहीं है
      बस code में नाम देते समय उन्हें descriptive रखना बेहतर है
    • HashMap का उपयोग करके की गई optimization को dynamic programming का एक रूप भी माना जा सकता है
      Leetcode practice करते समय इसे सीखना काम आता है
    • design pattern से भी ज्यादा महत्वपूर्ण है pattern को लागू करने के तरीके का pattern
      technical patterns के साथ-साथ organizational patterns पर भी बात करने वाली किताब के रूप में
      Organisational Patterns (James Coplien, Neil Harrison) की सिफारिश की गई
      सारांश लिंक

  • कॉलेज के दिनों में संयोग से मुझे Ralph Johnson द्वारा सीधे पढ़ाई गई patterns class लेने का मौका मिला था,
    और वह मेरी ज़िंदगी की सबसे उपयोगी classes में से एक थी
    Ralph Johnson wiki

  • एक कहावत है: “Design Patterns are a sign of missing language features”
    यानी अगर language पर्याप्त expressive होती, तो शायद patterns की ज़रूरत ही न पड़ती
    संबंधित सामग्री: C2 Wiki, Norvig paper, Medium article

  • यह site अच्छी तरह व्यवस्थित tutorials का संग्रह है, लेकिन Christopher Alexander की 『A Pattern Language』 की तरह
    patterns के बीच का hierarchical connection structure नहीं दिखाती, यह थोड़ा खलता है
    मूल रूप से patterns को ऊपरी–निचले संबंधों के भीतर अर्थ मिलता है, लेकिन technical books में वह context गायब रहता है
    यह भी और स्पष्ट होना चाहिए कि हर pattern किस problem को solve करता है

    • 『A Pattern Language』 के examples में देखा जा सकता है कि हर pattern दूसरे patterns से organically connected है
      उदाहरण के लिए “Short Passages” का संबंध “Flow Through Rooms”, “Building Thoroughfare” आदि से जुड़ता है
      यही structure pattern language की असली ताकत है

  • patterns का ज़रूरत से ज़्यादा उपयोग करने पर code धीमा और maintain करना मुश्किल हो जाता है

    • patterns तब सबसे असरदार होते हैं जब वे problem-solving के दौरान स्वाभाविक रूप से सामने आते हैं
      जो problem अभी है ही नहीं, उसे पहले से हल करने की कोशिश करने पर complexity बढ़ती है
    • आखिरकार वे सही जगह और सही मात्रा में इस्तेमाल होने पर ही चमकते हैं

  • POSD(Principles of Software Design) के नज़रिए से उपयोगी patterns ये हैं

    • Module Pattern
    • Factory Pattern (factory functions)
    • Mediator/Middleware Pattern (function pipeline के रूप में)
    • Hooks Pattern
    • Container/Presentational Pattern
      इसके उलट Singleton, Mixin, Observer आदि complexity बढ़ा सकते हैं या global state पर निर्भरता पैदा कर सकते हैं, इसलिए सावधानी ज़रूरी है
    • एक comment में पूछा गया था कि POSD क्या है

  • यह site depth से ज्यादा breadth पर केंद्रित लगती है, इसलिए इसमें 2017 जैसी feel आती है
    सच में ज़रूरी बात है immutable data के साथ काम करने की बुनियाद सीखना
    बिना for loop के सिर्फ array methods से code लिखने की practice बहुत मदद करती है

    • मैंने पहले ClojureScript इस्तेमाल किया था, और immutable data संभालने के लिए वह अच्छा था
      JS में Object.freeze की अपनी सीमाएँ हैं, और ramdajs की तरह नया object लौटाने वाला approach ज्यादा practical है
      JS की modern syntax की वजह से अब भी ramdajs के कुछ functions उपयोगी बने हुए हैं
    • यह पढ़कर लगा कि मुझे भी अपने patterns को document करके देखना चाहिए