একটি স্কেলযোগ্য এবং রক্ষণাবেক্ষণযোগ্য প্রতিক্রিয়া ফ্রন্টএন্ড আর্কিটেকচারের পথ

আধুনিক ফ্রন্টেন্ড আর্কিটেকচার - 101

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

প্রেরণা

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

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

উপরে থেকে দেখুন

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

ফ্রন্টএন্ড আর্কিটেকচার বেস

যখন একজন ব্যবহারকারী আমাদের ওয়েব অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করে, তখন অ্যাপটি তাদের সঠিক মডিউলে নিয়ে যায়। প্রতিটি মডিউলে নির্দিষ্ট ফাংশন এবং ব্যবসায়িক যুক্তি থাকে। উপরন্তু, প্রতিটি মডিউল একটি API (REST, GraphQL) এর মাধ্যমে অ্যাপ্লিকেশন স্তর (http / s) ব্যবহার করে ব্যাকএন্ডের সাথে যোগাযোগ করার বিকল্প রয়েছে।

প্রতিক্রিয়া প্রকল্প-সেটআপ

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

app/ > config/ > components/ > services/ > modules/ > shared/
content/ > css/ > img/ > fonts/ > js/
cypress/
i18n/
webpack/
.gitignore
package.json
tsconfig.json
Readme.md

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

আসুন বিস্তারিত চেক আউট

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

মডিউলগুলি যুক্তি সহ বড় UI উপাদান। অন্যান্য মডিউল উপাদান ব্যবহার করতে পারে, কিন্তু অন্যান্য মডিউল নয়। যদি বিভিন্ন মডিউল একে অপরের সাথে যোগাযোগ করতে চায়, আমরা Redux ব্যবহার করি। প্রতিটি মডিউল প্রধান উপাদান, একটি লজিক ফাইল এবং একটি রিডুসার ফাইল নিয়ে গঠিত। আমাদের সম্পূর্ণ ব্যবসা এবং UI যুক্তির জন্য হুক পাওয়া যাবে. রিডুসারে আমরা Redux বাস্তবায়ন এবং সমস্ত API কল রাখতে পারি।

app/ > modules/ > shop/ > shop.tsx > shop.logic.ts > shop.reducer.ts

রিঅ্যাক্ট-এ হুক স্ট্যান্ডার্ড ব্যবহার করে, আমরা লজিকের সম্পূর্ণ কার্যকারিতা আউটসোর্স করি এবং তারপর আমাদের মডিউল কম্পোনেন্টে এই হুকটি ব্যবহার করি।
দোকান মডিউল মধ্যে উপাদান তারপর এই মত দেখতে পারে.

//app/modules/shop/shop.tsx
const Shop = (props) => { const { state, actions, reducer } = useShopLogic(props); return ( <div id="shop"> <Header /> {!state?.loading && <Button onClick={actions?.buyNow}> <Translate contentKey="shop.buyNow"/> </Button>} <FeaturedProducts products={reducer?.products} /> <Footer /> </div> );
};
export default Shop;

এখন হুকের একটি উদাহরণ দেখা যাক। এতে সম্পূর্ণ কোড রয়েছে যা UI এর সাথে ইন্টারঅ্যাকশনের জন্য প্রাসঙ্গিক, সেইসাথে Reducer/ Redux এর মাধ্যমে API এর সাথে যোগাযোগ করার জন্য।

//app/modules/shop/shop.logic.ts
export const useShopLogic = (props) => { const dispatch = useDispatch(); const history = useHistory(); const [loading, setLoading] = useState(false); const { products } = useSelector(({shop}) => { products: shop?.products; }); const buyNow = () => { history.push("/product/1"); }; const loadProducts = () => { setLoading(true); dispatch(ShopReducer.loadProducts()); }; useEffect(() => { if (ProductService.areValid(products)) setLoading(false); }, [products]); useEffect(() => { loadProducts(); }, []); return { state: { loading }, actions: { buyNow }, reducer: { products }, };
};

এখানে একজন পরিষ্কারভাবে দেখতে পাচ্ছেন, UI সংজ্ঞা এবং কার্যকারিতার মধ্যে দায়িত্ব আলাদা করা হয়েছে। এটি যুক্তিটিকে পুনরায় ব্যবহার করতে এবং ইন্টারফেসটিকে সহজেই অভিযোজিত করতে সক্ষম করে।

শপ রিডুসার Redux এর মাধ্যমে বিশ্বব্যাপী রাষ্ট্রীয় যুক্তি পরিচালনা করে।
আমাদের API ফাংশনগুলিও এখানে অবস্থিত, যেগুলিকে যে কোনও জায়গা থেকে কল করা যেতে পারে।

//app/modules/shop/shop.reducer.tsexport const ACTION_TYPES = { FETCH_PRODUCTS: "shop/FETCH_PRODUCTS", RESET: "shop/RESET",
};
const initialState = { products: null, loading: false, success: false,
};
export type ShopState = Readonly<typeof initialState>;
export default (state: ShopState = initialState, action): ShopState => { switch (action.type) { case PENDING(ACTION_TYPES.FETCH_PRODUCTS): return { ...state, success: false, loading: true, }; case FAILURE(ACTION_TYPES.FETCH_PRODUCTS): return { ...state, success: false, loading: false, }; case SUCCESS(ACTION_TYPES.FETCH_PRODUCTS): return { ...state, products: action.payload.data, success: true, loading: false, };case ACTION_TYPES.RESET: return { ...initialState, }; default: return state; }
};
export const getProducts = () => async (dispatch) => { const requestUrl = `${SERVER_API_URL}${API_MAP.getProducts}`;const result = await dispatch({ type: ACTION_TYPES.FETCH_PRODUCTS, payload: axios.get < any > requestUrl, });return result;
};
export const reset = () => ({ type: ACTION_TYPES.RESET,
});

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

সারাংশ

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

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• প্লেটোএআইস্ট্রিম। Web3 ডেটা ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• অ্যাড্রিয়েন অ্যাশলির সাথে ভবিষ্যত মিন্টিং। এখানে প্রবেশ করুন.
• উত্স: https://www.codementor.io/davidminkovski/the-path-to-a-scalable-and-maintainable-react-frontend-architecture-24ei82g29m