ग्राफिकसह युनिव्हर्सल व्ह्यू अॅप कसे तयार करावे

मी व्ह्यू सह युनिव्हर्सल अॅप्स अलीकडे तयार करीत आहे. हे अ‍ॅप्स क्लायंट आणि सर्व्हर या दोन्ही बाजूला HTML प्रस्तुत करतात. मला आश्चर्य वाटले की मी ते ग्राफिकसह कसे एकत्र करू शकेन.

ग्राफिक का?

फेसबुकद्वारे निर्मित ग्राफिक, ही आपल्या एपीआयसाठी एक क्वेरी भाषा आहे. हे फ्रंट आणि बॅक-एंड विकसकांमधील बर्‍याच गोंधळांना टाळून अ‍ॅप तयार करण्याच्या प्रक्रियेस सुधारते.

हे करण्यासाठी, विकसक एकाच वेळी एक API तयार करू शकतात, दस्तऐवज लिहू शकतात आणि चाचणी क्लायंट तयार करू शकतात. ग्राफिक्यूएल मध्ये बिल्ट-इन मॉक सिस्टम देखील आहे जेणेकरून आपण वेळेत इंटरफेस सेट अप करू शकाल.

आपल्या क्लायंटने संप्रेषण कसे करावे हे निर्धारित करते आणि आपल्यास हवा असलेला सर्व डेटा मिळविण्यासाठी सर्व्हरला बर्‍याच फे round्या मारतात. ग्राफिक सह, क्लायंट कोणता डेटा पुनर्प्राप्त करावा हे ठरवू शकतो. समान API वर एकाधिक अनुप्रयोग तयार करताना हे अत्यंत उपयुक्त आहे.

खालील उदाहरणात आपण पाहू शकता की ग्राफिक हे देखील आरईएसटीपेक्षा थोडा अधिक कार्यक्षम आहे. हे एकाच विनंतीमध्ये एकाधिक संसाधने आणि getलोकेशन मिळविण्यास सक्षम आहे, ज्यामध्ये आरईएसटीला अनेक साखळ्या विनंत्या कराव्या लागतात.

ही यूआरएल वापरकर्त्यांची आणि त्यांच्या मित्रांची यादी तसेच त्यांच्या पोस्ट आणि त्यांच्या लेखकांची यादी पुनर्प्राप्त करते: https://example.com/graphql?query=▶userswersfirstName ,फ्रेंड्सफर्टीनामे, पृष्ठ, टिटेल, अधिकृत / नाव }}}
रेस्ट मध्ये आम्हाला बर्‍याच विनंत्या कराव्या लागतीलः वापरकर्त्यांची यादी मिळवा -> https://example.com/api/users
प्रत्येक वापरकर्त्यासाठी -> https://example.com/api/users/{id Bäumen / मित्र
पोस्टची यादी मिळवा -> https://example.com/api/posts
प्रत्येक पोस्टसाठी -> https://example.com/api/posts/{id Bäumen / लेखक

ट्रिगरिंग एक्सएचआर विनंत्या तुलनेने हळू आहेत, विशेषत: मोबाइल डिव्हाइसवर. एकाच विनंतीमध्ये गुंडाळण्यामुळे बरेच विलंब होते आणि आपल्या वापरकर्त्यांद्वारे जलद अनुभवले जाते.

सार्वत्रिक अ‍ॅप्स का?

पहिले आणि सर्वात महत्वाचे कारण म्हणजे कामगिरी. युनिव्हर्सल अ‍ॅप्स त्यांचा एचटीएमएल कोड सर्व्हर आणि क्लायंट साइडवर प्रस्तुत करतात. हे सर्व्हर साइड रेंडरिंग (लहानसाठी एसएसआर) म्हणून ओळखले जाते. जेव्हा एखादा क्लायंट आपल्या अ‍ॅपमध्ये विनंती करतो तेव्हा जावास्क्रिप्ट लोड होण्याची प्रतीक्षा न करता HTML सामग्री त्वरित उपलब्ध होते.

दुसरे कारण म्हणजे शोध इंजिन ऑप्टिमायझेशन. एजेक्स अ‍ॅप्समध्ये संक्रमणानंतर ही एक अवजड समस्या आहे. फॅन्टॉमजेएस आणि प्रीरेन्डर.आयओ सारखे निराकरण होते परंतु ते सार्वत्रिक अ‍ॅपसह ठेवू शकत नाहीत.

व्ह्यूसह सार्वत्रिक अ‍ॅप्स तयार करा

यावर प्रथम थोडे कागदपत्रे होती, परंतु इव्हन आपण कसे कार्य करते हे दर्शविण्यासाठी हॅकरन्यूज क्लोन तयार केला. मी माझे उदाहरण यापैकी बरेच वापरले आहे. आपण या संकल्पनेत नवीन आहात का याचा विचार करणे अद्याप चांगले आहे. हल्ली https://ssr.vuejs.org/en वर बर्‍याच कागदपत्रे देखील आहेत.

माझा डेमो क्लोन करा आणि स्थापित करा

टीपः हा विभाग गृहीत धरतो की आपण व्यापलेल्या तंत्रज्ञानाशी परिचित आहात. मी भविष्यात अधिक तपशीलवार शिकवण्या लिहीन.

माझा कोड दर्शवितो की युनिव्हर्सल अॅप ग्राफिक सर्व्हरवरून डेटा कसा प्राप्त करतो. नमुना अ‍ॅप खरोखर सोपे आहे आणि केवळ एक साधा संदेश दर्शवितो, परंतु अधिक डेटासह सहजपणे वाढविला जाऊ शकतो. पुढील भागात काय चालले आहे ते मी स्पष्ट करीन. आपण खालील आदेश चालवून माझा डेमो स्थापित आणि चालवू शकता.

गिट क्लोन https://github.com/jonaskuiler/universal-vue-app-with-ographicql थ्रेड # किंवा एनपीएम थ्रेड डेव्हलपर स्थापित करा # किंवा एनएमपी रन डेव्हलपर
# पुढचा शेवट http: // लोकलहोस्ट वर उपलब्ध आहे: 8080 # ग्राफिक्‍ल http: // लोकलहोस्ट वर उपलब्ध आहे: 47274

आपण पृष्ठ स्त्रोत (मॅकवरील सीएमडी + विकल्प + यू) आणि त्यावरील सामग्री तपासल्यास पृष्ठ स्क्रोलचे घटक, आपण ते सर्व्हरच्या बाजूला प्रस्तुत केले असल्याचे पहा.

आपण पृष्ठ स्त्रोतामध्ये एम्बेड केलेली स्क्रिप्ट देखील पाहू शकता, जी विंडो उघडकीस आणते .__ APOLLO_STATE__. हे सुनिश्चित करण्यासाठी आहे की आमच्या क्लायंट-साइड जावास्क्रिप्टला सर्व्हरने तयार केलेली स्थिती देखील माहित आहे. त्याला स्टेटस हायड्रेशन असे म्हणतात.

व्ह्यू अपोलो कॉन्फिगर करा

अपोलोबरोबर व्ह्यू काम करण्यासाठी, मी अ‍ॅक्रियममधील व्ह्यू प्लगइन वापरतो. मी आधी सांगितल्याप्रमाणे, हे अपोलो क्लायंटसाठी एक आवरण आहे जे आपण व्यू घटकांकडून ग्राफिक क्वेरी चालविण्यासाठी थोडक्यात वापरू शकतो.

मुळात आपण व्ह्यू राउटरसह काय कराल याचा एक उदाहरण तयार करा आणि आपल्या मूळ घटकाच्या उदाहरणामध्ये जोडू.

'Vue' वरून 'Vue-Apollo' वरुन VueApollo आयात करा './app.vue वरुन'. आयात / createApolloProvider A वरून './apollo' एक्सपोर्ट फंक्शन createapp () {/ / तयार राउटर कॉन्स्ट राउटर = क्रिएट रूटर () // तयार अपोलो प्रदाता कॉन्स्ट अपोलोप्रोवाइडर = क्रिएट अ‍ॅपलॉन्स्प्रोइडर () // तयार अ‍ॅप इंस्टॉन्स कॉन्स्ट अॅप = नवीन व्ह्यू ({राउटर, अपोलोप्रोइडर, प्रस्तुत करा: एच => एच (अ‍ॅप) return) रिटर्न {अॅप, अपोलोप्रोइडर, राउटर}

हे क्रिएटिऑपलो प्रॉव्हिडर फंक्शन वापरते ज्यात संपूर्ण अपोलो-विशिष्ट कॉन्फिगरेशन असते आणि व्ह्यूएपोलोचा एक उदाहरण परत मिळवते.

'व्यू-अपोलो' वरुन 'व्ह्यू' मधून व्यूएओपोलो आयात करा ap 'अपोलो-क्लायंट' वरून 'अपोलो-फेच' वरून 'ग्राफिक्ल / भाषा / प्रिंटर' व्ही.यू.एस. पासून आयात p प्रिंट} वरून 'अपोलोक्लिएंट' आयात करा ( VueApollo) const isBrowser = (विंडो प्रकार! == 'अपरिभाषित') // अपोलो कॉन्फिगरेशन तयार करा, कारण सर्व्हरवरील कॉन्स्ट आणि क्लाएंट कॉन्स्पेपलोकॉन्फिग = () => {कॉन्मिट यूरी = 'http: // लोकलहॉस्ट: 47274 / 'कॉन्स्ट अपोलोफेच = क्रिएटिऑपलोलोफेच ({उरी}) कॉन्ट नेटवर्कइंटरफेस = {// नेटवर्क इंटरफेस म्हणून अपोलो-फेच वापरा // विनंत्या हाताळण्यासाठी आयसोमॉर्फिक-फेच वापरते क्वेरी: req => {रिटर्न olपोलोफेच ({. .. req, क्वेरी: प्रिंट (req.query)})}} // फक्त सर्व्हर संदर्भात ssrMode वापरा apolloConfig = {ssrMode: खरे, नेटवर्क इंटरफेस} // ब्राउझर संदर्भात अनुप्रयोग हायड्रेट करा // हे सुनिश्चित करण्यासाठी आहे की स्टेट आमच्यापैकी क्लायंट // हे सर्व्हरवर व्युत्पन्न केलेल्या स्थितीसह समक्रमित केले गेले आहे (isBrowser) {कन्स्ट स्टेट = विंडो .__ APOLLO_STATE__ जर (राज्य) {apolloConfig = {... apolloConfig, ssrMode: चुकीचे, इनिशिएंट स्टेट: state.defaultClient}} Ap रिटर्न अपोलोकॉन्फिग} // नवीन व्ह्यूएपोलो इंस्टॉरंट एक्सपोर्ट फंक्शन createApolloPovider () {const apolloConfig = createApolloConfig () const defaultClient = new ApolloClient (apolloConfig) रिटर्न नवीन VueApollo ({defaultClient return) परत करा

सध्या अपोलो-क्लायंट सर्व्हरकडून विनंत्या करू शकत नाही कारण त्यात आणणे वापरते, जे नोड वातावरणात समर्थित नाही. आपण नक्कीच पॉलीफिल किंवा असे काहीतरी जोडून हे वर्तन खाच करू शकता.

समस्येचे निराकरण करण्यासाठी, मी विशिष्ट यूआरएलवर विनंत्या ट्रिगर करण्यासाठी, अपोलो-फेच वापरत आहे, जो आयसोमॉर्फिक-फेच वापरतो.

ग्राफिक सर्व्हरची चौकशी करा

माझ्या उदाहरणामध्ये, माझ्याकडे फक्त एक दृश्य आहे जे सर्व्हरवर एक साधी ग्राफिक क्वेरी करते. जेव्हा ही सामग्री पुनर्प्राप्त केली जाते तेव्हा क्लायंटला एक संदेश दर्शविला जातो.