রিয়েক্ট জেএস ফ্রেমওয়ার্ক – নতুন করে পরিচিত হওয়া যাক!

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

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

ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড ওয়েব ডেভেমপমেন্ট সম্পর্কে বিস্তরিত জানতে “প্রযুক্তির অভিযাত্রি” কর্তৃক প্রকাশিত প্রযুক্তি সাময়িকী’তে ‘ফ্রন্ট-এন্ড বনাম ব্যাক-এন্ডডেভেলপমেন্ট‘ নিয়ে আমার লেখাটি পড়তে পারেন। যা আপনাকে ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড ডেভেমপমেন্ট সম্পর্কে পুর্নাঙ্গ ধারণা দিতে সক্ষম হবে বলে আমার বিশ্বাস।
কেনো আপনি রিয়েক্ট জেএস কে বেছে নেবেন তার সঠিক ধারণা পেতে পুরো প্রকাশনাটি পড়তে থাকুন শেষ পর্যন্ত।

রিয়েক্ট জেএস কি?

এটি একটি জাভাস্ক্রিপ্টের জনপ্রিয় ফ্রেমওয়ার্ক যা ব্যবহারকারী ইন্টারফেস ডেভেলপমেন্টের জন্য ব্যবহার করছে। কোনো সফ্টওয়্যার ইন্জিনিয়ার এটাকে “ফ্রেমওয়ার্ক” বলতে নারাজ কেননা, এটি ডেভেলপারদের স্বাধীনতা, কাজের গতি, নির্ভুল কোড ও বিশেষ সুবিধা দিয়ে থাকে যা অন্যান্য ফ্রেমওয়ার্ক দিতে ব্যর্থ হয়েছে।

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

পেছনের ইতিহাস

ফেসবুকের ইন্জিনিয়ার জর্ডান ওয়াক (Jordan Walke) মর্ডান ইউআই ডেভেলপমেন্টের একটি নতুন মাত্রা যোগ করতে চেয়েছেন রিয়েক্ট জেএসের মাধ্যমে। যখন তিনি একটি ক্লায়েন্ট সাইড অ্যাপ্লিকেশন তৈরী করতে গিয়েছিলেন তখন দেখতে পেলেন DOM (ডকুমেন্ট অবজেক্ট মডেল) স্লো হয়ে যাচ্ছে কোনো একটা কারণে। অ্যাপটির এপিআই (অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টরফেস) এর মধ্যে এইচটিএমএল (HTML) ও এক্সএমএল (XML) ফাইল অ্যাড করতে গিয়ে এই বিষয়টি তার নজরে আসে। লজিক্যাল কাঠামো এর ভিত্তিকে আরো শক্তিশালী করে রিয়েক্ট জেএস কে তিনি প্রস্তুত করেন।

সর্বপ্রথম রিয়েক্ট জেএসকে তিনি ২০১২ সালে পরিচয় করিয়ে দেন। তার আগে অ্যাপে  HTML5 এর পরিবর্তে রিয়েক্ট জেএস ব্যবহার করে ব্যাপক সফলতা তিনি দেখতে পান। এবং অফিসিয়ালি ২০১৩ সালে এটি উন্মুক্ত করে ওপেন-সোর্স করে দেয় ফেসবুক কর্তৃপক্ষ।

কেনো ডেভেলপারদের পছন্দের শীর্ষে রিয়েক্ট জেএস

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

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

রিয়েক্ট জেএস আসার আগে ডেভেলপাররা ইউআই ডিজাইন করতে “ভেনিলা জাভাস্ক্রিপ্ট” অথবা “জেকুয়েরি” যা ছিলো দীর্ঘ সময়ের ব্যপার এবং প্রচুর ইরর ও বাগে পরিপূর্ণ।

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

• রিয়েক্ট জেএসের কোড রিডাকশন হয় স্নিপেট ও কম্পোনেন্ট হিসেবে।
• জেএসএক্স (JSX) এর অপশন গুলো সরাসরি DOM কে ম্যনিপুলেট করে।
• ভার্চুয়াল DOM ওয়েব সাইটের পারফর্মেন্স বৃদ্ধিতে অনেক সহায়ক। 

একারণেই মূলত রিয়েক্ট দিয়ে ডেভেলপ করা সকল ওয়েবসাইট অসম্ভব রকম ফাস্ট হয়ে থাকে। ডেভেলপারদের জন্য রিয়েক্টকে পছন্দ করার এটিই অন্যতম কারণ।

একজন ডেভেলপার হিসেবে কেনো আপনি রিয়েক্ট ব্যবহার করবেন? 

ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে রিয়েক্ট জেএস এর বর্তমান জনপ্রিয়তা আকাশচুম্বী। তাই আপনিও এটি নিয়ে কাজ শুরু করতে পারেন। কিন্তু কেনো করবেন? চলুন জেনে নেওয়া যাক –

খুব সহজে ডাইনামিক অ্যাপ্লিকেশন তৈরী করা যায়:

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

অধিক কর্মক্ষমতা সম্পন্ন অ্যাপ্লিকেশন তৈরী করা যায়:

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

কম্পোনেন্ট গুলো একাধিকবার ব্যবহার করা যায়:

রিয়েক্টের কম্পোনেন্ট মিলে একটি ব্লক তৈরী করে যা অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহৃত হয়। রিয়েক্ট লজিক অনুযায়ী কম্পোনেন্টকে নিজের মতো পরিবর্তন করে নেয় যার ফলে ইউজার বেষ্ট পারফরমেন্স পেয়ে থাকে এবং ফ্রন্ট-এন্ডের জটিল একশন গুলো খুব সহজেই হয়ে যায়।

একমুখী ডেটা প্রবাহ:

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

রিয়েক্ট দিয়ে ওয়েব ও মোবাইল অ্যাপ ডেভেলপ করা যায়:

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

সহজে ডিবাগ করা যায়:

ফেসবুক ক্রোম এক্সটেনশন ডেভেলপ করেছে যা দিয়ে খুব সহজে রিয়েক্ট ডিবাগ করা যায়। এটি রিয়েক্ট ওয়েব অ্যাপ্লিকেশনক ডিবাগিং প্রসেসকে করেছে অনেক সহজ ও দ্রুত। ডিবাগিং কি ও এটা সম্পর্কে বিস্তারিত জানতে আমার লেখা “ডেভেলপারের জন্য ডিবাগিং কেন গুরুত্বপূর্ণ!” পড়তে পারেন।

রিয়েক্টের তিনটা টার্মস যা আপনার জানা খুবই জরুরী

রিয়েক্টের তিনটি এক্সপ্রেশন রয়েছে যে গুলো আপনি জানলে রিয়েক্ট সম্পর্কে একটু ধারণা পেয়ে যাবেন।

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

রিয়েক্ট দিয়ে তৈরী কিছু জায়ান্ট অ্যাপ সম্পর্কে জেনে নিই

প্রথমেই ফেসবুকের এর কথাই চিন্তা করুন। ২০১২ সালে প্রথম ফেসবুক রিয়েক্ট ব্যবহার করে। ফেসবুক এ তখন অ্যাড (বিজ্ঞাপন) দেয়া এবং সোস্যাল নেটওয়ার্ক ম্যানেজ করা অনেক চ্যালেন্জিং ছিলো। ফেসবুক তখন HTML5 থেকে সরে রিয়েক্টে মুভ করে এবং একটি অসাধারন মোবাইল ও ওয়েব ইউআই (UI) দিতে সক্ষম হয়।

পরবর্তীতে Instagram এ এটি ব্যবহার করে ব্যাপক সফলতা অর্জন করে কোম্পানিটি।এছাড়া আরো অনেক বড় বড় কোম্পানি তাদের ওয়েব অ্যাপ ও মোবাইল অ্যাপে রিয়েক্ট জেএস ব্যবহার করেছে। তাদের মধ্যে অন্যতম অ্যাপ্লিকেশন গুলো হলো:

• সোস্যাল নেটওয়ার্কিং অ্যাপ্লিকেশন 
  • ফেসবুক
  • ইনস্টাগ্রাম
  • প্রিন্টারেস্ট
  • টুইটার
  • রেডিট
• শেয়ারিং প্ল্যাটফর্ম
  • এয়ারবিএনবি (Airbnb)
  • লিফ্ট (Lyft)
  • উবার
• মিডিয়া সাইটস
  • ইয়াহু! (তাদের মেইল ক্লায়েন্ট রিয়েক্ট দিয়ে ডেভেলপ করা হয়েছে)
  • নিউইয়র্ক টাইমস
• ভিডিও প্ল্যাটফর্ম
  • নেটফ্লিক্স
• SaaS (সফটওয়্যার এজ এ সার্ভিস)
  • ড্রপবক্স
  • সেন্ডগ্রিড
  • আসানা
  • ইনভিশনঅ্যাপ
  • জ্যাপিয়ার
• অন্যান্য বিশেষ
  • মাইক্রোসফট
  • ইবে (Ebay)

রিয়েক্ট এর ভবিষ্যৎ

রিয়েক্ট জেএস এতোটা জনপ্রিয় হবার পেছনে অবশ্যই কারন আছে। এটি Stack Overflow Developer Survey 2019 এর রিপোর্ট মতে পৃথিবীর সবচেয়ে জনপ্রিয় এবং চাহিদা সম্পন্ন ওয়েব ফ্রেমওয়ার্ক।

২০১৯ সালের সার্ভে অনুযায়ী বিশ্বের প্রায় ৩১.৩% ডেভেলপার এটি নিয়ে কাজ করে এবং ২১.৫% সফটওয়্যার ইঞ্জিনিয়ার এটি সম্পর্কে জানে এবং তারা রিয়েক্ট নিয়ে কাজ করতে আগ্রহী।

রিয়েক্ট জেএস ডেভেলপাররা অন্যান্য ওয়েব ডেভেলপারদের তুলনায় অনেক বেশি টাকা ইনকাম করে থাকে। রিয়েক্ট জেএসে অ্যাপের দ্রুত উপস্থাপনা ও উত্থানের কারনে সামনের পুরো ওয়েব ডেভেলপমেন্ট ইন্ডাস্ট্রি ডোমিনেট করতে পারে বলে অনেকে মন্তব্য করে থাকেন।

পরিশেষে বলবো

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

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

দিন দিন এটির ব্যবহার সহজ থেকে আরো সহজতর হচ্ছে। তাই সব ধরনের কমপ্লিক্সিটি থেকে রক্ষা পেতে চাইলে আপনার পরবর্তী ফ্রন্ট-এন্ড প্রজেক্টে রিয়েক্ট ব্যবহার করতে পারেন।