রিঅ্যাক্ট এর সংক্ষিপ্ত ইতিহাস
আচ্ছা শুরুতেই বলে নেই এটা কোনো টেকনিক্যাল পোস্ট না যেটা হেডিং দেখে অনেকটাই অনুমেয়। এই পর্বে আমরা জাস্ট কিভাবে রিঅ্যাক্ট জেএস(React JS) এর উত্থান হল, এর শুরুর দিকের ইতিহাস, এর সাথে সম্পর্কিত প্রধান ব্যক্তিবর্গ কারা ছিলেন এসব নিয়ে জানবো। পরবর্তী পর্বগুলোতে আমরা টেকনিক্যাল ডিটেলসে যাবো।
ওকে যার উত্থান, ইতিহাস পাতিহাস নিয়ে আলোচনা তার সম্পর্কে একটু না বল্লেই নয়।
রিঅ্যাক্ট মূলত একটি জাভাস্ক্রিপ্ট ফ্রন্টএন্ড লাইব্রেরী। এর মাধ্যমে কম্পোনেন্ট বেইসড ইউজার ইন্টারফেস বানানো হয়। এবং এই কম্পোনেন্ট গুলো রিইউজেবল হয়। আর রিঅ্যাক্টের কি ফিচার হচ্ছে ভার্চুয়াল ডম। যার মাধ্যমে ইউজার ইন্টারফেসের ঠিক কোন জায়গায় চেঞ্জ আনতে হবে রিঅ্যাক্ট সেটা নিয়ন্ত্রন করে। এবং এই চেঞ্জ আনার কাজটা করতে পুরো পেজটা রিরেন্ডার করার দরকার পরে না যার ফলে স্মুথ এবং ফাস্ট একটা পারফরম্যান্স পাওয়া যায়। রিঅ্যাক্ট মূলত ইউজ হয় সিঙ্গেল পেজ অ্যাপলিকেশন, মোবাইল অ্যাপলিকেশন(রিঅ্যাক্ট নেটিভ) বানানোর জন্য।
এখন আসা যাক কেন দরকার পরলো রিঅ্যাক্ট জেএস এর? তখনকার সময়ের যে ফ্রেমওয়ার্ক বা লাইব্রেরী গুলো তারা কি এনাফ পারফরম্যান্ট ছিল না?
রিঅ্যাক্ট বাজারে আসার আগে বেশ কিছু পপুলার ফ্রেমওয়ার্ক এবং লাইব্রেরী তখন জাভাস্ক্রিপ্ট ওয়ার্ল্ড ডমিনেট করছিল এদের মধ্যে ছিল জেক্যুয়েরী(jQuery), অ্যাঙ্গুলার(Angular), ব্যাকবোন জেএস(Backbone JS), এমবার জেএস(Ember JS)। যদিও এদের প্রত্যেকেই তাদের নিজস্ব ওয়েতে পারফরম্যান্ট ছিল কিন্তু প্রত্যেকেরই কিছু সীমাবদ্ধতাও ছিল।
লার্জ স্কেল অ্যাপলিকেশন গুলোর ক্ষেত্রে পারফরম্যান্স একটা বড় ইস্যু এবং অ্যাচিভ করাটা চ্যালেঞ্জ। তৎকালীন এই লাইব্রেরীগুলো মূলত যা দিতে পারছিল না তা হলো ফাস্টার চেঞ্জ ডিটেকশন(চেঞ্জ ট্র্যাক করা এবং রেন্ডার) এবং একটা লার্জ স্কেল কমপ্লেক্স অ্যাপলিকেশন এর সহজতর বিল্ডিং প্রসেস।
তো রিঅ্যাক্ট এসব সমস্যা সমাধানে কিছু টেকনিক সামনে নিয়ে আসে যেমন ভার্চুয়াল ডম, সহজতর উপায়ে ব্যবহারযোগ্য রিইউজাবল কম্পোনেন্ট, একমূখী ডেটা ফ্লো ইত্যাদি। ভার্চুয়াল ডম এবং খুবই ইফিসিয়েন্ট ডিফিং অ্যালগোরিদমের সাহায্যে খুবই অল্প সংখ্যক আপডেটের মাধ্যমে রিঅ্যাক্ট রিয়্যাল ডমে প্রয়োজনীয় চেঞ্জ গুলো শো করে। ওকে এনাফ পকপক লেট্স গেট ইন্টু দা আন্ডারডগ স্টোরীঃ
২০১০ এর দিকে শেন ও’সালিভান(Shane O’Sullivan) সাথে আরো দুজন ফেসবুক ইঞ্জিনিয়ার মিলে বোল্ট জেএস নামে একটি ইউআই ফ্রেমওয়ার্ক ডেভেলপ করেন। যেটা সেসময়ে ফেসবুকে ইন্টারনালি ব্যবহার করা হতো। এটা অন্যদের মতো বাইডিরেকশনাল(টুওয়ে বা দ্বিমুখী) ডেটা বাইন্ডিং করতো কিন্তু তৎকালীন ইউআই ফ্রেমওয়ার্ক গুলোর তুলনায় বেশ ভালো পারফর্ম করছিল। কিন্তু টিম সাইজ এবং অ্যাপলিকেশন সাইজ বাড়ার সাথে সাথে বোল্ট মেইন্টেন করাটা বেশ চ্যালেঞ্জিং হয়ে পরে।
এই সময়ে ফেসবুক অ্যাড্স্ টিমে কাজ করতেন জর্ডান ওয়াক(Jordan Walke) নামের একজন ইঞ্জিনিয়ার। ফেসবুকের আগে অ্যামাজনে কাজ করতেন ডিস্ট্রিবিউটেড সিস্টেম নিয়ে। অ্যাড্স্ ছিলো ফেসবুকের সবচেয়ে কম্প্লিকেটেড ইউআই পার্ট গুলোর একটি। তো জর্ডান ২০১১ সালে এই সমস্যা গুলো সলভ করার ওয়ে খুঁজতে থাকেন। এবং উনার বেশ ইন্টারেস্ট ছিল ফাংশনাল প্রোগ্রামিং নিয়ে। তো উনি এই বোল্ট জেএস আর ফাংশনাল প্রোগ্রামিং এর কনসেপ্ট মিলিয়ে তৈরী করে ফেলেন এফবোল্ট বা ফাংশনাল বোল্ট নামের এক লাইব্রেরী। যেটা পরবর্তীতে এসে রুপ নেয় আজকের রিঅ্যাক্ট এ। মজার ব্যাপার হচ্ছে এখনো রিঅ্যাক্ট এর লোগোর মাঝখানে একটা বোল্ট সাইন দেখা যায়।
জর্ডান এর আইডিয়া ছিল গতানুগতিক টুওয়ে ডেটা বাইন্ডিং এর পরিবর্তে ইউনি ডিরেকশনাল বা ওয়ানওয়ে ডেটা বাইন্ডিং এবং কোন ডেটা চেঞ্জ হলে সব কিছু রিরেন্ডার করে ফেলা।
উমম সবকিছু রিরেন্ডার করে ফেলা? একটু আগেই না বলা হলো রিঅ্যাক্ট সবকিছু রিরেন্ডার করে না?
সাউন্ডস ক্রেজি তাইনা? বাট হ্যাঁ সবকিছু রিরেন্ডার করে ফেলা, কিন্তু সেটা ব্রাউজার রিলোড টাইপ বা রিয়্যাল ডম এর সবকিছু রিরেন্ডার করা না বরং বেশ ডিফ্রেন্ট একটা অ্যাপ্রোচে সবচেয়ে কম সংখ্যক আপডেটের মাধ্যমে ভার্চুয়াল ডমকে চেঞ্জ করা এবং অ্যাকচুয়াল ডমে সেটা রিফ্লেক্ট করা। আচ্ছা বেশ টেকনিক্যাল টার্মস চলে আসতেছে আমরা এসব নিয়ে আর না আগাই এগুলো নিয়ে আমরা পরের কোন পর্বে হয়তো লিখবো।
এরমধ্যে ফেসবুক রিঅ্যাক্ট দিয়ে তাদের ওয়েবসাইটে ছোটখাট এক্সপেরিমেন্ট শুরু করে। এর পর ২০১২ সালে ফেসবুক কিনে ফেলে ইন্স্টাগ্র্যাম কে এবং সেসময়ে ইন্স্টাগ্র্যামের কোন ওয়েবসাইট ছিল না। পিট হান্ট(Pete Hunt) সেসময়ে কাজ করতেন ফেসবুক ফটোস ও ভিডিও টিম এ। এবং তিনি সেখানে রিঅ্যাক্ট দিয়ে ইন্স্টাগ্র্যামের ওয়েব এক্সপেরিমেন্ট শুরু করেন। যদিও সেসময় রিঅ্যাক্ট অতোটাও ম্যাচিওর ছিল না কিন্তু এভাবে রিঅ্যাক্ট ধীরে ধীরে স্টেজে আসা শুরু করে।
ফেসবুক এসময়ে তাদের অ্যাড্স্ তৈরী করার ফ্লোতে ব্যবহার করতো বোল্ট জেএস। যেটাতে অলরেডী অনেক রিসোর্স(সময় এবং ইঞ্জিনিয়ার্স)তারা ব্যবহার করে ফেলেছে। কিন্তু তারা এটাও আঁচ করছিল যে বোল্ট মেইন্টেন করাটা ওনেক টাফ হয়ে যাচ্ছে। এসময়ে রিঅ্যাক্ট অতোটাও ম্যাচিওর না আবার অ্যাড্স্ অলরেডী বোল্টে ইম্প্লিমেন্টেড। সো ডিসিশন প্রবলেম এসে যাচ্ছিলো যে তারা বোল্টকে আরো সময় দেবে নাকি রিঅ্যাক্ট তাদের প্রবলেম গুলো সলভ্ করতে পারবে। জর্ডান,শেন এবং ওভারঅল টিম একটা স্টাক অবস্থায় এসে দাঁড়ায়।
এই অবস্হা থেকে একটা সিদ্ধান্তে আসার জন্য কাজ করেন জিং চেন(Jing Chen)। তিনি রিঅ্যাক্ট এর প্রবলেম গুলো খুঁজে বের করার চেস্টা করেন। নিজে থেকে কিছু সমস্যা সমাধান করেন ডেভেলপমেন্ট টিমের কাছে নতুন নতুন সমস্যাগুলো তুলে ধরেন এভাবে রিঅ্যাক্ট কে একটা কনভিন্সিং অবস্থায় নিয়ে আসেন তিনি। অ্যাড্স্ তৈরী করার ফ্লো নতুনভাবে রিঅ্যাক্ট দিয়ে লেখা হয়। যেটা তাদের পুরনো অনেক সমস্যা সমাধান করে আর পারফরম্যান্স ও যোগ করে।
সো এই অবস্হায় রিঅ্যাক্ট মোটামুটি একটা ব্যাটল টেস্টেট লাইব্রেরী। বেশ কিছু টেস্ট আর ইম্প্লিমেন্টশন ফেসবুক অলরেডী করে ফেলেছে। এখন প্রয়োজন আসে এটাকে আরো বেশি স্ট্যাবল করার, আরো বেশি মানুষজনকে এর সাথে পরিচয় করানো, আরো বেশি ফিডব্যাক সংগ্রহ করা।
এমন চিন্তা ভাবনা থেকে টম ও’কিনো(Tom Occhino) ব্যবস্হা করেন রিঅ্যাক্ট কে ওপেনসোর্স করার। সেই সাথে জর্ডান এরও চিন্তা ভাবনা এমনই ছিল। টম ও’কিনো ছিলেন প্রডাক্ট ইন্ফ্রাস্ট্রাকচার টিমে। তারা এরপর আমেরিকান জেএস কনফারেন্সে যাবার কথা ভাবলেন এবং প্লান ছিল সেখানে রিঅ্যাক্ট কে ডেভেলপার কমিউনিটিতে পরিচয় করানো এবং সেই সাথে ওপেনসোর্স করার ঘোষণা দেওয়া। ২৯ মে ২০১৩ তে সেই কনফারেন্সে রিঅ্যাক্ট কে ওপেনসোর্স করা হয়।
সবাই তারপর রিঅ্যাক্ট কে সাদরে গ্রহন করে নিল সবাই বলতে শুরু করলো কি অ্যামেইজিং প্রজেক্ট!!
আদতে না ব্যাপারটা আসলে এমনটা ঘটে নাই। সেই কনফারেন্সে সবারই খানিকটা মিশ্র প্রতিক্রিয়া ছিল। টুইটারে পরে অনেকেই ট্রল করা শুরু করে। যেমন এটা দিয়ে এক্সাক্টলি কি প্রবলেম তারা সল্ভ করবে, একই ফাইলে জাভাস্ক্রিপ্ট আর এইচটিএমএল(জেএসএক্স) হলে কোথায় সেপারেশন অব কনসার্ন কারন তখন সবাই সেপারেশন অব কনসার্ন বলতে বুঝতো আলাদা টাইপের ফাইলগুলো সব আলাদা আলাদা জায়গায় থাকবে যেমন জেএস(JS) ফোল্ডারে জেএস ফাইলগুলো এবংএইচটিএমএল(HTML) ফোল্ডারে এইচটিএমএল ফাইলগুলো যেখানে রিঅ্যাক্ট এইচটিএমএল কে জেএস এর ভেতরে নিয়ে আসছে জেএসএক্স(JSX) এর মাধ্যমে(যদিও রিঅ্যাক্ট ভিন্ন কনসেপ্টে ব্যাপারটা হ্যান্ডেল করে)। সবাই ধরেই নিয়েছিল যে ফেসবুক ইঞ্জিনিয়াররা নতুন কিছু দেখাতে যেয়ে কিছু স্টুপিড আইডিয়া সামনে নিয়ে আসছে।
কনফারেন্সে জর্ডানদের কিছু ব্যাপার ও মিসিং ছিল যেমন কেন তারা রিঅ্যাক্ট এর প্রয়োজনীয়তাবোধ করছিল, রিঅ্যাক্ট কিভাবে তাদের প্রবলেমগুলো সলভ করছিল, রিঅ্যাক্ট এর ডিজাইন প্রিন্সিপাল কি ছিল এসব ব্যাপারে কথা না বলে সরাসরি টেকনিক্যাল দৃষ্টিকোণ থেকে কথা বলেছিলেন। এসব নিয়ে কথা বললে হয়তো প্রতিক্রিয়াগুলো ভিন্ন হতে পারতো।
যাই হোক রিঅ্যাক্ট টিমের অবস্হা তখন বাংলায় যাকে বলে গুড়ে বালি। ফেসবুক টিম এতোটাও ডিসঅ্যাপয়েন্টেড হবে আশা করেনি।
এমন সময় ফেসবুকের বাইরের(খান অ্যাকাডেমী) একজন ইঞ্জিনিয়ার সোফি অ্যালপার্ট(Sophie Alpert) যিনি তখন ব্যাকবোন জেএস নিয়ে কাজ করছিলেন। তিনি নতুন নতুন রিঅ্যাক্ট একটু ট্রাই করে দেখলেন এটা বেশ কাজে দিচ্ছে, তার জন্য অনেক প্রবলেম সল্ভ করে দিচ্ছে। ব্যাকবোন দিয়ে স্টেট ম্যানেজ করতে যে পরিমাণ ঝামেলা হচ্ছিল, রিঅ্যাক্ট অনেকটাই স্বস্তি দিচ্ছিল। এরপর তিনি তার অফিস এনভাইরনমেন্টে প্রডাকশন লেভেলে রিঅ্যাক্ট ব্যবহার শুরু করেন, রিঅ্যাক্ট কমিউনিটি তে কন্ট্রিবিউট করা শুরু করেন। অন্যদের(রিঅ্যাক্ট ব্যবহারকারী) সমস্যার সমাধান দিতেন, নিজের সমস্যাগুলো জানান দিতেন। উনার কন্ট্রিবিউশনে রিঅ্যাক্ট টিম তখন একটু আশার আলো দেখতে শুরু করে। তিনি ছিলেন ফেসবুকের বাইরে প্রথম প্রডাকশন লেভেলে রিঅ্যাক্ট ব্যবহারকারী। তার দেখাদেখি আরো অনেকে তখন ইন্টারেস্ট দেখায় রিঅ্যাক্ট নিয়ে। কন্ট্রিবিউশন শুরু করে।
এভাবে ধীরেধীরে রিঅ্যাক্ট কমিউনিটিতে কন্ট্রিবিউশন আসতে থাকে। ২০১৪-২০১৫ এর মধ্যে বেশ কিছু বড় কম্পানী যেমন ইয়াহু মেইল, নেটফ্লিক্স, এয়ার বিএনবি রিঅ্যাক্ট অ্যাডোপ্ট করতে শুরু করে। রিঅ্যাক্ট ধীরেধীরে একটা কনভিন্সিং পজিশনে, লাইমলাইটে আসতে থাকে।
বেশ কিছু ভালো ভালো ইঞ্জিনিয়ার যেমন ড্যান অ্যাবরামভ(Dan Abramov) রিঅ্যাক্ট নিয়ে কাজ করা শুরু করেন। ড্যানের বেশ কিছু উল্লেখযোগ্য় কাজ রয়েছে রিঅ্যাক্ট নিয়ে যেমন রিডাক্স, রিঅ্যাক্ট নেটিভ ডিবাগার, ক্রিয়েট রিঅ্যাক্ট অ্যাপ(CRA) এরও কো-ক্রিয়েটর তিনি।
আচ্ছা ড্যানের ফেসবুকে জয়েন করার গল্পটা বেশ মজার শেয়ার করি। উনি তখন স্টাম্পসী(Stampsy) নামে একটা স্টার্টআপ কোম্পানীতে কাজ করছিলেন ব্যাকবোন(Backbone JS) নিয়ে। তো রিঅ্যাক্ট রিলিজ হলে উনি একটু এক্সপেরিমেন্ট শুরু করেন এটা নিয়ে কারন যে প্রজেক্ট নিয়ে সেসময় তিনি কাজ করছিলেন ব্যাকবোনে খানিকটাই তাকে প্যারা দিচ্ছিল। কিন্তু রিঅ্যাক্ট তার কাছে বেশ আশাব্যঞ্জক পারফর্ম করলে উনি সেই পুরো অ্যাপটাকে তখন রিঅ্যাক্টে কনভার্ট করে ফেলেন।
কাজ করতে যেয়ে ড্যান বেশ কিছু টুলস বা ফিচার রিঅ্যাক্টে পাচ্ছিলেন না। রিঅ্যাক্টে তখনো হট রিলোড ফিচার ছিলো না মানে কোড চেঞ্জ করলে ব্রাউজারে সেটা রিলোড দিয়ে দেখতে হতো, কোন স্টেট চেঞ্জ দেখার টুলস ছিল না। ড্যান নিজ উদ্যোগে তখন ডেভেলপ করেন হট রিলোড আর রিঅ্যাক্ট টাইম ট্রাভেল(যেটা দিয়ে স্টেট চেঞ্জ হিস্টোরী দেখা যেত)। স্টাম্পসীর প্রজেক্ট বড় হওয়ার সাথে সাথে রিঅ্যাক্টে স্টেট ম্যানেজ করাটা বেশ ঝামেলা দায়ক হওয়া শুরু করে। প্রয়োজন দেখা দেয় সেন্ট্রালী স্টেট ম্যানেজ করার।
ড্যান তখন তৈরী করে ফেলেন রিডাক্স নামক এক লাইব্রেরী যা বেশ জনপ্রিয়তা পায় কমিউনিটিতে। এই সবগুলো কাজ তিনি করেছেন ফেসবুকে জয়েন না করা অবস্হাতেই। ফেসবুক এসব কাজ দেখে ড্যানকে তখন একটা ইন্টারভিউ এর জন্য ডাকে সাথে ইউরোপীয়ান রিঅ্যাক্ট কনফারেন্সে আমন্ত্রণ জানায় তার টুল্স গুলো নিয়ে কথা বলার জন্য।
মে ২০১৫ এর এই কনফারেন্স ছিল ড্যান এর জন্য সাড়া জাগানীয়। ঐদিনই তার দ্বিতীয় ইন্টারভিউ নেয়া হয় একটা হোটেল বেজমেন্টে এবং ফেসবুক তাকে অফার করে। যেখানে অন্য সবার জন্য ফেসবুকে ইন্টারভিউ হতো চার ধাপে ড্যানের জন্য সেটা ছিল মাত্র দুই ধাপের।
ড্যান ওপেন সোর্স কমিউনিটিতে কন্ট্রিবিউশন এবং মেন্টরশীপ এর জন্য বেশ পপুলার ।
এইতো রিঅ্যাক্ট পপুলারিটি গেইন করা শুরু করলো। একটা আন্ডারডগ প্রজেক্ট থেকে একটা ডমিনেটিং লাইব্রেরীতে মোড় নিল। আর আমরা ডেভেলপাররা দলে দলে রিঅ্যাক্ট শিখা শুরু করে দিলাম। জর্ডান ওয়াকের তৈরী করা সেই লাইব্রেরী এখন জেএস ওয়ার্ল্ডের বাজওয়ার্ড।
বাংলা ইংলিশ এভাবে মিশিয়ে লিখার জন্য দুঃখিত, পুরোপুরি বাংলায় লিখলে মনে হচ্ছিল বেশ অদ্ভূত শোনাবে তাই এভাবে লিখা। যাই হোক আজ এ পর্যন্তই।
অসংখ্য ধন্যবাদ এতদূর পর্যন্ত পড়ার জন্য
References:
1. React.js: The Documentary
2. Origins of React
3. Lots of ChatGpt & Google
