আসুন উদাহরণ ব্যবহার করে জাভাস্ক্রিপ্টে Async/Await দেখুন

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

আমরা মনে করিয়ে দিচ্ছি: "Habr"-এর সকল পাঠকদের জন্য - "Habr" প্রচারমূলক কোড ব্যবহার করে যেকোনো Skillbox কোর্সে নথিভুক্ত করার সময় 10 রুবেল ছাড়।

Skillbox সুপারিশ করে: শিক্ষাগত অনলাইন কোর্স "জাভা ডেভেলপার".

কলব্যাক

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

Node.js-এ একটি ফাইল অ্যাসিঙ্ক্রোনাসভাবে পড়ার একটি উদাহরণ এখানে দেওয়া হল:

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

সমস্যা দেখা দেয় যখন আপনাকে একবারে একাধিক অ্যাসিঙ্ক্রোনাস অপারেশন করতে হবে। আসুন এই দৃশ্যটি কল্পনা করা যাক: আরফাত ব্যবহারকারীর ডাটাবেসের কাছে একটি অনুরোধ করা হয়েছে, আপনাকে এটির profile_img_url ক্ষেত্রটি পড়তে হবে এবং someserver.com সার্ভার থেকে একটি চিত্র ডাউনলোড করতে হবে।
ডাউনলোড করার পরে, আমরা চিত্রটিকে অন্য ফর্ম্যাটে রূপান্তর করি, উদাহরণস্বরূপ PNG থেকে JPEG-তে। রূপান্তর সফল হলে, ব্যবহারকারীর ইমেলে একটি চিঠি পাঠানো হয়। এরপরে, ইভেন্ট সম্পর্কে তথ্য transformations.log ফাইলে প্রবেশ করানো হয়, তারিখ নির্দেশ করে।

কোডের চূড়ান্ত অংশে কলব্যাকের ওভারল্যাপ এবং } এর বড় সংখ্যার দিকে মনোযোগ দেওয়া মূল্যবান। একে বলা হয় কলব্যাক হেল বা পিরামিড অফ ডুম।

এই পদ্ধতির অসুবিধাগুলি সুস্পষ্ট:

• এই কোড পড়া কঠিন.
• ত্রুটিগুলি পরিচালনা করাও কঠিন, যা প্রায়শই খারাপ কোড মানের দিকে পরিচালিত করে।

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

প্রতিশ্রুতির ইতিবাচক দিক হল যে তারা কোডটিকে বাম থেকে ডানে না করে উপরে থেকে নীচের দিকে আরও ভাল পাঠযোগ্য করে তোলে। যাইহোক, প্রতিশ্রুতিগুলিরও তাদের সমস্যা রয়েছে:

• আপনি অনেক যোগ করতে হবে. তারপর.
• ট্রাই/ক্যাচের পরিবর্তে, .catch সমস্ত ত্রুটি পরিচালনা করতে ব্যবহৃত হয়।
• এক লুপের মধ্যে একাধিক প্রতিশ্রুতি নিয়ে কাজ করা সবসময় সুবিধাজনক নয়; কিছু ক্ষেত্রে, তারা কোডটিকে জটিল করে তোলে।

এখানে একটি সমস্যা যা শেষ পয়েন্টের অর্থ দেখাবে।

ধরুন আমাদের একটি লুপ আছে যা র্যান্ডম বিরতিতে (0–n সেকেন্ড) 10 থেকে 0 পর্যন্ত সংখ্যার একটি ক্রম প্রিন্ট করে। প্রতিশ্রুতি ব্যবহার করে, আপনাকে এই লুপটি পরিবর্তন করতে হবে যাতে সংখ্যাগুলি 0 থেকে 10 পর্যন্ত ক্রম অনুসারে মুদ্রিত হয়। সুতরাং, যদি একটি শূন্য মুদ্রণ করতে 6 সেকেন্ড এবং একটি প্রিন্ট করতে 2 সেকেন্ড সময় লাগে, তাহলে শূন্যটি প্রথমে প্রিন্ট করা উচিত এবং তারপরে একটি মুদ্রণের জন্য গণনা শুরু হবে।

এবং অবশ্যই, আমরা এই সমস্যা সমাধানের জন্য Async/Await বা .sort ব্যবহার করি না। একটি উদাহরণ সমাধান শেষে আছে.

অ্যাসিঙ্ক ফাংশন

ES2017 (ES8) এ অ্যাসিঙ্ক ফাংশন যুক্ত করা প্রতিশ্রুতি দিয়ে কাজ করার কাজটিকে সহজ করেছে। আমি মনে করি যে অ্যাসিঙ্ক ফাংশনগুলি প্রতিশ্রুতিগুলির "উপরে" কাজ করে। এই ফাংশনগুলি গুণগতভাবে ভিন্ন ধারণার প্রতিনিধিত্ব করে না। Async ফাংশনগুলি প্রতিশ্রুতি ব্যবহার করে এমন কোডের বিকল্প হিসাবে উদ্দিষ্ট।

Async/Await একটি সিঙ্ক্রোনাস শৈলীতে অ্যাসিঙ্ক্রোনাস কোডের সাথে কাজ সংগঠিত করা সম্ভব করে তোলে।

এইভাবে, প্রতিশ্রুতি জানার ফলে Async/Await-এর নীতিগুলি বোঝা সহজ হয়৷

শব্দবিন্যাস

সাধারণত এটি দুটি কীওয়ার্ড নিয়ে গঠিত: async এবং await। প্রথম শব্দটি ফাংশনটিকে অ্যাসিঙ্ক্রোনাসে পরিণত করে। এই ধরনের ফাংশন অপেক্ষা ব্যবহারের অনুমতি দেয়। অন্য কোন ক্ষেত্রে, এই ফাংশন ব্যবহার করে একটি ত্রুটি উৎপন্ন হবে।

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}
 

Async ফাংশন ঘোষণার একেবারে শুরুতে সন্নিবেশ করা হয় এবং একটি তীর ফাংশনের ক্ষেত্রে, “=” চিহ্ন এবং বন্ধনীর মধ্যে।

এই ফাংশনগুলিকে একটি বস্তুতে পদ্ধতি হিসাবে স্থাপন করা যেতে পারে বা একটি শ্রেণি ঘোষণায় ব্যবহার করা যেতে পারে।

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

এনবি ! এটা মনে রাখা মূল্যবান যে ক্লাস কনস্ট্রাক্টর এবং গেটার/সেটার অ্যাসিঙ্ক্রোনাস হতে পারে না।

শব্দার্থবিদ্যা এবং সঞ্চালনের নিয়ম

Async ফাংশনগুলি মূলত স্ট্যান্ডার্ড JS ফাংশনের অনুরূপ, তবে ব্যতিক্রম রয়েছে।

সুতরাং, অ্যাসিঙ্ক ফাংশনগুলি সর্বদা প্রতিশ্রুতি প্রদান করে:

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

বিশেষ করে, fn স্ট্রিং হ্যালো ফেরত দেয়। ঠিক আছে, যেহেতু এটি একটি অ্যাসিঙ্ক্রোনাস ফাংশন, স্ট্রিং মান একটি কন্সট্রাক্টর ব্যবহার করে একটি প্রতিশ্রুতিতে মোড়ানো হয়।

এখানে Async ছাড়া একটি বিকল্প নকশা আছে:

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

এই ক্ষেত্রে, প্রতিশ্রুতি "ম্যানুয়ালি" ফেরত দেওয়া হয়। একটি অ্যাসিঙ্ক্রোনাস ফাংশন সর্বদা একটি নতুন প্রতিশ্রুতিতে মোড়ানো হয়।

যদি রিটার্ন মানটি একটি আদিম হয়, তাহলে async ফাংশন একটি প্রতিশ্রুতিতে মোড়ানো মানটি প্রদান করে। যদি রিটার্ন মান একটি প্রতিশ্রুতি বস্তু হয়, তবে এর রেজোলিউশন একটি নতুন প্রতিশ্রুতিতে ফেরত দেওয়া হয়।

const p = Promise.resolve('hello')
p instanceof Promise;
// true
 
Promise.resolve(p) === p;
// true
 

কিন্তু একটি অ্যাসিঙ্ক্রোনাস ফাংশনের ভিতরে একটি ত্রুটি থাকলে কি হবে?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

যদি এটি প্রক্রিয়া না করা হয়, foo() প্রত্যাখ্যান সহ একটি প্রতিশ্রুতি ফিরিয়ে দেবে। এই অবস্থায়, Promise.resolve এর পরিবর্তে একটি ত্রুটি সম্বলিত Promise.reject ফেরত দেওয়া হবে।

অ্যাসিঙ্ক ফাংশনগুলি সর্বদা একটি প্রতিশ্রুতি আউটপুট করে, যা ফেরত দেওয়া হোক না কেন।

অ্যাসিঙ্ক্রোনাস ফাংশন প্রতি অপেক্ষায় বিরতি দেয়।

অপেক্ষা অভিব্যক্তি প্রভাবিত. সুতরাং, যদি অভিব্যক্তিটি একটি প্রতিশ্রুতি হয়, প্রতিশ্রুতি পূর্ণ না হওয়া পর্যন্ত async ফাংশন স্থগিত করা হয়। অভিব্যক্তি একটি প্রতিশ্রুতি না হলে, এটি Promise.resolve এর মাধ্যমে একটি প্রতিশ্রুতিতে রূপান্তরিত হয় এবং তারপর সম্পূর্ণ হয়।

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

এবং এখানে fn ফাংশন কিভাবে কাজ করে তার একটি বর্ণনা আছে।

• এটি কল করার পরে, প্রথম লাইনটি const a = await 9 থেকে রূপান্তরিত হয়; in const a = await Promise.resolve(9);।
• Await ব্যবহার করার পরে, ফাংশন এক্সিকিউশন স্থগিত করা হয় যতক্ষণ না একটি তার মান পায় (বর্তমান পরিস্থিতিতে এটি 9)।
• delayAndGetRandom(1000) fn ফাংশনটি সম্পূর্ণ না হওয়া পর্যন্ত (1 সেকেন্ডের পরে) সম্পাদনে বিরতি দেয়। এটি কার্যকরভাবে 1 সেকেন্ডের জন্য fn ফাংশন বন্ধ করে দেয়।
• delayAndGetRandom(1000) সমাধানের মাধ্যমে একটি এলোমেলো মান প্রদান করে, যা পরে ভেরিয়েবলের জন্য বরাদ্দ করা হয়।
• ওয়েল, ভেরিয়েবল c এর ক্ষেত্রে ভেরিয়েবল a এর ক্ষেত্রে অনুরূপ। এর পরে, সবকিছু এক সেকেন্ডের জন্য বন্ধ হয়ে যায়, কিন্তু এখন delayAndGetRandom(1000) কিছুই ফেরত দেয় না কারণ এটির প্রয়োজন নেই।
• ফলস্বরূপ, a + b * c সূত্র ব্যবহার করে মানগুলি গণনা করা হয়। ফলাফল Promise.resolve ব্যবহার করে একটি প্রতিশ্রুতিতে মোড়ানো হয় এবং ফাংশন দ্বারা ফিরে আসে।

এই বিরতিগুলি ES6-এর জেনারেটরের স্মরণ করিয়ে দিতে পারে, তবে এতে কিছু আছে আপনার কারণ.

সমস্যার সমাধান

আচ্ছা, এখন উপরে উল্লিখিত সমস্যার সমাধান দেখি।

FinishMyTask ফাংশনটি queryDatabase, sendEmail, logTaskInFile এবং অন্যান্য ক্রিয়াকলাপের ফলাফলের জন্য অপেক্ষা করতে অপেক্ষা করতে ব্যবহার করে। আপনি যদি এই সমাধানটির সাথে তুলনা করেন যেখানে প্রতিশ্রুতিগুলি ব্যবহৃত হয়েছিল, মিলগুলি স্পষ্ট হয়ে উঠবে। যাইহোক, Async/Await সংস্করণটি সমস্ত সিনট্যাকটিক জটিলতাকে ব্যাপকভাবে সরল করে। এই ক্ষেত্রে, .then/.catch এর মতো বড় সংখ্যক কলব্যাক এবং চেইন নেই।

এখানে সংখ্যার আউটপুট সহ একটি সমাধান রয়েছে, দুটি বিকল্প রয়েছে।

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

এবং এখানে অ্যাসিঙ্ক ফাংশন ব্যবহার করে একটি সমাধান রয়েছে।

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

ত্রুটি প্রক্রিয়াকরণ

আন-হ্যান্ডেল করা ত্রুটি একটি প্রত্যাখ্যান প্রতিশ্রুতি আবৃত করা হয়. যাইহোক, অ্যাসিঙ্ক ফাংশনগুলি সিঙ্ক্রোনাসভাবে ত্রুটিগুলি পরিচালনা করতে চেষ্টা/ক্যাচ ব্যবহার করতে পারে।

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn() একটি অ্যাসিঙ্ক্রোনাস ফাংশন যা হয় সফল হয় ("পারফেক্ট নম্বর") অথবা একটি ত্রুটির সাথে ব্যর্থ হয় ("দুঃখিত, সংখ্যাটি খুব বড়")।

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

যেহেতু উপরের উদাহরণটি canRejectOrReturn এক্সিকিউট করার আশা করে, তাই এর নিজস্ব ব্যর্থতার ফলে ক্যাচ ব্লক কার্যকর হবে। ফলস্বরূপ, foo ফাংশনটি হয় অনির্ধারিত (যখন ট্রাই ব্লকে কিছুই ফেরত দেওয়া হয় না) অথবা একটি ত্রুটি ধরা দিয়ে শেষ হবে। ফলস্বরূপ, এই ফাংশনটি ব্যর্থ হবে না কারণ চেষ্টা/ক্যাচ ফাংশনটি foo নিজেই পরিচালনা করবে।

এখানে আরেকটি উদাহরণ আছে:

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

এটি মনোযোগ দেওয়া মূল্যবান যে উদাহরণে, canRejectOrReturn foo থেকে ফেরত দেওয়া হয়েছে। এই ক্ষেত্রে Foo হয় একটি নিখুঁত সংখ্যা দিয়ে শেষ হয় বা একটি ত্রুটি ফেরত দেয় ("দুঃখিত, সংখ্যাটি খুব বড়")। ক্যাচ ব্লক কখনই কার্যকর করা হবে না।

সমস্যা হল foo canRejectOrReturn থেকে পাস করা প্রতিশ্রুতি ফেরত দেয়। সুতরাং foo এর সমাধান canRejectOrReturn এর সমাধান হয়ে যায়। এই ক্ষেত্রে, কোড শুধুমাত্র দুটি লাইন গঠিত হবে:

try {
    const promise = canRejectOrReturn();
    return promise;
}

আপনি ওয়েট এবং রিটার্ন একসাথে ব্যবহার করলে এখানে কি হবে:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

উপরের কোডে, foo একটি নিখুঁত সংখ্যা এবং একটি ত্রুটি ধরা উভয়ের সাথে সফলভাবে প্রস্থান করবে। এখানে কোন প্রত্যাখ্যান করা হবে না. কিন্তু foo canRejectOrReturn দিয়ে ফিরবে, undefined দিয়ে নয়। ফিরে আসার অপেক্ষা canRejectOrReturn() লাইনটি সরিয়ে এটি নিশ্চিত করা যাক:

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

সাধারণ ভুল এবং ক্ষতি

কিছু ক্ষেত্রে, Async/Await ব্যবহার করলে ত্রুটি হতে পারে।

অপেক্ষার কথা ভুলে গেছি

এটি প্রায়শই ঘটে - প্রতিশ্রুতির আগে await কীওয়ার্ডটি ভুলে যায়:

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

আপনি দেখতে পাচ্ছেন, কোডটিতে কোন অপেক্ষা বা প্রত্যাবর্তন নেই। তাই foo সর্বদা 1 সেকেন্ড দেরি না করে undefined দিয়ে প্রস্থান করে। তবে প্রতিশ্রুতি পূরণ হবে। যদি এটি একটি ত্রুটি বা প্রত্যাখ্যান নিক্ষেপ করে, তাহলে UnhandledPromiseRejectionWarning বলা হবে।

কলব্যাকে অ্যাসিঙ্ক ফাংশন

Async ফাংশনগুলি প্রায়ই .map বা .filter-এ কলব্যাক হিসাবে ব্যবহৃত হয়। একটি উদাহরণ হল fetchPublicReposCount(username) ফাংশন, যা GitHub-এ খোলা সংগ্রহস্থলের সংখ্যা প্রদান করে। ধরা যাক তিনজন ব্যবহারকারী আছে যাদের মেট্রিক্স আমাদের প্রয়োজন। এখানে এই কাজের জন্য কোড আছে:

const url = 'https://api.github.com/users';
 
// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

আমাদের আরফাত সালমান, অক্টোক্যাট, নরভিগ অ্যাকাউন্ট দরকার। এই ক্ষেত্রে আমরা করি:

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

.map কলব্যাকের অপেক্ষায় মনোযোগ দেওয়া মূল্যবান। এখানে গণনা হল প্রতিশ্রুতির একটি অ্যারে, এবং .map হল প্রতিটি নির্দিষ্ট ব্যবহারকারীর জন্য একটি বেনামী কলব্যাক৷

অপেক্ষার অত্যধিক সামঞ্জস্যপূর্ণ ব্যবহার

আসুন একটি উদাহরণ হিসাবে এই কোড গ্রহণ করা যাক:

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

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

উদাহরণস্বরূপ, যদি একজন ব্যবহারকারীকে প্রক্রিয়া করতে প্রায় 300 ms লাগে, তবে সমস্ত ব্যবহারকারীর জন্য এটি ইতিমধ্যেই এক সেকেন্ড; রৈখিকভাবে ব্যয় করা সময় ব্যবহারকারীর সংখ্যার উপর নির্ভর করে। কিন্তু যেহেতু রেপো সংখ্যা প্রাপ্ত করা একে অপরের উপর নির্ভর করে না, তাই প্রক্রিয়াগুলি সমান্তরাল হতে পারে। এর জন্য .map এবং Promise.all এর সাথে কাজ করতে হবে:

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all ইনপুট হিসাবে প্রতিশ্রুতির একটি অ্যারে পায় এবং একটি প্রতিশ্রুতি প্রদান করে। পরেরটি অ্যারের সমস্ত প্রতিশ্রুতি সম্পূর্ণ হওয়ার পরে বা প্রথম প্রত্যাখ্যানের পরে সম্পন্ন হয়। এটি ঘটতে পারে যে তারা সব একই সময়ে শুরু হয় না - একযোগে শুরু নিশ্চিত করার জন্য, আপনি পি-ম্যাপ ব্যবহার করতে পারেন।

উপসংহার

Async ফাংশন উন্নয়নের জন্য ক্রমশ গুরুত্বপূর্ণ হয়ে উঠছে। ঠিক আছে, অ্যাসিঙ্ক ফাংশনগুলির অভিযোজিত ব্যবহারের জন্য, আপনার ব্যবহার করা উচিত অ্যাসিঙ্ক ইটারেটর. একজন জাভাস্ক্রিপ্ট ডেভেলপারকে এ বিষয়ে পারদর্শী হতে হবে।

Skillbox সুপারিশ করে:

• ব্যবহারিক কোর্স "মোবাইল ডেভেলপার প্রো".
• অনলাইন কোর্সের আবেদন করা হয়েছে "পাইথন ডেটা বিশ্লেষক".
• দুই বছরের ব্যবহারিক কোর্স "আমি একজন প্রো ওয়েব ডেভেলপার".

উত্স: www.habr.com