वेब एप्लिकेशन बनाने के लिए "ऑफ़लाइन पहले" दृष्टिकोण

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

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

ध्यान दो! मैं कैशिंग एप्लिकेशन संसाधनों के मुद्दों पर विचार नहीं करता - आप ऐप कैश या एक हाइब्रिड समाधान (जैसे फोनगैप ) का उपयोग कर सकते हैं, इससे कोई फर्क नहीं पड़ता है [ अनुवादक से: एप्लिकेशन कैश एपीआई के साथ काम करने की सुविधाओं के बारे में हैबर पर एक विस्तृत लेख है ]। यह मार्गदर्शिका इस बात पर अधिक ध्यान केंद्रित करती है कि इसे लागू करने के लिए किस तंत्र का उपयोग करने के बजाय ऑफ़लाइन काम करने के लिए एक वेब एप्लिकेशन आर्किटेक्चर को डिजाइन करना है।

मूल सिद्धांत

जितना संभव हो सर्वर से एप्लिकेशन को अनटाइटी करें

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

ऑफ़लाइन पहले दृष्टिकोण में क्लाइंट पक्ष पर पूरे MVC स्टैक को ले जाना शामिल है। सर्वर की ओर, डेटाबेस तक पहुँचने के लिए केवल एक हल्का JSON API है। यह सर्वर कोड को बहुत छोटा, सरल और परीक्षण करने में आसान बनाता है।

जेम्स पियर्स ने इस बारे में फुल फ्रंटल ( स्लाइड्स ) पर कुछ चंचल तरीके से बात की:

लाइन पर कोई कोण कोष्ठक - बस घुंघराले!

सारांश:

1. सुनिश्चित करें कि क्लाइंट एप्लिकेशन न्यूनतम कार्यक्षमता प्रदान करके सर्वर के बिना कर सकता है। चरम मामलों में, कम से कम संदेश बताता है कि डेटा उपलब्ध नहीं है।
2. JSON का उपयोग करें।

क्लाइंट साइड पर सर्वर API के लिए एक आवरण ऑब्जेक्ट बनाएं

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

सारांश:

1. एक अलग ऑब्जेक्ट में JSON API को एब्सट्रैक्ट करें।
2. AJAX कॉल के साथ एप्लिकेशन कोड को लिट न करें।

डेटा वेयरहाउस से डेटा अपडेट को अनटोनी करें

आपको सर्वर API को अलग करने वाली किसी वस्तु से सीधे डेटा का अनुरोध करने के लिए लुभाया नहीं जाना चाहिए और तुरंत इसे टेम्प्लेट रेंडर करने के लिए उपयोग करना चाहिए। बेहतर डेटा ऑब्जेक्ट बनाएं जो एपीआई ऑब्जेक्ट और बाकी एप्लिकेशन के बीच प्रॉक्सी के रूप में काम करेगा। यह डेटा ऑब्जेक्ट कनेक्शन के टूटने पर डेटा अपडेट और स्थितियों को संभालने के लिए अनुरोध के लिए जिम्मेदार होगा - ऑफ़लाइन काम करते समय परिवर्तित किए गए डेटा को सिंक्रनाइज़ करने के लिए।

डेटा ऑब्जेक्ट अपडेट के लिए सर्वर से पूछताछ कर सकता है जब उपयोगकर्ता अपडेट बटन पर क्लिक करता है, या तो टाइमर द्वारा या " online " ब्राउज़र इवेंट - जैसा कि आप पसंद करते हैं, और सर्वर तक सीधे पहुंच की कमी से डेटा कैशिंग का प्रबंधन करना आसान हो जाता है।

डेटा ऑब्जेक्ट को स्थानीय संग्रहण या WebSQL / IndexedDB में निरंतर भंडारण में अपने राज्य को क्रमबद्ध और संग्रहीत करने के लिए भी जिम्मेदार होना चाहिए, और इस डेटा को पुनर्प्राप्त करने में सक्षम होना चाहिए।

सारांश:

1. राज्य को संग्रहीत और सिंक्रनाइज़ करने के लिए एक अलग डेटा ऑब्जेक्ट का उपयोग करें।
2. डेटा के साथ सभी काम इस प्रॉक्सी ऑब्जेक्ट के माध्यम से जाना चाहिए।

उदाहरण

एक सरल उदाहरण के रूप में, संपर्क प्रबंधन एप्लिकेशन को लें। सबसे पहले, हम एक सर्वर एपीआई बनाएंगे जो हमें कच्चे संपर्क डेटा प्राप्त करने की अनुमति देगा। मान लीजिए कि हमने एक RESTful API बनाया है जहाँ URI /contacts सभी संपर्क प्रविष्टियों की एक सूची देता है। प्रत्येक रिकॉर्ड में फ़ील्ड id , firstName , lastName और email ।

फिर इस एपीआई पर एक आवरण लिखें:

 var API = function() { }; API.prototype.getContacts = function(success, failure) { var win = function(data) { if(success) success(data); }; var fail = function() { if(failure) failure() }; $.ajax('http://myserver.com/contacts', { success: win, failure: fail }); }; 

अब हमें एक डेटा ऑब्जेक्ट की आवश्यकता है जो हमारे एप्लिकेशन और डेटा वेयरहाउस के बीच इंटरफ़ेस बन जाएगा। यह इस तरह लग सकता है:

 var Data = function() { this.api = new API(); this.contacts = this.readFromStorage(); this.indexData(); }; Data.prototype.indexData = function() { //   (,  email) }; /* -- API -- */ Data.prototype.updateFromServer = function(callback) { var _this = this; var win = function(data) { _this.contacts = data; _this.indexData(); if(callback) callback(); }; var fail = function() { if(callback) callback(); }; this.api.getContacts(win, fail); }; /* --   -- */ Data.prototype.readFromStorage = function() { var c = JSON.parse(window.localStorage.getItem('appData')); //      return c || []; }; Data.prototype.writeToStorage = function() { window.localStorage.setItem('appData', JSON.stringify(this.contacts)); }; /* --  / -- */ Data.prototype.getContacts = function() { return this.contacts; }; //  ,    Data.prototype.getContactWithEmail = function(email) { //      ... return contact; }; 

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

 var App = function() { this.data = new Data(); this.template = '...'; this.render(); this.setupListeners(); }; App.prototype.render = function() { //  this.template  this.data.getContacts()   HTML return html; } App.prototype.setupListeners = function() { var _this = this; //     $('button.refresh').on('click', function(event) { _this.refresh(); }); }; App.prototype.refresh = function () { _this.showLoadingSpinner(); _this.data.updateFromServer(function() { //     _this.render(); _this.hideLoadingSpinner(); }); }; App.prototype.showLoadingSpinner = function() { //   }; App.prototype.hideLoadingSpinner = function() { //   }; 

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