मोबाइल द्वीप क्या रहता है

सभी को नमस्कार। मेरा नाम मैक्स डिगटरेव है (मेरा यहां कोई खाता नहीं है, इसलिए यहां मेरा ट्विटर है: @suprMax और साइट maxdegterev.name )। हमने हाल ही में मोबाइल साइट का एक नया शांत संस्करण लॉन्च किया है। अब मैं आपको उसके बारे में बताऊंगा

मुख्य आधार

एक नई मोबाइल साइट पर काम करते हुए, मेरे पास पहले से ही पुराने को विकसित करने का अनुभव था। इन पत्रों को लिखते समय, यह अभी भी http://ostrovok.ru/m पर उपलब्ध होना चाहिए, लेकिन मुझे नहीं पता कि यह कब तक चलेगा। पुरानी साइट ने बहुत सरलता से काम लिया। वह एक सामान्य ओटीए परियोजना में रहता है और तदनुसार, एक ही बैक-एंड (Django), एक मानक मीडिया जनरेटर, सरल HTML टेम्पलेट (सर्वर-साइड), अंडरस्कोर, SCSS और नियमित JavaScipt पर कुछ JavaScipt टेम्पलेट का उपयोग करता है। हम सब सौ बार इस से गुजरे, यह सब बहुत उबाऊ है।

नई साइट विकसित करने से पहले, मेरे पास निम्नलिखित कार्य थे:

• साइट को एक नया डिज़ाइन बनाएं, उसी समय देखें कि यह नया डिज़ाइन बिल्कुल कैसे काम करेगा, और क्या यह भविष्य में मोबाइल एप्लिकेशन के लिए इसका उपयोग करने के लायक है।
• साइट को iPhone और Android 2.x, 4.x, डिफ़ॉल्ट ब्राउज़र पर अच्छी तरह से काम करना चाहिए।
• कुछ नई सुविधाएँ जोड़ें जो पुराने पर नहीं हैं। उदाहरण के लिए, होटल के नाम से फ़िल्टर करें और पसंदीदा में होटल जोड़ें। बेशक, आपको एक बड़ी साइट की पूरी तरह से नकल नहीं करनी चाहिए।
• इसे मजेदार और दिलचस्प बनाएं।

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

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

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




मुझे संपत्ति की विधानसभा के साथ थोड़ा छेड़छाड़ करनी पड़ी। मैं चाहता हूं कि सब कुछ शांत हो जाए, जैसे रेल पर। एसेट-रैक एक बहुत अच्छा समाधान निकला, जो पूरी तरह से जेएस, सीएसएस और यहां तक ​​कि जेड टेम्प्लेट को इकट्ठा करने के काम पर ले जाता है। बेशक, वह जानता है कि टेम्पलेट्स को कैसे प्राथमिकता दी जाती है, उन्हें निर्दिष्ट नामस्थान में डाल दिया जाता है (मैंने app.templates चुना)। वह पूर्व-संकलन कॉफ़ीस्क्रिप्ट और आवश्यकताओं प्रणाली के सिरदर्द को भी लेता है, 2 विकल्प प्रदान करता है: स्नैक्स (Sprockets) और आवश्यकता के साथ क्लासिक NodeJS संस्करण (Browserify)। हालाँकि, NodeJS एक नई बात है, इसलिए समस्याएं थीं:

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

  compressAsset = (filename, contents)-> console.log("[#{(new Date()).toUTCString()}] #{logPrefix} Compressing asset #{filename}.gz") zlib.gzip(contents, (e, buffer) -> fs.writeFile(filename + '.gz', buffer)) generateAssets = -> for asset in assets.assets filename = __dirname + '/public' + asset.url.replace('.', "-#{asset.md5}.") if not fs.existsSync(filename) console.log("[#{(new Date()).toUTCString()}] #{logPrefix} Saving asset #{filename}") fs.writeFileSync(filename, asset.contents, encoding: 'utf-8') compressAsset(filename, asset.contents) assets.on('complete', -> generateAssets() unless config.is_dev 

उप-योग:

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

कार्य इतना है कि यह फैशनेबल, युवा और मज़ेदार था, मैंने इस प्रकार फैसला किया।

यह सब कैसे काम किया

परियोजना कैसे आयोजित की जाती है, इसके बारे में थोड़ा। एक तस्वीर एक हजार शब्दों के लायक है:


मैं बैकबोन और कॉफीस्क्रिप्ट पर विकास के विवरण में नहीं जाऊंगा। इस बारे में हजारों लेख लिखे गए हैं। मैं मॉड्यूल की संरचना के बारे में बहुत संक्षेप में बात करूंगा, और सामान्य तौर पर, जैसा कि मैंने किया, ताकि पागल न हो।

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

अंत में, यह मेरी मुख्य app.cfi फ़ाइल की तरह लग रहा है:

  #= require ../../data/app.config.js #= require ../helpers.js #= require app.utils.js #= require_tree modules #= require router.coffee #= require_tree models #= require_tree collections #= require_tree views app = _.extend(@app, Backbone.Events) # ... # Layout modules app.size = new app.modules.Size() # Data modules app.geo = new app.modules.Geo() app.user = new app.modules.User() app.analytics = new app.modules.Analytics() # Modals and extra views app.overlay = new app.modules.Overlay() app.modal = new app.modules.Modal() # Router relies heavily on stuff above app.router = new app.Router() # ... Backbone.history.start(pushState: true, hashChange: false) 

यहाँ helpers.js है, जिसका उपयोग बैक-एंड पर भी किया जाता है। आवश्यकता के अनुसार फ़ोल्डरों को कनेक्ट करने से आपको व्यक्तिगत फ़ाइलों को जोड़ने के बारे में सोचने की अनुमति नहीं मिलती है, लेकिन लोडिंग ऑर्डर इसकी गारंटी नहीं देता है, इसलिए यदि आपको किसी अन्य वर्ग (उदाहरण के लिए, दृश्य) से इनहेरिट करने की आवश्यकता है, तो आपको अतिरिक्त आवश्यकता है। मेरे पास ऐसा कोई काम नहीं था, और जब तक मैंने Backbone.history.start को फोन किया, तब तक सिस्टम के सभी मॉड्यूल और घटक पहले से ही मेमोरी में थे, इसलिए राउटर अपना काम, कॉल व्यू आदि कर सकता था।

अब थोड़ा स्टाइलस के बारे में। यह SASS के समान है, लेकिन इसमें कई अतिरिक्त विशेषताएं हैं। जाहिर है, यह पहचान आधारित है। यह वर्ग के नाम के चौराहे के साथ परेशान नहीं करना संभव बनाता है। लेकिन हमने लंबे समय से यह सब देखा है, यह उबाऊ है। एक चर के रूप में किसी भी सीएसएस नियम के मूल्य का उपयोग करने में सक्षम होने के बारे में कैसे?

  .my-awesome-block width: 100px height: 100px margin: (@width / 2) auto line-height: @height 

बुरा नहीं है। विक्रेता उपसर्गों के बारे में क्या समर्थन करते हैं? हम प्रतिस्पर्धा की एक भयानक दुनिया में रहते हैं। सौभाग्य से, यह इस तरह दिखता है:

  .my-awesome-block box-sizing: border-box transition: all .2s ease 

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

  @import 'config' @import 'includes/reset.css' @import 'includes/fonts.css' @import 'includes/mixins' @import 'plugins/iswipe' @import 'plugins/zepto.sidebarify' @import 'plugins/zepto.calendar.css' @import 'plugins/zepto.input.numselect.css' @import 'plugins/zepto.listselect.css' @import 'plugins/zepto.textarea_autogrow' @import 'partials/partial_date' @import 'partials/partial_spinner' // ... 

यह पता चला है कि मिश्रित आयात कोई समस्या नहीं है। इस समय एकमात्र दोष यह है कि आपको मिक्सिन को लागू करने के लिए तर्क की आवश्यकता है। इसके बिना, कॉल ने मेरे लिए काम नहीं किया, हालांकि यह पहले से ही तय किया जा सकता था। मैंने इस तरह लिखा है:

  html, body // lol! noselect plz body, select, input, button, textarea color: #4b5c66 font: normal 14px Helvetica, Arial, sans-serif line-height: 1.4em //... 

स्टाइलिंग के लिए, मैं हमेशा सिथ की बुरी विशिष्टता को हराने के लिए केवल कक्षाओं का उपयोग करता हूं । 146% गारंटी देने के लिए कि कक्षाएं कभी भी समाप्त नहीं होंगी, मैंने SMACSS दृष्टिकोण का उपयोग किया। ठीक है, या वास्तव में नहीं, लेकिन बहुत समान है। वह सब कुछ जो पृष्ठ की संरचना से संबंधित है, और संक्रमण के दौरान नहीं बदलता है, मैंने उपसर्ग l (लेआउट) के साथ किया था। इसके अलावा मेरे पास p (पेज), b के अंदर ब्लॉक (ब्लॉक) पेज आदि हैं। यदि किसी तत्व में एक तत्व निहित है, तो इसका वर्ग माता-पिता के नाम के एक हिस्से को विरासत में देगा। यह विरासत में नहीं मिल सकता है, लेकिन मूल वर्ग हमेशा विरासत में मिला है। यहाँ शैलियों का एक उदाहरण है:

  .p-awesomepage .pa-header // styles .pah-soopermenulink color: hotpink .pa-content // styles .pa-loading // styles .pa-title // styles 

इस मार्कअप के लिए:

  .p-awesomepage header.pa-header wow, header! .pa-content .pa-title my awesome title .pa-loading .pa-title loading is being loaded 

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

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

थोड़ा तैनाती के बारे में

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

  task 'update', '[VPS]: Update current state with new from repo', -> console.log('[Cake]: Pulling updates from repo') exec('git pull', (error, stdout, stderr) -> unless error console.log('[Cake]: Installing npm packages') exec('npm install', (error, stdout, stderr) -> unless error console.log('[Cake]: Restarting forever') # exec('forever restartall') exec('killall forever') exec('killall nodejs') console.log('[Cake]: Cleaning up old assets') exec('find ./public/assets -regextype posix-egrep -regex ".*\.(js|css|gz|gzip)$" -delete') exec('cake forever') sendMail() else console.warn("[Cake]: Installation failed with error: #{error}") ) else console.warn("[Cake]: Update failed with error: #{error}") ) task 'deploy', '[DEV]: Deploy current repo state to dev VPS', -> console.log('[Cake]: Connecting to VPS mobota@mobota-dev.ostrovok.ru && running update') exec('ssh mobota@mobota-dev.ostrovok.ru \'cd /var/www/mobota && cake update\'', (error, stdout, stderr) -> if error console.warn("[Cake]: Deploy failed with error: #{error}") else console.log('[Cake]: Deployed!') ) 

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

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

(मैं पार्क में बैठा हूं, इसलिए इंटरनेट सुपर फास्ट नहीं है और परीक्षण गिर गए हैं)

यह सब बहुत दिलचस्प है, लेकिन यह मोबाइल विकास के बारे में कहां है।

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

सबसे पहले, समस्याओं के बारे में अधिक जानकारी। कुछ काफी स्पष्ट हैं, लेकिन मैं दोहराता हूं। कुछ मेरे लिए नए थे, जिसका अर्थ है कि वे किसी और के लिए उपयोगी हो सकते हैं।

• ब्रेक पर क्लिक करें। हर कोई 300ms विलंब के बारे में जानता है। साइट पर नियमित लिंक पर किसी भी क्लिक को क्लिक करने के बाद लगभग 300ms संसाधित किया जाएगा। यह समझने के लिए यह आवश्यक है कि यह वास्तव में एक क्लिक है, न कि कुछ और इशारा। एक बोनस के रूप में, यदि हम लिंक पर एक टचस्टार्ट ईवेंट श्रोता को जोड़ने का प्रयास करते हैं, तो हम तथाकथित देखेंगे भूत ठीक 300ms के बाद उसी क्षेत्र में क्लिक करें, भले ही पृष्ठ की सामग्री पहले से बदल गई हो। और एंड्रॉइड 2 पर यह पूरी तरह से अलग पेज पर भी होता है। समस्या के कई समाधान हैं। आप इन भूत-क्लिक को पकड़ने के लिए सरल योजनाओं के साथ आ सकते हैं, जैसा कि Google करता है। या आप केवल लिंक से इनकार कर सकते हैं और सिद्धांत रूप में घटना पर क्लिक कर सकते हैं। मेरे मामले में, मैंने दूसरा विकल्प चुना। Zepto के पास इसके लिए एक कस्टम टैप इवेंट है, लेकिन यह टूट गया है मैंने अपना समाधान लिखा, और मैं शायद इसे GitHub पर पोस्ट करूँगा।
  
• रेटिना पर धुंधली तस्वीरें। अब पिक्सेल-अनुपात> 1.5 के साथ अधिक से अधिक डिवाइस हैं, जिसका अर्थ है कि प्रति पिक्सेल कई भौतिक पिक्सेल हैं। छवियों को ऐसे उपकरणों पर धुंधली होने से रोकने के लिए, छवियों को कई बार बड़ा अपलोड करना और उन्हें स्केल करना पर्याप्त है। आलसी के लिए दृष्टिकोण हमेशा बड़ी छवियां और पैमाने (पृष्ठभूमि के आकार का FTW) अपलोड करना है।
  
• संक्रमण / परिवर्तन के साथ हार्डवेयर-त्वरित एनिमेशन। यहां सब कुछ स्पष्ट प्रतीत होता है, हर जगह अनुवाद या यहां तक ​​कि ट्रांसलेशन 3 डी का उपयोग करें और आप खुश होंगे। वास्तव में, ऐसा नहीं है। सबसे पहले, सभी गुणों को GPU का उपयोग करके त्वरित नहीं किया जाएगा, केवल कुछ ही हैं। स्थिति, पारदर्शिता, आदि। दूसरे, एंड्रॉइड 2 में एक एनिमेटेड ब्लॉक की आवधिक झिलमिलाहट, "क्रिसमस पेड़ों" की उपस्थिति, और आमतौर पर ब्रेक के रूप में Translate3d के साथ गंभीर समस्याएं हैं। यदि iOS ब्लॉक जीपीयू लेयर पर री-रेंडर करने की आवश्यकता है, तो iOS में एक समस्या है। उदाहरण के लिए, मेरी साइट पर एक साइडबार है, और इसे खींचा जा सकता है, साथ ही यह एनिमेटेड रूप से क्लिक करके छोड़ देता है। अच्छी बात है, कुछ जगह हैं, लेकिन एनीमेशन के साथ मैंने कहीं और नहीं देखा है। लेकिन समस्या यह है कि यदि आप सामग्री को जीपीयू में स्थानांतरित करते हैं, तो जब आप कुछ पृष्ठों पर जाते हैं, तो यह झिलमिलाहट शुरू कर देता है, स्क्रीन से आधे सेकंड के लिए गायब हो जाता है, जब तक कि ब्राउज़र इसे खींचता है और इसे फिर से GPU पर छोड़ देता है। मुझे बाएं / शीर्ष का उपयोग करके वापस लौटना पड़ा। इसके अलावा, यदि आप किसी ब्लॉक पर देशी चुनिंदा तत्व दिखाते हैं, जो अनुवाद का उपयोग करके कहीं बाहर निकाला गया था, तो एंड्रॉइड 2 पर वे पूरी तरह से काम नहीं करेंगे। ध्यान रखें (ड्रॉप-डाउन सूची में दिखाया गया है कि ब्लॉक मूल रूप से कहां था, और यह स्क्रीन पर वर्तमान में कहां नहीं है)।
  
• निश्चित स्थिति। मैं कोशिश भी नहीं करूंगा। ओवरफ्लो के साथ: स्क्रॉल करें, स्थिति बेहतर प्रतीत होती है, इसलिए आपको चालाक लेआउट के साथ निश्चित तत्वों की समस्या को हल करने की आवश्यकता है। जब मैंने आखिरी बार देखा, तो iOS पर एक खुले कीबोर्ड के साथ फिर से काम करना वास्तव में काम नहीं कर रहा था।
  
• Android 2 सिर्फ JSON.parse (null) के साथ शानदार काम करता है। पार्स करने से पहले स्ट्रिंग को मान्य करने का प्रयास करें। और वह पाठ-छाया के साथ पाठ को पूरी तरह से प्रस्तुत करना नहीं जानता है। हाइफ़नेशन काम नहीं कर सकता है, कुछ अक्षर उड़ सकते हैं, और जो कुछ भी होता है। मैं हमेशा करता हूं:
  

    .android2 * text-shadow: none !important; 

  
  बहुत समय और नसों को बचाता है।
  
• खिड़की के व्यवहार में कुछ अंतर हैं। सबसे पहले, आप पैमाने को बहुत आसानी से बदल सकते हैं, जो बड़े ब्राउज़रों पर लगभग कभी नहीं किया जाता है। मैं पैमाने को मापने की सलाह देता हूं, जीवन आसान हो जाएगा। यह इस प्रकार है:
  

    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no") 

  
  आपको मोबाइल html5boilerplate पद्धति preventZoom () को भी देखना होगा। यह बहुत मदद करता है। वैसे भी, वहाँ से आप बहुत सारी ठंडी चीजें ले सकते हैं।
  
  स्क्रीन की ऊंचाई / चौड़ाई निर्धारित करने में समस्याएं हो सकती हैं। Android / iOS उनके उत्तरों में असंगत हैं। एंड्रॉइड, विशेष रूप से, आमतौर पर कह सकता है कि यह वास्तव में है की तुलना में 2 गुना व्यापक और अधिक है। जब भी संभव हो, मैं सीएसएस का उपयोग करना पसंद करता हूं, और मैं आपको सलाह देता हूं। लेकिन अगर मैं वास्तव में चाहता हूं, तो मैं इसे इस तरह से कर सकता हूं:
  

    class Size _min_width: 320 _min_height: 416 _iOS_toolbar_height: 44 _android_delay: 300 constructor: -> @width = null @height = null if $.os.ios app.dom.win.on('orientationchange load', @orientationChange) else app.dom.win.on('orientationchange resize load', => window.setTimeout(@orientationChange, @_android_delay) ) @orientationChange() orientationChange: => prevWidth = @width prevHeight = @height if $.os.ios and not window.orientation @width = window.screen.availWidth @height = window.screen.availHeight - @_iOS_toolbar_height else @width = app.dom.win.width() @height = app.dom.win.height() @width = Math.max(@_min_width, @width) @height = Math.max(@_min_height, @height) if @width isnt prevWidth or @height isnt prevHeight app.trigger('size:resize', width: @width height: @height ) 

  
  सामग्री / खिड़की की ऊंचाई के निर्धारण के साथ, बहुत सारे रोमांच की उम्मीद करें, इस संबंध में मोबाइल ब्राउज़र बहुत शांत हैं और पूर्ण स्क्रीन में कुछ करना सामान्य है और ओवरले / मोडल के साथ यह आसान नहीं होगा।
  
• नेटवर्क अनुरोध बहुत धीमे हैं, खासकर यदि लंबे समय से कुछ भी अनुरोध नहीं किया गया है। समानांतर प्रश्न भी एक अच्छा विचार नहीं हो सकता है, उनमें से एक आसानी से विफल हो सकता है, और जैसा कि यह निकला, यह तेज नहीं है। मैं महान जवाब के साथ कुछ अनुरोध करने की कोशिश करता हूं। (बड़े 500kb-1mb अधिकतम, अभी भी मोबाइल संचार है)। यह बेहतर काम करने लगता है। डोम के साथ संचालन के साथ - एक ही कहानी। सब कुछ बहुत धीमा है, क्योंकि डिवाइस बहुत गूंगा है। विशेष रूप से Android, मुझे समझ में नहीं आता कि उनकी समस्या क्या है। यहां तक ​​कि नए 4 जी समान iPhone 4S खो देते हैं। सामान्य तौर पर, सामान्य नियम यहां काम करते हैं - कम अनुरोध और समूह लिखना / पढ़ना।
  
• Android 4 के पुराने संस्करण इतिहास API का समर्थन नहीं करते हैं। इसका मतलब है कि बैकबोन में आपको सामान्य स्टेट अपडेट के बजाय हैश का उपयोग करना होगा। नए संस्करणों को पहले से ही सब कुछ का समर्थन करना चाहिए जैसा कि और एंड्रॉइड 2 ने हमेशा समर्थन किया है, इसलिए मैंने सिर्फ परेशान नहीं किया।
  
• यदि आपका पृष्ठ नीचे स्क्रॉल किया गया है और आप सामग्री बदलते हैं, तो एंड्रॉइड स्क्रॉल की स्थिति को उसकी मूल स्थिति में नहीं लौटाएगा। नई सामग्री की ऊंचाई के आधार पर दृश्यमान समस्याएं हो सकती हैं।
  
• यदि आपके पास स्थिति के साथ एक ब्लॉक है: निरपेक्ष जो स्क्रीन से कहीं दूर बह गया है, तो सुनिश्चित करें कि यह ऊंचाई में बहुत बड़ा नहीं है। अन्यथा, "छेद" पृष्ठ पर दिखाई देगा जैसे कि यह अभी भी कुछ ऊंचाई पर है। IOS के लिए वास्तविक।
  
• यदि आप iOS में कुछ पूर्ण-स्क्रीन करना चाहते हैं, तो आपको स्क्रीन की वास्तविक ऊंचाई के बराबर रूट तत्वों में से एक की ऊंचाई निर्धारित करने की आवश्यकता है। अन्यथा, स्थिति पट्टी कहीं भी नहीं जाएगी चाहे आप कितनी भी कोशिश कर लें। ऊंचाई: 100% भी काम नहीं करना चाहिए जैसा कि इसे करना चाहिए
  
• यदि पेरेंट ब्लॉक में अतिप्रवाह है: स्क्रॉल करें, और स्थिति के बच्चे: निरपेक्ष, एंड्रॉइड पर रेंडर करते समय समस्याएं हो सकती हैं। यह केवल अतिप्रवाह को अक्षम करके हल किया जाता है: स्क्रॉल।
  

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

डेस्कटॉप, ब्राउज़र के विपरीत मोबाइल के लिए विकास बोनस:

• हालांकि डिवाइस ब्रेक कर रहे हैं, वे अभी भी आधुनिक हैं और बहुत से समर्थित हैं। इसका अर्थ है किफ़्रेम / संक्रमण और आधुनिक जावास्क्रिप्ट आदि के माध्यम से एनिमेशन।
  
• केवल 3 प्लेटफॉर्म। iOS अपने आप ही बहुत अच्छा काम करता है, और डिबगिंग के लिए हमारे पास Safari में Developer Tools हैं, मैं इसका उपयोग करने की सलाह देता हूं। एंड्रॉइड के साथ, बदतर, कुछ लोग ब्राउज़र को adb कंसोल में देते हैं, लेकिन फिर भी केवल 2 प्लेटफ़ॉर्म और एक समान ब्राउज़र इंजन हैं। आप कई विक्रेता उपसर्गों के बारे में भूल सकते हैं।
  
• नए खिलौनों के साथ खेलना हमेशा दिलचस्प होता है। और मोबाइल साइटों को मूल एप्लिकेशन के रूप में लपेटा जा सकता है, या कम से कम होमस्क्रीन पर जोड़ा जा सकता है। कूल।
  

निष्कर्ष

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

मुझे लगता है कि मैं GitHub पर साइट से कुछ पोस्ट करूंगा, इसे अपने दम पर देखना और उपयोग करना संभव होगा। सभी को शुभकामनाएँ।