Habr ফ্রন্ট-এন্ড ডেভেলপার লগ: রিফ্যাক্টরিং এবং রিফ্লেক্টিং

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

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

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

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

এর টাস্ক সেট করা যাক

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

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

রিফ্যাক্টর করার আগে মোবাইল হাবর ইন্টারফেস

এখানে কি হচ্ছে? সংক্ষেপে, ব্যবহারকারী লগ ইন করুক বা না করুক না কেন সার্ভারটি সকলের কাছে একইভাবে HTML পৃষ্ঠা পরিবেশন করেছে। তারপর ক্লায়েন্ট JS লোড হয় এবং আবার প্রয়োজনীয় ডেটা অনুরোধ করে, কিন্তু অনুমোদনের জন্য সামঞ্জস্য করা হয়। অর্থাৎ, আমরা আসলে একই কাজ দুবার করেছি। ইন্টারফেস ঝাঁকুনি, এবং ব্যবহারকারী একটি ভাল শত অতিরিক্ত কিলোবাইট ডাউনলোড. বিস্তারিতভাবে সবকিছু আরও ভয়ঙ্কর লাগছিল।

পুরানো SSR-CSR স্কিম। অনুমোদন কেবলমাত্র C3 এবং C4 পর্যায়ে সম্ভব, যখন নোড জেএস এইচটিএমএল তৈরিতে ব্যস্ত থাকে না এবং API-তে প্রক্সি অনুরোধ করতে পারে।

আমাদের সেই সময়ের স্থাপত্যটি হাবর ব্যবহারকারীদের একজন দ্বারা খুব সঠিকভাবে বর্ণনা করা হয়েছিল:

মোবাইল সংস্করণ বাজে. আমি এটা যেমন আছে বলছি. SSR এবং CSR এর একটি ভয়ানক সমন্বয়।

এটা যতই দুঃখজনক হোক না কেন আমাদের এটা স্বীকার করতেই হবে।

আমি বিকল্পগুলি মূল্যায়ন করেছি, "এটি এখন খারাপ, এটি ঠিক করুন" এর স্তরে একটি বর্ণনা সহ জিরাতে একটি টিকিট তৈরি করেছি এবং কাজটি বিস্তৃত স্ট্রোকে পচিয়েছি:

• ডেটা পুনঃব্যবহার,
• পুনরায় অঙ্কনের সংখ্যা হ্রাস করুন,
• সদৃশ অনুরোধ বাদ দিন,
• লোডিং প্রক্রিয়া আরও সুস্পষ্ট করুন।

এর ডেটা পুনরায় ব্যবহার করা যাক

তাত্ত্বিকভাবে, সার্ভার-সাইড রেন্ডারিং দুটি সমস্যা সমাধানের জন্য ডিজাইন করা হয়েছে: সার্চ ইঞ্জিনের সীমাবদ্ধতার পরিপ্রেক্ষিতে ভুগবেন না। এসপিএ ইনডেক্সিং এবং মেট্রিক উন্নত করুন এফএমপি (অনিবার্যভাবে খারাপ হচ্ছে TTI) একটি ক্লাসিক পরিস্থিতিতে যে অবশেষে 2013 সালে Airbnb এ প্রণয়ন করা হয়েছে বছর (এখনও Backbone.js এ), SSR হল একই আইসোমরফিক JS অ্যাপ্লিকেশন যা নোড পরিবেশে চলছে। সার্ভার কেবল অনুরোধের প্রতিক্রিয়া হিসাবে জেনারেট করা লেআউট পাঠায়। তারপরে ক্লায়েন্টের দিকে রিহাইড্রেশন ঘটে এবং তারপরে পৃষ্ঠা পুনরায় লোড ছাড়াই সবকিছু কাজ করে। হাবরের জন্য, টেক্সট বিষয়বস্তু সহ অন্যান্য সংস্থানগুলির জন্য, সার্ভার রেন্ডারিং সার্চ ইঞ্জিনগুলির সাথে বন্ধুত্বপূর্ণ সম্পর্ক গড়ে তোলার একটি গুরুত্বপূর্ণ উপাদান।

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

কেন? এই প্রশ্নের কোন সঠিক উত্তর নেই। হয় তারা সার্ভার থেকে প্রতিক্রিয়ার আকার বাড়াতে চায়নি, বা অন্যান্য স্থাপত্য সমস্যার একগুচ্ছ কারণে, বা এটি কেবল বন্ধ হয়নি। একটি উপায় বা অন্যভাবে, রাষ্ট্র নিক্ষেপ করা এবং সার্ভার যা করেছে তা পুনঃব্যবহার করা বেশ উপযুক্ত এবং দরকারী বলে মনে হচ্ছে। কাজটা আসলে তুচ্ছ- রাষ্ট্র সহজভাবে ইনজেকশনের হয় এক্সিকিউশন প্রেক্ষাপটে, এবং Vue স্বয়ংক্রিয়ভাবে এটিকে একটি গ্লোবাল ভেরিয়েবল হিসাবে জেনারেট করা লেআউটে যুক্ত করে: window.__INITIAL_STATE__.

উদ্ভূত সমস্যাগুলির মধ্যে একটি হল চক্রীয় কাঠামোকে JSON-এ রূপান্তর করতে অক্ষমতা (বিজ্ঞপ্তি রেফারেন্স); কেবল তাদের সমতল অংশগুলির সাথে এই জাতীয় কাঠামো প্রতিস্থাপন করে সমাধান করা হয়েছিল।

উপরন্তু, UGC বিষয়বস্তু নিয়ে কাজ করার সময়, আপনার মনে রাখা উচিত যে ডেটা HTML সত্তায় রূপান্তরিত করা উচিত যাতে HTML ভেঙে না যায়। এই উদ্দেশ্যে আমরা ব্যবহার করি he.

ন্যূনতম redraws

আপনি উপরের চিত্র থেকে দেখতে পাচ্ছেন, আমাদের ক্ষেত্রে, একটি নোড জেএস ইন্সট্যান্স দুটি ফাংশন সম্পাদন করে: API-তে SSR এবং "প্রক্সি", যেখানে ব্যবহারকারীর অনুমোদন ঘটে। এই পরিস্থিতিতে JS কোড সার্ভারে চলাকালীন অনুমোদন করা অসম্ভব করে তোলে, যেহেতু নোডটি একক-থ্রেডেড, এবং SSR ফাংশনটি সিঙ্ক্রোনাস। অর্থাৎ, কলস্ট্যাক কিছু নিয়ে ব্যস্ত থাকাকালীন সার্ভার কেবল নিজের কাছে অনুরোধ পাঠাতে পারে না। দেখা গেল যে আমরা স্টেট আপডেট করেছি, কিন্তু ইন্টারফেসটি টুইচিং বন্ধ করেনি, যেহেতু ক্লায়েন্টের ডেটা ব্যবহারকারীর সেশনকে বিবেচনায় নিয়ে আপডেট করতে হয়েছিল। ব্যবহারকারীর লগইনকে বিবেচনায় নিয়ে আমাদের অ্যাপ্লিকেশনটিকে প্রাথমিক অবস্থায় সঠিক ডেটা রাখতে শেখাতে হবে।

সমস্যার শুধুমাত্র দুটি সমাধান ছিল:

• ক্রস সার্ভার অনুরোধে অনুমোদন তথ্য সংযুক্ত করুন;
• নোড জেএস স্তরগুলিকে দুটি পৃথক উদাহরণে বিভক্ত করুন।

প্রথম সমাধানটির জন্য সার্ভারে গ্লোবাল ভেরিয়েবল ব্যবহার করা প্রয়োজন এবং দ্বিতীয়টি কমপক্ষে এক মাস কাজটি সম্পূর্ণ করার সময়সীমা বাড়িয়েছে।

কিভাবে একটি পছন্দ করতে? হাবর প্রায়ই ন্যূনতম প্রতিরোধের পথ ধরে চলে। অনানুষ্ঠানিকভাবে, ধারণা থেকে প্রোটোটাইপে চক্রটিকে ন্যূনতম পর্যন্ত হ্রাস করার একটি সাধারণ ইচ্ছা রয়েছে। পণ্যের প্রতি মনোভাবের মডেলটি booking.com-এর পোস্টুলেটগুলির কিছুটা স্মরণ করিয়ে দেয়, একমাত্র পার্থক্য হল Habr ব্যবহারকারীর প্রতিক্রিয়াকে অনেক বেশি গুরুত্ব সহকারে নেয় এবং এই ধরনের সিদ্ধান্ত নেওয়ার জন্য একজন বিকাশকারী হিসাবে আপনাকে বিশ্বাস করে।

এই যুক্তি এবং দ্রুত সমস্যার সমাধান করার জন্য আমার নিজের ইচ্ছা অনুসরণ করে, আমি বিশ্বব্যাপী ভেরিয়েবল বেছে নিয়েছি। এবং, প্রায়শই ঘটে, আপনাকে তাড়াতাড়ি বা পরে তাদের জন্য অর্থ প্রদান করতে হবে। আমরা প্রায় অবিলম্বে অর্থ প্রদান করেছি: আমরা সপ্তাহান্তে কাজ করেছি, পরিণতিগুলি পরিষ্কার করেছি, লিখেছি ময়না তদন্ত এবং সার্ভারকে দুই ভাগে ভাগ করতে শুরু করে। ত্রুটিটি খুব বোকা ছিল, এবং এতে জড়িত বাগটি পুনরুত্পাদন করা সহজ ছিল না। এবং হ্যাঁ, এটির জন্য লজ্জাজনক, তবে এক বা অন্য উপায়ে, হোঁচট খেয়ে এবং হাহাকার করে, বিশ্বব্যাপী ভেরিয়েবল সহ আমার PoC তবুও উত্পাদনে চলে গেছে এবং একটি নতুন "টু-নোড" আর্কিটেকচারে যাওয়ার জন্য অপেক্ষা করার সময় বেশ সফলভাবে কাজ করছে। এটি একটি গুরুত্বপূর্ণ পদক্ষেপ ছিল, কারণ আনুষ্ঠানিকভাবে লক্ষ্যটি অর্জন করা হয়েছিল - SSR একটি সম্পূর্ণরূপে ব্যবহারের জন্য প্রস্তুত পৃষ্ঠা সরবরাহ করতে শিখেছে এবং UI অনেক শান্ত হয়ে উঠেছে।

রিফ্যাক্টরিং এর প্রথম পর্যায়ে মোবাইল হাবর ইন্টারফেস

শেষ পর্যন্ত, মোবাইল সংস্করণের SSR-CSR আর্কিটেকচার এই ছবিটির দিকে নিয়ে যায়:

"টু-নোড" SSR-CSR সার্কিট। নোড জেএস এপিআই সবসময় অ্যাসিঙ্ক্রোনাস I/O-এর জন্য প্রস্তুত থাকে এবং SSR ফাংশন দ্বারা ব্লক করা হয় না, যেহেতু পরবর্তীটি একটি পৃথক উদাহরণে অবস্থিত। ক্যোয়ারী চেইন #3 প্রয়োজন নেই।

ডুপ্লিকেট অনুরোধ বাদ দেওয়া হচ্ছে

ম্যানিপুলেশনগুলি সঞ্চালিত হওয়ার পরে, পৃষ্ঠাটির প্রাথমিক রেন্ডারিং আর মৃগীরোগকে উস্কে দেয়নি। কিন্তু SPA মোডে হাবরের আরও ব্যবহার এখনও বিভ্রান্তির সৃষ্টি করেছে।

যেহেতু ব্যবহারকারী প্রবাহের ভিত্তি হল ফর্মের রূপান্তর নিবন্ধের তালিকা → নিবন্ধ → মন্তব্য এবং তদ্বিপরীত, প্রথম স্থানে এই চেইনের সম্পদ খরচ অপ্টিমাইজ করা গুরুত্বপূর্ণ ছিল।

পোস্ট ফিডে ফিরে আসা একটি নতুন ডেটা অনুরোধ উস্কে দেয়

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

ArticlesList: [
  { Article1 },
  ...
],
PageArticle: { ArticleFull1 },

মোট, আমরা একটি মডিউল ছিল নিবন্ধের তালিকা, যা টাইপের বস্তু ধারণ করে প্রবন্ধ এবং মডিউল পৃষ্ঠা নিবন্ধ, যা বস্তুর একটি বর্ধিত সংস্করণ ছিল প্রবন্ধ, ধরনের আর্টিকেলফুল. সর্বোপরি, এই বাস্তবায়নটি নিজের মধ্যে ভয়ানক কিছু বহন করে না - এটি খুব সহজ, কেউ বলতে পারে নির্বোধ, তবে অত্যন্ত বোধগম্য। আপনি যদি প্রতিবার রুট পরিবর্তন করার সময় মডিউলটি রিসেট করেন, তাহলে আপনি এটির সাথে বাঁচতেও পারবেন। যাইহোক, আর্টিকেল ফিডের মধ্যে চলন্ত, উদাহরণস্বরূপ /feed → /all, ব্যক্তিগত ফিডের সাথে সম্পর্কিত সমস্ত কিছু ফেলে দেওয়ার গ্যারান্টি দেওয়া হয়, যেহেতু আমাদের কাছে শুধুমাত্র একটি আছে৷ নিবন্ধের তালিকা, যাতে আপনাকে নতুন ডেটা রাখতে হবে। এটি আবার আমাদের অনুরোধের নকলের দিকে নিয়ে যায়।

আমি এই বিষয়ে খনন করতে সক্ষম হয়েছি এমন সমস্ত কিছু সংগ্রহ করার পরে, আমি একটি নতুন রাষ্ট্র কাঠামো প্রণয়ন করেছি এবং আমার সহকর্মীদের কাছে উপস্থাপন করেছি। আলোচনাগুলি দীর্ঘ ছিল, কিন্তু শেষ পর্যন্ত পক্ষে যুক্তিগুলি সন্দেহকে ছাড়িয়ে যায় এবং আমি বাস্তবায়ন শুরু করি।

একটি সমাধানের যুক্তি দুটি ধাপে সর্বোত্তমভাবে প্রকাশিত হয়। প্রথমে আমরা পৃষ্ঠাগুলি থেকে Vuex মডিউলটি ডিকপল করার চেষ্টা করি এবং সরাসরি রুটের সাথে আবদ্ধ করার চেষ্টা করি। হ্যাঁ, স্টোরে একটু বেশি ডেটা থাকবে, গেটাররা একটু বেশি জটিল হয়ে উঠবে, কিন্তু আমরা দুইবার নিবন্ধ লোড করব না। মোবাইল সংস্করণের জন্য, এটি সম্ভবত সবচেয়ে শক্তিশালী যুক্তি। এটি এই মত কিছু দেখাবে:

ArticlesList: {
  ROUTE_FEED: [ 
    { Article1 },
    ...
  ],
  ROUTE_ALL: [ 
    { Article2 },
    ...
  ],
}

কিন্তু যদি নিবন্ধ তালিকা একাধিক রুটের মধ্যে ওভারল্যাপ করতে পারে এবং আমরা যদি অবজেক্ট ডেটা পুনরায় ব্যবহার করতে চাই তবে কী হবে প্রবন্ধ পোস্ট পেজ রেন্ডার করতে, এটিকে পরিণত করে আর্টিকেলফুল? এই ক্ষেত্রে, এই জাতীয় কাঠামো ব্যবহার করা আরও যুক্তিযুক্ত হবে:

ArticlesIds: {
  ROUTE_FEED: [ '1', ... ],
  ROUTE_ALL: [ '1', '2', ... ],
},
ArticlesList: {
  '1': { Article1 }, 
  '2': { Article2 },
  ...
}

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

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

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

ডাউনলোড করা আরও উপভোগ্য করে তুলছে

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

হ্যাব্রালোডিং

প্রতিফলিত

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

এই সমস্ত পরিবর্তন প্রকাশের পরে, আমরা ইতিবাচক প্রতিক্রিয়া পেয়েছি, এবং এটি খুব, খুব সুন্দর ছিল। এটা অনুপ্রেরণাদায়ক. ধন্যবাদ! আরও লিখুন।

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

উত্স: www.habr.com