طراحی Front-end از نگاهی نو

شاید یکی از سختی ها یا (از زاویه ای دیگر) شیرینی های طراحی وب، سرعت گسترش و پیشرفت بسیار بالای آن باشد. تا زمانی که با این جریان همراه باشید مشکلی نیست اما شاید دور بودن از این فضا حتی برای مدتی اندک، شما را به اندازه نسلی از تکنولوژی عقب بیندازد. در این پست چند موضوع مرتبط با طراحی Front-end که اخیراً مورد توجه بیشتری قرار گرفته است بررسی خواهد شد.
این پست، ترجمه قسمتی از نوشته ای در همین مورد است که با برداشتی آزاد برخی موارد تغییر کرده اند. در پست اصلی، لینک های فوق العاده ای به مقالات مرتبط وجود دارد که می توانید از اینجا به آن ها دسترسی داشته باشید.

یکی از پربحث ترین موضوعات در حوزه Front-end در سالی که گذشت Micro Front-end بود که به نظر می رسد در سال آتی نیز همچنان مهد صحبت باشد. امروزه در حالیکه توسعه Front-end از برتری های طراحی ماژولار کامپوننت ها استفاده می کند اما هنوز بسیار یکپارچه تر از Back-end Micro services است که این موضوع گستردگی نرم افزارها را مشکل خواهد کرد.


در سال های اخیر، مایکرو سرویس ها به دلیل استفاده گسترده سازمان ها و با هدف جلوگیری از محدودیت Back-end بزرگ و یکپارچه بسیار محبوب شدند. زمانی که مطالب زیادی در مورد ساخت چنین نرم افزارهای server-side نوشته شده بود، بسیاری از شرکت ها درگیر پایه ها و مباحث اساسی Front-end یکپارچه خود بودند.
شاید بخواهید اپلیکیشن وبی Progressive و Responsive بسازید اما نقطه مناسبی برای شروع یکپارچه سازی این ویژگی ها پیدا نکرده باشید یا مایل به استفاده از ویژگی های جدید زبان جاوا اسکریپت بوده (یا هر زبانی که به جاوا اسکریپت کامپایل شود)، اما نتوانسته اید ابزار تولید مناسب را در روند ساخت خود جای دهید. حتی ممکن است قصد گسترش تیم توسعه خود را داشته باشید به شکلی که چند تیم به صورت همزمان بر روی یک محصول کار کنند، اما پیچیدگی و در هم تنیدگی اجزای موجود و یکپارچگی بیش از حد مانع از این موضوع شود. این موارد، مشکلاتی واقعی هستند که تاثیر منفی بر کارایی و توانایی شما، تیم و کیفیت محصول مشتری خواهد گذاشت.
اخیراً توجه بیشتری به کلیت معماری نرم افزاری، سازماندهی و ساختار نرم افزارهای مبتنی بر وب مدرن و پیچیده شده است. به طور خاص،  شاهد هستیم که الگوهای تجزیه Front-end یکپارچه به قطعات ساده و کوچک تر قابل توسعه در حال رشد هستند، که قابلیت تست داشته و به شکل جداگانه استقرار پیدا می کنند. در حالی که هنوز نتیجه مجموعه این امکانات برای مشتری، محصولی منسجم است. این تکنیک Micro Front-end نامیده می شود:
"یک سبک از معماری که در آن برنامه های Front-end مستقل و قابل تحویل، به عنوان یک جز از بخشی بزرگ تر قابل استفاده هستند."
معماری Micro Front-end، تضمین کننده شکستن برنامه به اجزای کوچکتر مختلف بوده که توسط تیم های مختلف و به منظوری خاص تولید شده است. هر گروه می تواند رویه و Life-cycle خاص خود را داشته باشند، کدهایی که می توانند پس از توسعه و نسخه گذاری، تست شده و به سادگی بروزرسانی یا به شکل جداگانه استقرار یابند (به طور مثال با استفاده از ابزارهایی مانند Bit).
اگر چه در این اکوسیستم کمبودهایی وجود دارد، بیشتر مواقع، عمده نگرانی تیم ها استقرار سیستم های مختلف با یکدیگر است. در حال حاضر Bit امکان ایزوله کردن، نسخه گذاری، تست و بروزرسانی اجزای جداگانه را فراهم می سازد که بزرگترین برتری این امکان استفاده تدریجی در مواجهه با برنامه های مختلف است.

 

 

طراحی Atomic یکی از موضوعات جالب مورد گفتگو است که بیشتر از اینکه متدولوژی باشد یک نوع تفکر و فلسفه است. به زبان ساده، در تئوری Brad Frost، ترکیب برنامه های مبتنی بر وب، با تعریف اتم ها، مولکول ها و ارگانیزم‎های طبیعت مقایسه شده است. اتم ها سازنده مولکول هستند، به عبارتی دیگر در تساوی زیر، سمت چپ اتم ها و سمت راست مولکول تشکیل شده است.

ترکیب مولکول ها با یکدگیر سازنده ارگانیزم است که این ارگانیزم ها در قالب صفحات زندگی می کنند و البته قابل ارائه به کاربران شما هستند.

برتری کامپوننت های Atomic فراتر از ساخت UIهای ماژولار است. این تفکر باعث می شود شما به ترکیب حاصل فکر کنید. بنابراین نقش و API هر کامپوننت، سلسله مراتب و اینکه چگونه می تواند به شکلی موثر و کارا به کار شما بیاید در تعریف اصلی کامپوننت مهم خواهد شد.

 

یکی از جنبه های مهم کامپوننت ها Encapsulation است به این معنی که ساختار تگ ها، استایل و رفتار آن کامپوننت را مخفی و جدا از کد دیگر اجزا نگاه می دارد که این موضوع مانع از تداخل با دیگر کامپوننت ها خواهد شد. نتیجتاً این موضوع منجر به تمیز بودن کد نیز می‎شود. یکی از ویژگی های کلیدی در حفظ این نکته Shadow DOM API است که امکان اتصال یک DOM مخفی را به یک المنت مهیا می‎سازد.
در واقع مدت ها از شروع استفاده از Shadow DOM توسط مرورگرها می‎گذرد. در بیان کوتاه‎تر می‎توانید Shadow DOM را به عنوان یک DOM در DOM دیگر تصور نمایید که به شکل ایزوله و مختص همان DOM بوده که دارای سلسله مراتب DOM و استایل‎های خاص خود است، که البته کاملاً از DOM اصلی مجزا می باشد.


این موضوع به شما اجازه می‎دهد تا سلسله مراتبی از DOM را به یک DOM از سلسله مراتب اصلی وصل کنید. این Shadow DOM با Shadow root شروع شده و مشابه به یک DOM ساده در زیر آن افزوده می‎شود. پیامد اصلی این موضوع این است که دیگر نگران نام‎گذاری متفاوت کلاس‎ها نیستیم چرا که این جز کاملاً جدا از دیگر اجزا است و همچنین به منظور Encapsulation بهتر در کامپوننت‎ها می‎توان از این تعریف استفاده نمود.

طبق آمار، 80 درصد از توسعه دهندگان Front-end مایل هستند در پروژه جدید یا بعدی خود در سال 2020 از TypeScript استفاده کنند.
اگر چه کمبودهایی وجود دارد، اما فهم کدهای TS آسان‎تر بوده، سریع‎تر پیاده‎سازی می‎شوند و باگ‎های کمتری در آن ها رخ خواهد داد.

 

وقتی به آینده توسعه UI فکر می‎کنیم و اینکه پایه‎ها و اساس ماژولار بودن، استفاده مجدد، Encapsulation و استانداردسازی برای طراحی لازم هستند، مطمئناً پاسخ موجود برای کلیه این موارد کامپوننت‎های وبی خواهد بود.
با استفاده از کتابخانه‎ها و فریم‎ورک‎های مبتنی بر جاوا اسکریپت می‎توانید المان‎‎های با تگ دلخواه بسازید. امکانات  این ابزارها به شما کمک خواهد کرد تا پشتیبانی کامل از امکانات جدید را بر روی مرورگرهای مدرن داشته باشید و به شکلی بهینه از ظرفیت‎ها استفاده نمایید.

• بهبودی برای JavaScript: می‎توانید مواردی را که از نظر کارایی بسیار مهم هستند را با استفاده از Wasm تولید کرده و به شکل یک ماژول در JavaScript خود اضافه نمایید.
• زبان جدید: کدهای WebAssembly قالب AST (Abstract Syntax Tree) داشته و به شکل باینری تعریف می‎شوند. ایجاد و دیباگ در قالب متنی امکان پذیر بوده و در نتیجه فرمتی خوانا دارد.
• بهبودی برای مرورگر: مرورگرها فرمت باینری را می‎فهمند و قادر به کامپایل آن‎ها هستند، بنابراین کدهای جدید از کد‎های امروزی JavaScript کوچک‎تر و سریع‎تر خواهند بود.
• فرصتی برای دیگر زبان‎ها: امکان گسترش وب با استفاده از دیگر زبان‎ها