কোথায় চলে: browser, server, phone, desktop

Kenji তিনটা blog post পড়ে চিন্তায় পড়ে গেছে। একটা বলছে "frontend JavaScript শেখো", একটা বলছে "backend JavaScript শেখো", আরেকটা বলছে "React Native শেখো"। সে জানতে চায়, কোন JavaScript আগে শিখবে।

সৎ উত্তর হলো, JavaScript একটাই। একই ভাষা browser-এ চলে, server-এ চলে, ফোনের app-এর ভেতরে চলে, desktop app-এর ভেতরেও চলে। বদলায় শুধু ঘরটা, যেখানে সে চলছে। আর বদলায় ওই ঘরে সে কী কী ছুঁতে পারে।

এই lesson-এ চারটা ঘরই দেখবে। তারপর একটা program দুইটা ঘরে চালিয়ে একই output পাবে। পুরো যুক্তিটা ওই এক ছবিতেই।

একটা ভাষা, চার জায়গা

Engine হলো সেই program, যেটা JavaScript পড়ে আর চালায়। Lesson 04-এ একটা engine খুলে ভেতরটা দেখবে। আপাতত engine-কে একটা বাক্স ভাবো, যেটা শুধু ভাষাটা চালায়, আর কিছু না। নিজে থেকে সে page আঁকতে পারে না, file পড়তে পারে না, network connection-ও খুলতে পারে না।

Runtime হলো কোনো একটা জায়গায় বসানো একটা engine, সঙ্গে ওই জায়গার দেওয়া বাড়তি tool-গুলো। Browser একটা runtime, Node.js আরেকটা। ভেতরের ভাষা একই; বাড়তি tool-গুলো এক না।

তাই "frontend JavaScript" আর "backend JavaScript" একই ভাষা, শুধু দুইটা আলাদা ঘরে।

Browser: page-এর পাশে JavaScript

প্রতিটা browser-এর ভেতরে একটা engine আছে। কোনো website JavaScript পাঠালে browser সেটা চালায় ঠিক তুমি যে page দেখছ তার পাশেই। এভাবেই পুরো page reload না করে একটা "Like" button নীল হয়ে যায়।

Browser-এর বাড়তিগুলো হলো page-এর যা যা লাগে। সবচেয়ে জরুরিটা document, মানে page নিজেই, পড়া আর বদলানোর জন্য হাতের কাছে। আরেকটা window, মানে page-টাকে ঘিরে থাকা browser tab। দুইটাই তুমি ব্যবহার করবে Module 14-এ, lesson-এর ভেতরের একটা নিরাপদ sandbox-এ।

Browser কী দেয় না, সেটাও সমান জরুরি। একটা web page নিজে থেকে তোমার laptop-এর file পড়তে পারে না। জীবনে যত website খুলেছ, ওই সীমাটাই প্রত্যেকটার হাত থেকে তোমাকে বাঁচিয়ে রেখেছে।

তাই browser-এ JavaScript page ছুঁতে পারে, তোমার file ছুঁতে পারে না।

Server: Node.js

2009 সালে Ryan Dahl নামে একজন programmer Google Chrome-এর engine, V8, নিয়ে সেটা browser-এর বাইরে চালালেন। তিনি তাতে server-এর দরকারি tool-গুলো জুড়ে দিলেন: file পড়া আর লেখা, network-এ কথা বলা, অন্য program চালু করা। ফলটার নাম দিলেন Node.js, ছোট করে সবাই বলে Node।

Node নতুন কোনো ভাষা না। এটা একই JavaScript, শুধু বাড়তিগুলো আলাদা। document-এর বদলে এখানে আছে fs, মানে file system module, আর process, মানে চলন্ত program-টা নিজেই। Module 1-এর starter code তোমার input পড়তে fs ব্যবহার করে।

বড় বড় company এটার উপর সত্যিকারের traffic চালায়। 2013 সালে PayPal তাদের সবচেয়ে ব্যস্ত page-গুলোর একটা, account overview, দুইবার বানিয়েছিল: একবার Java-তে, একবার Node-এ। ওদের engineering blog জানিয়েছিল, Node version-টা কম লোক দিয়ে প্রায় দ্বিগুণ দ্রুত বানানো গেছে, আর প্রতিটা request-এর উত্তর দিতে গড় সময় 35% কমে গেছে।

তাই Node মানে browser-এর বাইরে V8, page-এর বদলে file আর network সহ।

ফোন আর desktop

ফোন। React Native বানানো হয়েছে Facebook-এ (এখন Meta)। এটা দিয়ে JavaScript একটা সত্যিকারের ফোন app চালাতে পারে। Button আর list-গুলো ফোনের নিজের native জিনিস, কোনো web page না। Meta এটা Facebook আর Instagram app-এর কিছু অংশে ব্যবহার করে, আর Instagram-এর engineer-রা screen-গুলো এতে সরিয়ে নেওয়া নিয়ে লিখেছেনও।

Desktop। Electron একটা browser engine আর Node-কে একসঙ্গে প্যাক করে একটা desktop program বানায়। VS Code, যে code editor অনেক programmer রোজ ব্যবহার করে, Electron-এর উপর বানানো। Discord-এর desktop app-ও তাই।

এ দুইটার কোনোটাই প্রথমে শেখার জিনিস না। দুইটাই সাধারণ JavaScript নিয়ে একটা নতুন socket-এ বসায়। সেজন্যই এই track আগে ভাষাটা শেখায়।

একই program, দুইটা console-এ

Console হলো একটা লেখার window, যেখানে program-এর ছাপা লাইনগুলো দেখা যায়। প্রতিটা browser-এর ভেতরে একটা লুকানো আছে, আর Node ছাপে terminal-এ (যে লেখার window-তে তুমি command টাইপ করো)। দুইটা কীভাবে খুলবে, সেটা Lesson 05 দেখাবে।

function area(width, height) {
  return width * height;
}

console.log("Area: " + area(4, 5));

Area: 20

পার্থক্যটা দেখা দেয় শুধু তখন, যখন program কোনো ঘরের বাড়তি জিনিসে হাত বাড়ায়। Example 2 প্রতিটা ঘরকে জিজ্ঞেস করে, তার কাছে কী আছে।

console.log(typeof document, typeof window, typeof process);

undefined undefined object

const fs = require("fs");
console.log(typeof fs.readFileSync);
console.log(process.platform);
console.log(process.version.startsWith("v22"));

function
linux
true

Playground: একটা বাক্সে Node.js 22

এই track-এর প্রতিটা Run button তোমার code পাঠায় Progsity Playground-এ। ওটা ঠিক কী, এখানে খোলাখুলি বলে দিচ্ছি, যাতে কখনো আন্দাজ করতে না হয়।

• এটা Node.js 22। তোমার code main.js নামের একটা file-এ save হয়, আর node command দিয়ে চলে, একটা sandbox-এর ভেতরে (সময় আর memory-র সীমা বাঁধা একটা তালাবন্ধ বাক্স)।
• এতে stdin আর stdout আছে। stdin (standard input) হলো Run চাপার আগে Input box-এ তুমি যে লেখা টাইপ করো। stdout (standard output) হলো তোমার program যা কিছু ছাপে।
• এতে কোনো page নেই। document নেই, window-ও নেই, Example 2-তেই দেখেছ। Module 14-এর browser lesson-গুলো চলে lesson-এর ভেতরের আলাদা একটা sandbox-এ।
• এতে internet নেই। কোনো program কিছু download করতে চাইলে fail করে, নিচের দুই নম্বর ভুলটায় যেমন দেখবে।

এই track-এর judged problem-গুলোও একই বাক্সে চলে। সেজন্যই প্রতিটা problem তার input পড়ে stdin থেকে, উত্তর ছাপে, আর কখনো page ছোঁয় না।

তাই Playground মানে input আর output সহ Node 22, এর বেশি কিছু না।

const title = document.querySelector("h1");
console.log(title);

fetch("https://example.com").then((response) => console.log(response.status));

alert("hi");

পরের lesson-এ অন্য ধরনের একটা প্রশ্ন: তোমার career-এ JavaScript কী কাজে লাগবে, সংখ্যা আর তাদের উৎস সহ।