🙅🏿 👨🏿‍🏭 🥡 चायोस के साथ एक वेब परियोजना बनाने के लिए पारिस्थितिकी तंत्र दृष्टिकोण 📀 ✊ 🚵🏽

इस लेख में मैं आपको बताऊंगा कि फ्रंट-एंड असेंबली प्रक्रिया को "और से" कैसे व्यवस्थित किया जाए।

मैं आपको एक परिचयात्मक लेख के साथ शुरू करने की सलाह देता हूं, अगर कोई पढ़ा नहीं है।

वहां मैंने चाय सीएसएस के बारे में सीएसएस के सुपरसेट के रूप में बात की, और यह सच नहीं था। अधिक सटीक - आधा सच। और इसलिए वह अपनी रचना (इसलिए नाम) के समय था।

अब यह सामग्री निर्माण के लिए एक घोषणात्मक धातु-चित्रण है, क्यूएमएल, लिस्प, क्लोजर, नेमेर्ले से इसकी प्रेरणा का अधिक हिस्सा है।

आवश्यक शर्तें

शुरुआत के लिए, मैं होली से बचने के लिए कुछ बुनियादी बातों पर सहमत होना चाहूंगा:

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

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

TeaCSS क्या है

यह घोषणात्मक DSL के लिए फ्रेमवर्क है, जावास्क्रिप्ट एपीआई के साथ एक कंपाइलर कंस्ट्रक्टर है। और शैलियों, लिपियों, टेम्प्लेट और आउट-ऑफ-द-बॉक्स छवियों के लिए कुछ बुनियादी डीएसएल कार्यान्वयन।

यह पार्सिंग लेता है, सामग्री बनाने में महत्वपूर्ण सहायता प्रदान करता है। यह परियोजना PEG.js और Jison से संबंधित है - यदि आपके पास समय है, तो मेरा सुझाव है कि आप खुद को परिचित करें।

और अगर कोई इच्छा है, तो मैं पार्सर और संकलक के बारे में एक लेख लिख सकता हूं, अगर किसी को इसकी आवश्यकता है।

TeaCSS का वाक्यविन्यास अपमान के लिए सरल है:

[] _ { //  /*   */ @import "another_tea_file.tea"; @  JS @{  JS } [] ; [] _ { //   ,     } }

यह सिर्फ इसलिए है क्योंकि लगभग किसी भी घोषित भाषा को नेस्टेड नियमों के एक सेट के रूप में वर्णित किया जा सकता है, और अंतर्निहित जेएस आपको भाषा के लिए अनिवार्य तत्व जोड़ने की अनुमति देता है, जैसे कि चर, स्थितियां, लूप, और बहुत कुछ।

उदाहरण के लिए, शैलियों के लिए लेस जैसी भाषा का वर्णन करने के लिए, कोड की केवल 150 लाइनें पर्याप्त हैं।
github.com/boomyjee/teacss/blob/master/src/teacss/core.js#L309

यह वह है जो डिफ़ॉल्ट पीढ़ी की भाषा (स्टाइल) है।
किसी अन्य भाषा में जाने के लिए, इसके साथ चयनकर्ता को शुरू करें:

 SomeLang { //      }

एक निर्माण प्रणाली के रूप में TeaCSS

टीकेज़ में दूसरी अंतर्निहित भाषा स्क्रिप्ट है, जैसा कि आप अनुमान लगा सकते हैं, इसका उपयोग एप्लिकेशन स्क्रिप्ट बनाने के लिए किया जाता है।

वाक्य रचना सरल है:

 Script some_name { @append "some/script/path.js"; @append { function bla() { /* … */ } // Some javascript Code } }

यानी रैखिक तत्व केवल तृतीय-पक्ष स्क्रिप्ट हैं; ब्लॉक तत्व केवल कोड हैं जिन्हें आप अलग से हाइलाइट नहीं करना चाहते हैं। उत्पादन में, सभी लिपियों को कुछ_नाम द्वारा संयोजित किया जाएगा, अर्थात आप जैसे चाहें जेएस को ग्रुप कर सकते हैं।

TeaCSS पुस्तकालय स्वयं द्वारा ही बनाया गया है, यहाँ इसकी "मेकफाइल" है:
github.com/boomyjee/teacss/blob/master/src/build.tea

इस दृष्टिकोण के साथ, TeaCSS मॉड्यूलर विकास पुस्तकालयों के लिए एक प्रतिस्थापन है और एक वेब अनुप्रयोग मुखौटा बनाने के लिए एक पारिस्थितिकी तंत्र है।

वह क्या आवश्यकता है पर करता है या StealJS करते हैं ।

मैंने इन 2 पुस्तकालयों को एक उदाहरण के रूप में दिया क्योंकि AFAIK उनमें से केवल दो लिपियों के उत्पादन संस्करणों के निर्माण और निर्माण का समर्थन करता है।

लेकिन वे (शायद स्वयं पुस्तकालय भी नहीं हैं, लेकिन दृष्टिकोण ही) कई गंभीर कमियां हैं:

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

इसलिए, यह तुरंत विधानसभा नियमों को एक अलग स्थान (सी विकास में, यह एक मेकफाइल है) में आवंटित करने की मांग करता है।
इस तरह के मेकफाइल की भूमिका Teacss.Script द्वारा ली गई है।

उपयोग करने के लिए दृष्टिकोण समान है।

 <? if ($applicationMode=="development") ?> <link tea="scripts.tea"> <script src="teacss.js"></script> <? else ?> <script src="production.js"> <? endif ?>

अन्य भाषाओं और कुछ उदाहरणों को जोड़ना

TeaCSS अपने आप में एक मॉड्यूलर और एक्स्टेंसिबल असेंबली प्रणाली है। मूल वाक्य रचना के आधार पर एक नई भाषा को जोड़ने के लिए, भाषा के विवरण के साथ एक आयात जोड़ें।

उदाहरण के लिए:

 @import "some_language_definition.js"; @import "some_tea_file.tea"; //

टीकेएसएस पारिस्थितिकी तंत्र में एक नई भाषा का वर्णन करने के तरीके के बारे में, मैं एक अलग लेख लिखूंगा। इस बीच, मैं ऐसी भाषा का एक उदाहरण दिखाऊंगा।

TeaCSS का उपयोग स्थैतिक साइटों को बनाने के लिए एक प्रणाली के रूप में किया जा सकता है, एनालॉग्स Jekyll हैं और यहां एक सूची है, बहुत सारे iwantmyname.com/blog/2011/02/list-static-website-generators.html

तरल में संकलित करने के लिए समर्थन के साथ सिंटैक्स सहज है।

 Template layout { html { head { meta[http-equiv="Content-Type"][content="text/html; charset=utf-8"]; title TeaCSS; } body { #header { .item(url,text) { % if path == "@{url}" { a.active[href="@{url}"] @text; } % else { a[href="@{url}"] @text; } } div { .item('index.htm','Intro'); .item('canvas.htm','Canvas'); a[href="download.htm"][target="_blank"] Download; } } #content { % block content {} } } } }

यह प्रयोग किया जाता है, उदाहरण के लिए, teacss.org उत्पन्न करने के लिए।
यहाँ रिपॉजिटरी है जिसमें साइट स्वयं और उसके जनरेटर झूठ - github.com/boomyjee/teacss-docs

और अधिक विस्तृत उदाहरण github.com/boomyjee/teacss-docs/blob/master/build/templates/pages/index.tea है

कंस्ट्रक्शन जैसे

 Highlight xml { <link tea="style.tea"> <script src="teacss.js"></script> }

जो हाइलाइट किए गए कोड के लिए आउटपुट HTML देते हैं।

मैंने एक छोटा सा खेल का मैदान बनाया है ताकि आप इस बात पर करीब से नज़र रख सकें कि HTML पीढ़ी कैसे काम करती है - teacss.org/template.htm

निष्कर्ष

TeaCSS एक घोषणात्मक मेटा-डीएसएल है जिसे मूल रूप से वेब अनुप्रयोगों के विकास और असेंबली की सुविधा के लिए आविष्कार किया गया था, लेकिन अनिवार्य रूप से एक सार्वभौमिक घोषित-आधारित सामग्री जनरेटर है जो ब्राउज़र-आधारित JS का उपयोग एक अनुकूल भाषा के रूप में करता है।

इसका मतलब है कि शुरू करने और काम करने के लिए आपको ब्राउज़र में सीधे एक इंटरैक्टिव विकास प्रक्रिया बनाने की संभावना को खोलने के लिए कुछ भी नहीं बल्कि एक ब्राउज़र की आवश्यकता होती है।

मैं इस बारे में निम्नलिखित लेखों में से एक में बात करूंगा।

पुनश्च

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