2015-04-01 11 views
22

संयोजन मैं एक्सप्रेस + प्रतिक्रिया के साथ एक आइसोमोर्फिक जावास्क्रिप्ट ऐप पर काम कर रहा हूं। हमने स्थैतिक सामग्री के लिए सर्वर साइड टेम्पलेट्स के लिए जेड का उपयोग करना शुरू कर दिया, लेकिन दोनों के संयोजन तेजी से अनावश्यक हो रहा है।प्रतिक्रिया और जेड

एक्सप्रेस रास्ते में:

router.get("/", function(req, res) { 
    var webpackStats = require('../../config/webpack-stats.json'); 
    var reactHtml = React.renderToString(HiwApp({})); 
    var slideshowHtml = React.renderToString(slideshowApp({})); 
    var config = { 
    webpackStats: webpackStats, 
    reactOutput: reactHtml, 
    slideshowHtml: slideshowHtml 
    }; 
    res.render("how_it_works/howitworks", config); 
}); 

जेड में: हम कुछ इस तरह से समाप्त हो गया है

body 
    .company-logo.center 
    #react-main-mount 
    != reactOutput 
    include ./content_block_1.jade 

    include ./content_block_2.jade 

    #slideshow-main-mount 
    != slideshowHtml 

यह बहुत भंगुर-यदि है हम jsx चाहते तो एक जेड टेम्पलेट फिर और अधिक जेएसएक्स, हमें यह सुनिश्चित करना है कि हमें सही ऑर्डर मिल जाए।

मेरा विचार यह है कि सभी जेएसएक्स के साथ करें। मुझे पता है कि इस तरह की चीज़ के लिए React.renderToStaticMarkup है, लेकिन यह स्थैतिक पृष्ठों के साथ गतिशील मिश्रण की समस्या को हल नहीं करता है।

बड़े प्रश्न: यदि हम जेएसएक्स (लेआउट.जेएसएक्स जिसमें सभी घटकों को शामिल करते हैं) के साथ ऐसा करने का निर्णय लेते हैं, तो React.renderToString(App({}); पर कॉल करें, क्या यह एक प्रमुख प्रदर्शन हिट होगा? यदि हां, तो स्थिर और गतिशील ब्लॉक को आसानी से संयोजित करने के लिए ऐसा करने का एक बेहतर तरीका है?

+0

प्रतिक्रियाओं 'रेंडर टॉस्ट्रिंग' के साथ अपने पूरे दस्तावेज़ को प्रस्तुत करने के लिए यह बिल्कुल ठीक है। प्रारंभिक पृष्ठ लोड प्रतिपादन पर एक जुर्माना है, हालांकि यह बहुत ही कम है। आपको लगता है कि आप एसपी ऐप बनाने की अधिक संभावना रखते हैं, यह वास्तव में एक मामूली मुद्दा है क्योंकि उपयोगकर्ता केवल प्रारंभिक पृष्ठ को एक बार उपयोग करते हैं। – AndrewMcLagan

उत्तर

2

जिस तरीके से हमने इसे सफलतापूर्वक किया है, वह React.renderToStaticMarkup() का उपयोग कर सर्वर पर एक जेएसएक्स खोल टेम्पलेट (Html.jsx) प्रस्तुत करना था और फिर इसे प्रत्येक सर्वर-साइड एक्सप्रेस रूट अनुरोध के जवाब के रूप में भेजें जो कि कुछ HTML को वितरित करने के लिए है ब्राउज़र। Html.jsx केवल एक खोल है जिसमें एचटीएमएल हेड सूचना और जीए स्क्रिप्ट आदि शामिल हैं। इसमें कोई लेआउट नहीं होना चाहिए।

// Html.jsx 
render(){ 
    return (
    <html> 
     <head> 
     // etc. 
     </head> 
     <body> 
     <div 
      id="app" 
      dangerouslySetInnerHTML={{__html: this.props.markup}}> 
     </div> 
     </body> 
     <script dangerouslySetInnerHTML={{__html: this.props.state}</script> 
     <script> 
     // GA Scripts etc. 
     </script> 
    </html> 
) 
} 

याद रखें यह पूरी तरह से ठीक है और यहां तक ​​कि अपने ऐप hydrating सर्वर पर dangerouslySetInnerHTML उपयोग करने के लिए सिफारिश की है।

गतिशील लेआउट अपने राज्य/प्रोप कॉन्फ़िगरेशन के आधार पर घटकों के पदानुक्रम के माध्यम से आपके अपने आइसोमोर्फिक घटकों के साथ किया जाना चाहिए। यदि आप रिएक्ट राउटर का उपयोग करते हैं, तो आपका राउटर आपके द्वारा प्रदान किए जाने वाले मार्गों के आधार पर दृश्य हैंडलर प्रस्तुत करेगा ताकि इसका मतलब है कि आपको इसे स्वयं प्रबंधित करने की आवश्यकता नहीं है।

इस तकनीक का उपयोग करने का कारण आर्किटेक्चरल रूप से हमारे "ऐप" को अलग करना है जो कि आइसोमोर्फिक है और हमारे सर्वर-साइड टेम्पलेट शैल से राज्य को प्रतिक्रिया देता है जो केवल एक वितरण तंत्र है और प्रभावी रूप से बॉयलर प्लेट है। हम अपने ऐप के भीतर सभी एक्सप्रेस घटकों के बीच Html.jsx टेम्पलेट भी रखते हैं और इसे अन्य आइसोमोर्फिक प्रतिक्रिया घटकों के साथ मिश्रण न करने दें।

प्रतिक्रिया/आइसोमोर्फिक आर्किटेक्चर काम करने के लिए मिले सबसे उपयोगी संसाधनों में से एक https://github.com/yahoo/flux-examples/tree/master/react-router था जहां हमने इस तकनीक को चुरा लिया था।

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

आप निश्चित रूप से सोचा था की उस रेखा का पालन करें और टेम्पलेट थूक से बाहर करने के लिए और फिर मॉड्यूल वाक्य रचना के आसपास जोड़ने कि अगर आपको लगता है अलग जेड फ़ाइलें आवश्यक हैं एक जेड संकलक इस्तेमाल कर सकते हैं। मैंने इस परियोजना को भी देखा है, हालांकि मैंने इसे क्रोध में नहीं खोजा है: https://github.com/jadejs/react-jade

+0

हम प्रतिक्रिया-राउटर का उपयोग कर सबकुछ के लिए अपने html.jsx के समान कुछ करने में घायल हो गए। जेड का उपयोग करने वाली सभी चीजों के लिए लेकिन राउटर पर प्रतिक्रिया नहीं करने के लिए, हमने इसे जेएसएक्स में ले जाया, इसे एक नोड पर रखा, और एक बड़ा प्रदर्शन हिट नहीं देखा। – johnnyutah

5

हालांकि यह एक छोटा सा विषय हो सकता है: हम जेड टेम्पलेट्स के साथ अटक गए।

असल में हम साइट के क्षेत्रों के लिए गैर-प्रतिक्रिया + प्रवाह वास्तुकला का उपयोग करने के लिए लचीलापन चाहते थे, और जब इसकी आवश्यकता होती है। हमारी साइट मूल रूप से कई छोटे एसपी ऐप्स से बना है: साइट, उपयोगकर्ता खाता, टीम और व्यवस्थापक।

हमने ऐसा क्यों किया?

  • छोटे फ़ाइल आकार और भूमि के ऊपर उपयोगकर्ताओं को, जो साइट के सभी अनुभाग तक पहुँचने नहीं कर रहे हैं के लिए।

  • यदि आवश्यकता होती है तो प्रतिक्रिया और प्रवाह के "ऑप्ट आउट" करने का विकल्प।

  • सरल, सर्वर पक्ष प्रमाणीकरण।

+0

अच्छा। लगभग। यह आपको कितना समय ले गया? और क्या आप इस बात से खुश हैं कि आर्किटेक्चर कैसा चल रहा है? –

+8

वास्तव में हम अंत में 100% प्रतिक्रिया निर्माण के लिए गए हैं। जेडब्ल्यूटी के माध्यम से प्रमाणीकरण के साथ PHP में लिखा बैकएंड एपीआई। – AndrewMcLagan

+0

अच्छा जवाब, मेरे पास एक ही प्रश्न है और आपके पहले 2 तर्क भी मेरे दिमाग को पार करते हैं। लेकिन: आपके टेम्पलेटिंग इंजन के साथ सर्वर साइड प्रमाणीकरण क्या है? –