আজ আমরা View Transitions API-এর সাথে Chrome এবং Astro- এর যাত্রা সম্পর্কে আরও শেয়ার করতে চাই। এর মধ্যে রয়েছে কীভাবে অ্যাস্ট্রো সম্প্রদায় প্রাথমিকভাবে এপিআই নিয়ে পরীক্ষা-নিরীক্ষা করে, বৃহত্তর সম্প্রদায়ের কাছে সম্ভাবনাগুলি তুলে ধরে। আমরা Astro 3.0-এ ভিউ ট্রানজিশনের জন্য নতুন অন্তর্নির্মিত সমর্থন সম্পর্কে আরও ভাগ করে নিতেও উত্তেজিত!
পটভূমি
একটি পৃষ্ঠার বিভিন্ন অবস্থার মধ্যে বিরামবিহীন রূপান্তর, যা রাষ্ট্রীয় রূপান্তর নামে পরিচিত, সবসময়ই ওয়েবে নির্বিঘ্ন, অ্যানিমেটেড অভিজ্ঞতা তৈরির একটি জটিল দিক। সিএসএস ট্রানজিশন, সিএসএস অ্যানিমেশন এবং ওয়েব অ্যানিমেশন এপিআই-এর মতো টুলের প্রাপ্যতা থাকা সত্ত্বেও, স্টেট ট্রানজিশন তৈরি করা একটি কঠিন কাজ থেকে গেছে। চ্যালেঞ্জগুলির মধ্যে একটি হল বহির্গামী উপাদানগুলিতে মিথস্ক্রিয়া পরিচালনা করা, যা পরিবর্তনগুলিকে আরও জটিল করে তুলতে পারে।
উপরন্তু, সহায়ক ডিভাইসের জন্য পড়ার অবস্থান এবং ফোকাস বজায় রাখা কঠিন। এবং, স্ক্রোল অবস্থানের পার্থক্যের সাথে মোকাবিলা করা রাষ্ট্রীয় রূপান্তরকে একটি কষ্টকর প্রক্রিয়া করে তোলে। এই সমস্ত কারণগুলি একটি ওয়েবপেজে বিভিন্ন উপাদানের মধ্যে মসৃণ রূপান্তর বাস্তবায়নের জটিলতায় অবদান রাখে
ভিউ ট্রানজিশন এপিআই এই চ্যালেঞ্জগুলির জন্য ব্রাউজারের সমাধান হিসাবে আবির্ভূত হয়েছে৷ এই নতুন API দুটি রাজ্যের মধ্যে একটি অ্যানিমেটেড ট্রানজিশন তৈরি করার সময় একক ধাপে DOM পরিবর্তন করার একটি সহজ উপায় প্রদান করে।
Chrome 111-এ ভিউ ট্রানজিশন API-এর লঞ্চটি শুধুমাত্র জাভাস্ক্রিপ্ট-ভিত্তিক ওয়েব অ্যাপ্লিকেশন নয়, সমস্ত ওয়েবসাইটের জন্য রূপান্তর সমর্থনের জন্য একটি বিস্তৃত দৃষ্টিভঙ্গির সূচনা করেছে৷ ভবিষ্যতের উন্নতিও তাদের পথে। ক্রোম ভবিষ্যতে নথি জুড়ে স্থানান্তর, কম্পোজিটর-চালিত অ্যানিমেশন, স্কোপড ট্রানজিশন এবং নেস্টেড ট্রানজিশন গ্রুপগুলির মতো উত্তেজনাপূর্ণ সংযোজনগুলি অন্বেষণ করতে পারে৷
ভিউ ট্রানজিশন সহ প্রাথমিক অনুসন্ধান
ভিউ ট্রানজিশন API-এর সাথে ক্রোমের যাত্রা একাকী ছিল না। ডেভেলপার, ফ্রেমওয়ার্ক লেখক এবং CSS ওয়ার্কিং গ্রুপের প্রতিক্রিয়া এবং সহযোগিতা বেশ কয়েক বছর ধরে বৈশিষ্ট্যটি গঠনে গুরুত্বপূর্ণ ভূমিকা পালন করেছে।
বিকাশকারী পরীক্ষা প্রাথমিকভাবে একটি গুরুত্বপূর্ণ ভূমিকা পালন করেছিল। API-এর প্রথমতম সংস্করণগুলি CSS অ্যানিমেশন সমর্থন করে না এবং রূপান্তরগুলি কয়েকটি সীমাবদ্ধ প্রিসেটের মধ্যে সীমাবদ্ধ ছিল। প্রাথমিক প্রতিক্রিয়া এটি স্পষ্ট করে দিয়েছে যে বিকাশকারীরা পরিবর্তনগুলি সম্পূর্ণরূপে কাস্টমাইজযোগ্য এবং অভিব্যক্তিপূর্ণ হতে চায়। এই পিছনে এবং সামনে সহযোগিতা নিশ্চিত করেছে যে API ভাল ডিফল্ট, এক্সটেনসিবিলিটি এবং কাস্টমাইজেশনের ভারসাম্যের সাথে ডিজাইন করা হয়েছে।
অ্যাস্ট্রো সেই ফ্রেমওয়ার্কগুলির মধ্যে একটি যা ভিউ ট্রানজিশনের দিকে ঝুঁকেছিল। এই নিবন্ধটির বাকি অংশটি অ্যাস্ট্রো টিমের দৃষ্টিকোণ থেকে, এবং ওয়েব ডেভেলপমেন্ট অভিজ্ঞতার সামনে-এবং-কেন্দ্রে ভিউ ট্রানজিশন খোঁজার, গ্রহণ করা এবং আনার অভিজ্ঞতা শেয়ার করে।
কেন অ্যাস্ট্রো ভিউ ট্রানজিশনের উপর বাজি ধরে
অ্যাস্ট্রো অনেক দিন ধরে ভিউ ট্রানজিশনের মতো কিছু খুঁজছিল। Astro হল একটি JavaScript ওয়েব ফ্রেমওয়ার্ক যা দ্রুত পৃষ্ঠা লোড কর্মক্ষমতার জন্য আপনার UI উপাদানগুলিকে হালকা ওজনের HTML-এ সার্ভার-রেন্ডার করে। অ্যাস্ট্রো ইচ্ছাকৃতভাবে যতটা সম্ভব ক্লায়েন্ট ডিভাইস বন্ধ করে দেয়। অ্যাস্ট্রো ওয়েবসাইটগুলি নেটিভ ব্রাউজার পেজ নেভিগেশন ব্যবহার করে, যেখানে অন্যান্য ওয়েব ফ্রেমওয়ার্ক পরিবর্তে জাভাস্ক্রিপ্ট ক্লায়েন্ট-সাইড রাউটিং সহ ব্রাউজার নেভিগেশন হাইজ্যাক করতে পারে।
এই ট্রেডঅফটি অ্যাস্ট্রো টিমের জন্য একটি চ্যালেঞ্জ তৈরি করেছে: কীভাবে অ্যাস্ট্রো পৃষ্ঠার রূপান্তরগুলিকে অ্যানিমেট করতে পারে এবং ক্লায়েন্ট-সাইড রাউটিং গ্রহণ না করে পৃষ্ঠাগুলিতে অ্যাপের মতো UI স্থিরতা প্রদান করতে পারে?
দেখুন ট্রানজিশন উত্তর ছিল. ভিউ ট্রানজিশনের সাথে, অ্যাস্ট্রো একই রাউটিং বৈশিষ্ট্যগুলি প্রদান করতে পারে যা জাভাস্ক্রিপ্ট-ভারী এসপিএ ওয়েব ফ্রেমওয়ার্ক অফার করে, কিন্তু ক্লায়েন্ট-সাইড রাউটিং এর কার্যকারিতা এবং জটিলতা ছাড়াই। অন্যান্য ফ্রেমওয়ার্কগুলি ঐচ্ছিক বাস্তবায়নের বিশদ হিসাবে ভিউ ট্রানজিশনের সাথে যোগাযোগ করেছিল, কিন্তু অ্যাস্ট্রোর জন্য এটি ছিল অনেক বড় কিছু।
অ্যাস্ট্রো দলকে পরবর্তী প্রশ্নের উত্তর দিতে হয়েছিল, "কিভাবে?" দলটি অনুপ্রেরণার জন্য Turbo, Swup, এবং Livewire-এর মতো প্রকল্পগুলির দিকে তাকিয়েছিল এবং এমনকি Astro-এর ভিতরে কয়েকটি অনুরূপ পদ্ধতির প্রোটোটাইপ করেছিল৷
প্রথম দিকের প্রচেষ্টাগুলির মধ্যে একটি হল একটি পূর্ণ-পৃষ্ঠার "স্মার্ট ট্রানজিশন" যা স্বয়ংক্রিয়ভাবে HTML-এর প্রতিটি নতুন পৃষ্ঠাকে বর্তমান HTML-এর সাথে তুলনা করবে এবং তারপরে জাভাস্ক্রিপ্ট ব্যবহার করে একবারে প্রতিটি উপাদান প্রতিস্থাপন করার চেষ্টা করবে। এটা চতুর ছিল, কিন্তু ত্রুটি-প্রবণ.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
সৌভাগ্যক্রমে, অ্যাস্ট্রো সম্প্রদায় দেখিয়েছে যে ভিউ ট্রানজিশন এপিআই ইতিমধ্যেই শক্তিশালী ছিল পণ্যের অতিরিক্ত জটিলতা ছাড়াই। কিছু প্রারম্ভিক ডেমো দেখার পর, অ্যাস্ট্রো টিমকে একটি সাধারণ অ্যাস্ট্রো API-এর ধারণার ভিত্তিতে বিক্রি করা হয়েছিল যা ব্রাউজার APIগুলির সাথে যতটা সম্ভব ঘনিষ্ঠভাবে মেলে। Astro এর ভিতরে লুকানো একটি অদৃশ্য বাস্তবায়ন বিশদ হিসাবে ভিউ ট্রানজিশন দেখার পরিবর্তে, সেগুলি সরাসরি বিকাশকারীর কাছে প্রকাশ করা যেতে পারে। অ্যাস্ট্রোকে সরাসরি ওয়েব প্ল্যাটফর্মের সাথে সারিবদ্ধ করা এবং ফ্রন্টএন্ডে সামগ্রিক জটিলতা হ্রাস করা।
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
কাজটি সহজ হয়ে গেছে: নতুন ভিউ ট্রানজিশন এপিআই অ্যাস্ট্রোতে আনুন এবং স্বয়ংক্রিয় ফলব্যাক প্রদান করুন যা যতটা সম্ভব ওয়েবসাইট এবং ব্রাউজারে আনতে পারে। ফলব্যাক সমর্থন অপরিহার্য, কারণ বেশিরভাগ ব্রাউজার (ক্রোমের বাইরে) এখনও নেটিভ ভিউ ট্রানজিশনের জন্য সম্পূর্ণ সমর্থন পাঠায়নি।
অ্যাস্ট্রোতে সরকারী সহায়তা চালু করা হচ্ছে
Astro Astro 2.9-এ পরীক্ষামূলক ভিউ ট্রানজিশন সমর্থন প্রকাশ করেছে। প্রতিক্রিয়া অবিলম্বে ইতিবাচক ছিল. বিকাশকারীরা অনেকগুলি বিভিন্ন ব্যবহারের ক্ষেত্রে অবিশ্বাস্য ডেমোগুলি ভাগ করে নেওয়া শুরু করে এবং কিছু ক্ষেত্রে এমনকি এটি সমস্ত উত্পাদনে প্রেরণ করে৷
Astro 3.0, সমর্থন চূড়ান্ত করে এবং প্রত্যেকের জন্য নতুন ভিউ ট্রানজিশন এপিআই আনফ্ল্যাগ করে। এই নতুন APIগুলি এখন আপনার জন্য পরীক্ষামূলকভাবে গ্রহণ করার জন্য প্রস্তুত, বা একবারে-একবার।
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
প্ল্যাটফর্ম API-এর সাথে অ্যাস্ট্রোকে সারিবদ্ধ করার একটি অপ্রত্যাশিত সুবিধা হল নেটিভ ভিউ ট্রানজিশন API-এর উপরে নতুন বৈশিষ্ট্য তৈরি করার সাথে পরীক্ষা করার ক্ষমতা। উদাহরণ স্বরূপ, নতুন Astro transition:persist নির্দেশিকা যেকোন উপাদানকে একটি পূর্ণ-পৃষ্ঠা নেভিগেশন জুড়ে নিজেকে টিকে থাকতে দেয়। এটি দীর্ঘস্থায়ী অডিও এবং ভিডিও প্লেয়ারের মতো দীর্ঘস্থায়ী উপাদানকে শক্তি দেয়, যা শুধুমাত্র ভারী-ওজন জাভাস্ক্রিপ্ট এসপিএ-তে সম্ভব ছিল।
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Astro এছাড়াও বিকাশকারীর কাছে ভিউ ট্রানজিশনকে আরও এর্গোনমিক করতে বিনামূল্যে। উদাহরণস্বরূপ, দলটি ইতিমধ্যে কাস্টম ফরোয়ার্ড/ব্যাকওয়ার্ড অ্যানিমেশন এবং গতিশীল HTML-এর জন্য অ্যানিমেশনের জন্য সমর্থন যোগ করেছে। এই দুটি বৈশিষ্ট্যই একা নিম্ন-স্তরের API-এর সাথে করা কঠিন, কিন্তু অ্যাস্ট্রোতে তারা কার্যত অনায়াসে।
এই বৈশিষ্ট্যগুলি আপাতত শুধুমাত্র অ্যাস্ট্রোতে রয়েছে, তবে অ্যাস্ট্রো টিম তাদের অভিজ্ঞতা স্পেসিফিকেশন লেখকদের এবং রাস্তার নিচে সম্ভাব্য ব্রাউজার বর্ধিতকরণের জন্য ওয়ার্কিং গ্রুপের কাছে ফেরত দেওয়ার আশা করছে। উদাহরণস্বরূপ, সিএসএস-এ অ্যানিমেশন শেয়ার করা সহজ করার জন্য একটি প্রস্তাব ঘনিষ্ঠভাবে পর্যবেক্ষণ করে।
এরপর কি আসে?
ওয়েবে ভিউ ট্রানজিশনের ভবিষ্যত উজ্জ্বল। Astro, Nuxt, এবং HTMX সকলেই কিছু মাত্রায় সমর্থন পাঠিয়েছে, এবং অনেকে আগ্রহ প্রকাশ করেছে।
ক্রোম টিম অ্যাস্ট্রোর নেটিভ ভিউ ট্রানজিশন সমর্থন সম্পর্কে রোমাঞ্চিত৷ এটি ওয়েব ডেভেলপমেন্টের জন্য একটি বড় পদক্ষেপ, আরও তরল এবং গতিশীল ব্যবহারকারীর অভিজ্ঞতা সক্ষম করে৷ বিকাশকারীরা, আমরা আপনাকে Astro 3.0-এ ভিউ ট্রানজিশনে ডুব দিতে উৎসাহিত করি। আপনি নতুন ল্যান্ডিং পৃষ্ঠাগুলি তৈরি করছেন বা বিদ্যমান সাইটগুলি আপগ্রেড করছেন না কেন, এই উন্নতিগুলি গেম পরিবর্তনকারী৷ দেখুন ট্রানজিশনগুলি SPA এবং MPAগুলির সাথে যা সম্ভব ছিল তার মধ্যে একটি ফাঁক পূরণ করতে সাহায্য করেছে৷ SPA এবং/অথবা MPA-এর সমর্থনে অতিরিক্ত ফাঁক আছে কিনা তা Chrome আপনার কাছ থেকে শুনতে পছন্দ করবে। এই বিষয়ে আরও আলোচনা করতে View Transitions WICG GitHub রেপোতে মন্তব্য করতে দ্বিধা বোধ করুন।
আমরা ইতিমধ্যেই উদ্ভাবনী ডেমো এবং অ্যাপ্লিকেশনগুলি দেখে অনুপ্রাণিত হয়েছি এবং আমরা আরও দেখতে আগ্রহী৷ ভিউ ট্রানজিশনের সাথে আপনার কাজ ওয়েবের ভবিষ্যতকে রূপ দিচ্ছে। অ্যাস্ট্রোতে ভিউ ট্রানজিশন একবার চেষ্টা করে দেখুন, আপনার কাজ শেয়ার করুন এবং আসুন একসাথে এই যাত্রা চালিয়ে যাই।