تجربه طراحی سایت با فلاتر وب

چند وقت پیش یه پروژه طراحی سایت گرفتم که صرفا قرار شد یه صفحه با محتوای ثابت باشه. توی این سایت صرفاً قرار بود یه سری خدمات معرفی بشن و امکان تماس گرفتن فراهم بشه.

با توجه به اینکه کار کردن با فلاتر برام خیلی راحت‌تر از بقیه فریمورک‌های UI هست و نسخه وب فلاتر هم استیبل شده تصمیم گرفتم این صفحه رو با فلاتر وب (نسخه ۲.۸) بالا بیارم. توی این مطلب می‌خوام تجربه‌م رو در این مورد، یعنی استفاده از فلاتر وب به منظور طراحی سایت، به اشتراک بذارم.

#مزایا

۱. سرعت پیاده‌سازی

به عنوان یه برنامه‌نویس موبایل، توسعه یه سایت با فریمورکی مثل بوت‌استرپ یا ویو برای من که سابقه کار زیادی باهاشون ندارم اصلاً کار راحتی نیست ولی با فلاتر در عرض یکی دو روز تونستم یه UI نسبتاً پیچیده و شلوغ رو پیاده‌سازی کنم.
قبلاً تا حدودی با بوت‌استرپ کار کرده بودم و آشنایی داشتم و به نظرم توسعه با فلاتر خیلی راحت‌تر و سریع‌تر بود.

۲. طراحی ریسپانسیو

قبلاً توی شرکت چند صفحه از اپلیکیشن‌هامون رو به منظور استفاده توی سایت ریسپانسیو کرده بودم و به همین خاطر تقریباً می‌دونستم که طراحی یه صفحه که توی همه پلتفرم‌ها ظاهر خوبی داشته باشه چه مراحلی داره. همچنین برای نمایش جدول‌ها و لیست‌ها کتابخونه‌های مختلفی هستند که میشه برای سایزهای مختلف صفحه جدول‌ها رو ریسپانسیو کرد.

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

به جز این دو مورد، مزیت خاصی به ذهنم نمی‌رسه که به واسطه انتخاب فلاتر، به کمکم اومده باشه.

#معایب

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

۱. زمان لودینگ بسیار بالا

فلاتر وب بزرگترین ضدحال رو موقع انتشار سایت زد!
خلاصه‌ش این که اگه سایت با کیفیت خوب بالا بیاد، دفعه اول حدود ۲۰-۱۰ ثانیه طول می‌کشه تا باز شه. اگه هم کیفیت رو فدای سرعت کنیم باز حدود ۵-۴ ثانیه باید منتظر باشیم تا سایت لود شه.

داستان از این قراره که فلاتر توی هر پلتفرمی که اجرا می‌شه، یه موتور پردازنده ریزه میزه بالا میاره و تک‌‌تک پیکسل‌های روی صفحه رو خودش پردازش می‌‌کنه. یعنی ویجت‌هایی که توی فلاتر استفاده میشه هیچکدوم ربطی به ویجت‌های نیتیو اون پلتفرم نداره و چه ساخت و چه نمایشش توسط موتور خود فلاتر انجام می‌شه.
حالا این توی روند کار ما چه تاثیری داره؟
وقتی با فلاتر اپلیکیشن می‌سازیم، اپلیکیشن خام سه-چهار مگابایت حجم داره که بیشترش مربوط به همین انجین فلاتره و خب تاثیرش توی کار اینه که کاربر باید سه-چهار مگابایت بیشتر دانلود کنه.
اما توی وب این انجین چند مگابایتی دردسرساز میشه.
شما وقتی مشغول وب‌گردی هستید، دوست دارید که سایت‌ها خیلی سریع بالا بیان. حالا فرض کنید یه سایت که خیلی هم مشتاق دیدنش نیستید حدود ۲۰ ثانیه طول بکشه تا بالا بیاد. قاعدتاً حوصله‌‌تون سر می‌ره و از خیرش می‌گذرید. لود شدن انجین فلاتر توی وب تقریباً انقد طول می‌کشه!

فلاتر دو تا رندرر وب داره: canvas kit و html. اگه با canvas kit خروجی بگیرید زمان لود سایت بسته به سرعت اینترنت و قدرت سیستمتون، بار اول حدود ۲۰-۱۰ ثانیه طول می‌کشه و همه چی همونطوری که دوست دارید نشون داده میشه. اگه با رندرر html که یه چیز سبک‌تره خروجی بگیرید، باز هم لود سایت در دفعه اول حدود ۵-۴ ثانیه طول می‌کشه که زیاد مطلوب نیست. ضمن اینکه عناصر صفحه یه مقداری انگار تار و محوه.

خیلی زحمت کشیدم که این زمان کمتر شه، تقریباً نشد! خروجی تقریباً خوبه ولی نه در حد یه صفحه سایت ساده.

۲. سئوی ضعیف

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

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

۳. لگ‌زدن صفحه

توی مورد یکِ معایب توضیح دادم که به منظور کم کردن زمان لودینگ مجبور شدم از رندرر html استفاده کنم. به خاطر همین، صفحه یه کم کند شده و لگ می‌زنه. باز هم چون سایت صرفاً یه صفحه ساده‌ست، انتظار می‌ره مثل فرفره بیاد بالا و کار کنه که نمی‌کنه.

۴. تقلا برای رسیدن به حالت نرمال!

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

جمع‌بندی

اینطور که من فهمیدم فلاتر تا این تاریخ یعنی ۵ فروردین ۱۴۰۱ گزینه خوبی برای توسعه وب‌سایت نیست. اگه قراره یه صفحه لندینگ طراحی کنید که طرف قراره بیاد یه دوری بزنه و بره پی کارش، فکر یه گزینه دیگه باشید.
اما برعکس، برای توسعه وب‌‌اپلیکیشن فلاتر گزینه جذابیه. مثلاً وب‌اپلیکیشن اسنپ یا دیجیکالا که کاملاً شبیه یه اپلیکیشن روی گوشی باز می‌شن رو میشه خیلی خوب با فلاتر پیاده‌سازی کرد و اون مزیتی که هم خروجی اندروید/iOS و هم خروجی وب میشه ازش گرفت، محشر به پا می‌کنه!

مطلب قبلیم