डिनो एस्पोसिटो: आधुनिक वेब अनुप्रयोगांचा विकास. विषय क्षेत्र आणि तंत्रज्ञानाचे विश्लेषण. ActiveX नियंत्रणे. आमचे होम वेब पेज

या संदर्भात, प्रश्न आहे - आपल्याला आणखी काय माहित असणे आवश्यक आहे?
कोणत्याही परिस्थितीत, तुम्हाला बॅकएंडची आवश्यकता आहे जर मला योग्यरित्या समजले तर, अँगुलर, व्ह्यू आणि इतर फ्रेमवर्क फक्त फ्रंटएंड आहेत.
ते बरोबर आहे, तुम्ही जिथेही वळता, वेब डेव्हलपमेंटला सर्वत्र फ्रंट-एंड डेव्हलपमेंट म्हणून बोलले जाते आणि ते Node.js शी देखील जोडलेले असते (Angular मध्ये काहीतरी लिहिण्यासाठी, तुम्ही त्याशिवाय करू शकत नाही). फ्रंटएंड Node.js शी कसा जोडला जातो हे मला समजत नाही, कारण... Node.js मूलत: ब्राउझरच्या बाहेर JS चालवण्याचा एक मार्ग आहे.
बहुधा, आपण फ्रंटएंडबद्दलचे लेख वाचत आहात, कारण त्यामध्ये बॅकएंडबद्दल काहीही नाही. तुम्हाला माहिती आहेच की, फ्रंट एंड JS मध्ये लिहिलेला आहे आणि तुम्ही बॅकएंडवर NodeJS इन्स्टॉल करू शकता आणि एक भाषा वापरून वेबसाइट तयार करू शकता, तर मला नोडची गरज का आहे ? हे सर्व मला गोंधळात टाकते; मला फक्त विरोधाभास दिसतो.
गोंधळून जाऊ नका. अनुप्रयोग प्रक्रियेदरम्यान वापरल्या जाणाऱ्या तंत्रज्ञान आहेत आणि अनुप्रयोग विकास प्रक्रियेदरम्यान वापरल्या जाणाऱ्या तंत्रज्ञान आहेत. हे सर्व गुल्प, ग्रंट, बॅबल, वेबपॅक आणि इतर विकास साधने आहेत. ते कामाची गती वाढवतात, सुलभ करतात आणि कामाची गुणवत्ता सुधारतात. त्या वेळी, jQuery, Angular, React ही लायब्ररी आणि फ्रेमवर्क आहेत ज्यासह अनुप्रयोग कार्य करेल.

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

येथे मी फक्त असे गृहीत धरू शकतो की सर्व्हरने, html ऐवजी, json किंवा इतर कशाद्वारे अनुप्रयोगासह डेटाची देवाणघेवाण केली पाहिजे.
होय, JSON सर्वात सामान्य आहे. तुम्हाला बॅकएंड फ्रेमवर्क आवश्यक आहे ज्यावर तुम्ही REST API तैनात करू शकता. माझ्या माहितीनुसार, वेब डेव्हलपमेंटसाठी वापरल्या जाणाऱ्या आधुनिक प्रोग्रामिंग भाषांचे बहुतेक आधुनिक फ्रेमवर्क हे करू शकतात. मी निश्चितपणे सांगू शकत नाही, मी त्याच भाषेत काम करतो तरीही, सर्व्हर हा कोणत्याही नेटवर्क ऍप्लिकेशनचा आधार आहे आणि सर्व प्रथम तुम्हाला सर्व्हरचा भाग विकसित करणे आवश्यक आहे.
नक्कीच. आधुनिक सिंगल पेज ॲप्लिकेशन्स (SPA) मध्ये दोन स्वतंत्र भाग असतात - फ्रंटएंड आणि बॅकएंड. ते पूर्णपणे स्वतंत्रपणे तयार केले जाऊ शकतात वेगवेगळ्या विकसकांद्वारे, मुख्य गोष्ट म्हणजे डेटा ट्रान्सफर फॉरमॅट आणि सर्व बारकावे यावर सहमत होणे.

एसपीएचे सौंदर्य हे भाग वेगळे करण्यात आहे. त्यापैकी कोणतेही विशेष परिणामांशिवाय दुसर्याने बदलले जाऊ शकतात. एक बॅकएंड वेबसाइट्स, मोबाइल ॲप्स आणि तृतीय-पक्ष भागीदार ॲप्सना डेटा ऍक्सेस प्रदान करू शकतो, सर्व एकाच API द्वारे.

आणखी काय अभ्यास करणे आवश्यक आहे? किंवा सूचीबद्ध ज्ञान पुरेसे आहे?
मला वाटत नाही की ते पुरेसे आहे. तुमच्या प्रोजेक्टमध्ये कोणती कार्ये सोडवण्याची आवश्यकता आहे ते तुम्ही अचूकपणे निर्धारित कराल आणि त्यासाठी तंत्रज्ञान निवडाल. तुम्हाला एका गोष्टीवर लक्ष केंद्रित करणे आवश्यक आहे, तुम्ही प्रत्येक गोष्टीचा आधुनिक अभ्यास करू शकणार नाही, पुरेसा वेळ नसेल Node.js वापरणे शक्य नाही आणि त्यानुसार, जर फक्त JS (TS) आवश्यक असेल तर. ब्राउझर? त्याच वेळी, चाचणी देखील आवश्यक आहे.
होय, अगदी. क्लायंटच्या बाजूने, उदाहरणार्थ, JS+Angular. आणि बॅकएंड बाजूला, उदाहरणार्थ, PHP + Laravel. आता त्यांच्यासाठी बऱ्याच भाषा आणि आणखी फ्रेमवर्क आहेत. आपल्यासाठी काय सोपे आहे ते निवडा.

अलीकडे, प्रामुख्याने UX आणि कामगिरीमुळे.

UI नियंत्रित करण्यासाठी JavaScript वापरू इच्छिणाऱ्या वेबसाइटसाठी मला 7 कृती करण्यायोग्य तत्त्वे सादर करायची आहेत. ही तत्त्वे वेब डिझायनर म्हणून माझ्या कामाचे परिणाम आहेत, परंतु WWW चा दीर्घकाळ वापरकर्ता म्हणून देखील आहेत.

जावास्क्रिप्ट निःसंशयपणे फ्रंट-एंड विकसकांसाठी एक अपरिहार्य साधन बनले आहे. आता त्याची व्याप्ती सर्व्हर आणि मायक्रोकंट्रोलरसारख्या इतर क्षेत्रांमध्ये विस्तारत आहे. ही प्रोग्रामिंग भाषा प्रतिष्ठित विद्यापीठांनी विद्यार्थ्यांना संगणक विज्ञानाच्या मूलभूत गोष्टी शिकवण्यासाठी निवडली आहे.

त्याच वेळी, त्याच्या भूमिका आणि विशिष्ट वापरासंबंधी अनेक प्रश्न आहेत, ज्यांचे उत्तर देणे अनेकांना कठीण वाटते, ज्यात फ्रेमवर्क आणि लायब्ररीच्या लेखकांचा समावेश आहे.

• जावास्क्रिप्टचा वापर ब्राउझर फंक्शन्ससाठी रिप्लेसमेंट म्हणून केला पाहिजे: इतिहास, नेव्हिगेशन, रेंडरिंग?
• बॅकएंड मरत आहे का? HTML रेंडर करणे अजिबात आवश्यक आहे का?
• सिंगल पेज ॲप्लिकेशन्स (एसपीए) हे भविष्य आहे हे खरे आहे का?
• जेएसने वेबसाइटवर पृष्ठे तयार करावी आणि वेब अनुप्रयोगांमध्ये पृष्ठे प्रस्तुत करावी?
• मी PJAX किंवा TurboLinks सारखी तंत्रे वापरावीत?
• वेबसाइट आणि वेब ॲप्लिकेशनमध्ये नेमका फरक काय आहे? एक गोष्ट बाकी असावी का?

या प्रश्नांची उत्तरे देण्याचा माझा प्रयत्न पुढीलप्रमाणे आहे. मी वापरकर्ता अनुभव (UX) दृष्टीकोनातून JavaScript कसे वापरायचे याचे संशोधन करण्याचा प्रयत्न केला. विशेषतः, वापरकर्त्याला त्याला स्वारस्य असलेला डेटा मिळविण्यासाठी लागणारा वेळ कमी करण्याच्या कल्पनेवर मी विशेष लक्ष दिले. मूलभूत गोष्टींपासून सुरुवात करत आहे नेटवर्क तंत्रज्ञानआणि भविष्यातील वापरकर्त्याच्या वर्तनाचा अंदाज घेऊन समाप्त होतो.

1. सर्व्हरवर पृष्ठे प्रस्तुत करणे ऐच्छिक आहे

tl;DR: सर्व्हर रेंडरिंग SEO साठी नाही, परंतु कार्यप्रदर्शनासाठी केले जाते. ते ध्यानात घ्या अतिरिक्त विनंत्यास्क्रिप्ट, शैली आणि त्यानंतरच्या API विनंत्या प्राप्त करण्यासाठी. भविष्यात, HTTP 2.0 पुश पद्धत वापरण्याचा विचार करा.

सर्व प्रथम, मला “सर्व्हर रेंडरेड ऍप्लिकेशन्स” मधून “सिंगल पेज ऍप्लिकेशन्स” वेगळे करण्याची सामान्य चूक दाखवावी लागेल. जर आम्हाला वापरकर्त्याच्या दृष्टिकोनातून सर्वोत्कृष्ट अनुभव मिळवायचा असेल, तर आम्ही स्वतःला अशा मर्यादेपर्यंत मर्यादित ठेवू नये आणि एक पर्याय दुसऱ्याच्या बाजूने सोडून देऊ नये.

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

स्टॅनफोर्ड आणि बोस्टनमधील अंतर 4320 किमी आहे.
व्हॅक्यूममध्ये प्रकाशाचा वेग 300 x 10^6 m/s आहे.
ऑप्टिकल फायबरमध्ये प्रकाशाचा वेग व्हॅक्यूममधील प्रकाशाच्या वेगाच्या अंदाजे 66% असतो.
ऑप्टिकल फायबरमध्ये प्रकाशाचा वेग 300 x 10^6 m/s * 0.66 = 200 x 10^6 m/s आहे.
बोस्टनला 4320 किमी / 200 x 10^6 m/s = 21.6 m/s प्रसारित करताना एकमार्गी विलंब.
राउंड ट्रिप विलंब ४३.२ मी/से.
आधुनिक इंटरनेटवर स्टॅनफोर्ड ते बोस्टन पर्यंतचे पिंग सुमारे 85 ms (...)
तर, आधुनिक इंटरनेट उपकरणे प्रकाशाच्या वेगाच्या 0.5 पट वेगाने सिग्नल प्रसारित करतात.

अहवाल दिलेला 85ms परिणाम सुधारला जाऊ शकतो (आणि आधीच थोडा चांगला आहे), परंतु हे समजून घेणे महत्वाचे आहे की तेथे आहे शारीरिक मर्यादाइंटरनेटद्वारे माहिती प्रसारित करण्यात विलंब, वापरकर्त्यांच्या संगणकावरील बँडविड्थ कितीही वाढली तरी.

JavaScript ऍप्लिकेशन्सच्या लोकप्रियतेच्या वाढीसह हे विशेषतः महत्वाचे आहे, ज्यामध्ये सामान्यत: फक्त मार्कअप आणि त्यापुढील रिक्त फील्ड असते. तथाकथित सिंगल पेज ॲप्लिकेशन्स (एसपीए) - सर्व्हर एक पृष्ठ परत करतो आणि बाकी सर्व काही क्लायंटच्या बाजूने कोडद्वारे कॉल केले जाते.

अशा परिस्थितीची कल्पना करा जिथे वापरकर्ता थेट http://app.com/orders/ मध्ये प्रवेश करतो. तुमच्या अर्जाला ही विनंती प्राप्त होईल आणि त्यावर प्रक्रिया करण्यापर्यंत, त्याच्याकडे आधीपासूनच एक महत्त्व आहे माहितीपृष्ठावर काय दर्शविणे आवश्यक आहे याबद्दल. ते, उदाहरणार्थ, डेटाबेसमधून ऑर्डर लोड करू शकते आणि प्रतिसादात जोडू शकते. परंतु या परिस्थितीत बहुतेक एसपीए रिक्त पृष्ठ आणि टॅग परत करतात. नंतर तुम्हाला स्क्रिप्टची सामग्री मिळविण्यासाठी आणि पुन्हा सामग्री मिळविण्यासाठी विनंत्यांची देवाणघेवाण करावी लागेल.

प्रत्येक SPA पृष्ठासाठी सर्व्हरने पाठवलेले HTML पार्स करणे

अनेक विकासक जाणीवपूर्वक असा त्याग करतात. ते अतिरिक्त नेटवर्क सुनिश्चित करण्याचा प्रयत्न करतात हॉप्सवापरकर्त्यासाठी फक्त एकदाच होईल, पाठवणे योग्य शीर्षकेस्क्रिप्ट आणि CSS सह प्रतिसादांमध्ये कॅशिंगसाठी. पारंपारिक शहाणपण हे आहे की हा एक चांगला करार आहे कारण एकदा सर्व फायली संगणकावर डाउनलोड केल्या गेल्या की, बहुतेक वापरकर्त्याच्या क्रिया (जसे की इतर विभागांमध्ये नेव्हिगेट करणे) सूचना न देता होतात. अतिरिक्त पृष्ठेकिंवा स्क्रिप्ट.

तथापि, कॅशे विचारात घेऊनही, पार्सिंग आणि स्क्रिप्टच्या अंमलबजावणीसाठी लागणारा वेळ विचारात घेतल्यास कार्यप्रदर्शनात निश्चित नुकसान होते. लेखातील “jQuery मोबाईलसाठी खूप मोठी आहे का?” केवळ jQuery काही मोबाइल ब्राउझर शेकडो मिलिसेकंदांनी कसे कमी करू शकते हे सांगते.

बाबी आणखी वाईट करण्यासाठी, स्क्रिप्ट लोड होत असताना वापरकर्त्याला सहसा कोणताही अभिप्राय मिळत नाही. परिणाम म्हणजे स्क्रीनवर एक रिक्त पृष्ठ आहे, जे नंतर अचानक पूर्ण लोड केलेल्या पृष्ठात बदलते.

सर्वात महत्त्वाचे म्हणजे, सर्वात सामान्य इंटरनेट डेटा ट्रान्सपोर्ट (TCP) मंद गतीने सुरू होते हे आम्ही विसरतो. हे जवळजवळ निश्चितपणे हमी देते की बहुतेक स्क्रिप्ट बंडल एकाच वेळी हस्तांतरित केले जाणार नाहीत, ज्यामुळे वरील परिस्थिती आणखी वाईट होईल.

एक TCP कनेक्शन हँडशेक पॅकेट्सच्या देवाणघेवाणीने सुरू होते. तुम्ही SSL वापरत असाल, जे सुरक्षित स्क्रिप्ट हस्तांतरणासाठी महत्त्वाचे आहे, दोन अतिरिक्त पॅकेट एक्सचेंजेस आहेत (एक जर क्लायंटने सत्र पुनर्प्राप्त केले तर). त्यानंतरच सर्व्हर डेटा पाठवण्यास प्रारंभ करू शकतो, परंतु सराव असे दर्शवितो की तो हे हळूहळू आणि बॅचमध्ये करतो.

स्लो स्टार्ट नावाची गर्दी नियंत्रण यंत्रणा अंगभूत आहे TCP प्रोटोकॉलडेटा पाठवण्यासाठी, हळूहळू रक्कम वाढवत आहे विभाग. SPA साठी याचे दोन गंभीर परिणाम आहेत:

1. मोठ्या स्क्रिप्ट लोड होण्यासाठी त्यांना दिसते त्यापेक्षा जास्त वेळ लागतो. Ilya Grigorik द्वारे "High Performance Browser Networking" या पुस्तकात स्पष्ट केल्याप्रमाणे, "क्लायंट आणि सर्व्हरमधील डेटा एक्सचेंजच्या 64 KB पर्यंत पोहोचण्यासाठी "चार पॅकेट एक्सचेंज (...) आणि शेकडो मिलिसेकंद विलंब लागतो." उदाहरणार्थ, लंडन आणि न्यूयॉर्क दरम्यान वेगवान इंटरनेट कनेक्शनच्या बाबतीत, TCP पोहोचण्यापूर्वी 225 ms लागतात कमाल आकारपॅकेज

2. हा नियम प्रारंभिक पृष्ठ लोडवर देखील लागू होत असल्याने, प्रथम पृष्ठावर प्रस्तुत करण्यासाठी कोणती सामग्री लोड केली जाते हे खूप महत्वाचे आहे. पॉल आयरिशने त्याच्या प्रेझेंटेशन डिलिव्हरिंग प्रॉडक्ट्समध्ये सांगितल्याप्रमाणे, पहिले 14 KB गंभीर आहेत. कनेक्शन स्थापित करण्याच्या पहिल्या टप्प्यात क्लायंट आणि सर्व्हरमधील हस्तांतरण खंड दर्शविणारा आलेख पाहिल्यास हे स्पष्ट होईल.

सेगमेंटनुसार, प्रत्येक कनेक्शन टप्प्यावर सर्व्हर किती KB पाठवू शकतो

या विंडोमध्ये सामग्री वितरीत करण्याचे व्यवस्थापित करणाऱ्या वेबसाइट्स (डेटाशिवाय मूलभूत मार्कअप देखील) असाधारणपणे प्रतिसाद देणाऱ्या दिसतात. किंबहुना, जलद सर्व्हर-साइड ऍप्लिकेशन्सचे बरेच लेखक JavaScript ला काहीतरी अनावश्यक किंवा अत्यंत सावधगिरीने वापरण्यासारखे काहीतरी समजतात. जर ऍप्लिकेशनमध्ये वेगवान बॅकएंड आणि डेटाबेस असेल आणि त्याचे सर्व्हर वापरकर्त्यांजवळ (CDN) असतील तर ही वृत्ती आणखी मजबूत होते.

सामग्रीच्या सादरीकरणाला गती देण्यासाठी सर्व्हरची भूमिका थेट वेब अनुप्रयोगावर अवलंबून असते. समाधान नेहमी "सर्व्हरवर संपूर्ण पृष्ठे प्रस्तुत करण्यासाठी" उकळत नाही.

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

अत्यंत महत्वाचे गुणात्मक मूल्यांकन स्क्रिप्ट आणि शैली, सर्व्हरकडे सत्र, क्लायंट आणि URL बद्दल असलेली माहिती विचारात घेऊन. ऑर्डर्सची क्रमवारी लावणाऱ्या स्क्रिप्ट्स सेटिंग्ज पेज लॉजिकपेक्षा/ऑर्डर्ससाठी अधिक महत्त्वाच्या असतील. कदाचित तितके स्पष्ट नसेल, परंतु "स्ट्रक्चरल CSS" आणि "स्टाइलिंग CSS" लोड करण्यात फरक आहे. JavaScript कोडसाठी पहिला आवश्यक असू शकतो, म्हणून तो आवश्यक आहे अवरोधित करणे, आणि दुसरा असिंक्रोनस लोड केला जातो.

एसपीएचे एक चांगले उदाहरण ज्याचा परिणाम अनावश्यक पॅकेट एक्सचेंजमध्ये होत नाही 4096 बाइट स्टॅकओव्हरफ्लो संकल्पना क्लोन आहे, जो टीसीपी कनेक्शनवर हँडशेक केल्यानंतर पहिल्या पॅकेटसह सैद्धांतिकरित्या लोड करू शकतो! सर्व्हरच्या प्रतिसादात सर्व संसाधनांसाठी इनलाइन वापरून, कॅशिंग नाकारून लेखकाने हे साध्य केले. SPDY किंवा HTTP/2 सर्व्हर पुश वापरून, सर्व कॅश्ड क्लायंट कोड एकाच हॉपमध्ये हस्तांतरित करणे सैद्धांतिकदृष्ट्या शक्य आहे. बरं, सध्या, पॅकेट एक्सचेंजच्या अनावश्यक फेऱ्यांपासून मुक्त होण्यासाठी सर्व्हरच्या बाजूला भाग किंवा संपूर्ण पृष्ठ प्रस्तुत करणे हा सर्वात लोकप्रिय मार्ग आहे.

अनावश्यक राउंडट्रिप्सपासून मुक्त होण्यासाठी CSS आणि JS साठी इनलाइन वापरून संकल्पनेचा पुरावा SPA

बऱ्यापैकी लवचिक प्रणाली जी ब्राउझर आणि सर्व्हरमध्ये रेंडरिंग विभाजित करते आणि स्क्रिप्ट्स आणि शैली हळूहळू लोड करण्यासाठी साधने प्रदान करते ते दरम्यानची रेषा खूप चांगल्या प्रकारे अस्पष्ट करू शकते. वेबसाइट्सआणि वेब अनुप्रयोग. दोन्ही URL वापरतात, नेव्हिगेशन करतात आणि वापरकर्त्याला डेटा दाखवतात. सह एक अर्ज देखील स्प्रेडशीट, जे पारंपारिकपणे क्लायंट-साइड कार्यक्षमतेवर अवलंबून असते, प्रथम क्लायंटला संपादित करणे आवश्यक असलेली माहिती दर्शवणे आवश्यक आहे. आणि हे कमीत कमी राउंडट्रिप्समध्ये करणे अत्यंत महत्त्वाचे आहे.

माझ्या मते, आजकाल बऱ्याच लोकप्रिय सिस्टीममधील सर्वात मोठी कामगिरी गैरसोय स्टॅकमधील जटिलतेच्या प्रगतीशील संचयामुळे येते. कालांतराने, JavaScript आणि CSS सारखे तंत्रज्ञान जोडले गेले. त्यांची लोकप्रियताही हळूहळू वाढत गेली. ते वेगळ्या पद्धतीने कसे वापरले जाऊ शकतात हे फक्त आताच आपण कौतुक करू शकतो. आम्ही प्रोटोकॉल सुधारण्याबद्दल देखील बोलत आहोत (हे SPDY आणि QUIC च्या सध्याच्या प्रगतीद्वारे दर्शविले गेले आहे), परंतु सर्वात मोठा फायदा अद्याप अनुप्रयोग ऑप्टिमाइझ करण्यापासून होतो.

सुरुवातीच्या HTML आणि WWW च्या डिझाइनच्या आसपासच्या काही ऐतिहासिक चर्चा लक्षात ठेवणे उपयुक्त ठरेल. उदाहरणार्थ, 1997 ची ही मेलिंग सूची टॅग जोडण्याचे सुचवते HTML मध्ये. मार्क अँड्रीसेन माहिती त्वरीत वितरीत करण्याचे महत्त्व पुन्हा सांगतात:

“जर कागदपत्रे एकत्र ठेवण्याची गरज असेल तर ते आपल्याला हवे तितके गुंतागुंतीचे असू शकते आणि जरी आपण गुंतागुंत मर्यादित केली तरीही दस्तऐवजाच्या संरचनेमुळे आपल्याला मोठ्या कार्यप्रदर्शन समस्या असतील. त्याच प्रकारे. सर्व प्रथम, हे ताबडतोब WWW वन-हॉप तत्त्व खंडित करते (ठीक आहे, IMG ते देखील खंडित करते, परंतु एका विशिष्ट कारणासाठी आणि अत्यंत मर्यादित अर्थाने) - आम्हाला खात्री आहे की आम्हाला हे हवे आहे?

2. वापरकर्त्याच्या क्रियांना त्वरित प्रतिसाद

tl;DR: JavaScript तुम्हाला नेटवर्क लेटन्सी पूर्णपणे लपवू देते. हे डिझाइन तत्त्व म्हणून वापरून, आम्ही अनुप्रयोगातील जवळजवळ सर्व लोडिंग निर्देशक आणि "लोडिंग" संदेश देखील काढू शकतो. PJAX किंवा TurboLinks मध्ये व्यक्तिनिष्ठ इंटरफेस गती वाढवण्याच्या संधी गहाळ आहेत.

आमचे कार्य आहे जास्तीत जास्त प्रवेगवापरकर्त्याच्या क्रियांवर प्रतिक्रिया. वेब ऍप्लिकेशनसह काम करताना हॉप्सची संख्या कमी करण्यासाठी आम्ही कितीही प्रयत्न केले तरीही काही गोष्टी आमच्या नियंत्रणाबाहेर आहेत. ही प्रकाशाच्या गतीची सैद्धांतिक मर्यादा आणि क्लायंट आणि सर्व्हरमधील किमान पिंग आहे.

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

UX सुधारण्यासाठी JavaScript चा हा मुख्य फायदा आहे. जर इंटरफेस क्लायंटच्या बाजूने स्क्रिप्ट केलेला असेल, तर आम्ही नेटवर्क लेटन्सी लपवू शकतो. आपण उच्च गतीचा आभास निर्माण करू शकतो. आम्ही कृत्रिमरित्या शून्य विलंबता प्राप्त करू शकतो.

चला पुन्हा गृहीत धरू की हे साधे HTML आहे. दस्तऐवज हायपरलिंक्स किंवा टॅगद्वारे जोडलेले आहेत . आपण त्यापैकी कोणत्याहीवर क्लिक केल्यास, ब्राउझर नेटवर्क विनंती करतो, ज्यास अप्रत्याशितपणे बराच वेळ लागतो, नंतर प्राप्त केलेला डेटा प्राप्त होतो आणि त्यावर प्रक्रिया करतो आणि शेवटी नवीन स्थितीत प्रवेश करतो.

JavaScript तुम्हाला वापरकर्त्याच्या क्रियांना त्वरित आणि आशावादी प्रतिसाद देण्याची परवानगी देते. लिंक किंवा बटणावर क्लिक केल्याने इंटरनेटवर न जाता त्वरित प्रतिसाद मिळतो. एक सुप्रसिद्ध उदाहरण म्हणजे Gmail (किंवा Google इनबॉक्स) इंटरफेस, ज्यामध्ये ईमेल संदेशाचे संग्रहण त्वरित होते, तर सर्व्हरला संबंधित विनंती पाठविली जाते आणि असिंक्रोनस पद्धतीने प्रक्रिया केली जाते.

फॉर्मच्या बाबतीत, तो भरण्यासाठी प्रतिसाद म्हणून काही HTML कोडची वाट पाहण्याऐवजी, वापरकर्त्याने "एंटर" दाबताच आम्ही लगेच प्रतिसाद देऊ शकतो. किंवा त्याहूनही चांगले, जसे की Google शोध करतो, आम्ही नवीन पृष्ठासाठी आगाऊ मार्कअप तयार करून आधीच प्रतिक्रिया देऊ शकतो.

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

Google चे मुख्यपृष्ठ हे एक चांगले उदाहरण आहे कारण ते आमच्या लेखातील पहिली दोन तत्त्वे अगदी स्पष्टपणे प्रदर्शित करते.

2004 च्या शेवटी, Google एक पायनियर बनले JavaScript वापरूनशोध क्वेरी टाइप करताना रिअल टाइममध्ये इशारे जारी करण्यासाठी (मजेची गोष्ट म्हणजे, कर्मचाऱ्याने जीमेल प्रमाणेच त्याच्या मुख्य नोकरीच्या 20% मोकळ्या वेळेत हे कार्य विकसित केले). हे अगदी Ajax च्या उदयाचा आधार बनले:

Google Suggest पहा. ते अपडेट करत असताना पहा शोध संज्ञाजसे तुम्ही टाइप करता, जवळजवळ त्वरित... पृष्ठ रीलोड करण्यासाठी विलंब न करता. Google Suggest आणि Google Maps ही वेब ॲप्लिकेशन तयार करण्याच्या नवीन दृष्टिकोनाची दोन उदाहरणे आहेत ज्यांना आम्ही Adaptive Path वर "Ajax" म्हणतो.

क्लिक्स आणि फॉर्म सबमिशन व्यतिरिक्त आणखी एक प्रकारची क्रिया जी JavaScript द्वारे मोठ्या प्रमाणात वर्धित केली जाते ती म्हणजे फाइल अपलोड रेंडरिंग.

फाइल डाउनलोड करण्यासाठी वापरकर्त्याच्या प्रयत्नात आम्ही लॉग इन करू शकतो वेगवेगळ्या प्रकारे: ड्रॅग-एन-ड्रॉप, क्लिपबोर्डवरून पेस्ट करा, फाइल निवडा. त्यानंतर, नवीन HTML5 API चे आभार, आम्ही सामग्री आधीच डाउनलोड केल्याप्रमाणे प्रदर्शित करू शकतो. या प्रकारच्या इंटरफेसचे उदाहरण म्हणजे क्लाउडअपमधील डाउनलोडसह आमचे कार्य. प्रतिमा लघुप्रतिमा कशी तयार केली जाते आणि त्वरित रेंडर केली जाते ते पहा:

लोडिंग पूर्ण होईपर्यंत प्रतिमा प्रस्तुत केली जाते आणि प्रदर्शित केली जाते

या सर्व बाबतीत आपण सुधारतो गती समज. सुदैवाने, या दृष्टिकोनाच्या उपयुक्ततेसाठी बरेच पुरावे आहेत. कसे याचे निदान उदाहरण घ्या वाढह्यूस्टन विमानतळावरील बॅगेज कन्व्हेयरचे अंतर कमी झालेसामानाची प्रक्रिया जलद न करता हरवलेल्या सामानाबाबत तक्रारींची संख्या.

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

अशा काही परिस्थिती आहेत जेथे झटपट कृतीचा भ्रम प्रत्यक्षात UX वर हानिकारक प्रभाव पाडतो. हा पेमेंटचा एक प्रकार असू शकतो किंवा साइटवर सत्र समाप्त करू शकतो. येथे आशावादी दृष्टीकोन घेऊन, वास्तविकपणे वापरकर्त्याची फसवणूक करून, आम्ही त्याला चिडवण्याचा धोका पत्करतो.

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

मुलभूत प्रतिसाद वेळ सल्ला तीस वर्षे समान राहिला आहे मिलर 1968; कार्ड इ. १९९१:
*0.1 सेकंद ही वापरकर्त्याला प्रतिसाद तात्काळ समजण्याची मर्यादा आहे, येथे कोणत्याही प्रदर्शनाची आवश्यकता नाही अतिरिक्त माहिती, ऑपरेशनचा परिणाम वगळता.
* 1.0 सेकंद ही वापरकर्त्याच्या विचारांच्या निरंतरतेची मर्यादा आहे, जरी त्याला विलंब लक्षात येईल. सामान्यतः, 0.1 सेकंदांपेक्षा जास्त परंतु 1.0 सेकंदांपेक्षा कमी विलंबासाठी कोणतेही अतिरिक्त संकेत आवश्यक नाहीत, परंतु वापरकर्ता डेटासह थेट कार्य करण्याची भावना गमावतो.
* संवादावर वापरकर्त्याचे लक्ष वेधण्यासाठी 10 सेकंदांची मर्यादा आहे. उच्च लेटन्सीसह, वापरकर्त्यांना संगणकाकडून प्रतिसादाची वाट पाहत असताना दुसरे कार्य करावेसे वाटेल.

PJAX किंवा TurboLinks सारख्या तंत्रांमध्ये दुर्दैवाने वर्णन केलेली बहुतेक वैशिष्ट्ये चुकतात हा विभाग. सर्व्हरसह डेटा एक्सचेंज होईपर्यंत क्लायंट-साइड कोडला पृष्ठाच्या भविष्यातील स्थितीबद्दल "माहित" नसते.

3. डेटा बदलांवर प्रतिक्रिया

tl;DR: सर्व्हरवर डेटा अद्यतनित केल्यावर, क्लायंटला विलंब न करता सूचित केले जावे. हा उत्पादकता सुधारण्याचा एक प्रकार आहे जेथे वापरकर्त्याला ते करण्यापासून मुक्त केले जाते अतिरिक्त क्रिया(F5 दाबा, पृष्ठ रिफ्रेश करा). नवीन समस्या: (पुन्हा) कनेक्शन व्यवस्थापन, राज्य पुनर्प्राप्ती.

तिसरे तत्त्व स्त्रोतावरील डेटामधील बदलांना UI च्या प्रतिसादाशी संबंधित आहे, विशेषत: एक किंवा अधिक डेटाबेस सर्व्हर.

वापरकर्ता पृष्ठ (पारंपारिक वेबसाइट्स) रिफ्रेश करेपर्यंत किंवा त्याच्याशी (Ajax) संवाद साधेपर्यंत HTML डेटा पास करण्याचे मॉडेल गेले आहे.

तुमचा UI आपोआप अपडेट झाला पाहिजे.

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

Facebook च्या न्यूज फीडची कल्पना करा, ती प्रथम दिसल्यानंतर, जेव्हा माहिती प्रामुख्याने पोस्ट केली गेली होती वैयक्तिक संगणकवापरकर्ते. स्टॅटिक रेंडरिंग इष्टतम नव्हते, परंतु दिवसातून एकदा त्यांचे फीड रीफ्रेश करणाऱ्या लोकांसाठी ते अर्थपूर्ण होते.

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

तथापि, झटपट UI अद्यतनांचे फायदे बहु-वापरकर्ता अनुप्रयोगांपुरते मर्यादित आहेत असे गृहीत धरणे चुकीचे ठरेल. म्हणूनच मला बोलायला आवडते सहमत डेटा बिंदू, ऐवजी वापरकर्ते. तुमचा फोन आणि तुमचा स्वतःचा लॅपटॉप यांच्यातील फोटो सिंक्रोनाइझ करण्यासाठी एक सामान्य परिस्थिती घेऊ:

एकल-वापरकर्ता अनुप्रयोग देखील प्रतिक्रियात्मकतेचा फायदा घेऊ शकतो.

कल्पना करण्यास उपयुक्त सर्ववापरकर्त्याला "प्रतिक्रियाशील" म्हणून पाठवलेली माहिती. सत्र आणि अधिकृतता स्थिती सिंक्रोनाइझ करणे हे सार्वत्रिक दृष्टिकोनाचे एक उदाहरण आहे. तुमच्या ॲप्लिकेशनच्या वापरकर्त्यांकडे एकाच वेळी अनेक टॅब उघडले असल्यास, त्यापैकी एकावरील कामाचे सत्र संपल्याने इतर सर्व टॅबवरील अधिकृतता त्वरित निष्क्रिय केली पाहिजे. यामुळे अपरिहार्यपणे सुरक्षितता सुधारते आणि गोपनीय माहितीचे चांगले संरक्षण होते, विशेषत: अशा परिस्थितीत जेथे एकाच डिव्हाइसवर एकाधिक लोकांना प्रवेश असतो.

प्रत्येक पृष्ठ सत्र स्थिती आणि अधिकृतता स्थितीवर प्रतिक्रिया देते

एकदा आपण नियम स्थापित केला की स्क्रीनवरील माहिती स्वयंचलितपणे अद्यतनित केली जाते, नवीन कार्यावर कार्य करणे महत्वाचे आहे: स्थिती पुनर्संचयित करणे.

विनंत्या पाठवताना आणि अणु अद्यतने प्राप्त करताना, हे विसरून जाणे सोपे आहे की तुमचा अनुप्रयोग सामान्यपणे अद्यतनित झाला पाहिजे. दीर्घ अनुपस्थितीसंप्रेषणे तुमच्या लॅपटॉपचे झाकण बंद करून काही दिवसांनी ते उघडण्याची कल्पना करा. अर्ज कसा वागेल?

प्रकरणात काय होते याचे उदाहरण चुकीचे अद्यतनसंप्रेषणे

ॲप्लिकेशनची पुन्हा कनेक्ट करण्याची क्षमता तत्त्व #1 शी संवाद साधते, जर तुम्ही पहिल्या पेज लोडवर डेटा पाठवणे निवडले, तर तुम्ही स्क्रिप्ट लोड होण्यापूर्वी निघून जाणारा वेळ देखील विचारात घेतला पाहिजे. ही वेळ मूलत: डिस्कनेक्ट वेळेच्या समतुल्य आहे, म्हणून तुमच्या स्क्रिप्टचे प्रारंभिक कनेक्शन सत्र पुन्हा सुरू करणे आहे.

4. सर्व्हरसह डेटा एक्सचेंजचे नियंत्रण

tl;DR: आता आपण सर्व्हरसह डेटा एक्सचेंज फाइन-ट्यून करू शकतो. त्रुटी हाताळणे, क्लायंटला वारंवार विनंती करणे, डेटा सिंक्रोनाइझेशन याची खात्री करा पार्श्वभूमीआणि कॅशे ऑफलाइन जतन करा.

जेव्हा वेब अस्तित्वात आले, तेव्हा क्लायंट आणि सर्व्हरमधील संप्रेषण अनेक मार्गांनी मर्यादित होते:

दुव्यावर क्लिक केल्याने नवीन पृष्ठ आणण्यासाठी आणि ते प्रस्तुत करण्यासाठी GET पाठवले जाईल.

फॉर्म सबमिट केल्याने एक पोस्ट किंवा GET पाठवले जाईल आणि त्यानंतर नवीन पृष्ठाचे प्रस्तुतीकरण केले जाईल.

इमेज किंवा ऑब्जेक्ट इंजेक्ट केल्याने एसिंक्रोनस GET पाठवले जाईल आणि त्यानंतर रेंडरिंग होईल.

या मॉडेलची साधेपणा अतिशय आकर्षक आहे आणि आता माहिती कशी प्राप्त करायची आणि पाठवायची हे समजून घेताना गोष्टी निश्चितपणे अधिक जटिल झाल्या आहेत.

मुख्य निर्बंध दुसऱ्या मुद्द्याशी संबंधित आहेत. अपरिहार्यपणे नवीन पृष्ठ लोड केल्याशिवाय डेटा पाठविण्यास असमर्थता ही कामगिरीच्या दृष्टीकोनातून एक गैरसोय होती. परंतु सर्वात महत्वाची गोष्ट म्हणजे त्याने "बॅक" बटण पूर्णपणे तोडले:

जुन्या वेबची कदाचित सर्वात त्रासदायक कलाकृती

त्यामुळे जावास्क्रिप्टशिवाय ॲप्लिकेशन प्लॅटफॉर्म म्हणून वेब अपूर्ण राहिले. Ajax ने वापरकर्ता प्रकाशनाच्या सुलभतेच्या दृष्टीने एक मोठी झेप दाखवली.

आमच्याकडे आता अनेक API (XMLHttpRequest, WebSocket, EventSource, फक्त काही नावे) आहेत जे डेटाच्या प्रवाहावर पूर्ण आणि अचूक नियंत्रण देतात. फॉर्मद्वारे वापरकर्ता डेटा प्रकाशित करण्याच्या क्षमतेव्यतिरिक्त, आमच्याकडे UX सुधारण्यासाठी नवीन संधी आहेत.

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

डिस्कनेक्ट आढळल्यास, डेटा मेमरीमध्ये (किंवा अजून चांगले, लोकल स्टोरेजमध्ये) साठवणे उपयुक्त ठरते जेणेकरून ते नंतर पाठवता येईल. सर्व्हिसवर्करच्या भविष्यातील वापराच्या प्रकाशात हे विशेषतः महत्वाचे आहे, जे परवानगी देते JavaScript अनुप्रयोगकाम पार्श्वभूमीवर. तुमचा ॲप्लिकेशन उघडला नसल्यास, तुम्ही तरीही पार्श्वभूमीत सर्व्हरसोबत डेटा सिंक करण्याचा प्रयत्न सुरू ठेवू शकता.

डेटा पाठवताना टाइमआउट आणि त्रुटींची शक्यता विचारात घ्या, अशा परिस्थितीचे निराकरण क्लायंटच्या बाजूने केले पाहिजे कनेक्शन पुनर्संचयित केल्यास, डेटा पुन्हा पाठवण्याचा प्रयत्न करा. कायमस्वरूपी त्रुटी आढळल्यास, त्याबद्दल वापरकर्त्यास सूचित करा.

काही त्रुटी विशेषतः काळजीपूर्वक हाताळल्या पाहिजेत. उदाहरणार्थ, अनपेक्षित 403 चा अर्थ असा होऊ शकतो की वापरकर्त्याचे सत्र अवैध केले गेले आहे. अशा परिस्थितीत, वापरकर्त्याला लॉगिन आणि पासवर्ड टाकण्यासाठी विंडो दाखवून सत्र पुनर्संचयित करणे शक्य आहे.

वापरकर्ता चुकून डेटा प्रवाहात व्यत्यय आणत नाही याची खात्री करणे देखील महत्त्वाचे आहे. हे दोन परिस्थितींमध्ये होऊ शकते. ब्राउझर किंवा टॅब बंद करणे हे पहिले आणि सर्वात स्पष्ट प्रकरण आहे, जे आम्ही आधी अनलोड हँडलरसह प्रतिबंधित करण्याचा प्रयत्न करत आहोत.

अनलोड करण्यापूर्वी चेतावणी

दुसरे (आणि कमी स्पष्ट) प्रकरण म्हणजे जेव्हा तुम्ही दुस-या पृष्ठावर नेव्हिगेट करण्याचा प्रयत्न करता, जसे की दुव्यावर क्लिक करणे. या प्रकरणात, अनुप्रयोग विकसकाच्या विवेकबुद्धीनुसार, इतर पद्धती वापरून वापरकर्त्यास थांबवू शकतो.

5. कथा खंडित करू नका, ती सुधारा

tl;DR: जर ब्राउझर URL आणि इतिहास व्यवस्थापित करत नसेल, तर आम्हाला नवीन समस्या येतील. तुम्ही अपेक्षित स्क्रोलिंग वर्तन पूर्ण करत असल्याची खात्री करा. द्रुत अभिप्रायासाठी तुमची स्वतःची कॅशे जतन करा.

उदाहरणार्थ, एक विशिष्ट "अंतहीन" पृष्ठ सामान्यतः JavaScript बटणासह बनविले जाते जे अतिरिक्त डेटा/HTML विनंती करते आणि ते समाविष्ट करते. दुर्दैवाने, आवश्यक पाऊल म्हणून history.pushState किंवा रिप्लेसस्टेट कॉल करणे फार कमी लोक लक्षात ठेवतात.

म्हणूनच मी "ब्रेक" हा शब्द वापरतो. मूळ वेबच्या साध्या मॉडेलसह, ही परिस्थिती शक्य नव्हती. प्रत्येक राज्य बदल URL बदलावर आधारित होता.

पण आहे उलट बाजूपदके - संधी सुधारणेसर्फिंग इतिहास, जो आता आम्ही JavaScript वापरून नियंत्रित करतो.

अशाच एका शक्यतेला डॅनियल पिपियसने फास्ट बॅक म्हटले:

मागील बटण त्वरीत कार्य केले पाहिजे; वापरकर्ते जास्त अपेक्षा करत नाहीत मोठा बदलडेटा

हे वेब ऍप्लिकेशनमधील बॅक बटणाला बटण म्हणून हाताळण्यासारखे आहे आणि त्यास तत्त्व #2 लागू करण्यासारखे आहे: वापरकर्त्याच्या कृतीला त्वरित प्रतिसाद द्या. मुख्य गोष्ट अशी आहे की आपल्याला मागील पृष्ठ कसे कॅशे करायचे आणि ते स्क्रीनवर त्वरित कसे प्रदर्शित करायचे हे ठरविण्याची संधी आहे. त्यानंतर तुम्ही तत्त्व #3 लागू करू शकता आणि नंतर त्या पृष्ठावर नवीन डेटा आल्यावर वापरकर्त्याला कळवू शकता.

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

"मागे" बटणाचे चुकीचे ऑपरेशन

नेव्हिगेशन खंडित करण्याचा दुसरा मार्ग म्हणजे स्क्रोल स्टेट मेमरीकडे दुर्लक्ष करणे. पुन्हा एकदा, JS आणि मॅन्युअल हिस्ट्री मॅनेजमेंट वापरत नसलेल्या पानांना येथे समस्या येणार नाही. पण डायनॅमिक पृष्ठे असतील. मी इंटरनेटवरील दोन सर्वात लोकप्रिय JavaScript-आधारित बातम्या फीड्सची चाचणी केली: Twitter आणि Facebook. दोघांना स्क्रोलिंग स्मृतीभ्रंश झाला होता.

अंतहीन पृष्ठ वळणे हे सहसा स्क्रोलिंग स्मृतिभ्रंशाचे लक्षण असते

शेवटी, इतिहास पाहताना केवळ संबंधित राज्य बदलांपासून सावध रहा. उदाहरणार्थ, टिप्पण्यांसह उपवृक्षांची स्थिती बदलण्याचे हे प्रकरण.

टिप्पण्यांचा प्रकार बदलणे इतिहासात जतन करणे आवश्यक आहे

एखाद्या अनुप्रयोगातील दुव्यावर क्लिक केल्यानंतर पृष्ठ पुन्हा प्रस्तुत केले असल्यास, वापरकर्त्यास सर्व टिप्पण्या विस्तृत केल्या जाण्याची अपेक्षा असू शकते. राज्य बदलले की ते इतिहासात जतन केले पाहिजे.

6. पुश संदेशांद्वारे कोड अद्यतने

tl;DR: पुश मेसेजद्वारे फक्त डेटा पाठवणे पुरेसे नाही, तुम्हाला कोड देखील आवश्यक आहे. टाळा API त्रुटीआणि उत्पादकता सुधारते. तुमचा अर्ज वेदनारहितपणे पुन्हा डिझाइन करण्यासाठी स्टेटलेस DOM वापरा.

तुमचा अनुप्रयोग कोडमधील बदलांना प्रतिसाद देतो हे अत्यंत महत्त्वाचे आहे.

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

तितकेच महत्त्वाचे कारण म्हणजे तत्त्व क्रमांक 3 चे पालन करणे. जर तुमचा इंटरफेस स्वतःच अपडेट होत असेल, तर वापरकर्त्यांनी पृष्ठ स्वहस्ते रीलोड करण्याचा अवलंब करण्याचे फारसे कारण नाही.

लक्षात ठेवा की सामान्य साइटसाठी, पृष्ठ रिफ्रेश दोन गोष्टी ट्रिगर करते: डेटा रीलोड आणि कोड रीलोड. पुश कोड अपडेट्सशिवाय पुश डेटा अपडेटसह सिस्टम आयोजित करणे अपूर्ण आहे, विशेषत: अशा जगात जेथे एक टॅब (सत्र) बराच काळ उघडे राहू शकते.

जर सर्व्हर पुश चॅनेल कार्यरत असेल, तर वापरकर्त्याला नवीन कोडच्या उपलब्धतेबद्दल सूचित केले जाऊ शकते. नसल्यास, आवृत्ती क्रमांक आउटगोइंग HTTP विनंत्यांच्या शीर्षलेखात जोडला जाऊ शकतो. सर्व्हर त्याची शेवटच्याशी तुलना करू शकतो ज्ञात आवृत्ती, विनंतीवर प्रक्रिया करण्यास सहमती द्या किंवा नाही, आणि क्लायंटसाठी कार्य जारी करा.

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

अधिक सर्वोत्तम दृष्टीकोन- "हॉट" कोड बदलणे. याचा अर्थ तुम्हाला पेज पूर्णपणे रीलोड करण्याची गरज नाही. त्याऐवजी, निश्चित मॉड्यूल्सफ्लायवर बदलले जातात आणि त्यांचा कोड अंमलबजावणीसाठी पुन्हा सबमिट केला जातो.

बऱ्याच विद्यमान अनुप्रयोगांमध्ये, हॉट-स्वॅप कोड करणे खूप कठीण आहे. हे करण्यासाठी, आपण सुरुवातीला वेगळ्या आर्किटेक्चरचे पालन केले पाहिजे वर्तन(कोड) पासून डेटा(राज्य). हा विभाग आम्हांला अनेक भिन्न पॅच त्वरीत रोल आउट करण्यास अनुमती देईल.

उदाहरणार्थ, आमच्या वेब ऍप्लिकेशनमध्ये एक मॉड्यूल आहे जे इव्हेंट प्रसारित करण्यासाठी बस सेट करते (जसे socket.io). जेव्हा एखादी घटना घडते, तेव्हा विशिष्ट घटकाची स्थिती बदलते आणि हे DOM मध्ये प्रतिबिंबित होते. त्यानंतर तुम्ही त्या घटकाचे वर्तन बदलता, उदाहरणार्थ ते विद्यमान राज्य आणि नवीन स्थितीसाठी भिन्न DOM मार्कअप तयार करते.

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

परंतु अवांछित साइड इफेक्ट्सशिवाय मॉड्यूल्सचे मूल्यांकन कसे करावे ही समस्या लगेचच उद्भवते. React द्वारे ऑफर केलेले आर्किटेक्चर येथे सर्वात योग्य आहे. जर एखाद्या घटकाचा कोड अद्यतनित केला असेल, तर त्याचे तर्क पुन्हा कार्यान्वित केले जाऊ शकतात आणि DOM अद्यतनित केले जाते. या संकल्पनेचे डॅन अब्रामोव्हचे स्पष्टीकरण वाचा.

मूलत:, कल्पना अशी आहे की तुम्ही DOM अपडेट करा (किंवा ते पुन्हा रंगवा), जे कोड बदलण्यात खूप मदत करते. जर राज्य DOM मध्ये संग्रहित केले असेल किंवा अनुप्रयोगाद्वारे इव्हेंट हँडलर स्थापित केले असतील, तर कोड अद्यतनित करणे अधिक कठीण काम होऊ शकते.

7. वर्तन अंदाज

tl;DR: नकारात्मक विलंब.

आधुनिक JavaScript ऍप्लिकेशनमध्ये वापरकर्त्याच्या क्रियांचा अंदाज लावण्यासाठी यंत्रणा असू शकते.

वापरकर्त्याने विनंती करण्यापूर्वी सर्व्हरवरून डेटा पूर्व-डाउनलोड करणे हा या कल्पनेचा सर्वात स्पष्ट अनुप्रयोग आहे. माऊस कर्सरसह वेब पृष्ठ लोड करणे जेणेकरुन लिंक्सवर क्लिक केल्यास ते त्वरित प्रदर्शित होईल.

माउस ट्रॅकिंगचे निरीक्षण करण्याची थोडी अधिक प्रगत पद्धत बटणांसारख्या परस्परसंवादी घटकांसह भविष्यातील "टक्कर" साठी माउसच्या मार्गाचे विश्लेषण करते. :

jQuery प्लगइन माउस मार्गाचा अंदाज लावते

निष्कर्ष

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

कोणत्याही अनुप्रयोगासाठी हायपरलिंक केलेली पृष्ठे चांगली इमारत आहेत. वापरकर्ता संवाद साधत असताना क्रमाक्रमाने कोड, शैली आणि मार्कअप लोड केल्याने परस्परसंवादाचा त्याग न करता उत्कृष्ट कार्यप्रदर्शन सुनिश्चित होते.

नवीन अद्वितीय संधी JavaScript पुरवते. जर या तंत्रज्ञानाचा मोठ्या प्रमाणावर वापर केला गेला, तर ते अस्तित्त्वात असलेल्या सर्वात विनामूल्य प्लॅटफॉर्मच्या वापरकर्त्यांसाठी सर्वोत्तम अनुभव प्रदान करतील - WWW.

वेब आर्किटेक्चर आणि अनुभव-आधारित वेबसाइट डिझाइनसाठी शक्तिशाली नवीन दृष्टिकोन जाणून घ्या. हे पुस्तक डायनॅमिक वेब ऍप्लिकेशन्सचे नियोजन, डिझाइन आणि विकास करण्यासाठी व्यावहारिक, समस्या-निराकरण, वापरकर्ता-केंद्रित दृष्टीकोन प्रदान करते. डोमेन-चालित डिझाइनचा अधिकाधिक फायदा कसा मिळवायचा, इष्टतम सपोर्टिंग आर्किटेक्चर आणि मास्टर कसे ठरवायचे ते तुम्ही शिकाल आधुनिक दृष्टिकोनडिझाइन करण्यासाठी, परस्परसंवादाच्या अनुभवावर लक्ष केंद्रित करा. लेखक विशिष्ट तंत्रज्ञानाची निवड आणि अंमलबजावणी, तसेच डिझाइनसह परस्परसंवादाच्या अनुभवाशी संबंधित मुख्य विषयांचा विचार करतो. मोबाइल वेब अनुप्रयोगआणि अनुकूली डिझाइन. बूटस्ट्रॅप, AJAX, JSON आणि JQuery सारख्या इतर तंत्रज्ञानाच्या संयोजनात तुम्ही ASP.NET MVC आणि SignaIR सारख्या Microsoft तंत्रज्ञानाचा पुरेपूर वापर करायला शिकाल. या तंत्रज्ञानाचा वापर करून आणि नवीन ASP.NET Core 1.0 प्लॅटफॉर्मवर प्रभुत्व मिळवून, तुम्ही हे करू शकता...

अधिक वाचा

वेब आर्किटेक्चर आणि अनुभव-आधारित वेबसाइट डिझाइनसाठी शक्तिशाली नवीन दृष्टिकोन जाणून घ्या. हे पुस्तक डायनॅमिक वेब ऍप्लिकेशन्सचे नियोजन, डिझाइन आणि विकास करण्यासाठी व्यावहारिक, समस्या-निराकरण, वापरकर्ता-केंद्रित दृष्टीकोन प्रदान करते. डोमेन-चालित डिझाइनचा जास्तीत जास्त फायदा कसा मिळवायचा, इष्टतम सपोर्टिंग आर्किटेक्चरची व्याख्या कशी करायची आणि आधुनिक अनुभव-केंद्रित डिझाइन पद्धतींमध्ये प्रभुत्व कसे मिळवायचे ते तुम्ही शिकाल. लेखक विशिष्ट तंत्रज्ञानाची निवड आणि अंमलबजावणी, तसेच वापरकर्ता अनुभवाशी संबंधित मुख्य विषयांचे परीक्षण करतो, ज्यामध्ये मोबाइल वेब अनुप्रयोग डिझाइन आणि प्रतिसादात्मक डिझाइन समाविष्ट आहे. बूटस्ट्रॅप, AJAX, JSON आणि JQuery सारख्या इतर तंत्रज्ञानाच्या संयोजनात तुम्ही ASP.NET MVC आणि SignaIR सारख्या Microsoft तंत्रज्ञानाचा पुरेपूर वापर करायला शिकाल. या तंत्रज्ञानाचा फायदा घेऊन आणि नवीन ASP.NET Core 1.0 फ्रेमवर्कमध्ये प्रभुत्व मिळवून, तुम्ही त्वरीत जटिल वेब अनुप्रयोग विकसित करू शकता जे वास्तविक जीवनातील समस्या सोडवतात आणि उत्कृष्ट अनुभव देतात.
डिनो एस्पोसिटो, एक मल्टिपल मायक्रोसॉफ्ट मोस्ट व्हॅल्यूएबल प्रोफेशनल, तुम्हाला हे कसे करावे हे शिकवेल:
- वास्तविक सामाजिक आणि व्यावसायिक प्रक्रिया प्रतिबिंबित करणारे वेबसाइट आणि वेब अनुप्रयोग डिझाइन करा;
- विश्लेषण आणि जटिलता कमी करण्यासाठी डोमेन-चालित डिझाइन पद्धती वापरा विषय क्षेत्र;
- खर्च कमी करण्यासाठी आणि वापरकर्त्याच्या आवश्यकता पूर्ण करण्यासाठी अनुभव-चालित डिझाइन वापरा;
- सर्व्हर आणि क्लायंट वेब प्रतिमानांची वास्तववादी तुलना करा;
- नवीन ASP.NET Core 1.0 प्लॅटफॉर्मची मूलभूत माहिती;
- बूटस्ट्रॅप फ्रेमवर्क वापरून आधुनिक वेब पृष्ठांचा विकास सुलभ करा;
- व्यावहारिक आणि प्रभावी तंत्रे ASP.NET MVC प्रकल्पांची अंमलबजावणी;
- स्टोरेज यंत्रणा कार्यान्वित करण्यासाठी आणि डेटा मॉडेलसह कार्य करण्यासाठी नवीन शक्यता विचारात घ्या;
- प्रतिसादात्मक वेब डिझाइनचे फायदे, तोटे आणि ट्रेड-ऑफ समजून घ्या;
- खरोखर मोबाइल आणि मोबाइल-अनुकूलित वेबसाइट तयार करा.

या लेखात लपवा

द्वारे प्रकाशित

मायक्रोसॉफ्ट डेव्हलपर डिव्हिजन, .NET आणि व्हिज्युअल स्टुडिओ उत्पादन संघ

मायक्रोसॉफ्ट कॉर्पोरेशनचा एक विभाग मायक्रोसॉफ्ट कॉर्पोरेशन

एक मायक्रोसॉफ्ट वे एक मायक्रोसॉफ्ट वे

रेडमंड, वॉशिंग्टन 98052-6399

© 2019 मायक्रोसॉफ्ट कॉर्पोरेशन कॉपीराइट © 2019.

सर्व हक्क राखीव. सर्व हक्क राखीव.

हे पुस्तक प्रकाशकाच्या लेखी परवानगीशिवाय, संपूर्ण किंवा अंशतः, कोणत्याही स्वरूपात किंवा कोणत्याही प्रकारे पुनरुत्पादित किंवा प्रसारित केले जाऊ शकत नाही. या पुस्तकातील सामग्रीचा कोणताही भाग प्रकाशकाच्या लेखी परवानगीशिवाय कोणत्याही स्वरूपात किंवा कोणत्याही प्रकारे पुनरुत्पादित किंवा प्रसारित केला जाऊ शकत नाही.

हे पुस्तक "जसे आहे तसे" प्रदान केले आहे आणि लेखकाचे विचार आणि मते व्यक्त करते. हे पुस्तक "जसे आहे तसे" प्रदान केले आहे आणि लेखकाचे विचार आणि मते व्यक्त करते.

Microsoft आणि ट्रेडमार्क पृष्ठावर https://www.microsoft.com वर सूचीबद्ध केलेले ट्रेडमार्क हे Microsoft समूहाच्या कंपन्यांचे ट्रेडमार्क आहेत. Microsoft आणि “ट्रेडमार्क” वेबपृष्ठावर https://www.microsoft.com वर सूचीबद्ध केलेले ट्रेडमार्क हे Microsoft समूहाच्या कंपन्यांचे ट्रेडमार्क आहेत.

Mac आणि macOS हे Apple Inc चे ट्रेडमार्क आहेत. Mac आणि macOS हे Apple Inc चे ट्रेडमार्क आहेत.

डॉकर व्हेल लोगो नोंदणीकृत आहे ट्रेडमार्कडॉकर, इंक. परवानगीने वापरतात. डॉकर व्हेल लोगो हा Docker, Inc चा नोंदणीकृत ट्रेडमार्क आहे. परवानगीने वापरतात.

इतर सर्व नावे आणि लोगो त्यांच्या संबंधित मालकांची मालमत्ता आहेत. इतर सर्व चिन्हे आणि लोगो त्यांच्या संबंधित मालकांची मालमत्ता आहेत.

स्टीव्ह स्मिथ - सॉफ्टवेअर आर्किटेक्ट आणि ट्रेनर - Ardalis.com स्टीव्ह "ardalis" स्मिथ - सॉफ्टवेअर आर्किटेक्ट आणि ट्रेनर - Ardalis.com

संपादक: संपादक:

मायरा वेन्झेल मायरा वेन्झेल

परिचय

NET Core आणि ASP.NET Core चे पारंपारिक .NET विकासापेक्षा अनेक फायदे आहेत. .NET Core आणि ASP.NET Core पारंपारिक .NET विकासापेक्षा अनेक फायदे देतात. सर्व्हर ऍप्लिकेशन्सची आवश्यकता असल्यास .NET कोर वापरायशस्वी कार्य

तुमच्या ऍप्लिकेशनच्या यशासाठी खालीलपैकी काही किंवा सर्व महत्त्वाचे आहेत: तुमच्या ऍप्लिकेशनच्या यशासाठी खालीलपैकी काही किंवा सर्व महत्त्वाचे असल्यास तुम्ही तुमच्या सर्व्हर ऍप्लिकेशनसाठी .NET Core चा वापर करावा:

विविध प्लॅटफॉर्मसाठी समर्थन. क्रॉस-प्लॅटफॉर्म समर्थन.

मायक्रो सर्व्हिसेस वापरणे. मायक्रो सर्व्हिसेसचा वापर.

डॉकर कंटेनर वापरणे. डॉकर कंटेनरचा वापर. संपार्श्विक आवश्यकताउच्च कार्यक्षमता

आणि स्केलेबिलिटी. उच्च कार्यक्षमता आणि स्केलेबिलिटी आवश्यकता.

एकाच सर्व्हरवर .NET अनुप्रयोगाची समांतर आवृत्ती. समान सर्व्हरवर अनुप्रयोगाद्वारे .NET आवृत्त्यांची शेजारी-बाय-साइड आवृत्ती.

अधिकाधिक संस्था Microsoft Azure सारख्या सेवांचा वापर करून क्लाउडमध्ये त्यांचे वेब अनुप्रयोग होस्ट करणे निवडत आहेत. अधिकाधिक संस्था Microsoft Azure सारख्या सेवांचा वापर करून क्लाउडमध्ये त्यांचे वेब अनुप्रयोग होस्ट करणे निवडत आहेत.

खालील गोष्टी तुमच्या ॲप्लिकेशनसाठी किंवा संस्थेसाठी महत्त्वाच्या असल्यास तुम्ही क्लाउडमध्ये तुमचा ॲप्लिकेशन होस्ट करण्याचा विचार करावा: डेटा सेंटरमध्ये कमी गुंतवणूक (उपकरणे,सॉफ्टवेअर

, परिसर, उपयुक्तता, सर्व्हर व्यवस्थापन, इ.) डेटा सेंटर खर्चामध्ये कमी गुंतवणूक (हार्डवेअर, सॉफ्टवेअर, जागा, उपयुक्तता, सर्व्हर व्यवस्थापन इ.)

लवचिक किमती (वास्तविक वापरलेल्यांसाठी देय, निष्क्रिय संसाधने नाही). लवचिक किंमत (वापरावर आधारित देय, निष्क्रिय क्षमतेसाठी नाही).

अपवादात्मक विश्वसनीयता. अत्यंत विश्वासार्हता.

सुधारित ऍप्लिकेशन गतिशीलता, तुम्ही ते कुठे आणि कसे तैनात करता ते बदलण्यात सुलभता. सुधारित ॲप गतिशीलता; तुमचा ॲप कुठे आणि कसा उपयोजित आहे ते सहजपणे बदला.

लवचिक क्षमता, वास्तविक गरजांनुसार स्केलेबल. लवचिक क्षमता; वास्तविक गरजांवर आधारित स्केल वर किंवा खाली.

Azure वर होस्ट केलेल्या ASP.NET Core सह वेब ॲप्लिकेशन्स तयार केल्याने पारंपारिक पर्यायांपेक्षा अनेक स्पर्धात्मक फायदे आहेत. Azure मध्ये होस्ट केलेल्या ASP.NET Core सह वेब ॲप्लिकेशन्स तयार करणे, पारंपारिक पर्यायांपेक्षा अनेक स्पर्धात्मक फायदे देते.

ASP.NET Core आधुनिक वेब ऍप्लिकेशन डेव्हलपमेंट पद्धती आणि क्लाउड होस्टिंग परिस्थितींसाठी ऑप्टिमाइझ केले आहे. ASP.NET Core आधुनिक वेब ऍप्लिकेशन डेव्हलपमेंट पद्धती आणि क्लाउड होस्टिंग परिस्थितींसाठी ऑप्टिमाइझ केले आहे. या ट्यूटोरियलमध्ये, तुम्ही या क्षमतांचा पूर्ण फायदा घेण्यासाठी ASP.NET कोर ॲप्लिकेशन्स कसे डिझाइन करायचे ते शिकाल. या मार्गदर्शकामध्ये, तुम्ही या क्षमतांचा उत्तम फायदा घेण्यासाठी तुमच्या ASP.NET कोअर ॲप्लिकेशन्सची रचना कशी करावी हे शिकाल.उद्देश हा दस्तऐवज तयार करण्यासाठी संपूर्ण मार्गदर्शक आहे ASP.NET Core आणि Azure वापरून वेब अनुप्रयोग.

या संदर्भात, मोनोलिथिक म्हणजे हे ऍप्लिकेशन्स परस्परसंवादी सेवा आणि ऍप्लिकेशन्सचा संग्रह म्हणून न वापरता एकल युनिट म्हणून तैनात केले जातात. या संदर्भात, "मोनोलिथिक" या वस्तुस्थितीचा संदर्भ देते की हे अनुप्रयोग एकल युनिट म्हणून तैनात केले जातात, परस्पर सेवा आणि अनुप्रयोगांचा संग्रह म्हणून नव्हे. हे मार्गदर्शक सूक्ष्म सेवांसाठी पूरक आहे".NET. कंटेनरीकृत .NET अनुप्रयोगांसाठी आर्किटेक्चर "डॉकर, मायक्रोसर्व्हिसेस आणि एंटरप्राइझ ऍप्लिकेशन्स होस्टिंगसाठी कंटेनर डिप्लॉयमेंटवर लक्ष केंद्रित करून. हे मार्गदर्शक ".NET मायक्रोसर्व्हिसेस. कंटेनरीकृत .NET अनुप्रयोगांसाठी आर्किटेक्चर

जे डॉकर, मायक्रोसर्व्हिसेस आणि एंटरप्राइझ ऍप्लिकेशन्स होस्ट करण्यासाठी कंटेनरच्या तैनातीवर अधिक लक्ष केंद्रित करते.

• .NET मायक्रोसर्व्हिसेस. .NET मायक्रोसर्व्हिसेस.
  कंटेनरीकृत .NET अनुप्रयोगांसाठी आर्किटेक्चर
• ई-पुस्तक
  https://aka.ms/MicroservicesEbook

नमुना अर्ज

https://aka.ms/microservicesarchitecture

या मार्गदर्शकाचा वापर कोणी करावा हे मार्गदर्शक प्रामुख्याने डेव्हलपर, डेव्हलपमेंट मॅनेजर आणि क्लाउडमध्ये Microsoft तंत्रज्ञान आणि सेवा वापरून आधुनिक वेब ॲप्लिकेशन तयार करण्यात स्वारस्य असलेल्या आर्किटेक्टसाठी आहे. या मार्गदर्शकाचे प्रेक्षक हे प्रामुख्याने विकासक, विकास आघाडीचे आणि वास्तुविशारद आहेत ज्यांना क्लाउडमध्ये Microsoft तंत्रज्ञान आणि सेवा वापरून आधुनिक वेब अनुप्रयोग तयार करण्यात रस आहे. दुय्यम प्रेक्षक हे तांत्रिक निर्णय घेणारे आहेत जे आधीपासूनच ASP.NET किंवा Azure शी परिचित आहेत आणि नवीन प्रकल्प विकसित करण्यासाठी आणि विद्यमान प्रकल्पांना समर्थन देण्यासाठी ASP.NET Core वर श्रेणीसुधारित करण्याबद्दल माहिती हवी आहे. दुय्यम प्रेक्षक म्हणजे तांत्रिक निर्णय घेणारे जे आधीच परिचित आहेत ASP.NET किंवा Azure आणिशोधत आहेत

माहितीसाठी

हे मार्गदर्शक तुलनेने लहान दस्तऐवजात संक्षेपित केले गेले आहे जे आधुनिक .NET आणि Windows Azure तंत्रज्ञान वापरून वेब अनुप्रयोग तयार करण्यावर लक्ष केंद्रित करते. हे मार्गदर्शक तुलनेने लहान दस्तऐवजात संक्षिप्त केले गेले आहे जे आधुनिक .NET तंत्रज्ञान आणि Windows Azure सह वेब अनुप्रयोग तयार करण्यावर लक्ष केंद्रित करते. म्हणून, या अनुप्रयोगांची मूलभूत माहिती मिळविण्यासाठी आणि संबंधित तांत्रिक शिफारसी समजून घेण्यासाठी, कृपया संपूर्ण दस्तऐवज वाचा. जसे की, असे ऍप्लिकेशन्स आणि त्यांचे तांत्रिक विचार समजून घेण्याचा पाया प्रदान करण्यासाठी ते संपूर्णपणे वाचले जाऊ शकते.हे मार्गदर्शक, उदाहरण अनुप्रयोगासह, एक चांगला प्रारंभ बिंदू किंवा उपयुक्त संदर्भ दस्तऐवज असू शकतो. मार्गदर्शक, त्याच्या नमुना अनुप्रयोगासह, प्रारंभ बिंदू किंवा संदर्भ म्हणून देखील काम करू शकते. साठी टेम्पलेट म्हणून प्रदान केलेले उदाहरण अनुप्रयोग वापरास्वतःचे अर्ज

, किंवा अनुप्रयोगाचे घटक कसे आयोजित केले जाऊ शकतात हे पाहण्यासाठी. साठी टेम्पलेट म्हणून संबंधित नमुना अनुप्रयोग वापरा

तुमचे स्वतःचे

• अनुप्रयोग, किंवा आपण आपल्या अनुप्रयोगाचे घटक भाग कसे व्यवस्थापित करू शकता हे पाहण्यासाठी. हे पर्याय आपल्या अनुप्रयोगावर लागू करायचे की नाही हे ठरवताना, आपण नेहमी मार्गदर्शकामध्ये वर्णन केलेल्या आर्किटेक्चरची तत्त्वे आणि दिशानिर्देश आणि तांत्रिक क्षमतांचा संदर्भ घेऊ शकता. परत पहा मार्गदर्शक तत्त्वे आणि आर्किटेक्चर आणि तंत्रज्ञान पर्यायांचे कव्हरेज आणि जेव्हा आपण आपल्या स्वतःच्या अनुप्रयोगासाठी या निवडींचे वजन करत असाल तेव्हा निर्णय विचार. आवश्यक असल्यास, तुम्ही तुमच्या कार्यसंघ सदस्यांना या मार्गदर्शकाची शिफारस करू शकता जेणेकरून त्यांना देखील सर्व महत्त्वाच्या पैलूंबद्दल माहिती असेल. या विचारांची आणि संधींची सामान्य समज सुनिश्चित करण्यात मदत करण्यासाठी हे मार्गदर्शक तुमच्या कार्यसंघाकडे अग्रेषित करा.जर सर्व भागधारकांनी शब्दावलीचा एक सामान्य संच वापरला आणि मूलभूत तत्त्वांचे पालन केले, तर आर्किटेक्चरल मॉडेल्स आणि पद्धती अधिक सुसंगतपणे लागू केल्या जातील. प्रत्येकजण सामान्य शब्दावली आणि अंतर्निहित तत्त्वांवर काम करत असल्यामुळे वास्तुशास्त्रीय नमुने आणि पद्धतींचा सातत्यपूर्ण वापर सुनिश्चित करण्यात मदत होते. संदर्भ.NET कोर आणि .

NET फ्रेमवर्क

सर्व्हर ऍप्लिकेशन्ससाठी .NET Core आणि .NET Framework दरम्यान निवडणे

सर्व्हरसाठी ॲप्सअभिप्राय

वेब ऍप्लिकेशन डेव्हलपमेंट म्हणजे काय?

वेब ऍप्लिकेशन डेव्हलपमेंट ही वेब पृष्ठे किंवा वेबसाइट तयार करण्याच्या प्रक्रियेसाठी एक सामान्य संज्ञा आहे. सह वेब पृष्ठे तयार केली जातात HTML वापरून, CSS आणि JavaScript. या पृष्ठांमध्ये स्थिर दस्तऐवज सारखे साधे मजकूर आणि ग्राफिक्स असू शकतात. पृष्ठे परस्परसंवादी देखील असू शकतात किंवा बदलणारी माहिती प्रदर्शित करू शकतात. परस्परसंवादी पृष्ठे तयार करणे थोडे अधिक क्लिष्ट आहे, परंतु ते आपल्याला सामग्री-समृद्ध वेबसाइट तयार करण्याची परवानगी देतात. आज, बहुतेक पृष्ठे परस्परसंवादी आहेत आणि ऑनलाइन शॉपिंग कार्ट, डायनॅमिक व्हिज्युअलायझेशन आणि अगदी अत्याधुनिक सोशल नेटवर्क्स यासारख्या प्रगत परस्पर सेवा प्रदान करतात.

आधुनिक संगणकांसाठी अनुप्रयोगांचा विकास विशेष प्रोग्रामिंग भाषा वापरून केला जातो. हे परिचयात्मक साहित्य तुम्हाला त्यांच्याशी परिचित होण्यास मदत करेल.

व्हिडिओ | 15 मिनिटे | प्रोग्रामिंग भाषा

हा अहवाल प्रोग्रामिंग भाषा का आवश्यक आहे, त्या काय आहेत आणि त्या कोणत्या हेतूंसाठी आहेत याबद्दल बोलतो. मार्कअप भाषा (HTML), डेटा प्रतिनिधित्व (XML), आणि क्वेरी भाषा (SQL) देखील थोडक्यात नमूद केल्या आहेत.

व्हिडिओ | 23 मिनिटे | प्रोग्रामिंग भाषा

हा अहवाल C# प्रोग्रामिंग भाषा, त्याची मुख्य वैशिष्ट्ये आणि डिझाइन्सचे संक्षिप्त विहंगावलोकन प्रदान करतो आणि Visual Studio 2010 मध्ये Windows साठी साधे कन्सोल आणि विंडो ऍप्लिकेशन्स तयार करण्याची उदाहरणे दाखवतो.

समृद्ध वैशिष्ट्ये एक्सप्लोर करा ऑपरेटिंग सिस्टमविंडोज, जे वेब ऍप्लिकेशन्स विकसित करताना वापरले जाऊ शकते आणि वापरले पाहिजे.

4

विकास साधने

व्हिडिओ | 10 मिनिटे | वेबमॅट्रिक्स

WebMatrix बद्दल एक छोटी कथा - वेबसाइट विकसित करण्यासाठी एक वातावरण. वेबमॅट्रिक्स तुम्हाला वेगवेगळ्या क्लिष्टतेच्या वेबसाइट्स तयार करण्याची परवानगी देतो: मुख्यपृष्ठापासून लहानकॉर्पोरेट पोर्टल

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

व्हिडिओ | 11 मिनिटे | इंटरनेट एक्सप्लोरर

हे चर्चा इंटरनेट एक्सप्लोरर 9 मध्ये सादर केलेल्या पिन केलेल्या साइट्स तंत्रज्ञानाचे संक्षिप्त विहंगावलोकन देते. जंप लिस्ट, आच्छादन चिन्ह आणि थंबनेल टूलबार बटणांसह कसे कार्य करायचे ते दाखवते.