۱۲ اشتباهی که توسعه دهندگان وب جدید مرتکب می‌شوند

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

اعتبارسنجی ورودی‌های ناقص

بسیاری از توسعه دهندگان تازه وارد این اشتباه را مرتکب می‌شوند و فکر می‌کنند که اعتبارسنجی HTML و JavaScript تنها برای اعتبارسنجی ورودی کاربر کافی است. شما همیشه باید اعتبارسنجی سرور و مشتری را انجام دهید.

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

اعتبارسنجی‌های مخصوص مشتری را می‌توان به راحتی با غیرفعال کردن جاوا اسکریپت کنار زد. بنابراین انجام اعتبارسنجی سرور برای ورودی کاربر نیز الزامی است. اگر اعتبارسنجی مخصوص سرور را انجام ندهید، برنامه شما در برابر حملات هکرهایی مانند SQL Injection آسیب پذیر خواهد بود. این موضوع جزو ۱۰ خطر امنیتی برتر در برنامه‌های وب است.

بنابراین اگر از هر نوع ورودی کاربری استفاده می‌کنید، همیشه باید مطمئن شوید که آن را در هر دو سمت مشتری و سرور اعتبارسنجی می‌کنید.

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

ناسازگاری متقابل مرورگر

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

اما اگر چنین بازه زمانی را در اختیار ندارید، بهتر است هنگام توسعه بخشیدن به برنامه آن را در مرورگرهای متقابل تست کنید. نمی‌توانید این مسئله را نادیده بگیرید. باید برنامه‌ی خود را حداقل در سه مرورگر اصلی مثل Firefox، Chrome و Microsoft Edge آزمایش کنید. میتوانید مشکلات مربوط به UI را بیشتر در Firefox مشاهده کنید، در حالی که همین مشکلات ممکن است در Chrome نشان داده نشوند.

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

می‌توانید برای کارآمدتر کردن آزمایش‌های مربوط به مرورگر متقابل از ابزارهایی مانند CrossBrowsingTesting یا LambdaTest استفاده کنید.

افراط در استفاده از کتابخانه‌ها

استفاده از کتابخانه‌های زیاد در برنامه می‌تواند باعث افزایش اندازه و زمان ساخت برنامه شود. این موضوع در نهایت زمان بارگیری صفحه را نیز افزایش خواهد داد. بنابراین باید هنگام اضافه کردن بسته‌های npm به برنامه‌ی وب خود مراقب باشید. اگر می‌توانید در کمترین زمان ممکن کدی را بنویسید که همان کارکرد کتابخانه را داشته باشد، باید فکر استفاده کردن از کتابخانه را فراموش کنید.

شما می‌توانید قبل از افزودن بسته‌های npm به برنامه‌های خود، با استفاده از وبسایت BundlePhobia اندازه‌ی بسته‌های خود را بررسی کنید.

هنگام استفاده از یک کتابخانه باید تاریخ کامیت و تعداد ستاره‌های گیت‌هاب آن را بدانید. اگر یک کتابخانه ایمن نباشد، می‌تواند آسیب امنیتی بزرگی برای برنامه شما باشد. بنابراین این احتمال وجود دارید که مجبور شوید به سراغ یک کتابخانه دیگر بروید یا راه‌حل‌های مختلفی را پیدا کنید.

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

بیشتر کتابخانه‌ها زندگی را برای توسعه دهندگان راحت‌تر می‌کنند، اما به یاد داشته باشید که گاهی اوقات می‌توانند کار را نیز دشوارتر کنند. بنابراین کتابخانه‌های خود را هوشمندانه انتخاب کنید.

دنبال نکردن طراحی واکنش‌گرا از همان ابتدا

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

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

رد شدن از بهینه‌سازی تصویر

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

شما می‌توانید به جای استفاده کردن از JPG یا PNG، از SVG برای لوگو، آیکون و تصاویر ساده استفاده کنید. ابزارهای رایگان زیادی برای بهینه‌سازی تصاویر JPG و PNG وجود دارد. شما می‌توانید به راحتی از این ابزارها برای بهینه کردن تصاویر خود استفاده کنید، بنابراین از نادیده گرفتن بهینه‌سازی تصاویر دست بکشید.

نادیده گرفتن SEO فنی

بسیاری از توسعه دهندگان جدید هنگام توسعه دادن وبسایت‌ها یا برنامه‌های وب خود، بهینه‌سازی موتور جستجو یا همان SEO را نادیده می‌گیرند. این می‌تواند به دلیل کمبود دانش در زمینه SEO فنی یا کمبود زمان توسعه باشد. اما نادیده گرفتن این موضوع یک اشتباه بزرگ است.

از همان ابتدا به بهینه‌سازی SEO فکر کنید. بیشتر کاربران وبسایت‌ها را با استفاده از موتور جستجو پیدا می‌کنند. بنابراین SEO از دید مشتری بسیار ارزشمند است. اگر بهینه‌سازی SEO را به عنوان یک توسعه‌دهنده نادیده بگیرید، رتبه‌ی سایت در نتایج جستجو پایین می‌آید و مشتری از این بابت راضی نخواهد بود.

شما به عنوان یک توسعه‌دهنده باید از همان ابتدای ساخت برنامه به فکر SEO باشید. اینکه در انتهای کار به سراغ آن بروید یک کار کاملاً اشتباه است. در چنین شرایطی مجبور می‌شوید کارهایی غیرضروری را دوباره انجام دهید. در اینجا چند نکته را برای شما بیان می‌کنم تا هنگام توسعه آن‌ها را رعایت کنید:

- مطمئن شوید که معماری سایت قابل خزیدن است

- به منظور رسیدن به یک زمان بارگیری کارآمد، وبسایت را بهینه کنید

- از بک‌لینک‌دهی هوشمند استفاده کنید

- کدنویسی W3C خود را معتبر نگه دارید (برای این کار می‌توانید از سرویس اعتبارسنجی W3C استفاده کنید)

- محتوای تکراری را حذف کنید

- از تگ‌های alt تصویر استفاده کنید

وجود آزمایشات دستی فراوان

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

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

رعایت نکردن استانداردهای وب

برای اینکه کارها با یک روش معمول و درست انجام شوند، استانداردهایی در نظر گرفته شده است. استانداردهای وب به توسعه دهندگان کمک می‌کند تا برنامه‌هایی را بسازند که برای همه به یک کیفیت یکسان کار می‌کنند.

امروزه بیشتر توسعه دهندگان، خودآموز هستند و اکثر اوقات مطالب مورد نیاز را از آموزش‌های آنلاین یاد می‌گیرند. بیشتر وقت‌ها در این مطالب آموزشی، استانداردهای صحیحی ذکر نشده است. بنابراین بیشتر افراد از آن بی خبر خواهند ماند. به عنوان مثال هنگام نوشتن HTML، باید از عناصر Semantic استفاده کنید تا بتوانید صفحه‌ی وب خود را مطابق با استانداردهای وب بسازید.

می‌توانید در whatwg.org از آخرین استانداردهای HTML مطلع شده و آن‌ها را یاد بگیرید. رعایت استانداردهای صحیح نیز می‌تواند سبب دسترسی بهتر برنامه‌ی شما شود. برای اطمینان از دسترسی مناسب و درست برنامه‌ی خود می‌توانید به دستورالعمل‌های دسترسی به محتوای وب منتشر شده توسط W3C مراجعه کنید.

این استانداردها اعمال شده است تا محتوای وب را در سطحی بین المللی در دسترس تمام کاربران قرار دهد. بنابراین مطمئن شوید که این استانداردها را رعایت می‌کنید.

نوشتن Vanilla CSS

الان سال ۲۰۲۱ است و شما دیگر قرار نیست که vanilla css بنویسید. از پیش پردازنده‌های CSS مانند Stylus، Sass یا Less استفاده کنید. اگر در حال استفاده از React هستید، می‌توانید از اجزای مدل‌دار استفاده کنید. اغلب توسعه دهندگان جدید به خاطر سختی در یادگیری آن‌ها را نادیده می‌گیرند.

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

اگر از Sass به عنوان مثال استفاده کنیم، این نستینگ (nesting) را برای شما فراهم می‌کند تا بتوانید از سینتکس‌های نست شده و توابع کاربردی مثل رنگ‌ها، توابع ریاضی و غیره استفاده کنید. همچنین می‌توانید Bootstrap را نیز با استفاده از Sass سفارشی کنید زیرا این مورد به Sass نیز نوشته شده است. اجزای مدل‌دار دارای قابلیت استفاده‌ی مجدد و سازگاری بالا هستند. بنابراین زمان آن رسیده تا از نوشتن CSS ساده دست بکشید.

نوشتن CSS و JS به صورت فایل‌های HTML

این مورد یکی از قدیمی‌ترین اشتباهات است اما هنوز هم بسیاری از توسعه دهندگان آن را انجام می‌دهند. گاهی اوقات به این دلیل است که نوشتن بدین شکل می‌تواند آسانتر باشد اما همیشه آسان بودن نشانه‌ی درست بودن نیست. این یک کار نادرست است و کدهای شما را بهم می‌ریزد. علاوه بر این تست و اشکال زدایی آن را بسیار دشوارتر می‌کند. ممکن است این کار آسیب‌پذیری‌های امنیتی و بسیاری از مسائل دیگر را نیز به دنبال داشته باشد.

همیشه برای جدا کردن فایل‌ها و حفظ ساختاری مناسب از پروژه JavaScript و CSS را بنویسید.

نادیده گرفتن قالب کد و کامنت‌گذاری

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

در مورد نام‌های قراردادی و درست زبان‌های مورد استفاده خود اطلاعات کسب کنید. هنگام نامگذاری توابع یا متغیرها از شکل درست آن‌ها استفاده کنید. با IDE خود از یک ابزار قالب‌بندی اتومات کد استفاده کنید.

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

تکیه بر jQuery

شما به این خاطر باید از jQuery دست بکشید چون JavaScript و TypeScript می‌توانند کارهایی که jQuery انجام می‌دهد را بهتر و سریعتر انجام دهند. مطمئناً شما امروزه از یک فریمورک و کتابخانه مثل Vue، React یا Angular استفاده خواهید کرد بنابراین نیازی به jQuery نخواهید داشت. افزودن jQuery فقط برنامه شما را سنگین‌تر می‌کند.

یکی دیگر از دلایلی که نباید به jQuery تکیه کنید، این است که زمان سختی را برای سازگار شدن با یک فریمورک جدید پیش روی خواهید داشت. این بدان خاطر است که jQuery از یک سینتکس معمول استفاده نمی‌کند و پیاده‌سازی DOM آن تا حدودی متفاوت است.

من نمی‌گویم که نباید به هیچ وجه آن را یاد بگیرید. هنوز هم بسیاری از پروژه‌ها از jQuery استفاده می‌کنند، اما نباید تنها متکی به آن باشید.

نکته: با استفاده از Bit (Github) می‌توانید مولفه‌ها را بین پروژه‌ها به اشتراک بگذارید.

Bit اشتراک‌گذاری، مستندسازی و استفاده مجدد از مولفه‌های مستقل بین پروژه‌ها را آسانتر می‌کند. می‌توانید از آن برای به حداکثر رساندن استفاده مجدد از کد، حفظ یک طراحی ثابت، تحویل سریع و ساخت برنامه‌هایی با مقیاس بالا استفاده کنید. Bit از TypeScript، Node، Angular، Vue، React و موارد دیگر پشتیبانی می‌کند.

مطالب پایانی

در این مقاله ما در مورد ۱۲ اشتباه رایج در بین توسعه دهندگان تازه کار صحبت کردیم. اجتناب کردن از این اشتباهات به شما کمک می‌کند تا به یک توسعه‌دهنده بهتر تبدیل شوید و برنامه‌های کارآمدتری را خلق کنید. امیدواریم این مقاله به شما کمک کند تا بتوانید در آینده از این اشتباهات جلوگیری کنید.

منبع