আগের বছর ধরে, পলিমার দল ডেভেলপারদের কীভাবে তাদের নিজস্ব উপাদান তৈরি করতে হয় তা শেখাতে অনেক সময় ব্যয় করেছে। এটি একটি দ্রুত বর্ধনশীল ইকোসিস্টেমের দিকে পরিচালিত করেছে, যা পলিমারের কোর এবং কাগজের উপাদান এবং মোজিলার দল দ্বারা তৈরি ইট উপাদানগুলির দ্বারা বৃহৎ অংশে উচ্ছ্বসিত।
বিকাশকারীরা তাদের নিজস্ব উপাদানগুলি তৈরি করার সাথে আরও পরিচিত হয়ে উঠলে এবং অ্যাপ্লিকেশনগুলি তৈরি করার বিষয়ে ভাবতে শুরু করলে, এটি বেশ কয়েকটি প্রশ্ন উন্মুক্ত করে:
- কিভাবে আপনি আপনার অ্যাপ্লিকেশনের UI গঠন করা উচিত?
- আপনি কিভাবে বিভিন্ন রাজ্যের মাধ্যমে রূপান্তর করবেন?
- কর্মক্ষমতা উন্নত করার জন্য কিছু কৌশল কি কি?
- এবং কিভাবে আপনি একটি অফলাইন অভিজ্ঞতা প্রদান করা উচিত?
ক্রোম ডেভ সামিটের জন্য, আমি একটি ছোট পরিচিতি অ্যাপ্লিকেশন তৈরি করে এবং এটি তৈরি করার জন্য যে প্রক্রিয়াটির মধ্য দিয়ে গিয়েছিলাম তা বিশ্লেষণ করে এই প্রশ্নের উত্তর দেওয়ার চেষ্টা করেছি। আমি যা নিয়ে এসেছি তা এখানে:
গঠন
একটি অ্যাপ্লিকেশনকে মডুলার টুকরোগুলিতে ভাঙ্গা যা একত্রিত এবং পুনরায় ব্যবহার করা যেতে পারে ওয়েব উপাদানগুলির একটি কেন্দ্রীয় ভাড়াটে। পলিমারের মূল-* এবং কাগজ-* উপাদানগুলি কাগজ-টুলবার এবং কাগজ-আইকন-বোতামের মতো ছোট ছোট টুকরো দিয়ে শুরু করা সহজ করে তোলে।
এবং কম্পোজিশনের শক্তির মাধ্যমে, একটি অ্যাপ্লিকেশন স্ক্যাফোল্ড তৈরি করতে যেকোন সংখ্যক উপাদানের সাথে তাদের একত্রিত করুন।
একবার আপনার কাছে একটি সাধারণ স্ক্যাফোল্ড তৈরি হয়ে গেলে, আপনি এটিকে আপনার ব্র্যান্ডের অনন্য অভিজ্ঞতায় রূপান্তর করতে আপনার নিজস্ব CSS শৈলী প্রয়োগ করতে পারেন। উপাদানগুলির সাথে এটি করার সৌন্দর্য হ'ল এটি আপনাকে একই অ্যাপ বিল্ডিং প্রাইমিটিভগুলি ব্যবহার করার সময় খুব আলাদা অভিজ্ঞতা তৈরি করতে সক্ষম করে। জায়গায় একটি ভারা দিয়ে আপনি বিষয়বস্তু সম্পর্কে চিন্তা করতে যেতে পারেন।
একটি উপাদান যা প্রচুর সামগ্রীর সাথে কাজ করার জন্য বিশেষভাবে উপযুক্ত তা হল core-list ।
core-list একটি ডেটা উৎসের সাথে সংযুক্ত হতে পারে (মূলত বস্তুর একটি অ্যারে), এবং অ্যারের প্রতিটি আইটেমের জন্য, এটি একটি টেমপ্লেট উদাহরণ স্ট্যাম্প আউট করবে। টেমপ্লেটের মধ্যে আপনি পলিমারের ডেটা বাইন্ডিং সিস্টেমের শক্তি ব্যবহার করে আপনার বিষয়বস্তুকে দ্রুত ওয়্যার আপ করতে পারেন।
রূপান্তর
আপনার অ্যাপের বিভিন্ন বিভাগ ডিজাইন করা এবং প্রয়োগ করা হয়েছে, পরবর্তী কাজটি হল কিভাবে তাদের মধ্যে নেভিগেট করা যায় তা খুঁজে বের করা।
যদিও এখনও একটি পরীক্ষামূলক উপাদান, core-animated-pages একটি প্লাগেবল অ্যানিমেশন সিস্টেম সরবরাহ করে যা আপনার অ্যাপ্লিকেশনের বিভিন্ন রাজ্যের মধ্যে স্থানান্তর করতে ব্যবহার করা যেতে পারে।
কিন্তু অ্যানিমেশন হল ধাঁধার অর্ধেক, একটি অ্যাপ্লিকেশনকে সেই অ্যানিমেশনগুলিকে রাউটারের সাথে একত্রিত করতে হবে সঠিকভাবে তার URL গুলি পরিচালনা করতে৷
ওয়েব কম্পোনেন্টের জগতে রাউটিং দুটি স্বাদে আসে: অপরিহার্য এবং ঘোষণামূলক। যেকোন পদ্ধতির সাথে core-animated-pages একত্রিত করা আপনার প্রকল্পের প্রয়োজনের উপর নির্ভর করে বৈধ হতে পারে।
একটি আবশ্যিক রাউটার (যেমন ফ্ল্যাটিরনের ডিরেক্টর ) একটি মিলিত রুটের জন্য শুনতে পারে এবং তারপর তার নির্বাচিত আইটেম আপডেট করার জন্য core-animated-pages নির্দেশ দিতে পারে।
এটি উপযোগী হতে পারে যদি আপনাকে একটি রুট ম্যাচ করার পরে এবং পরবর্তী বিভাগে স্থানান্তরিত হওয়ার আগে কিছু কাজ করার প্রয়োজন হয়।
অন্যদিকে, একটি ঘোষণামূলক রাউটার (যেমন অ্যাপ-রাউটার ) আসলে রাউটিং এবং core-animated-pages একক উপাদানে একত্রিত করতে পারে, তাই দুটি পরিচালনা করা আরও সুগম হয়ে ওঠে।
আপনি যদি আরও সূক্ষ্ম কন্ট্রোল চান, আপনি আরও-রাউটিং- এর মতো একটি লাইব্রেরি দেখতে পারেন, যা ডেটা বাইন্ডিং ব্যবহার করে core-animated-pages সাথে একত্রিত করা যেতে পারে এবং সম্ভবত আপনাকে উভয় জগতের সেরাটি দিতে পারে৷
কর্মক্ষমতা
যেহেতু আপনার অ্যাপ্লিকেশনটি আকার নিচ্ছে, আপনাকে পারফরম্যান্সের প্রতিবন্ধকতাগুলির উপর সজাগ দৃষ্টি রাখতে হবে, বিশেষ করে নেটওয়ার্কের সাথে সম্পর্কিত যেকোন কিছু কারণ এটি প্রায়শই একটি মোবাইল ওয়েব অ্যাপ্লিকেশনের ধীরতম অংশ।
শর্তসাপেক্ষে ওয়েব কম্পোনেন্ট পলিফিল লোড করার মাধ্যমে একটি সহজ পারফরম্যান্স জয় আসে।
প্ল্যাটফর্মের সম্পূর্ণ সমর্থন থাকলে সেই সমস্ত খরচ বহন করার কোন কারণ নেই! নতুন webcomponents.js রেপোর প্রতিটি রিলিজে , পলিফিলগুলিকেও আলাদা আলাদা ফাইলে বিভক্ত করা হয়েছে। আপনি শর্তসাপেক্ষে পলিফিলের একটি উপসেট লোড করতে চাইলে এটি সহায়ক।
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
ভলকানাইজের মতো একটি টুলের মাধ্যমে আপনার সমস্ত এইচটিএমএল আমদানি চালানোর মাধ্যমে উল্লেখযোগ্য নেটওয়ার্ক লাভগুলিও রয়েছে৷
ভলকানাইজ আপনার আমদানিগুলিকে একটি একক বান্ডেলে সংযুক্ত করবে, আপনার অ্যাপ যে HTTP অনুরোধগুলি করে তা উল্লেখযোগ্যভাবে হ্রাস করবে।
অফলাইন
কিন্তু শুধুমাত্র একটি পারফরম্যান্ট অ্যাপ তৈরি করলেই ব্যবহারকারীর সামান্য বা কোনো সংযোগ নেই এমন সমস্যার সমাধান হয় না। অন্য কথায়, যদি আপনার অ্যাপটি অফলাইনে কাজ না করে, তাহলে এটি আসলে একটি মোবাইল অ্যাপ নয়। আজ আপনি আপনার সংস্থানগুলিকে অফলাইন করতে অনেক ক্ষতিকারক অ্যাপ্লিকেশন ক্যাশে ব্যবহার করতে পারেন, তবে ভবিষ্যতের দিকে তাকিয়ে, পরিষেবা কর্মী শীঘ্রই অফলাইন বিকাশের অভিজ্ঞতাকে আরও সুন্দর করে তুলবে৷
জ্যাক আর্চিবল্ড সম্প্রতি পরিষেবা কর্মী নিদর্শনগুলির একটি আশ্চর্যজনক রান্নার বই প্রকাশ করেছে তবে আমি আপনাকে দ্রুত শুরু করতে দেব:
একটি পরিষেবা কর্মী ইনস্টল করা সহজ প্রস্থান. একটি worker.js ফাইল তৈরি করুন এবং আপনার অ্যাপ্লিকেশন বুট হয়ে গেলে এটি নিবন্ধন করুন৷
এটি গুরুত্বপূর্ণ যে আপনি আপনার অ্যাপ্লিকেশনের মূলে আপনার worker.js সনাক্ত করুন, এটি এটিকে আপনার অ্যাপের যেকোনো পাথ থেকে অনুরোধগুলিকে বাধা দিতে দেয়৷
কর্মীর ইনস্টল হ্যান্ডলারে, আমি সম্পদের একটি বোটলোড ক্যাশে করি (অ্যাপকে শক্তি দেয় এমন ডেটা সহ)।
এটি আমার অ্যাপটিকে ব্যবহারকারীকে অন্তত একটি ফলব্যাক অভিজ্ঞতা প্রদান করার অনুমতি দেয় যদি তারা এটি অফলাইনে অ্যাক্সেস করে থাকে।
অগ্রগামী !
ওয়েব উপাদানগুলি ওয়েব প্ল্যাটফর্মের একটি বড় সংযোজন, এবং তারা এখনও তাদের শৈশবকালে রয়েছে৷ তারা আরও ব্রাউজারে অবতরণ করলে, আমাদের অ্যাপ্লিকেশন গঠনের জন্য সর্বোত্তম অনুশীলনগুলি বের করা আমাদের, বিকাশকারী সম্প্রদায়ের উপর নির্ভর করবে। উপরের সমাধানগুলি আমাদের একটি সূচনা বিন্দু দেয়, তবে এখনও অনেক কিছু শিখতে হবে। আরও ভালো অ্যাপস তৈরি করতে এগিয়ে যান!