एक बड़े रिएक्ट एप्लिकेशन में रूटिंग

नमस्ते, मेरा नाम बोरिस शबानोव है , मैं रामब्लर ग्रुप की विज्ञापन तकनीक विकसित करने के विभाग में फ्रंटेंड डेवलपमेंट का प्रमुख हूं। आज मैं आपको बताऊंगा कि हमारे आवेदन पर कैसे रूटिंग समस्याएं उत्पन्न हुईं, और हमने उन्हें कैसे हल किया।

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

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

कई वर्षों के संचालन के बाद, परियोजना की आवश्यकताएं अधिक गंभीर हो गईं, और हमने महसूस किया कि हमें इसे ठीक करने की आवश्यकता है। चूंकि यह परियोजना शुरू से ही रिएक्ट पर आधारित थी, इसलिए हमने नए संस्करण के आधार के रूप में रिएक्ट क्रिएट ऐप को लिया। और GraphQL - सर्वर के साथ बातचीत के लिए, अर्थात् - अपोलो ग्राहक । इसके अलावा, विभाग के पास बहुत सारी विशेषज्ञता है।

लेकिन हमारे पास एक सवाल था, और हमारे आवेदन को रूट करने के लिए क्या इस्तेमाल किया जा सकता है? हम "प्रतिक्रिया" और "राउटर" शब्दों के साथ समाधान के लिए Google पर गए थे, और वास्तव में, पहले 5 पृष्ठों पर हमें एक रिएक्टर राउटर के अलावा कुछ भी नहीं मिला। "ठीक है, ठीक है ..." - हमने सोचा, स्मार्ट लोग सलाह देते हैं, हमें लेना चाहिए। सवालों की एक छोटी अवधि के बाद कम नहीं हुआ। उदाहरण के लिए, प्रतिक्रिया-राउटर का उपयोग करने का एक सरल उदाहरण लें:

import React from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; const ParamsExample = () => ( <Router> <div> <h2>Accounts</h2> <ul> <li> <Link to="/netflix">Netflix</Link> </li> <li> <Link to="/zillow-group">Zillow Group</Link> </li> <li> <Link to="/yahoo">Yahoo</Link> </li> <li> <Link to="/modus-create">Modus Create</Link> </li> </ul> <Route path="/:id" component={Child} /> <Route path="/order/:direction" component={ComponentWithRegex} /> </div> </Router> ); 

प्रश्न उठते हैं:

• बहुत सारे मापदंडों वाले URL के बारे में क्या है?
• यदि उत्पाद प्रबंधक आता है और मुझे पेज URL को और अधिक "दोस्ताना" में बदलने के लिए कहता है तो मुझे क्या करना चाहिए? पूरे प्रोजेक्ट में "कालीन प्रतिबद्ध" वास्तव में करना नहीं चाहता है।

विकास की प्रक्रिया के दौरान, हमने समाधानों के बारे में सोचना और देखना शुरू किया, लेकिन साथ ही हम अभी तक रिएक्ट-राउटर पर रहते थे।

अगले स्प्रिंट में, हमने काम करने के लिए "सहायता" अनुभाग लिया। एक जटिल पृष्ठ नहीं है, और कुछ घंटों के भीतर हमने इसे बनाया।

लेकिन पूरी बात यह है कि "सहायता" एक ऐसा खंड है जो अन्य सभी पृष्ठों से लिंक करता है, और इसके लिए बहुत सारे लिंक हैं। और प्रत्येक उत्तर का लिंक गतिशील रूप से उत्पन्न होता है। हमारे लिए, राउटर को बदलने के बारे में सोचने का यह एक और कारण था।

इंटरनेट पर व्यापक खोजों के बाद, हमें एक स्वीकार्य समाधान मिला - राउटर 5 ।

Router5 एक ऐसी लाइब्रेरी है जिसका रिएक्ट से कोई लेना-देना नहीं है, आप इसे Angular के साथ, jQuery के साथ, किसी भी चीज़ के साथ इस्तेमाल कर सकते हैं। यह सही कहने लायक है कि Router5 रिएक्ट-राउटर @ 4 की निरंतरता नहीं है, वे दो अलग-अलग चीजें हैं, विभिन्न लोगों द्वारा विकसित की गई हैं, और वे किसी भी तरह से जुड़े नहीं हैं।

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

लेकिन हमने एक मौका लेने का फैसला किया। हमने देखा कि परियोजना कैसे रहती है, क्या कोई इसके विकास में लगा हुआ है, देखा कि लोग इसमें नई चीजें ला रहे हैं, और यह परियोजना बहुत अधिक जीवंत है।

दस्तावेज़ीकरण से आप यह पता लगा सकते हैं कि उसके पास विभिन्न रूपरेखाओं और पुस्तकालयों के साथ एकीकरण का एक गुच्छा है। विशेष रूप से, प्रलेखन प्रतिक्रिया और रिडक्स के साथ एकीकरण का वर्णन करता है, लेकिन यदि आप अच्छी तरह से खोज करते हैं, तो आप वहां mobX के साथ उदाहरण पा सकते हैं।

इंटरफेस कैसे बनाए जाते हैं, और राउटर 5 में राउटर कैसे बनाए जाते हैं?
कहानी यहां उसी तरह है जैसे रिएक्ट-राउटर में: प्रत्येक मार्ग अपने बच्चों के लिए एक कंटेनर है।

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

ऐसी साइट के लिए, राउटर 5 कॉन्फिगरेशन निम्नानुसार होगा:

 import createRouter from 'router5'; import browserPlugin from 'router5/plugins/browser'; const routes = [ { name : 'home', }, { name : 'admin', children : [ { name : 'roles', }, { name : 'users', }, ] }, ]; const options = { defaultRoute: 'home', // ... }; const router = createRouter(routes, options) .usePlugin(browserPlugin()); router.start(); 

उदाहरण में, हमारे पास एक सरल विकल्प है, लेकिन वास्तव में आप प्रलेखन से बहुत कुछ सीख सकते हैं और अपने लिए अधिक सुविधाजनक प्रारूप चुन सकते हैं।

जैसा कि मैंने पहले कहा था, हम डिवीजन में अपनी परियोजनाओं पर रिएक्ट का उपयोग करते हैं, इसलिए मैं रिएक्ट की ओर और उदाहरणों पर बात करना जारी रखूंगा। नीचे दिए गए कोड उदाहरण से पता चलता है कि राउटर @ 5 का उपयोग करके एक प्रोजेक्ट कैसे उठाया जाए।

 // app.js import ReactDOM from 'react-dom' import React from 'react' import App from './App' import { RouterProvider } from 'react-router5' import createRouter from './create-router' const router = createRouter() router.start(() => { ReactDOM.render(( <RouterProvider router={router}> <App /> </RouterProvider> ), document.getElementById('root')) }) 

 // Main.js import React from 'react' import { routeNode } from 'react-router5' import { UserView, UserList, NotFound } from './components'​ function Users(props) { const { previousRoute, route } = props​ switch (route.name) { case 'users.list': return <UserList /> case 'users.view': return <UserView /> default: return <NotFound /> } }​ export default routeNode('users')(Users)  // Main.js import React from 'react' import { routeNode } from 'react-router5' import { UserView, UserList, NotFound } from './components'​ function Users(props) { const { previousRoute, route } = props​ switch (route.name) { case 'users.list': return <UserList /> case 'users.view': return <UserView /> default: return <NotFound /> } }​ export default routeNode('users')(Users)  // Main.js import React from 'react' import { routeNode } from 'react-router5' import { UserView, UserList, NotFound } from './components'​ function Users(props) { const { previousRoute, route } = props​ switch (route.name) { case 'users.list': return <UserList /> case 'users.view': return <UserView /> default: return <NotFound /> } }​ export default routeNode('users')(Users)  // Main.js import React from 'react' import { routeNode } from 'react-router5' import { UserView, UserList, NotFound } from './components'​ function Users(props) { const { previousRoute, route } = props​ switch (route.name) { case 'users.list': return <UserList /> case 'users.view': return <UserView /> default: return <NotFound /> } }​ export default routeNode('users')(Users) 

आगे और भी दिलचस्प। जिस चीज को हमने पसंद किया है और बहुत सुरुचिपूर्ण ढंग से परियोजना में फिट किया गया है वह यह है कि संक्रमण कैसे किए जाते हैं। मान लीजिए कि हमारे पास ऊपर वर्णित संरचना के साथ एक साइट है। और हमारा उपयोगकर्ता लैंडिंग पृष्ठ से "उपयोगकर्ता सूची" अनुभाग पर जाना चाहता है। इस मामले में रूटर 5 क्या करेगा? सबसे पहले, यह होम सेक्शन को डीएक्टिवेट करता है, जिससे संबंधित घटनाओं का कारण बनता है। घटनाओं को मार्ग में और मिडलवेयर दोनों में संसाधित किया जा सकता है, जहां इन सभी संक्रमणों को संसाधित किया जा सकता है। अगला, व्यवस्थापक और admin.users मार्गों के लिए सक्रियण घटनाएँ उत्पन्न होती हैं।

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

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

राउटर 5 में, यह इस तथ्य से तय किया गया था कि प्रत्येक संक्रमण को व्यवहारिक रूप से किया जाता है, और दृश्य भाग का परिवर्तन तब तक नहीं होगा जब तक कि सभी मिडलवेयर पर काम नहीं किया गया हो, और राउटर को यह विश्वास हो जाता है कि हमारा एप्लिकेशन उससे जो चाहे प्राप्त कर सकता है। इस दृष्टिकोण के अपने minuses और pluses हैं, लेकिन हमारे मामले में अधिक pluses थे। लोडिंग संकेतक के साथ समस्या तुरंत हल हो गई है। हमारा एप्लिकेशन एक डाउनलोड संकेतक का उपयोग करता है, जो राउटर द्वारा नियंत्रित होता है।

दुर्भाग्य से, लगभग 3 या 4 महीने पहले मिडलवेयर के साथ काम करना प्रलेखन में पूरी तरह से खुलासा नहीं किया गया था। लेकिन मुद्दों में देरी करते हुए, हमने एक शानदार उदाहरण पाया कि कैसे रिएक्ट, रिडक्स और राउटर 5 का उपयोग करके एप्लिकेशन को तैनात करना और बनाना है।

हमारे एप्लिकेशन के प्रत्येक URL में डेटा का एक निश्चित सेट संग्रहीत होता है जिसे हमें डेटा (पहचानकर्ता, अतिरिक्त डेटा फ़िल्टरिंग विकल्प, आदि) प्रदर्शित करने की आवश्यकता होती है। URL से लेकर रूटर 5 और इसके विपरीत इन मापदंडों का क्रमिककरण और डीरियलाइज़ेशन अलौकिक नहीं दिखता है, लेकिन यह है।

 export default { name: 'help', path: '/help*slugs', loadComponent: () => import('./index'), encodeParams: ({ slugs }) => slugs.join('/'), decodeParams: ({ slugs }) => slugs.split('/'),, defaultParams: { slugs: [], }, }; 

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

निम्नलिखित मूल उदाहरण हैं:

 const router = router5([ { name: 'admin', path: '/admin' }, { name: 'admin.users', path: '~//users?param1' }, { name: 'admin.user', path: '^/user/:id' }, { name: 'help', path: '^/help/*splat' } ]); console.log(router.buildPath('admin')); // '/admin' console.log(router.buildPath('admin.users'); // '/users' console.log(router.buildPath('admin.users', { param1: true })); // '/users?param1=true' console.log(router.buildPath('admin.users', { id: 100 })); // '/user/100' console.log(router.buildPath('admin.user', { id: 100 })); // '/user/100' console.log(router.buildPath('help', { splat: [1, 2, 3] })); // '/help/1/2/3' 

प्रतिक्रिया घटक में, लिंक गठन निम्नानुसार होता है:

 import React from 'react' import { Link } from 'react-router5'​ function Menu(props) { return ( <nav> <Link routeName="home">Home</Link> <Link routeName="about">About</Link> <Link routeName="user" routeParams={{ id: 100 }}>User #100</Link> </nav> ) }​ export default Menu  import React from 'react' import { Link } from 'react-router5'​ function Menu(props) { return ( <nav> <Link routeName="home">Home</Link> <Link routeName="about">About</Link> <Link routeName="user" routeParams={{ id: 100 }}>User #100</Link> </nav> ) }​ export default Menu  import React from 'react' import { Link } from 'react-router5'​ function Menu(props) { return ( <nav> <Link routeName="home">Home</Link> <Link routeName="about">About</Link> <Link routeName="user" routeParams={{ id: 100 }}>User #100</Link> </nav> ) }​ export default Menu 

न्यूनतम संख्या में संक्रमण वाले 3-4 पृष्ठों से युक्त सरल साइटें बनाते समय, मैं Router5 का उपयोग नहीं करता, लेकिन मैं React-router का उपयोग करता हूं। लेकिन कई पृष्ठों और लिंक वाली परियोजनाओं में, मेरी पसंद राउटर 5 की ओर होगी।

आप यहां पर मेरे प्रदर्शन का वीडियो देखें

PS अक्टूबर 2018 की पहली छमाही में, हम अगली रामब्लरफ्रंट और # 6 को रखने की योजना बना रहे हैं। Habr.com पर यहां घोषणा का पालन करें।