ज़ोइया: तेजी से वेबसाइट विकास के लिए हल्के प्रतिक्रियाशील सीएमएस

इस लेख में, मैं जावास्क्रिप्ट सामग्री के बारे में बात करना चाहूंगा जो मैं विकसित कर रहा हूं, जिसे जावास्क्रिप्ट में लिखा गया है। यह मेरा साइड-प्रोजेक्ट है, मुख्य कार्य से संबंधित नहीं है, जिसे मैं अपने खाली समय में डिजाइन और विकसित करता हूं। एक राय है कि हर वेब डेवलपर को अपना सीएमएस जल्द या बाद में लिखना चाहिए, और किसी के पास एक भी नहीं होगा :-)

TL; DR: Demo.zoiajs.org , व्यवस्थापक पैनल (लॉगिन: व्यवस्थापक, पासवर्ड: पासवर्ड), Github , MIT लाइसेंस

एक फाएट सिद्दीकी: जावास्क्रिप्ट अब हर जगह है, इसका उपयोग न केवल क्लाइंट पक्ष पर, बल्कि सर्वर साइड, साथ ही माइक्रोकंट्रोलर, कार, स्मार्टफोन में किया जा सकता है - एक शब्द में, लगभग किसी भी क्षेत्र में। लेकिन जेएस के लिए "पारंपरिक" क्षेत्र वेब था, और जहां यह प्रोग्रामिंग भाषा पुस्तकालयों, पैटर्न, उपयोगिताओं और रूपरेखाओं के एक पूरे चिड़ियाघर में बढ़ी है। यह सब समझना काफी कठिन है, और कभी-कभी यह आवश्यक है कि एक बहुत ही सरल साइट बनाई जाए जिसे आवश्यक होने पर जल्दी से प्रबंधित किया जा सके: सामग्री, नेविगेशन मेनू आदि जोड़ें और संपादित करें।

ऐसे कार्यों के लिए, PHP में लिखे गए कई CMS हैं (जिनमें से कुछ मैंने अपने काम में इस्तेमाल किए थे, जैसे GetSimple CMS ), लेकिन मैंने JS में एक भी प्रतिक्रियाशील CMS नहीं लिखा है और एक डेटाबेस के रूप में मैंगो (कृपया लिखें) टिप्पणियाँ, अगर वहाँ एक है, लेकिन मैं इसे याद किया)। रिएक्ट और मार्को से मिलने के बाद, मैं अब jQuery की कठोर दुनिया में नहीं लौटना चाहता, और इसलिए ज़ोइया का जन्म हुआ। वैसे, यह दूसरा संस्करण है, पहले ने पुराने जमाने के तरीके से काम किया (अब यह समर्थित नहीं है और अद्यतन नहीं है)।

विकास के वर्तमान स्तर पर, निम्नलिखित को लागू करने की क्षमता:

• Zoia जावास्क्रिप्ट पर विकसित किया जा रहा है - दोनों सर्वर साइड पर और क्लाइंट पर
• एक मॉड्यूलर वास्तुकला है, नए मॉड्यूल जोड़कर कार्यक्षमता का विस्तार करना संभव है
• वितरित आर्किटेक्चर: API को Fastify + Mongo , React + Redux पर व्यवस्थापक पैनल, Fastify + Marko पर यूजरस्पेस के लिए वेब सर्वर - यह सब विभिन्न सर्वरों पर स्थापित किया जा सकता है
• बहुभाषावाद "बॉक्स से बाहर", पहले से ही अंग्रेजी और रूसी भाषाएं हैं, आप किसी भी भाषा को जोड़ सकते हैं - लिंगुई का उपयोग किया जाता है।
• सहायक घटकों, पुस्तकालयों और उपयोगिताओं की एक बड़ी संख्या: रूपों के निर्माण के लिए, डायनेमिक टेबल (अब तक केवल व्यवस्थापक पैनल में), प्राधिकरण, आदि।
• Webpack के साथ बनाएँ
• सामग्री संपादन: आप कई डिज़ाइन टेम्पलेट्स का उपयोग कर सकते हैं (उदाहरण के लिए, विभिन्न पृष्ठों के लिए); सामग्री को प्रबंधित करने का एक तरीका चुनने का एक विकल्प है: WYSIWYG संपादक ( CKEditor 5 का उपयोग करके) या HTML कोड संपादक ( ACE संपादक, क्रमशः); जब बचत होती है, तो सामग्री को अनुकूलित किया जाता है (कोड मिनिफिकेशन और टाइपोग्राफ का उपयोग) - जब उचित विकल्प सेट करते हैं; उन श्रेणियों के वृक्ष की संरचना करना संभव है जिनमें पृष्ठ स्थित हैं और "ब्रेड क्रुम्ब्स" का उपयोग करते हैं; छवियों का एक "लोडर" है (CKEditor और ACE दोनों के लिए कार्यान्वयन)
• उपयोगकर्ता प्रबंधन: किसी भी संख्या में उपयोगकर्ताओं को जोड़ना, उनकी प्रोफ़ाइल को संपादित करने की क्षमता, पासवर्ड और स्थिति सेट करना
• नेविगेशन प्रबंधन: सुविधाजनक नेविगेशन ट्री प्रबंधन, "सबमेनू" जोड़ने की क्षमता
• भवन तैयार करने के लिए तैयार स्क्रिप्ट, सिस्टमएड तैयार करना, NGINX कॉन्फ़िगरेशन इत्यादि।

वास्तुकला के बारे में थोड़ा। जैसा कि मैंने ऊपर कहा था, सिस्टम में एक एपीआई होता है (यह डेटाबेस क्वेरीज़, डेटा प्रोसेसिंग का काम करता है), एक व्यवस्थापक पैनल (एसपीए की तरह काम करता है, क्लाइंट-साइड रूटिंग का उपयोग करता है, जो रिएक्ट + रिडक्स का उपयोग करके विकसित किया गया है), और यूजर स्पेस (आइसोमॉर्फिक आर्किटेक्चर, विकसित) मार्को, रेंडरिंग सर्वर साइड पर क्लाइंट के बाद के रिहाइड्रेशन के साथ किया जाता है)। व्यवस्थापक पैनल क्लाइंट की तरफ से सीधे एपीआई तक पहुंचता है, उपयोगकर्ता-अंतरिक्ष वेब सर्वर रेंडर करने से पहले एपीआई तक पहुंचता है। प्राधिकरण JWT के माध्यम से किया जाता है।

नियंत्रण कक्ष मॉड्यूल के सुविधाजनक विकास के लिए, उपकरण बनाए गए हैं जो एक उपयोगकर्ता इंटरफ़ेस के निर्माण की सुविधा प्रदान करते हैं: रिएक्टर के लिए एक फार्म बिल्डर बड़ी संख्या में संभावित फ़ील्ड विकल्प (पूर्वावलोकन के साथ फ़ाइलें और छवियां डाउनलोड करने सहित), कॉलम और इनलाइन संपादन फ़ील्ड को सॉर्ट करने की क्षमता के साथ एक गतिशील तालिका।

यह डिफ़ॉल्ट टेम्पलेट जैसा दिखता है:



व्यवस्थापक पैनल इस प्रकार है:



लेआउट अनुकूली है; UIkit का उपयोग उपयोगकर्ता स्थान और व्यवस्थापक पैनल के लिए किया जाता है। यह एक बेहतरीन CSS फ्रेमवर्क है। जिसमें बड़ी संख्या में रेडी-टू-यूज़ घटक होते हैं, यह आसान है और वेबपैक को बॉक्स से बाहर अनुकूलित और समर्थन करता है।

सीएमएस एप्लिकेशन के कई क्षेत्र हैं, लेकिन मुख्य कार्य (जैसा कि मैंने ऊपर कहा था) मैं देखता हूं कि मध्यम जटिलता की साइट बनाने के लिए एक हल्के समाधान का विकास है जो आधुनिक जावास्क्रिप्ट और बड़ी संख्या में आधुनिक विकास और भंडारण उपकरणों दोनों की क्षमताओं का उपयोग करेगा।

निकट भविष्य में अपेक्षाकृत अधिक विकास की योजना इस प्रकार है:

• मॉड्यूल के विकास के साथ-साथ व्यवस्थापक पैनल के तैयार घटकों पर प्रलेखन लिखना आवश्यक है
• सोचें और परीक्षण लिखें (अब वे बिल्कुल नहीं हैं :)
• ग्राहक के पक्ष में स्क्रू पंजीकरण / प्राधिकरण / व्यक्तिगत खाता + सामाजिक माध्यम से प्राधिकरण। नेटवर्क (OAuth)
• अतिरिक्त कार्यक्षमता (ब्लॉग, उत्पाद सूची, ऑनलाइन स्टोर आदि) के साथ आवश्यक मॉड्यूल विकसित करें

कुछ कार्यात्मक प्रतिबंधों के साथ डेमो संस्करण यहां है: Demo.zoiajs.org , व्यवस्थापक पैनल भी उपलब्ध है (लॉगिन: व्यवस्थापक, पासवर्ड, पासवर्ड)। हर घंटे में, डेटाबेस डिफ़ॉल्ट सेटिंग्स पर रीसेट हो जाता है, आपको फिर से प्राधिकरण से गुजरना होगा।

सीएमएस कोड जीथब पर उपलब्ध है , इसलिए यदि आप चाहें, तो आप विकास में शामिल हो सकते हैं, बग की रिपोर्ट कर सकते हैं, आदि। मुझे योगदानकर्ताओं के लिए खुशी होगी; ;-)