ওয়েব সংস্করণের পক্ষে Excalidraw ইলেক্ট্রনকে অবমূল্যায়ন করা

Excalidraw প্রকল্প কেন ওয়েব সংস্করণের পক্ষে তাদের ইলেক্ট্রন র‍্যাপারকে অবমূল্যায়ন করার সিদ্ধান্ত নিয়েছে তা জানুন।

টমাস স্টেইনার
টমাস স্টেইনার

Excalidraw প্রকল্পে , আমরা Excalidraw ডেস্কটপ , Excalidraw-এর জন্য একটি ইলেক্ট্রন র‍্যাপারকে বাতিল করার সিদ্ধান্ত নিয়েছি, যা আপনি excalidraw.com- এ খুঁজে পেতে পারেন—এবং সর্বদাই পারেন—ওয়েব সংস্করণের পক্ষে। সতর্কতার সাথে বিশ্লেষণ করার পর, আমরা সিদ্ধান্ত নিয়েছি যে প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) হল ভবিষ্যত যা আমরা গড়ে তুলতে চাই। কেন তা জানতে পড়ুন।

কিভাবে Excalidraw ডেস্কটপ তৈরি হল

@vjeux জানুয়ারী 2020-এ Excalidraw-এর প্রাথমিক সংস্করণ তৈরি করার এবং এটি সম্পর্কে ব্লগ করার পরপরই, তিনি ইস্যু #561- এ নিম্নলিখিতটি প্রস্তাব করেছিলেন:

Excalidraw কে ইলেক্ট্রন (বা সমতুল্য) মধ্যে মোড়ানো এবং এটিকে বিভিন্ন অ্যাপ স্টোরে একটি [প্ল্যাটফর্ম-নির্দিষ্ট] অ্যাপ্লিকেশন হিসাবে প্রকাশ করা দুর্দান্ত হবে।

@voluntadpear- এর তাত্ক্ষণিক প্রতিক্রিয়াটি পরামর্শ দেওয়া হয়েছিল:

পরিবর্তে এটি একটি PWA তৈরি সম্পর্কে কি? অ্যান্ড্রয়েড বর্তমানে এগুলিকে বিশ্বস্ত ওয়েব অ্যাক্টিভিটি হিসেবে প্লে স্টোরে যুক্ত করা সমর্থন করে এবং আশা করি iOS শীঘ্রই একই কাজ করবে৷ ডেস্কটপে, Chrome আপনাকে PWA-তে একটি ডেস্কটপ শর্টকাট ডাউনলোড করতে দেয়।

@vjeux শেষ পর্যন্ত যে সিদ্ধান্ত নিয়েছিল তা সহজ ছিল:

আমাদের উভয়ই করা উচিত :)

এক্সক্যালিড্রের সংস্করণকে পিডব্লিউএ-তে রূপান্তরের কাজ শুরু করার সময় @voluntadpear এবং পরে অন্যরা, @lipis স্বাধীনভাবে এগিয়ে গিয়ে Excalidraw ডেস্কটপের জন্য একটি পৃথক রেপো তৈরি করেছে।

আজ অবধি, @vjeux- এর দ্বারা নির্ধারিত প্রাথমিক লক্ষ্য, অর্থাৎ, বিভিন্ন অ্যাপ স্টোরে Excalidraw জমা দেওয়ার, এখনও পর্যন্ত পৌঁছানো যায়নি। সত্যি বলতে, কেউ কোনো দোকানে জমা দেওয়ার প্রক্রিয়া শুরু করেনি। কিন্তু কেন এমন হল? আমি উত্তর দেওয়ার আগে, আসুন ইলেক্ট্রন, প্ল্যাটফর্মের দিকে তাকাই।

ইলেকট্রন কি?

ইলেক্ট্রনের অনন্য বিক্রয় পয়েন্ট হল এটি আপনাকে "জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস দিয়ে ক্রস-প্ল্যাটফর্ম ডেস্কটপ অ্যাপ তৈরি করতে" দেয়। ইলেক্ট্রন দিয়ে তৈরি অ্যাপগুলি "ম্যাক, উইন্ডোজ এবং লিনাক্সের সাথে সামঞ্জস্যপূর্ণ" , অর্থাৎ, "ইলেক্ট্রন অ্যাপগুলি তিনটি প্ল্যাটফর্মে তৈরি এবং চালানো হয়" । হোমপেজ অনুসারে, ইলেক্ট্রন যে কঠিন অংশগুলিকে সহজ করে তোলে তা হল স্বয়ংক্রিয় আপডেট , সিস্টেম-স্তরের মেনু এবং বিজ্ঞপ্তি , ক্র্যাশ রিপোর্টিং , ডিবাগিং এবং প্রোফাইলিং এবং উইন্ডোজ ইনস্টলার । দেখা যাচ্ছে, কিছু প্রতিশ্রুত বৈশিষ্ট্যের জন্য ছোট মুদ্রণের বিশদ বিবরণ প্রয়োজন।

  • উদাহরণস্বরূপ, স্বয়ংক্রিয় আপডেটগুলি "[বর্তমানে] শুধুমাত্র [সমর্থিত] macOS এবং Windows এ। Linux-এ স্বয়ংক্রিয়-আপডেটারের জন্য কোনও অন্তর্নির্মিত সমর্থন নেই, তাই আপনার অ্যাপ আপডেট করতে বিতরণের প্যাকেজ ম্যানেজার ব্যবহার করার পরামর্শ দেওয়া হচ্ছে"।

  • ডেভেলপাররা Menu.setApplicationMenu(menu) কল করে সিস্টেম-স্তরের মেনু তৈরি করতে পারেন। উইন্ডোজ এবং লিনাক্সে, মেনুটি প্রতিটি উইন্ডোর শীর্ষ মেনু হিসাবে সেট করা হবে, যখন macOS-এ অনেকগুলি সিস্টেম-সংজ্ঞায়িত স্ট্যান্ডার্ড মেনু রয়েছে, যেমন পরিষেবা মেনু। একজনের মেনুকে একটি স্ট্যান্ডার্ড মেনুতে পরিণত করতে, ডেভেলপারদের তাদের মেনুর role সেই অনুযায়ী সেট করা উচিত এবং ইলেক্ট্রন তাদের চিনবে এবং সেগুলিকে আদর্শ মেনুতে পরিণত করবে। এর মানে হল যে অনেক মেনু-সম্পর্কিত কোড নিম্নলিখিত প্ল্যাটফর্ম চেক ব্যবহার করবে: const isMac = process.platform === 'darwin'

  • উইন্ডোজ ইনস্টলার উইন্ডোজ-ইনস্টলার দিয়ে তৈরি করা যেতে পারে। প্রজেক্টের README হাইলাইট করে যে "একটি প্রোডাকশন অ্যাপের জন্য আপনাকে আপনার আবেদনে স্বাক্ষর করতে হবে। ইন্টারনেট এক্সপ্লোরারের স্মার্টস্ক্রিন ফিল্টার আপনার অ্যাপটিকে ডাউনলোড করা থেকে ব্লক করবে এবং অনেক অ্যান্টি-ভাইরাস বিক্রেতারা আপনার অ্যাপটিকে ম্যালওয়্যার হিসেবে বিবেচনা করবে যদি না আপনি একটি বৈধ শংসাপত্র না পান" [sic]।

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

যেখানে Excalidraw ডেস্কটপ ছেড়ে গেছে

Excalidraw ডেস্কটপ এখন পর্যন্ত মূলত Excalidraw ওয়েব অ্যাপটি একটি .asar ফাইল হিসেবে বান্ডিল করা হয়েছে এবং একটি Excalidraw উইন্ডোর সাথে যুক্ত হয়েছে। অ্যাপ্লিকেশনটির চেহারা এবং অনুভূতি প্রায় ওয়েব সংস্করণের অনুরূপ।

Excalidraw ডেস্কটপ অ্যাপ্লিকেশনটি একটি ইলেক্ট্রন মোড়কে চলছে।
Excalidraw ডেস্কটপ ওয়েব সংস্করণ থেকে প্রায় আলাদা করা যায় না
Excalidraw ডেস্কটপ 'সম্পর্কে' উইন্ডোটি ইলেক্ট্রন র‍্যাপার এবং ওয়েব অ্যাপের সংস্করণ প্রদর্শন করছে।
এক্সক্যালিবার সম্পর্কে মেনু সংস্করণগুলির অন্তর্দৃষ্টি প্রদান করে

macOS-এ, এখন অ্যাপ্লিকেশনের শীর্ষে একটি সিস্টেম-স্তরের মেনু রয়েছে, কিন্তু যেহেতু মেনু অ্যাকশনগুলির কোনওটিই - ক্লোজ উইন্ডো এবং অ্যাবাউট এক্সক্যালিড্র ছাড়া - কোনও কিছুর সাথে যুক্ত নয়, তাই মেনুটি বর্তমান অবস্থায়, বেশ সুন্দর অকেজো ইতিমধ্যে, সমস্ত ক্রিয়া অবশ্যই নিয়মিত Excalidraw টুলবার এবং প্রসঙ্গ মেনুর মাধ্যমে সঞ্চালিত হতে পারে।

'ফাইল', 'উইন্ডো বন্ধ করুন' মেনু আইটেমটি নির্বাচিত সহ macOS-এ Excalidraw ডেস্কটপ মেনু বার।
MacOS-এ Excalidraw ডেস্কটপের মেনু বার

আমরা ইলেকট্রন-বিল্ডার ব্যবহার করি, যা ফাইল টাইপ অ্যাসোসিয়েশন সমর্থন করে। একটি .excalidraw ফাইলে ডাবল ক্লিক করে, আদর্শভাবে Excalidraw ডেস্কটপ অ্যাপটি খুলতে হবে। আমাদের electron-builder.json ফাইলের প্রাসঙ্গিক উদ্ধৃতিটি এইরকম দেখাচ্ছে:

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

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

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

কিভাবে ওয়েব আজ এবং ভবিষ্যতে আমাদের পরিবেশন করে

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

ইনস্টলযোগ্য প্রগতিশীল ওয়েব অ্যাপ

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

Chrome DevTools অ্যাপ্লিকেশন ট্যাব দুটি Excalidraw ক্যাশে দেখাচ্ছে।
Excalidraw এর ক্যাশে বিষয়বস্তু

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

Excalidraw ব্যবহারকারীকে ম্যাকওএস-এ Chrome-এ অ্যাপটি ইনস্টল করার অনুরোধ জানায়।
ক্রোমে Excalidraw ইনস্টল ডায়ালগ

Excalidraw একটি স্বতন্ত্র অ্যাপ্লিকেশন হিসাবে চালানোর জন্য কনফিগার করা হয়েছে, তাই আপনি এটি ইনস্টল করার সময়, আপনি একটি অ্যাপ পাবেন যা তার নিজস্ব উইন্ডোতে চলে। এটি অপারেটিং সিস্টেমের মাল্টিটাস্কিং UI-তে সম্পূর্ণরূপে একত্রিত এবং হোম স্ক্রীন, ডক বা টাস্ক বারে এর নিজস্ব অ্যাপ আইকন পায়; প্ল্যাটফর্মের উপর নির্ভর করে যেখানে আপনি এটি ইনস্টল করবেন।

এক্সক্যালিড্র তার নিজস্ব উইন্ডোতে চলছে।
একটি স্বতন্ত্র উইন্ডোতে Excalidraw PWA
MacOS ডকে Excalidraw আইকন।
MacOS ডকে Excalidraw আইকন

ফাইল সিস্টেম অ্যাক্সেস

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

সমর্থন টানুন এবং ছেড়ে দিন

প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনগুলির মতোই ফাইলগুলিকে টেনে এনে Excalidraw উইন্ডোতে ফেলে দেওয়া যেতে পারে। ফাইল সিস্টেম অ্যাক্সেস API সমর্থন করে এমন একটি ব্রাউজারে, একটি বাদ দেওয়া ফাইল অবিলম্বে সম্পাদনা করা যেতে পারে এবং পরিবর্তনগুলি মূল ফাইলে সংরক্ষণ করা যেতে পারে। এটি এতটাই স্বজ্ঞাত যে আপনি মাঝে মাঝে ভুলে যান যে আপনি একটি ওয়েব অ্যাপের সাথে কাজ করছেন।

ক্লিপবোর্ড অ্যাক্সেস

Excalidraw অপারেটিং সিস্টেমের ক্লিপবোর্ডের সাথে ভাল কাজ করে। সম্পূর্ণ Excalidraw অঙ্কন বা শুধুমাত্র পৃথক বস্তু image/png এবং image/svg+xml ফরম্যাটে কপি ও পেস্ট করা যেতে পারে, যা Inkscape- এর মতো অন্যান্য প্ল্যাটফর্ম-নির্দিষ্ট টুল বা SVGOMG- এর মতো ওয়েব-ভিত্তিক টুলগুলির সাথে সহজে একীকরণের অনুমতি দেয়।

Excalidraw প্রসঙ্গ মেনু 'SVG হিসেবে ক্লিপবোর্ডে কপি' এবং 'PNG হিসেবে ক্লিপবোর্ডে কপি' মেনু আইটেম দেখাচ্ছে।
Excalidraw প্রসঙ্গ মেনু ক্লিপবোর্ড ক্রিয়া অফার করে

ফাইল হ্যান্ডলিং

Excalidraw ইতিমধ্যেই পরীক্ষামূলক ফাইল হ্যান্ডলিং API সমর্থন করে, যার মানে হল .excalidraw ফাইলগুলি অপারেটিং সিস্টেমের ফাইল ম্যানেজারে ডাবল-ক্লিক করা যেতে পারে এবং সরাসরি Excalidraw অ্যাপে খোলা যেতে পারে, যেহেতু Excalidraw অপারেটিং সিস্টেমে .excalidraw ফাইলগুলির জন্য একটি ফাইল হ্যান্ডলার হিসাবে নিবন্ধন করে৷

Excalidraw অঙ্কন লিঙ্ক দ্বারা শেয়ার করা যেতে পারে. এখানে একটি উদাহরণ . ভবিষ্যতে, যদি লোকেদের একটি PWA হিসাবে Excalidraw ইনস্টল করা থাকে, এই ধরনের লিঙ্কগুলি ব্রাউজার ট্যাবে খুলবে না, তবে একটি নতুন স্বতন্ত্র উইন্ডো চালু করবে। মুলতুবি বাস্তবায়ন, এটি একটি নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যের জন্য ঘোষণামূলক লিঙ্ক ক্যাপচারিং , এবং লেখার সময়, ব্লিডিং-এজ প্রস্তাবের জন্য ধন্যবাদ কাজ করবে।

উপসংহার

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

ইলেক্ট্রন আমাদের ভাল পরিবেশন করেছে, কিন্তু 2020 এবং তার পরে, আমরা এটি ছাড়া বাঁচতে পারি। ওহ, এবং @vjeux- এর সেই উদ্দেশ্যের জন্য: যেহেতু অ্যান্ড্রয়েড প্লে স্টোর এখন ট্রাস্টেড ওয়েব অ্যাক্টিভিটি নামে একটি কন্টেইনার ফর্ম্যাটে PWAs গ্রহণ করে এবং যেহেতু Microsoft স্টোর PWA-কে সমর্থন করে , তাই আপনি খুব দূর ভবিষ্যতে এই স্টোরগুলিতে Excalidraw আশা করতে পারেন। এদিকে, আপনি সর্বদা ব্রাউজারে এবং থেকে Excalidraw ব্যবহার এবং ইনস্টল করতে পারেন।

স্বীকৃতি

এই নিবন্ধটি @lipis , @dwelle , এবং Joe Medley দ্বারা পর্যালোচনা করা হয়েছে।