একটি স্কেলযোগ্য প্রতিক্রিয়া ইউআই কিট কীভাবে তৈরি করবেন

ছবি করেছেন ব্লেক হুইলারের

ট্র্যাভিক্সে আমাদের 4 টি আলাদা থিম সহ একটি পণ্য রয়েছে product প্রতিটি থিম একটি পৃথক ব্র্যান্ড এবং প্রতিটি ব্র্যান্ডের কয়েকটি ওয়েবসাইট রয়েছে। 45 টিরও বেশি ওয়েবসাইট বর্তমানে আমাদের প্ল্যাটফর্মে সক্রিয় রয়েছে।

আমাদের 4 টি বিভিন্ন ব্র্যান্ডের দুটি

প্রায় 40 টি ফ্রন্ট-এন্ড বিকাশকারী পণ্যটিতে এটি কাজ করে কাজ করছে এবং কোড বেস এবং ডিজাইনের ধারাবাহিকতা বজায় রাখা বেশ কঠিন।

আপনি যদি একটি বড় প্রতিক্রিয়া প্রকল্পে কাজ করছেন তবে আপনার কোড বেসে কিছুটা ইউআই কিট তৈরির সম্ভাবনা রয়েছে। সাধারণ বোতাম উপাদান, একটি জেনেরিক মডেল বাস্তবায়ন, একটি ক্যালেন্ডার যা আপনি সর্বদা ব্যবহার করেন, সাধারণ উপাদানগুলিতে কোনও ব্যবসায়িক যুক্তি থাকে না।

এই নিবন্ধটির মূল উদ্দেশ্য হ'ল আপনাকে আপনার ইউআই কিটটি বিকাশ এবং সংগঠিত করতে সহায়তা করা যাতে আপনি আপনার বিকাশ প্রক্রিয়া এবং আপনার প্রকল্পের নকশার ধারাবাহিকতা উন্নত করতে পারেন।

আপনি যেমন কল্পনা করতে পারেন, এই গ্রন্থাগারটি কেবল আপনার উন্নয়ন দলের উপর নির্ভর করে না। আপনার ডিজাইনারদেরও জড়িত করা উচিত। আপনার ডিজাইন টিম 9 টি ভিন্ন বোতাম এবং 22 ফন্ট আকারের অনুরোধ জানালে আপনি কতটা অভিজ্ঞ বা আপনি কোন প্রযুক্তি চয়ন করেন তা বিবেচ্য নয়।

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

প্রযুক্তি

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

গল্পের বই

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

পুনরায় ব্যবহারযোগ্য উপাদান নয়

একটি বোতাম একটি নির্দিষ্ট প্রয়োগ

জেনেরিক উপাদান

একটি বোতামের জেনেরিক বাস্তবায়ন

ডকুমেন্টেশন সরবরাহের জন্য স্টোরিবুকও দুর্দান্ত। স্টোরিবুক-অ্যাডন-ইনফর্ম নামে একটি অ্যাডন রয়েছে যা স্বয়ংক্রিয়ভাবে উপাদান জেএসএক্স এবং প্রোপ টাইপের বিবরণটি উপাদান পৃষ্ঠায় যুক্ত করে।

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

নকশা করা উপাদান

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

খাঁটি সিএসএস সহ থিমিং

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

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

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

আমাদের উপাদানগুলিতে ব্যবহারের জন্য নির্বাচিত বিষয় উপলব্ধ

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

থিম নির্বাচনকারী অ্যাডন

প্রকারলিপি

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

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

টাইপস্ক্রিপ্ট স্বতঃপূরণ

এসলিন্ট

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

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

উন্নয়ন প্রক্রিয়া

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

আরএফসি টানার অনুরোধ

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

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

অনুরোধ পর্যালোচনা টানুন

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

সিআই পদক্ষেপ: - এসলিন্ট এবং পরীক্ষা চালান। - কোড কভারেজ কমছে না তা পরীক্ষা করে দেখুন। - একটি অনন্য স্টোরিবুক পরিবেশ তৈরি করুন (আপনি যখন নতুন কিছু প্রতিশ্রুতিবদ্ধ তখন পরিবেশও আপডেট করে)।

আপনার টানার অনুরোধটি পর্যালোচনা করা বিকাশকারীদের কেবল এটি পরীক্ষা করে নেওয়া দরকার যে ইতিমধ্যে বাস্তবায়ন ইতিমধ্যে অনুমোদিত আরএফসির সাথে মেনে চলে এবং নকশাটি সঠিক।

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

একটি নতুন সংস্করণ প্রকাশ

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

উপসংহার

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

আমাদের ইউআই উপাদানগুলি বিচ্ছিন্ন রাখায় যে কোনও বড় ইউআই আপডেট করা সহজ এবং এটি একটি নতুন ব্র্যান্ড যুক্ত করাও বেশ সহজ। আপনাকে যা করতে হবে তা হ'ল একটি নতুন ডিজাইনের ফাইল যুক্ত করা।

আমাদের বিষয়বস্তু ঘোষণাকে বাহ্যিক লাইব্রেরিতে স্থানান্তরিত করার আরেকটি সুবিধা হ'ল আমাদের মূল অ্যাপ্লিকেশনটি বিষয়টিকে মোটেই পাত্তা দেয় না। সেই অর্থে, এটি আমাদের রাজ্যবিহীন গ্রন্থাগারটি আমাদের সমস্ত বিষয়ের যত্ন নেয় state

এবং যখন আপনার কাছে কোড ব্যবহারকারী ডিজাইনের একটি দল রয়েছে (এটি ইউনিকর্ন নামেও পরিচিত), তারা এই গ্রন্থাগারটির প্রোটোটাইপিং শুরু করতে পারেন। এটি কি সবচেয়ে বিশ্বস্ততা প্রোটোটাইপ না?

ট্র্যাভিক্সের সাথে আমরা যা ব্যবহার করছি তার অনুরূপ যদি আপনি কিছু ব্যবহার করতে চান তবে আমি কোড বেসের অংশটি বের করব এবং স্টাইল্ড উপাদান, টাইপস্ক্রিপ্ট এবং জাস্ট সহ একটি ছোট বয়লারপ্লেট তৈরি করব। এটি সবকিছু সেট আপ করা বেশ বিরক্তিকর ছিল তাই আমি আশা করি আপনি এটি পছন্দ করেছেন: https://github.com/leandrooriente/react-ui-kit-boilerplate।

পড়ার জন্য আপনাকে ধন্যবাদ.