ক্রস-ডিভাইস ওয়েবঅ্যাপ তৈরি করার জন্য একটি অ-প্রতিক্রিয়াশীল পদ্ধতি

Boris Smus

মিডিয়া কোয়েরিগুলো দারুন, কিন্তু...

মিডিয়া কোয়েরিগুলি অসাধারণ, ওয়েবসাইট ডেভেলপারদের জন্য একটি আশীর্বাদ যারা তাদের স্টাইলশিটে ছোট ছোট পরিবর্তন করে বিভিন্ন আকারের ডিভাইসে ব্যবহারকারীদের আরও ভালো অভিজ্ঞতা দিতে চান। মিডিয়া কোয়েরিগুলি মূলত আপনাকে স্ক্রিনের আকারের উপর নির্ভর করে আপনার সাইটের CSS কাস্টমাইজ করতে দেয়। এই নিবন্ধে ডুব দেওয়ার আগে, প্রতিক্রিয়াশীল ডিজাইন সম্পর্কে আরও জানুন এবং মিডিয়া কোয়েরি ব্যবহারের কিছু সূক্ষ্ম উদাহরণ এখানে দেখুন: mediaqueri.es ।

ব্র্যাড ফ্রস্ট যেমনটি আগের একটি প্রবন্ধে উল্লেখ করেছেন, মোবাইল ওয়েব তৈরির সময় চেহারা পরিবর্তন করা অনেকগুলি বিষয় বিবেচনা করার মধ্যে একটি। যদি আপনার মোবাইল ওয়েবসাইট তৈরি করার সময় কেবলমাত্র মিডিয়া কোয়েরি দিয়ে আপনার লেআউট কাস্টমাইজ করা হয়, তাহলে আমাদের নিম্নলিখিত পরিস্থিতি রয়েছে:

• সমস্ত ডিভাইস একই জাভাস্ক্রিপ্ট, সিএসএস এবং সম্পদ (ছবি, ভিডিও) পায়, যার ফলে প্রয়োজনের চেয়ে বেশি লোড সময় লাগে।
• সমস্ত ডিভাইস একই প্রাথমিক DOM পায়, যা ডেভেলপারদের অত্যধিক জটিল CSS লিখতে বাধ্য করে।
• প্রতিটি ডিভাইসের জন্য উপযুক্ত কাস্টম ইন্টারঅ্যাকশন নির্দিষ্ট করার ক্ষেত্রে সামান্য নমনীয়তা।

ওয়েবঅ্যাপগুলির মিডিয়া কোয়েরির চেয়ে বেশি কিছুর প্রয়োজন

ভুল বুঝবেন না। মিডিয়া কোয়েরির মাধ্যমে রেসপন্সিভ ডিজাইন আমার পছন্দ নয়, এবং আমি অবশ্যই মনে করি এর একটা জায়গা আছে। তাছাড়া, উপরে উল্লেখিত কিছু সমস্যা রেসপন্সিভ ইমেজ , ডাইনামিক স্ক্রিপ্ট লোডিং ইত্যাদি পদ্ধতির মাধ্যমে সমাধান করা যেতে পারে। তবে, একটা নির্দিষ্ট সময়ে, আপনি অনেক বেশি ক্রমবর্ধমান পরিবর্তন করতে পারেন এবং বিভিন্ন সংস্করণ পরিবেশন করাই ভালো হতে পারে।

আপনার তৈরি করা UI গুলির জটিলতা বৃদ্ধি পাওয়ার সাথে সাথে, এবং আপনি একক-পৃষ্ঠার ওয়েবঅ্যাপের দিকে ঝুঁকে পড়ার সাথে সাথে, প্রতিটি ধরণের ডিভাইসের জন্য UI গুলিকে কাস্টমাইজ করার জন্য আপনাকে আরও কিছু করতে হবে। এই নিবন্ধটি আপনাকে শেখাবে কিভাবে ন্যূনতম প্রচেষ্টার মাধ্যমে এই কাস্টমাইজেশনগুলি করতে হয়। সাধারণ পদ্ধতির মধ্যে রয়েছে আপনার ভিজিটরের ডিভাইসটিকে সঠিক ডিভাইস শ্রেণীতে শ্রেণীবদ্ধ করা এবং সেই ডিভাইসের উপযুক্ত সংস্করণটি পরিবেশন করা, একই সাথে সংস্করণগুলির মধ্যে কোড পুনঃব্যবহার সর্বাধিক করা।

আপনি কোন ডিভাইস ক্লাসগুলিকে লক্ষ্য করছেন?

ইন্টারনেট-সংযুক্ত অসংখ্য ডিভাইস আছে, এবং প্রায় সকলেরই ব্রাউজার আছে। জটিলতা হলো তাদের বৈচিত্র্য: ম্যাক ল্যাপটপ, উইন্ডোজ ওয়ার্কস্টেশন, আইফোন, আইপ্যাড, টাচ ইনপুট সহ অ্যান্ড্রয়েড ফোন, স্ক্রোল হুইল, কীবোর্ড, ভয়েস ইনপুট, চাপ সংবেদনশীলতা সহ ডিভাইস, স্মার্ট ঘড়ি, টোস্টার এবং রেফ্রিজারেটর এবং আরও অনেক কিছু। এই ডিভাইসগুলির মধ্যে কিছু সর্বত্র পাওয়া যায়, আবার কিছু খুব বিরল।

বিভিন্ন ধরণের ডিভাইস ( উৎস )।

একটি ভালো ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে, আপনার ব্যবহারকারী কারা এবং তারা কোন ডিভাইস ব্যবহার করছে তা জানতে হবে। যদি আপনি একটি ডেস্কটপ ব্যবহারকারীর জন্য একটি মাউস এবং একটি কীবোর্ড দিয়ে একটি ব্যবহারকারী ইন্টারফেস তৈরি করেন এবং এটি একটি স্মার্টফোন ব্যবহারকারীকে দেন, তাহলে আপনার ইন্টারফেসটি হতাশাজনক হবে কারণ এটি অন্য স্ক্রিন আকার এবং অন্য ইনপুট পদ্ধতির জন্য ডিজাইন করা হয়েছে।

পদ্ধতির বর্ণালীর দুটি চরম প্রান্ত রয়েছে:

1. সকল ডিভাইসে কাজ করে এমন একটি সংস্করণ তৈরি করুন। এর ফলে UX ক্ষতিগ্রস্ত হবে, কারণ বিভিন্ন ডিভাইসের ডিজাইনের বিবেচনা ভিন্ন।

2. আপনি যে ডিভাইসগুলি সাপোর্ট করতে চান তার জন্য একটি ভার্সন তৈরি করুন। এটি চিরকাল সময় নেবে, কারণ আপনি আপনার অ্যাপ্লিকেশনের অনেকগুলি ভার্সন তৈরি করবেন। এছাড়াও, যখন পরবর্তী নতুন স্মার্টফোন আসবে (যা প্রায় সপ্তাহে একবার ঘটে), তখন আপনাকে আরেকটি ভার্সন তৈরি করতে বাধ্য করা হবে।

এখানে একটি মৌলিক বিনিময় রয়েছে: আপনার যত বেশি ডিভাইস বিভাগ থাকবে, তত বেশি ব্যবহারকারীর অভিজ্ঞতা আপনি প্রদান করতে পারবেন, তবে এটি ডিজাইন, বাস্তবায়ন এবং রক্ষণাবেক্ষণের জন্য তত বেশি পরিশ্রমের প্রয়োজন হবে।

আপনার পছন্দের প্রতিটি ডিভাইস ক্লাসের জন্য আলাদা ভার্সন তৈরি করা একটি ভালো ধারণা হতে পারে যদি পারফরম্যান্সের কারণে অথবা বিভিন্ন ডিভাইস ক্লাসে আপনি যে ভার্সনগুলি পরিবেশন করতে চান তা ব্যাপকভাবে পরিবর্তিত হয়। অন্যথায়, রেসপন্সিভ ওয়েব ডিজাইন একটি পুরোপুরি যুক্তিসঙ্গত পদ্ধতি।

একটি সম্ভাব্য সমাধান

এখানে একটি আপস আছে: ডিভাইসগুলিকে বিভিন্ন বিভাগে শ্রেণীবদ্ধ করুন এবং প্রতিটি বিভাগের জন্য সর্বোত্তম সম্ভাব্য অভিজ্ঞতা ডিজাইন করুন। আপনি কোন বিভাগগুলি বেছে নেবেন তা আপনার পণ্য এবং লক্ষ্য ব্যবহারকারীর উপর নির্ভর করে। এখানে একটি নমুনা শ্রেণীবিভাগ দেওয়া হল যা বর্তমানে বিদ্যমান জনপ্রিয় ওয়েব-সক্ষম ডিভাইসগুলিকে সুন্দরভাবে বিস্তৃত করে।

1. ছোট স্ক্রিন + টাচ (বেশিরভাগ ফোন)
2. বড় স্ক্রিন + টাচ (বেশিরভাগ ট্যাবলেট)
3. বড় স্ক্রিন + কীবোর্ড/মাউস (বেশিরভাগ ডেস্কটপ/ল্যাপটপ)

এটি অনেক সম্ভাব্য ত্রুটির মধ্যে একটি, তবে লেখার সময় এটি অনেক অর্থবহ। উপরের তালিকা থেকে বাদ পড়া মোবাইল ডিভাইসগুলি টাচ স্ক্রিন ছাড়াই (যেমন ফিচার ফোন, কিছু ডেডিকেটেড ই-বুক রিডার)। তবে, এর বেশিরভাগই কীবোর্ড নেভিগেশন বা স্ক্রিন রিডার সফ্টওয়্যার ইনস্টল করা আছে, যা আপনি যদি অ্যাক্সেসিবিলিটির কথা মাথায় রেখে আপনার সাইট তৈরি করেন তবে ঠিকঠাক কাজ করবে।

ফর্ম ফ্যাক্টর-নির্দিষ্ট ওয়েব অ্যাপের উদাহরণ

বিভিন্ন ফর্ম ফ্যাক্টরের জন্য সম্পূর্ণ ভিন্ন সংস্করণ পরিবেশনকারী ওয়েব প্রোপার্টিগুলির অনেক উদাহরণ রয়েছে। গুগল সার্চ এটি করে, যেমন ফেসবুকও করে। এর জন্য বিবেচনার বিষয়গুলির মধ্যে রয়েছে কর্মক্ষমতা (সম্পদ আনা, রেন্ডারিং পৃষ্ঠা) এবং আরও সাধারণ ব্যবহারকারীর অভিজ্ঞতা।

নেটিভ অ্যাপের জগতে, অনেক ডেভেলপার তাদের অভিজ্ঞতাকে ডিভাইস শ্রেণীর সাথে খাপ খাইয়ে নিতে পছন্দ করেন। উদাহরণস্বরূপ, আইপ্যাডের জন্য ফ্লিপবোর্ডের UI আইফোনের ফ্লিপবোর্ডের তুলনায় অনেক আলাদা। ট্যাবলেট সংস্করণটি দুই হাতে ব্যবহার এবং অনুভূমিকভাবে উল্টানোর জন্য অপ্টিমাইজ করা হয়েছে যখন ফোন সংস্করণটি একক হাতে ইন্টারঅ্যাকশন এবং উল্লম্বভাবে উল্টানোর জন্য তৈরি। অন্যান্য অনেক iOS অ্যাপ্লিকেশন ফোন এবং ট্যাবলেট সংস্করণগুলি উল্লেখযোগ্যভাবে ভিন্ন প্রদান করে, যেমন Things (todo list), এবং Showyou (সোশ্যাল ভিডিও), যা নীচে দেখানো হয়েছে:

ফোন এবং ট্যাবলেটের জন্য উল্লেখযোগ্য UI কাস্টমাইজেশন।

পদ্ধতি #১: সার্ভার-সাইড সনাক্তকরণ

সার্ভারে, আমরা যে ডিভাইসটি নিয়ে কাজ করছি সে সম্পর্কে আমাদের ধারণা অনেক সীমিত। সম্ভবত সবচেয়ে কার্যকর সূত্র হল ব্যবহারকারী এজেন্ট স্ট্রিং, যা প্রতিটি অনুরোধে ব্যবহারকারী-এজেন্ট হেডারের মাধ্যমে সরবরাহ করা হয়। এই কারণে, একই UA স্নিফিং পদ্ধতি এখানে কাজ করবে। আসলে, DeviceAtlas এবং WURFL প্রকল্পগুলি ইতিমধ্যেই এটি করে (এবং ডিভাইস সম্পর্কে প্রচুর অতিরিক্ত তথ্য দেয়)।

দুর্ভাগ্যবশত, প্রতিটিরই নিজস্ব চ্যালেঞ্জ রয়েছে। WURFL অনেক বড়, যার মধ্যে 20MB XML রয়েছে, যা প্রতিটি অনুরোধের জন্য সার্ভার-সাইড ওভারহেডের উল্লেখযোগ্য খরচ বহন করতে পারে। এমন কিছু প্রকল্প রয়েছে যা পারফরম্যান্সের কারণে XML বিভক্ত করে। DeviceAtlas ওপেন সোর্স নয় এবং এটি ব্যবহারের জন্য একটি অর্থপ্রদানকারী লাইসেন্সের প্রয়োজন।

ডিটেক্ট মোবাইল ব্রাউজার প্রকল্পের মতো আরও সহজ, বিনামূল্যের বিকল্পও রয়েছে। অবশ্যই, অসুবিধা হল ডিভাইস সনাক্তকরণ অনিবার্যভাবে কম ব্যাপক হবে। এছাড়াও, এটি কেবল মোবাইল এবং নন-মোবাইল ডিভাইসের মধ্যে পার্থক্য করে, কেবলমাত্র কিছু অ্যাড-হক পরিবর্তনের মাধ্যমে সীমিত ট্যাবলেট সহায়তা প্রদান করে।

পদ্ধতি #২: ক্লায়েন্ট-সাইড সনাক্তকরণ

ফিচার ডিটেকশন ব্যবহার করে আমরা ব্যবহারকারীর ব্রাউজার এবং ডিভাইস সম্পর্কে অনেক কিছু জানতে পারি। আমাদের প্রধান যে বিষয়গুলি নির্ধারণ করতে হবে তা হল ডিভাইসটিতে স্পর্শ করার ক্ষমতা আছে কিনা এবং এটি বড় না ছোট স্ক্রিন।

ছোট এবং বড় টাচ ডিভাইসের মধ্যে পার্থক্য করার জন্য আমাদের কোথাও না কোথাও সীমারেখা টানা দরকার। ৫" গ্যালাক্সি নোটের মতো এজ কেসগুলির কী হবে? নিচের গ্রাফিকটিতে জনপ্রিয় অ্যান্ড্রয়েড এবং iOS ডিভাইসগুলির একটি গুচ্ছ ওভারলেড দেখানো হয়েছে (সম্পর্কিত স্ক্রিন রেজোলিউশন সহ)। তারকাচিহ্নটি নির্দেশ করে যে ডিভাইসটি দ্বিগুণ ঘনত্বের সাথে আসে বা আসতে পারে। যদিও পিক্সেল ঘনত্ব দ্বিগুণ হতে পারে, CSS এখনও একই আকারের রিপোর্ট করে।

CSS-এ পিক্সেলের একটি ছোট দিক: মোবাইল ওয়েবে CSS পিক্সেল এবং স্ক্রিন পিক্সেল এক নয় । iOS রেটিনা ডিভাইসগুলি পিক্সেল ঘনত্ব দ্বিগুণ করার পদ্ধতি চালু করেছে (যেমন iPhone 3GS বনাম 4, iPad 2 বনাম 3)। ওয়েব ভাঙা এড়াতে রেটিনা মোবাইল সাফারি UA এখনও একই ডিভাইস-প্রস্থ রিপোর্ট করে। অন্যান্য ডিভাইসগুলি (যেমন Android) উচ্চ রেজোলিউশনের ডিসপ্লে পাওয়ার সাথে সাথে তারা একই ডিভাইস-প্রস্থ কৌশলটি করছে।

ডিভাইসের রেজোলিউশন (পিক্সেলে)।

তবে এই সিদ্ধান্তকে জটিল করে তোলার জন্য, পোর্ট্রেট এবং ল্যান্ডস্কেপ মোড উভয় বিবেচনা করা গুরুত্বপূর্ণ। আমরা প্রতিবার ডিভাইসটি পুনরায় সাজানোর সময় পৃষ্ঠাটি পুনরায় লোড করতে বা অতিরিক্ত স্ক্রিপ্ট লোড করতে চাই না, যদিও আমরা পৃষ্ঠাটিকে ভিন্নভাবে রেন্ডার করতে চাইতে পারি।

নিচের চিত্রে, পোর্ট্রেট এবং ল্যান্ডস্কেপ রূপরেখা ওভারলে করার (এবং বর্গক্ষেত্রটি সম্পূর্ণ করার) ফলে বর্গক্ষেত্রগুলি প্রতিটি ডিভাইসের সর্বোচ্চ মাত্রা প্রতিনিধিত্ব করে:

পোর্ট্রেট + ল্যান্ডস্কেপ রেজোলিউশন (পিক্সেলে)

থ্রেশহোল্ড 650px এ সেট করে, আমরা iPhone, Galaxy Nexus কে smalltouch হিসেবে এবং iPad, Galaxy Tab কে "ট্যাবলেট" হিসেবে শ্রেণীবদ্ধ করি। এই ক্ষেত্রে অ্যান্ড্রোজিনাস গ্যালাক্সি নোটকে "ফোন" হিসেবে শ্রেণীবদ্ধ করা হয়েছে, এবং ফোন লেআউটটি পাবে।

এবং তাই, একটি যুক্তিসঙ্গত কৌশল এইরকম দেখতে হতে পারে:

if (hasTouch) {
  if (isSmall) {
    device = PHONE;
  } else {
    device = TABLET;
  }
} else {
  device = DESKTOP;
}

বৈশিষ্ট্য-সনাক্তকরণ পদ্ধতির একটি ন্যূনতম নমুনা দেখুন।

এখানে বিকল্প পদ্ধতি হল ডিভাইসের ধরণ সনাক্ত করার জন্য UA স্নিফিং ব্যবহার করা। মূলত আপনি হিউরিস্টিকের একটি সেট তৈরি করেন এবং সেগুলিকে আপনার ব্যবহারকারীর navigator.userAgent এর সাথে মেলান। ছদ্ম কোডটি দেখতে এরকম কিছু:

var ua = navigator.userAgent;
for (var re in RULES) {
  if (ua.match(re)) {
    device = RULES[re];
    return;
  }
}

UA-সনাক্তকরণ পদ্ধতির একটি নমুনা দেখুন।

ক্লায়েন্ট-সাইড লোডিং সম্পর্কে একটি নোট

যদি আপনি আপনার সার্ভারে UA ডিটেকশন করেন, তাহলে নতুন অনুরোধ পেলে আপনি সিদ্ধান্ত নিতে পারেন কোন CSS, JavaScript এবং DOM ব্যবহার করবেন। তবে, যদি আপনি ক্লায়েন্ট-সাইড ডিটেকশন করেন, তাহলে পরিস্থিতি আরও জটিল। আপনার কাছে বেশ কয়েকটি বিকল্প আছে:

1. এই ধরণের ডিভাইসের সংস্করণ ধারণকারী একটি ডিভাইস-টাইপ-নির্দিষ্ট URL-এ পুনঃনির্দেশ করুন।
2. ডিভাইসের ধরণ-নির্দিষ্ট সম্পদগুলি গতিশীলভাবে লোড করুন।

প্রথম পদ্ধতিটি সহজ, যার জন্য window.location.href = '/tablet' এর মতো একটি পুনঃনির্দেশনা প্রয়োজন। তবে, অবস্থানটিতে এখন এই ডিভাইস ধরণের তথ্য যুক্ত থাকবে, তাই আপনি আপনার URL পরিষ্কার করার জন্য History API ব্যবহার করতে চাইতে পারেন। দুর্ভাগ্যবশত এই পদ্ধতিতে একটি পুনঃনির্দেশনা জড়িত, যা ধীর হতে পারে, বিশেষ করে মোবাইল ডিভাইসে।

দ্বিতীয় পদ্ধতিটি বাস্তবায়ন করা বেশ জটিল। আপনার CSS এবং JS গতিশীলভাবে লোড করার জন্য একটি প্রক্রিয়া প্রয়োজন, এবং (ব্রাউজার-নির্ভর), আপনি <meta viewport> কাস্টমাইজ করার মতো কাজ করতে সক্ষম নাও হতে পারেন। এছাড়াও, যেহেতু কোনও পুনঃনির্দেশনা নেই, আপনি যে মূল HTML পরিবেশন করা হয়েছিল তা দিয়ে আটকে আছেন। অবশ্যই, আপনি জাভাস্ক্রিপ্ট দিয়ে এটি পরিচালনা করতে পারেন, তবে এটি আপনার অ্যাপ্লিকেশনের উপর নির্ভর করে ধীর এবং/অথবা মার্জিত হতে পারে।

ক্লায়েন্ট বা সার্ভার নির্ধারণ করা হচ্ছে

এই পদ্ধতিগুলির মধ্যে লেনদেনগুলি হল:

প্রো ক্লায়েন্ট :

• UA-এর পরিবর্তে স্ক্রিনের আকার/ক্ষমতার উপর ভিত্তি করে ভবিষ্যতের আরও প্রমাণ।
• UA তালিকা ক্রমাগত আপডেট করার দরকার নেই।

প্রো সার্ভার :

• কোন ডিভাইসে কোন সংস্করণ পরিবেশন করা হবে তার সম্পূর্ণ নিয়ন্ত্রণ।
• উন্নত কর্মক্ষমতা: ক্লায়েন্ট পুনঃনির্দেশ বা গতিশীল লোডিংয়ের প্রয়োজন নেই।

আমার ব্যক্তিগত পছন্দ হলো device.js এবং ক্লায়েন্ট-সাইড ডিটেকশন দিয়ে শুরু করা। আপনার অ্যাপ্লিকেশনটি বিকশিত হওয়ার সাথে সাথে, যদি আপনি ক্লায়েন্ট-সাইড রিডাইরেক্টকে একটি উল্লেখযোগ্য পারফরম্যান্স ত্রুটি হিসাবে দেখেন, তাহলে আপনি সহজেই device.js স্ক্রিপ্টটি সরিয়ে ফেলতে পারেন এবং সার্ভারে UA ডিটেকশন বাস্তবায়ন করতে পারেন।

device.js এর সাথে পরিচয় করিয়ে দিচ্ছি

Device.js হল বিশেষ সার্ভার-সাইড কনফিগারেশন ছাড়াই সিমেন্টিক, মিডিয়া কোয়েরি-ভিত্তিক ডিভাইস সনাক্তকরণের একটি সূচনা বিন্দু, যা ব্যবহারকারী এজেন্ট স্ট্রিং পার্সিং করার জন্য প্রয়োজনীয় সময় এবং প্রচেষ্টা সাশ্রয় করে।

ধারণাটি হল আপনার <head> এর উপরে সার্চ-ইঞ্জিন-বান্ধব মার্কআপ ( link rel=alternate ) প্রদান করুন যা নির্দেশ করে যে আপনি আপনার সাইটের কোন সংস্করণগুলি প্রদান করতে চান।

<link rel="alternate" href="http://foo.com" id="desktop"
    media="only screen and (touch-enabled: 0)">

এরপর, আপনি সার্ভার-সাইড UA সনাক্তকরণ করতে পারেন এবং নিজেই সংস্করণ পুনঃনির্দেশনা পরিচালনা করতে পারেন, অথবা বৈশিষ্ট্য-ভিত্তিক ক্লায়েন্ট-সাইড পুনঃনির্দেশনা করতে device.js স্ক্রিপ্ট ব্যবহার করতে পারেন।

আরও তথ্যের জন্য, device.js প্রজেক্ট পৃষ্ঠাটি দেখুন, এবং ক্লায়েন্ট-সাইড রিডাইরেকশনের জন্য device.js ব্যবহার করে এমন একটি জাল অ্যাপ্লিকেশনও দেখুন।

সুপারিশ: ফর্ম-ফ্যাক্টর নির্দিষ্ট দৃষ্টিভঙ্গি সহ MVC

এখন তুমি হয়তো ভাবছো যে আমি তোমাকে বলছি তিনটি সম্পূর্ণ আলাদা অ্যাপ তৈরি করতে, প্রতিটি ডিভাইসের ধরণের জন্য একটি করে। না! কোড শেয়ারিংই মূল চাবিকাঠি।

আশা করি আপনি MVC-এর মতো ফ্রেমওয়ার্ক ব্যবহার করছেন, যেমন Backbone, Ember, ইত্যাদি। যদি আপনি করে থাকেন, তাহলে আপনি উদ্বেগ পৃথকীকরণের নীতির সাথে পরিচিত, বিশেষ করে আপনার UI (view layer) আপনার লজিক (মডেল লেয়ার) থেকে আলাদা করা উচিত। যদি এটি আপনার কাছে নতুন হয়, তাহলে MVC এবং JavaScript-এ MVC- তে এই রিসোর্সগুলির কিছু দিয়ে শুরু করুন।

ক্রস-ডিভাইস স্টোরিটি আপনার বিদ্যমান MVC ফ্রেমওয়ার্কের সাথে সুন্দরভাবে ফিট করে। আপনি সহজেই আপনার ভিউগুলিকে আলাদা ফাইলে স্থানান্তর করতে পারেন, প্রতিটি ডিভাইসের ধরণের জন্য একটি কাস্টম ভিউ তৈরি করতে পারেন। তারপর আপনি ভিউ লেয়ার ছাড়া সমস্ত ডিভাইসে একই কোড পরিবেশন করতে পারেন।

ক্রস-ডিভাইস MVC।

আপনার প্রকল্পের নিম্নলিখিত কাঠামো থাকতে পারে (অবশ্যই, আপনার আবেদনের উপর নির্ভর করে আপনি সবচেয়ে যুক্তিসঙ্গত কাঠামোটি বেছে নিতে স্বাধীন):

মডেল/ (শেয়ার্ড মডেল) item.js item-collection.js

কন্ট্রোলার/ (শেয়ার্ড কন্ট্রোলার) item-controller.js

সংস্করণ/ (ডিভাইস-নির্দিষ্ট জিনিসপত্র) ট্যাবলেট/ ডেস্কটপ/ ফোন/ (ফোন-নির্দিষ্ট কোড) style.css index.html views/ item.js item-list.js

এই ধরণের কাঠামো আপনাকে প্রতিটি সংস্করণে কোন সম্পদ লোড হবে তা সম্পূর্ণরূপে নিয়ন্ত্রণ করতে সক্ষম করে, কারণ প্রতিটি ডিভাইসের জন্য আপনার কাছে কাস্টম HTML, CSS এবং জাভাস্ক্রিপ্ট রয়েছে। এটি খুবই শক্তিশালী, এবং অভিযোজিত চিত্রের মতো কৌশলের উপর নির্ভর না করেই ক্রস-ডিভাইস ওয়েবের জন্য সবচেয়ে দুর্বল, সবচেয়ে কার্যকরী উপায় তৈরি করতে পারে।

একবার আপনি আপনার পছন্দের বিল্ড টুলটি চালালে, দ্রুত লোড হওয়ার জন্য আপনার সমস্ত জাভাস্ক্রিপ্ট এবং CSS একক ফাইলে একত্রিত এবং মিনিফাই করবেন, আপনার প্রোডাকশন HTML দেখতে নিচের মতো হবে (ফোনের জন্য, device.js ব্যবহার করে):

<!doctype html>
<head>
  <title>Mobile Web Rocks! (Phone Edition)</title>

  <!-- Every version of your webapp should include a list of all
        versions. -->
  <link rel="alternate" href="http://foo.com" id="desktop"
      media="only screen and (touch-enabled: 0)">
  <link rel="alternate" href="http://m.foo.com" id="phone"
      media="only screen and (max-device-width: 650px)">
  <link rel="alternate" href="http://tablet.foo.com" id="tablet"
      media="only screen and (min-device-width: 650px)">

  <!-- Viewport is very important, since it affects results of media
        query matching. -->
  <meta name="viewport" content="width=device-width">

  <!-- Include device.js in each version for redirection. -->
  <script src="device.js"></script>

  <link rel="style" href="phone.min.css">
</head>
<body>
  <script src="phone.min.js"></script>
</body>

মনে রাখবেন যে (touch-enabled: 0) মিডিয়া কোয়েরিটি অ-মানক (শুধুমাত্র Firefox-এ moz ভেন্ডর প্রিফিক্সের পিছনে প্রয়োগ করা হয়েছে), কিন্তু device.js দ্বারা সঠিকভাবে পরিচালনা করা হয়েছে ( Modernizr.touch কে ধন্যবাদ)।

ভার্সন ওভাররাইড

ডিভাইস সনাক্তকরণ কখনও কখনও ভুল হতে পারে, এবং কিছু ক্ষেত্রে, একজন ব্যবহারকারী তাদের ফোনের ট্যাবলেট লেআউটটি দেখতে পছন্দ করতে পারেন (সম্ভবত তারা একটি গ্যালাক্সি নোট ব্যবহার করছেন), তাই আপনার ব্যবহারকারীদের ম্যানুয়ালি ওভাররাইড করতে চাইলে আপনার সাইটের কোন সংস্করণটি ব্যবহার করবেন তা বেছে নেওয়ার সুযোগ দেওয়া গুরুত্বপূর্ণ।

স্বাভাবিক পদ্ধতি হল আপনার মোবাইল সংস্করণ থেকে ডেস্কটপ সংস্করণের একটি লিঙ্ক প্রদান করা। এটি বাস্তবায়ন করা যথেষ্ট সহজ, কিন্তু device.js device GET প্যারামিটারের মাধ্যমে এই কার্যকারিতা সমর্থন করে।

উপসংহার

সংক্ষেপে বলতে গেলে, ক্রস-ডিভাইস সিঙ্গেল-পেজ UI তৈরি করার সময়, যা রেসপন্সিভ ডিজাইনের জগতে সুন্দরভাবে ফিট করে না, এটি করুন:

1. সমর্থন করার জন্য ডিভাইস ক্লাসের একটি সেট এবং ডিভাইসগুলিকে শ্রেণীতে শ্রেণীবদ্ধ করার মানদণ্ড বেছে নিন।
2. কোডবেসের বাকি অংশ থেকে ভিউ আলাদা করে, উদ্বেগের শক্তিশালী বিচ্ছেদ সহ আপনার MVC অ্যাপ তৈরি করুন।
3. ক্লায়েন্ট সাইড ডিভাইস ক্লাস সনাক্তকরণ করতে device.js ব্যবহার করুন।
4. যখন আপনি প্রস্তুত হবেন, তখন আপনার স্ক্রিপ্ট এবং স্টাইলশিটগুলিকে প্রতিটি ডিভাইস ক্লাসের একটিতে প্যাকেজ করুন।
5. যদি ক্লায়েন্ট-সাইড রিডাইরেকশন পারফরম্যান্সের সমস্যা হয়, তাহলে device.js পরিত্যাগ করুন এবং সার্ভারসাইড UA-detection-এ স্যুইচ করুন।