🌯 🙇🏻 ⏹️ रेल पर बीईएम 🌻 🎻 👪

नमस्कार <% = habrauser%>!

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

क्यों?

कई लोगों ने एक बार रेल में बीईएम का उपयोग करने का विचार व्यक्त किया, लेकिन सीएसएस में सही ढंग से नामकरण कक्षाओं के अलावा, मैंने कुछ भी उपयोगी नहीं सीखा। इसके अलावा, मैं पेन के साथ ऐसी कक्षाएं लिखना नहीं चाहता। कोई विशिष्ट उपकरण प्रस्तावित नहीं थे। और बीईएम केवल सीएसएस और जावास्क्रिप्ट नहीं है। मैं रेल के अंदर BEMHTML टेम्पलेट इंजन के समान कुछ करना चाहता था। इसका उपयोग करने के लिए, कोई V8 रेल में प्लग कर सकता है और टेम्पलेट संकलित कर सकता है। लेकिन फिर रेल के बहुत कम अवशेष हैं और यह रूबी मार्ग से बहुत दूर है। मुझे HAML टेम्प्लेट लिखने और SASS प्रीप्रोसेसर का उपयोग करने के लिए उपयोग किया जाता है। मैं वास्तव में समझ के लिए BEM का उपयोग रेल में नहीं करना चाहता हूं ताकि समझ के लिए गंभीर कठिनाइयों का परिचय दिया जा सके और डेवलपर्स को उनके लिए असामान्य कदम उठाने के लिए मजबूर किया जा सके। इसके अलावा, रेल पर एक पाइपलाइन है जो संपत्ति एकत्र करता है और संकलित करता है, इसलिए फर्श पहले ही किया जा चुका है। बहुत सोचने के बाद, उपकरण के रूप में आपके पास जो कुछ होना चाहिए, उसकी स्पष्ट आवश्यकताएं हैं:

रेल परियोजनाओं पर सभी रूबी के लिए ब्लॉक के साथ एक निर्देशिका। आदर्श रूप से, केवल RoR नहीं।
विचारों में ब्लॉकों और तत्वों का प्रतिपादन।
सुविधाजनक निर्माण / हटाने / ब्लॉक / तत्वों / संशोधक को देखने के।
पाइपलाइन के साथ एकीकरण।
बेम-टूल्स के लिए अधिकतम समानता।

बेम-टूल्स क्यों नहीं

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

कैसे?

बनाएँ / हटाएं / देखें

ब्लॉक को देखने / हटाने / बनाने के लिए, मैंने कई थोर कार्यों को लिखा। मुझे यह भी प्रतीत हुआ कि समूहों में ब्लॉक वितरित करने में सक्षम होना उपयोगी होगा। पेन से नहीं, बल्कि कंसोल से, और फिर इच्छित समूह से ब्लॉक रेंडर करें:

thor bem:create -b filter -G search

और अब आप इस तरह से ब्लॉक / एलिमेंट / मॉडिफायर बना सकते हैं, और मॉडिफायर वैल्यू के साथ या बिना हो सकते हैं:

 thor bem:create -b test thor bem:create -b test -e icon thor bem:create -b test -m large thor bem:create -b test -m color -v red thor bem:create -b test -e icon -m file thor bem:create -b test -e icon -m size -v small thor bem:create -b test -e icon -m size -v small -T sass

निकालना उसी तरह से होता है:

 thor bem:remove -b test ...

मौजूदा ब्लॉक देखें:

 thor bem:list thor bem:list -G search thor bem:list -b test ...

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

फ़ाइल संरचना

ब्लॉक

block_name
- तत्वों
  - __element_name
    - __element_name.html.haml
    - __element_name.css.sass
    - __element_name.coffee
    - __element_name.md
- mods
  - _mod_name
    - _mod_name.css.sass
    - _mod_name.coffee
    - _mod_name.md
- block_name.html.haml
- block_name.css.sass
- block_name.coffee
- block_name.md
GROUP_NAME
- block_name

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

प्रतिपादन

सौभाग्य से, रेल में सहायक हैं। उनके लिए धन्यवाद और हैश, HAML विचारों में रेंडरिंग ब्लॉक इस तरह किया जा सकता है:

 = b "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }] = b "test", mods: [{color: "red"}], content: [{ block: "yeah", content: ["Hello, BEM!"] }] = b "test", group: "name", mods: [:large, {color: "red"}], content: [] = b "test", cls: "custom", attrs: {"data-toggle": "modal"}, content: [] = b "test", tag: "article", content: []

मेरी राय में यह BEMHTML की तरह दिखता है और यह अच्छी खबर है। स्लिम, एचएमएल, एसएएस, कॉफ़ी, एमडी तकनीकों के लिए, मैंने टेम्पलेट बनाए। ब्लॉक बनाने के बाद, haml टेम्प्लेट (उदाहरण के लिए) haml तकनीक का उपयोग करके ब्लॉक का कार्यान्वयन बन जाएगा। छवि और समानता में, आप उन सभी तकनीकों के लिए टेम्पलेट बना सकते हैं, जिनमें आप रुचि रखते हैं।

संपत्ति के बारे में क्या?

संपत्ति के साथ, सब कुछ बहुत सरलता से तय किया जाता है। आप किसी भी डायरेक्टरी को उस स्कोप में जोड़ सकते हैं जहाँ स्टाइल फाइल्स और स्क्रिप्ट्स सर्च की जाएँगी। ब्लॉक / एलिमेंट / मोडिफ़ायर बनाते समय, एक परिभाषा वाली लाइनों को application.css.sass और application.js फाइलों में जोड़ा जाता है, उदाहरण के लिए:

 //= require test/elements/__field/__field.coffee

बाकी का काम Sprockets द्वारा किया जाता है। सब कुछ अच्छी तरह से काम करने के लिए, यह अत्यधिक की सिफारिश की जाती है कि एप्लीकेशन और एस.एक्सएएस और एप्लीकेशन.जेएस फाइलों में स्टाइल और स्क्रिप्ट न लिखें। उन्हें कॉन्फ़िगर के रूप में उपयोग करें, केवल उपयोग की जाने वाली सूची के लिए। यह सुविधाजनक और BEM के बिना है। यह दृष्टिकोण आपको सिद्धांत में प्रयुक्त ब्लॉकों / तत्वों / संशोधक की घोषणा के बारे में भूल जाने की अनुमति देता है। सब कुछ अपने आप होता है। आप deps.js. के बारे में भूल सकते हैं इसे आजमाइए!

उत्पादन

अब आप इस टूलकिट का उपयोग करने का प्रयास कर सकते हैं। मैंने उन्हें एक मणि के रूप में डिज़ाइन किया, जिसे आप आज अपनी परियोजना में स्थापित कर सकते हैं और बीईएम का उपयोग कर सकते हैं। जीथब से लिंक: बेम -ऑन-रेल्स ।

योजनाओं

झंडे बेम और जे.एस.
ब्लॉक और तत्वों को मिलाकर।
ब्लॉक की संरचना में बदलाव के साथ संशोधक। अब तक, केवल शैली और जावास्क्रिप्ट।
कमांड लाइन से बेम। थोर के माध्यम से चल रहे कार्यों में इसकी कमियां हैं।

लाभ

गिट रिपॉजिटरी के रूप में ब्लॉक के साथ एक निर्देशिका होने से आप अपने ब्लॉक को किसी भी प्रोजेक्ट से जोड़ सकते हैं। एक ब्लॉक / तत्व / संशोधक का कार्यान्वयन रेल से परिचित प्रौद्योगिकियों और PHP के लिए परिचित लोगों दोनों पर हो सकता है। आप अपने सभी रूबी में रेल परियोजनाओं पर एक ही ब्लॉक रिपॉजिटरी का उपयोग कर सकते हैं (जो मैं वास्तव में पसंद करूंगा), और बीईएम के उपयोग से जुड़े किसी भी अन्य प्रोजेक्ट में। यह टूलकिट ऐसे अद्भुत ढांचे पर बीईएम के प्रभाव के दायरे का विस्तार करने के लिए बनाया गया है जैसे रूबी ऑन रेल्स।

मुझे किसी भी टिप्पणी और किसी भी मदद की खुशी होगी। आपका ध्यान के लिए धन्यवाद!

बेमेड रहो!

रेल पर बीईएम