فرانت‌اند دقیقاً کجاست؟

در این مقاله می‌خواهم روشن و صریح راجع به فرانت‌اند صحبت کنم. سعی می‌کنم سوال‌های اساسی مطرح کنم و به آن‌ها پاسخ دهم. این مقاله را به کسانی که به تازگی به فرانت‌اند علاقه‌مند شده‌اند پیشنهاد می‌کنم. همینطور به کسانی که در حال حاضر در این زمینه فعالیت می‌کنند و خود را توسعه‌دهندهٔ فرانت‌اند می‌دانند. همینطور به توسعه‌دهنده/مهندسان نرم‌افزار. طراح‌های عزیز هم می‌توانند در این مقاله بیشتر با ما آشنا شوند. کلاً اگر کلمهٔ فرانت‌اند به گوش‌تان خورده باشد این مقاله مفهوم این کلمه را روشن‌تر خواهد کرد.

چرا بازتعریف مفاهیمِ رایج ضروری‌ست؟

گاهی اوقات بین فاز عملی و علمیِ یک مفهوم فاصله می‌افتد. برای مثال فرض کنیم شخصی را برای ساختن یک ساختمان استخدام کرده‌ایم. نقشه‌ها همه حاضر هستند و این شخص قرار است ساختمان را تکمیل کند. انتظار داریم ساختمان را کامل به ما تحویل دهد در حالی که کاشف به عمل می‌آید تنها از پس لوله‌کشی آب بر می‌آید!

حال فرض کنیم تعداد زیادی از افرادی که برای این کار می‌توانیم استخدام کنیم به همین شکل مهارت‌های نصفه و نیمه داشته باشند. تکلیف چیست؟ چه کار می‌توان کرد؟

این دقیقاً چالشی‌ست که ما بعد از بررسی رزومه‌های فراوان و مصاحبه‌‌ها با آن مواجه شدیم. به نظر می‌رسد حوزه‌ی فرانت‌اند با تمام شفافیت هنوز برای اهل فن دچار ابهام در تعریف است. متأسفانه در حال حاضر فرانت‌اند در ایران محلی برای توسعه‌دهندگان/برنامه‌نویسانی شده که هنوز مسیر حرفه‌ای خود را تعیین نکرده و در یک بلاتکلیفی به سر می‌برند. این‌ها را اضافه کنید به اینکه تب فریم‌ورک‌های جاوااسکریپت در چند سال اخیر فضا را بیش از پیش مریض‌تر کرده‌ است.

مثلث فرانت‌اند

سه قسمت اصلی فرانت‌اند HTML، CSS و Javascript هستند. در مورد اینکه آیا HTML و CSS جزو زبان‌های برنامه‌نویسی هستند یا نه حرف و حدیث فراوان است.

به طور کلی دو الگو (paradigm) در مورد زبان‌های برنامه‌نویسی وجود دارد. زبان‌هایی که به یک سیستم می‌گویند «چگونه» کاری انجام شود و زبان‌هایی که می‌گویند «چه چیزی» انجام شود. دسته اول را imperative programming و دسته دوم را declarative programming می‌نامند. برای مثال زبان‌های c, java, php, python , … در دسته‌ی اول و زبان‌های SQL, Curl, html,… در دسته‌ی دوم قرار می‌گیرند.

این دو الگو نه تنها در مورد زبان‌های برنامه‌نویسی بلکه در نوع توسعهٔ کد در یک زبان مشخص نیز وجود دارند. در ساده‌ترین شکل وقتی از functional programming استفاده می‌کنیم و برای مثال تابع ()factorial را نوشته و در قسمت‌های مختلف از آن استفاده می‌کنیم، از الگوی declarative استفاده کرده‌ایم. برای توضیح بیشتر و بهتر مطالعه این مقاله را پیشنهاد می‌کنم.

برگردیم به دو قسمت اساسی از فرانت‌اند. با تعریف‌های بالا HTML و CSS دو زبان هستند که از الگوی declarative programming استفاده می‌کنند. خب البته در مورد اینکه این دو «زبان» هستند هم مناقشه وجود دارد چه برسد به اینکه کلمه‌ی 'programming' را هم به آن اضافه کنیم! واقعا بستگی به نوع نگاه دارد. ترجیح می‌دهم بیشتر وارد این موضوع نشوم و مابقی داستان را به خودتان می‌سپارم. برای اینکه با یک نگاه متفاوت آشنا شوید پیشنهاد می‌کنم ارائه‌ی Lara Schenck در CSSConf EU 2018 را ببینید. او در مورد CSS Algorithms صحبت می‌کند.

سفت و سخت برای بازتعریف فرانت‌اند

خب پس دوباره یادآوری کردیم که HTML، CSS و javascript سه ضلع اصلیِ مثلث فرانت‌اند هستند. اما وزن آن‌ها به چه صورت است؟ هر کدام چه وظیفه‌ای دارند؟ بازار ایران از چه زاویه‌ای به فرانت‌اند نگاه می‌کند و مهمتر از آن توسعه‌دهنده‌ها چه ایده‌ای راجع به فرانت‌اند دارند؟

از نظر ما (منظورم از ما مجموعهٔ استودیو گروسیان است) هسته‌ی اساسی در فرانت‌اند بدون هیچ شکی HTML و CSS است. این دو با همکاری هم یک ایده را از مرحله طرح به مرحلهٔ پیاده‌سازی می‌رسانند. یک توسعه‌دهندهٔ فرانت‌اند همیشه تشنهٔ یادگیری در این دو زبان خواهد بود. بهترین منابع هم specificationهای w3c هستند که وضعیت توسعهٔ فعلیِ این زبان‌ها و همینطور تعاریف پایه را ارائه می‌دهند.

اسکلت وب: HTML

برگردیم به مثال ساختمان. اولین مراحل ساخت یک ساختمان چیست؟ پی‌سازی، آرماتوربندی، بتن‌ریزی و ساخت اسکلت فلزی. با این‌ها ساختار کلی ساختمان آماده خواهد شد. با اینکه بعد از انجام این مراحل ظاهر ساختمان فقط چند اسکلت فلزی‌ست و هیچ زیبایی و جزئیاتی در آن دیده نمی‌شود اما این مراحل مهمترین و حیاتی‌ترین مراحل در ساختن یک ساختمانِ مقاوم و ایمن هستند.

یک صفحهٔ وب درست مانند یک ساختمان است. پی و اسکلت آن را کد HTML تشکیل می‌دهد و دقیقاً به همان اندازه این کد اهمیت دارد. در نهایت از طریق کدهای HTML است که مفهومی را به موتورهای جستجو القا می‌کنیم و از این طریق document خود را از نظر SEO بهبود می‌بخشیم. در واقع صفحهٔ ما باید هم برای انسان و هم برای ماشین به یک اندازه قابل خواندن و فهمیدن باشد. با استفاده‌ی درست از HTML محتوا را می‌توان برای انسان‌ها و ماشین‌ها خواناتر کرد. حال این ماشین می‌توان موتور جستجو باشد یا یک وسیله‌ برای کمک به کسانی که از ناتوانی‌های جسمی رنج می‌برند مانند screen readerها.

به screen readerها اشاره شد، مفهومی تحت عنوان Accessibility وجود دارد که بر جنبه‌ی انسانی وب تاکید می‌کند. اینکه فضای وب برای تمام انسان‌ها چه آن‌ها که دارای ناتوانی‌های جسمی هستند و چه آن‌ها که نیستند قابل دسترس باشد. زبانی که وظیفه‌ی اصلی پیاده‌سازی چنین مفهومی را بر عهده دارد HTML است.

این زبان دنیای نه چندان وسیع اما مهمی‌ست. بیشتر توسعه‌دهنده‌ها/برنامه‌نویس‌ها با آن آشنا هستند و همین ممکن است باعث شود به آن نگاه نادرست و گاه تحقیرآمیز داشته باشند.

نازک‌کاریِ وب: CSS

خب در مثال ساختمان تا پی‌ریزی و اسکلت‌بندی پیش رفتیم. اما با این سر و شکل هیچ شخصی حاضر نیست زندگی خود را به این ساختمان منتقل کند. مراحل قبلی را در ساختمان‌سازی اصطلاحاً «سفت‌کاری» می‌گویند. مراحل بعدی که شامل پوشش ظاهری ساختمان است به «نازک‌کاری» معروف‌اند. عملیاتی مانند کاشی‌کاری، نقاشی، برق‌کاری، لوله‌کشی (که خاطرتان هست!)، نصب در و پنجره و ...

حالا که ساختار اصلی document را با استفاده از HTML به شکل درست تشکیل دادیم، وقت آن رسیده که دقیقاً پیاده‌سازی را به طرح نزدیک کنیم. CSS زبانی‌ست که در آن فاصلهٔ بین طراح‌ها و توسعه‌دهنده‌ها به نزدیک‌ترین نقطه‌ٔ خودش می‌رسد! بسیاری از طراحان با این زبان آشنایی ابتدایی دارند. پیکسل به پیکسلِ طرح اهمیت دارد و باید عیناً به کد تبدیل شود. قدم اول در وفاداری به طرح، دید دقیق و حساسیت بالاست. تا زمانی که جزئیات را نبینیم نمی‌توانیم ادعا کنیم پیاده‌سازیِ دقیقی داشته‌ایم. درست مثل اینکه یک قطعه‌ٔ موسیقی کلاسیک را به جای نتِ نوشته شده به شکل گوشی دربیاوریم! خلاصه طرح را نابود نکنیم.

نکته‌ٔ مهم دیگر این است که برای یک صفحه ممکن است نهایتاً سه طرح به عنوان طرح‌های دسکتاپ، تبلت و موبایل آماده شود. اینجا وظیفه‌ٔ فرانت‌اند پر کردن فواصلِ پیوسته (به شکل fluid) بین این‌ طرح‌ها و همینطور توجه به پیاده‌سازی در اندازه مانیتورهای مرسوم و بزرگ است.

وقتی توسعه‌دهنده‌های امروز در مورد نامفهوم و غیرقابل پیشبینی بودن CSS صحبت می‌کنند برایم غیرقابل درک است. شاید این موضوع در گذشته‌ٔ دور (مثلاً ۱۵ سال پیش در دوران IE6) صادق بود اما حقیقت این است که CSS در گذر زمان حسابی پخته و قابل اطمینان شده است. به وجود آمدن preprocessorها مانند SASS و LESS باعث شده قدرت این زبان به مدد متغیرها، توابع و به طور کل اضافه شدن منطق به کد افزایش پیدا کند.

پس اگر خود را توسعه‌دهنده‌ٔ فرانت‌اندی می‌دانید که از CSS فراری هستید بدانید یک جای کار می‌لنگد و بهتر است در انتخاب‌هایتان بازنگری کنید.

منطق بروزر: Javascript

در مثال ساختمان وقتی می‌خواهیم چراغی را روشن/خاموش کنیم با یک کلید پریز این کار را انجام می‌دهیم. همینطور اگر بخواهیم کمی آب بنوشیم با باز کردن شیر ظرفشویی به آب دسترسی داریم. به طور کلی قسمت‌هایی در ساختمان وجود دارند که در مقابل عمل ما عکس‌العمل نشان می‌دهند. گویا منطقی در کار است.

زبان Javascript در ساده‌ترین تعریف هسته‌ٔ منطق در فرانت‌اند (و بروزر) است. اینجاست که می‌توانید تعریف کنید با کلیک روی مثلاً همبرگر باتن (کلید پریز) منوی سایت از سمت راست وارد صفحه شود یا از آن خارج گردد (روشن/خاموش شدن لامپ).

می‌توانیم دو وظیفه‌ی اصلی Javascript در فرانت‌اند را به تولید/تغییر DOM و مدیریت دیتا خلاصه کنیم. اگر کمی کلی‌تر به قضیه نگاه کنیم مورد دوم نیز در نهایت به مورد اول ختم می‌شود! گویا این زبان آمده‌ است تا پس از تولید اولیه‌ی DOM امکان کار روی آن را برایمان فراهم سازد. تولید و تغییر DOM به قدری پررنگ می‌شود که بخشی از فریم‌ورک‌های این زبان به طور کلی وظیفه‌ٔ تولید DOM را بر عهده می‌گیرند. کافی‌ست page source یک اپلیکیشن نوشته شده با React (بدون server side rendering) را ببینید تا متوجه منظورم شوید.

دسته‌بندی‌های فرانت‌اند:

شاید بگویید من بیشتر به کار روی دیتا و منطق در فرانت‌اند علاقه‌ دارم. می‌خواهم روی فریم‌ورک‌ها تمرکز داشته باشم. یا بگویید بیشتر به پیاده‌سازی موشن‌ها و انیمیشن‌ها علاقه دارم. سبک سایت‌های awwwards را می‌پسندم. یا اصلا بگویید من به Javascript علاقه‌مند هستم اما سرور برای من دنیای جذاب‌تری‌ست. خب اینجا وارد دسته‌های مختلف فرانت‌اند شده‌ایم. اجازه بدهید وعده‌ٔ مقاله‌‌ٔ مفصلی را به شما بدهم و به همین اکتفا کنم که با آگاهی از اصول فرانت‌اند، حوزه‌های مختلف و علاقه خود می‌توان در هر کدام از این قسمت‌ها به شکل تخصصی فعالیت کرد و خوشحال بود.

چند توصیه براساس تجربه:

برای عمیق شدن در هر کاری باید به ریشه‌ها پرداخت. فرانت‌اند از این قاعده مستثنی نیست. داستان زیرعنوان مقاله «مثلثی که به خط تبدیل می‌شود» همین است. اگر برداشت ما از فرانت‌اند فقط محدود به Javascript و فریم‌ورک‌های آن باشد مثلث را به خط تبدیل کرده‌ایم. فراموش نکنیم که وظیفه‌ی اصلی Javascript سر و کله زدن با DOM است. یعنی زبان HTML. HTML هم به خودی خود کار راه بنداز نیست و بزک می‌خواهد. یعنی زبان CSS

اگر نتوانیم یک document ساده را اصولی به کد HTML تبدیل کنیم یا لی‌اوت یک طرح را با استفاده از CSS عیناً پیاده‌سازی کنیم پس در فریم‌ورک‌ها هم کُمِیت‌مان لنگ خواهد بود.

جمله‌هایی از این دست را زیاد می‌شنویم:

«میشه HTML و CSS رو تو یه هفته یاد گرفت و جمعش کرد» یا

«بابا HTML و CSS که دیگه گلابیه، یه باتن می‌خوای بذاری رو هاور رنگ عوض کنه. دیگه این همه داستان نداره» و ...

حتی از زبان فرانت‌اندکارها! نکته اینجاست که جدا از مسئله‌ٔ اجرای تمیز و رعایت کردن استانداردها، مدیریت کدها در یک پروژه‌ٔ بزرگ چالش‌برانگیز خواهد بود. چه کار کنیم که کد ما قابل فهم، گسترش و نگهداری باشد؟ راه حل چنین مسائلی طی چند سال تمرین و تمرکز و مطالعه‌ٔ تخصصی به دست خواهند آمد.

حرف آخر:

از نظر ما همه بخش‌های یک پروژهٔ موفق وب اعم از طراحی، پیاد‌ه‌سازی فرانت‌اند، توسعه بکند و البته محتوا بسیار اهمیت دارند. بنابراین پیشنهاد می‌کنیم به جای وصله‌پینه کردن مهارت‌هایتان ابتدا با ویژگی‌های هر کدام آشنا شوید، از حر‌ف‌ها و توصیه‌های مقرضانه، تحقیرآمیز و شعارهای پرسپولیس و استقلالی و به طور کل حواشی تا می‌توانید دور باشید و بعد با تمرکز، یادگیری و تمرین تلاش کنید در زمینه‌ٔ مورد علاقه‌تان هر روز بهتر شوید.