نمایش HN: Vertex.js – یک چارچوب SPA 1kloc

ظهور Micro-Frameworks: چرا توسعه دهندگان ابزار Bloated JavaScript را رد می کنند

یک توسعه‌دهنده اخیراً یک چارچوب برنامه تک صفحه‌ای را که در تقریباً 1000 خط کد ساخته شده است، برای Hacker News پست کرده است، و پاسخ الکتریکی بود. این پروژه - یک چارچوب مینیمالیستی SPA - بحثی را دوباره برانگیخت که سال‌ها در جامعه توسعه وب ادامه داشت: آیا ابزارهای ما برای مشکلاتی که حل می‌کنند بیش از حد پیچیده شده‌اند؟ وقتی کتابخانه اصلی React، روتر، لایه مدیریت حالت و ابزار ساخت آن به طور جمعی صدها هزار خط کد را تشکیل می دهند، چارچوبی که مسیریابی، واکنش پذیری و رندر کامپوننت را تنها در 1000 خط ارائه می دهد، یک سوال ناراحت کننده را ایجاد می کند. برای کسب‌وکارهایی که برنامه‌های کاربردی رو به مشتری ایجاد می‌کنند، پاسخ به این سؤال پیامدهای واقعی دارد - در زمان بارگذاری، بهره‌وری توسعه‌دهنده، و هزینه‌های نگهداری طولانی‌مدت.

چه چیزی را یک چارچوب 1000 خطی در واقع ثابت می کند

ایده یک ریز چارچوب جدید نیست. Backbone.js زمانی که در سال 2010 معرفی شد، تقریباً 1800 خط کد منبع مشروح داشت. چیزی که هر ورودی جدید در این دسته را قابل توجه می کند، خود شمارش خط نیست، بلکه آنچه در مورد وضعیت فعلی API مرورگرها آشکار می کند است. مرورگرهای مدرن با پشتیبانی بومی از قالب‌های واقعی، History API، واکنش‌پذیری مبتنی بر پروکسی، عناصر سفارشی و بارگیری ماژول عرضه می‌شوند. یک دهه پیش، فریم‌ورک‌ها فقط برای عادی‌سازی تفاوت‌های اینترنت اکسپلورر و کروم به هزاران خط نیاز داشتند. امروزه، یک توسعه‌دهنده ماهر می‌تواند یک چارچوب SPA کاملاً کاربردی به‌عنوان یک لایه نازک ارکستراسیون در بالای پلتفرم‌های اولیه بسازد.

این مهم است زیرا مکالمه را از "کدام چارچوب را باید انتخاب کنیم؟" تغییر می‌دهد. به "آیا ما اصلا به یک چارچوب نیاز داریم؟" برای پروژه های کوچک تا متوسط ​​- صفحه فرود با بخش های پویا، داشبورد داخلی، پورتال مشتری - پاسخ به طور فزاینده ای است: شاید نه، یا حداقل سنگین نیست. چارچوب 1000 خطی گواه این است که پلتفرم به حدی رسیده است که کار چارچوب در حال کوچک شدن است.

البته، فریم‌ورک‌هایی مانند React و Vue هنوز هم وزن خود را در برنامه‌های کاربردی در مقیاس بزرگ با درخت‌های پیچیده وضعیت، نیازهای رندر سمت سرور و تیم‌هایی متشکل از 20+ توسعه‌دهنده که از قراردادهای سفت و سخت سود می‌برند، به دست می‌آورند. بینش کلیدی این است که ابزار مناسب کاملاً به دامنه مشکل بستگی دارد.

هزینه واقعی Bloat جاوا اسکریپت

تحقیقات خود گوگل به طور مداوم نشان داده است که هر 100 میلی ثانیه زمان بارگذاری اضافه شده می تواند نرخ تبدیل را تا 7٪ کاهش دهد. صفحه وب متوسط ​​اکنون بیش از 500 کیلوبایت جاوا اسکریپت ارسال می کند - رقمی که از سال 2015 تقریباً سه برابر شده است. برای مشاغل، این یک معیار عملکرد انتزاعی نیست. این به طور مستقیم به درآمد از دست رفته، نرخ پرش بالاتر و رتبه بندی بدتر در موتورهای جستجو ترجمه می شود.

مشکل در شبکه های تلفن همراه پیچیده است. یک کاربر در یک دستگاه اندرویدی میان رده که از طریق 3G متصل می شود، ممکن است 5 تا 8 ثانیه صبر کند تا یک صفحه با جاوا اسکریپت سنگین تعاملی شود، حتی پس از ارائه HTML اولیه. این امر به‌ویژه برای کسب‌وکارهایی که در بازارهای نوظهور به مشتریان خدمات ارائه می‌کنند مجازات می‌کند، جایی که مرور اول از طریق تلفن همراه معمول است و زیرساخت‌های شبکه به‌طور چشمگیری متفاوت است.

• زمان تجزیه: تجزیه و کامپایل بسته‌های بزرگ جاوا اسکریپت، حتی قبل از اجرای یک خط کد برنامه، بیشتر طول می‌کشد
• فشار حافظه: داخلی‌های پیچیده چارچوب حافظه را مصرف می‌کنند که می‌تواند توسط خود برنامه استفاده شود
• خستگی به‌روزرسانی: ارتقاء چارچوب اصلی (Angular 1 به 2، Vue 2 به 3، React class components to hooks) هر 2 تا 3 سال یکبار تلاش‌های پرهزینه مهاجرت را مجبور می‌کند
• زنجیره‌های وابستگی: پوشه node_modules یک پروژه React معمولی شامل 800-1200 بسته است که هر کدام یک آسیب‌پذیری امنیتی بالقوه یا تغییر شکستن است
• پیچیدگی ساخت: Webpack، Babel، PostCSS و فایل‌های پیکربندی آنها اغلب از کد برنامه‌ای که ارائه می‌کنند فراتر می‌رود

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

چرا انجمن توسعه دهندگان تقسیم شده است

بحث Hacker News در مورد چارچوب های SPA کوچک به طور قابل اعتماد دو اردوگاه متضاد ایجاد می کند. در یک طرف، توسعه‌دهندگانی هستند که سال‌ها را در پایگاه‌های کد بزرگ ساخته‌شده بر روی React یا Angular گذرانده‌اند و به طور مستقیم مشاهده کرده‌اند که چگونه پیچیدگی چارچوب در طول زمان ترکیب می‌شود. آن‌ها مشاهده کرده‌اند که ویژگی‌های ساده به وظایف چند روزه تبدیل می‌شوند، زیرا قراردادهای چارچوب نیاز به لمس پیکربندی روتر، صفحه بخار مدیریت حالت، و مهارهای آزمایشی دارند که داخلی‌های چارچوب را مسخره می‌کنند. برای این توسعه دهندگان، یک چارچوب 1000 خطی نشان دهنده آزادی است - بازگشتی به درک هر خط کدی که در برنامه آنها اجرا می شود.

در طرف دیگر، عملگرایان هستند که به این نکته اشاره می کنند که چارچوب ها وجود دارند زیرا برنامه های کاربردی دنیای واقعی در نهایت به آنچه ارائه می کنند نیاز دارند: ابزارهای دسترسی، بین المللی سازی، تقسیم کد، رندر سمت سرور، و خط لوله استخدام توسعه دهندگانی که از قبل ابزار را می شناسند. آنها استدلال می کنند که یک چارچوب کوچک ممکن است برای یک پروژه آخر هفته لذت بخش باشد، اما سعی کنید یک تیم پنج نفره تا یک پایگاه کد سفارشی 1000 خطی بدون پاسخ Stack Overflow و بدون مستندات رسمی وارد کنید.

هر دو طرف نکات معتبری دارند و حقیقت این است که انتخاب بر اساس زمینه است. یک بنیانگذار انفرادی که یک MVP ایجاد می کند، نیازهای اساسی متفاوتی نسبت به یک تیم سازمانی دارد که یک برنامه پنج ساله را حفظ می کند. خطر در استفاده از راه حل های سازمانی برای مشکلات راه اندازی یا ابزارهای راه اندازی برای چالش های سازمانی نهفته است.

آنچه کسب‌وکارهای مدرن واقعاً از پشته فناوری خود نیاز دارند

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

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

این اصل فراتر از چارچوب های فرانت اند گسترش می یابد. کسب‌وکارها به طور معمول همان سیستم‌های پشتیبان را بازسازی می‌کنند - احراز هویت کاربر، پردازش پرداخت، CRM، صورت‌حساب، زمان‌بندی - زیرا پشته فناوری انتخابی آن‌ها این را می‌طلبد. پلتفرم هایی مانند Mewayz دقیقاً برای از بین بردن این کار تکراری وجود دارد و 207 ماژول از پیش ساخته شده را ارائه می دهد که همه چیز را از CRM و حقوق و دستمزد گرفته تا سیستم های رزرو و تجزیه و تحلیل را پوشش می دهد. همان فلسفه‌ای که توسعه‌دهندگان را به سمت چارچوب‌های خرد سوق می‌دهد - کارهای بیشتری را با کمتر انجام دهید، پیچیدگی‌های غیرضروری را حذف کنید - کسب‌وکارها را به سمت پلتفرم‌های تلفیقی سوق می‌دهد که ده‌ها اشتراک SaaS را با یک سیستم واحد جایگزین می‌کند.

طیف چارچوب: پیدا کردن نقطه شیرین شما

به‌جای اینکه انتخاب چارچوب را به‌عنوان باینری تلقی کنیم - فریم‌ورک بزرگ یا ریز-فریم‌ورک - به فکر کردن در قالب یک طیف کمک می‌کند. در یک انتها، جاوا اسکریپت وانیلی با انتزاعات صفر دارید. از سوی دیگر، شما فریم‌ورک‌های تمام پشته مانند Next.js یا Nuxt دارید که مسیریابی، رندرینگ، واکشی داده‌ها و استقرار را انجام می‌دهند. اکثر پروژه ها به جایی در میانه تعلق دارند.

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

آزمون عملی ساده است: هر ویژگی که برنامه شما در 12 ماه آینده نیاز دارد را فهرست کنید. اگر یک میکرو فریم ورک 90٪ از این نیازها را پوشش دهد و شما بتوانید 10٪ باقیمانده را در زمان کمتری نسبت به پیکربندی یک چارچوب بزرگتر صرف کنید، ریز چارچوب برنده است. اگر فهرست ویژگی‌های شما شامل رندر سمت سرور، اعتبارسنجی فرم پیچیده، هماهنگ‌سازی انیمیشن و پشتیبانی از دسترسی عمیق باشد، چارچوب بزرگ‌تر احتمالاً هزینه‌های خود را می‌پردازد.

درس هایی برای بنیانگذاران غیر فنی و اپراتورهای تجاری

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

سومین و مهم‌تر از همه، این سوال که آیا اصلاً برای عملکرد مورد نظر به نرم‌افزار سفارشی‌سازی شده نیاز دارید یا خیر. بسیاری از کسب‌وکارها ماه‌ها زمان توسعه‌دهنده را برای ساخت ابزارهای داخلی سرمایه‌گذاری می‌کنند - داشبورد، سیستم‌های CRM، جریان‌های صورت‌حساب، رابط‌های زمان‌بندی - که از قبل به‌عنوان محصولات صیقلی و نگهداری‌شده وجود دارند. پلتفرمی مانند Mewayz که به بیش از 138000 کاربر با ماژول هایی که طیف کاملی از عملیات تجاری را در بر می گیرد، خدمات می دهد، می تواند نیاز به توسعه سفارشی را به طور کامل برای عملکردهای تجاری استاندارد برطرف کند. این به تیم توسعه شما اجازه می‌دهد تا روی جنبه‌های واقعا منحصربه‌فرد محصول شما تمرکز کند - ویژگی‌هایی که هیچ ابزاری نمی‌تواند ارائه کند.

1. کد سفارشی خود را حسابرسی کنید: شناسایی کنید کدام ابزارهای داخلی عملکردهای تکراری موجود در پلتفرم‌های موجود را دارند
2. محاسبه هزینه واقعی: نه تنها در توسعه اولیه، بلکه در تعمیر و نگهداری مداوم، وصله‌های امنیتی، و درخواست‌های ویژگی
3. ارزیابی ادغام: اشتراک های SaaS فعلی خود را بشمارید و هزینه را با یک پلت فرم یکپارچه مقایسه کنید
4. از عوامل متمایز خود محافظت کنید: منابع توسعه سفارشی را برای ویژگی هایی که واقعاً کسب و کار شما را متمایز می کند رزرو کنید

آینده متعلق به انتخاب های عمدی است

هیجان در مورد یک چارچوب SPA 1000 خطی واقعاً مربوط به خود چارچوب نیست. این در مورد یک حرکت رو به رشد در توسعه نرم‌افزار به سمت هدفمندی است - انتخاب ابزارها به این دلیل که متناسب با مشکل هستند، نه به این دلیل که بر بازار تسلط دارند. اکوسیستم جاوا اسکریپت دهه گذشته را در یک مسابقه تسلیحاتی از ویژگی ها و انتزاعات گذرانده است. حرکت متقابل، که توسط چارچوب‌های کوچک، HTML ارائه‌شده توسط سرور، و APIهای بومی پلتفرم نشان داده می‌شود، اصلاحی به سمت عمل‌گرایی است.

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

چارچوب 1000 خطی به ما یادآوری می‌کند که قدرت به پیچیدگی نیاز ندارد. مؤثرترین کسب و کارها - و مؤثرترین ابزارها - آنهایی هستند که دقیقاً آنچه را که لازم است انجام می دهند و نه بیشتر.