آرشیو مهر ماه 1401

نحوه نوشتن کد جاوا اسکریپت قابل نگهداری در سال 2023 — Web یا Node.js

هر احمقی می تواند کدی بنویسد که کامپیوتر آن را بفهمد. برنامه نویسان خوب کدی را می نویسند که انسان بتواند آن را درک کند. - مارتین فاولر

طراحی سایت  سفارش طراحی سایت با بهترین متخصصان سایت 

توسعه جاوا اسکریپت هنوز در سال 2022 بی نظم است. با افزایش سرعت رایانه ها، ما باید برای برنامه نویسان کد بنویسیم، نه برای ماشین ها. این چیزی است که دنیای جاوا اسکریپت باید در مورد آن باشد.

سلب مسئولیت: این مقاله برای توسعه دهندگان JS (web یا Node.js) با حداقل تجربه متوسط ​​مناسب است. من فرض می کنم که شما قبلاً تجربه خوبی در نوشتن JS دارید.
مطالب این مقاله:

در همه جا از TypeScript استفاده کنید
جاوا اسکریپت و فریمورک های خود را به خوبی یاد بگیرید
قالب بندی کد و سبک
نظرات در کد و مستندات درون خطی
در صورت لزوم، تست های معنی دار و مفید بنویسید
قبل از اجرای ویژگی های پیچیده از نمونه های اولیه و/یا MVP ها استفاده کنید
پاداش: چند نکته اضافی

در همه جا از TypeScript استفاده کنید

از TypeScript نترسید. برای هر توسعه دهنده جاوا اسکریپت با تجربه معقولی، راهنمای رسمی 5 دقیقه ای "TypeScript for JavaScript Programmers" برای شروع نوشتن تایپ اسکریپ امروز کافی است.


متلب انجام پروژه متلب با بهترین متلب دانان

TypeScript به شما کمک می کند تا دوباره وارد شوید.

اگر از یک IDE یا ویرایشگری استفاده می کنید که دارای تکمیل خودکار، پیشنهادات، اسناد درون خطی و غیره است، می توانید The TypeScript™ را تجربه کنید. این 2 مثال را بدون هیچ زمینه ای ببینید:

// src/api/posts.jsexport default {
  getPosts: () => axios.get("/posts"),
}

مشکلات این روش باید بلافاصله برای شما آشکار شود. getPosts چه چیزی را برمی گرداند؟ اگر بخواهید از axios به واکشی تغییر دهید چه؟ اگر بخواهید یک تابع برای ایجاد یک پست اضافه کنید، چگونه می‌توانید ساختار داده را در یک شی تعریف کنید؟ اکنون به همان کد در TypeScript نگاه کنید:

// src/api/posts.tsexport interface Post {
  title: string;
  excerpt: string;
}export default {
  getPosts: function(): Promise> {
    return axios.get("/posts");
  },
};

تفاوت اصلی در شفافیت است. اکنون می توانید کد را درک کنید و ویرایشگر یا tsc شما در انجام آن به شما کمک می کند. وقتی با نسخه TS ofgetPosts تماس می گیرید، اکنون اطلاعات مفیدی دریافت خواهید کرد.
TypeScript Intellisense در VSCode
IntelliSense VSCode برای برگرداندن تایپ شده توابع

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

یک مرد فقط به اندازه ابزارش خوب است. - Emert Wolf

در سال 2022، باید درک کنید که جاوا اسکریپت در پشت صحنه چه می کند. اگر اینطور نیست، به منبع جاوا اسکریپت مورد علاقه من - کتاب الکترونیکی رایگان Eloquent JavaScript - نگاهی بیندازید. همچنین باید بدانید که جاوا اسکریپت امروزه بسیار بیشتر از ساختارهای داده اولیه و APIهای مرورگر غیرقابل اعتماد ارائه می دهد. برای مثال، اکنون می‌توانید از جاوا اسکریپت نسل بعدی، مجموعه‌های کلیددار، یا API بین‌المللی‌سازی که قبلاً به خوبی پشتیبانی شده است استفاده کنید و مقداری در زمان CPU صرفه‌جویی کنید یا کدی را که کمتر به اشخاص ثالث وابسته است بنویسید.
میم جاوا اسکریپت همه جا


طراحی لوگو با بهترین طراح لوگو و طراحی لوگو حرفه ای


برای تبدیل شدن به یک توسعه‌دهنده بزرگ JS، باید جاوا اسکریپت ناهمزمان، توابع ژنراتور، پارادایم‌های کاربردی و شی گرا، محدوده، عملکرد و بسیاری موارد دیگر را بدانید. متأسفانه، اکثر توسعه دهندگان JS درک عمیق تری از جاوا اسکریپت ناهمزمان ندارند، که یک ویژگی اصلی در برنامه های مدرن است (به Promises و async / await فکر کنید).

در اینجا چیزی است که می توانید بدون یادگیری چیز جدیدی از امروز شروع کنید.

با اسناد کار کنید - خواه Next.js، Webpack، React، TypeScript یا هر ابزار دیگری باشد. به عنوان مثال، React دارای قلاب های زیادی است که اکثر ما هرگز استفاده نکرده ایم. وقتی یک ویژگی اصلی را توسعه می دهید یا یک پروژه را راه اندازی می کنید وقت خود را صرف کنید و عمیقاً در اسناد ابزارهای خود فرو بروید.
عملکرد کد را با پروفایل‌کننده‌ها، اشکال‌زداها، اندازه‌گیری‌های زمان و آزمایش‌های بیش از حد آزمایش کنید - چرا 100 هزار ردیف داده را در جدول React خود قرار ندهید؟ سعی کنید قبل از انتشار یک ویژگی اصلی، خوانایی خوب و همچنین عملکرد را هدف قرار دهید. بدترین سناریو را آزمایش کنید تا ببینید آیا کد شما یک گلوگاه عملکرد است یا خیر.
برای مثال، امیدوارم در مورد تفاوت‌های بین حلقه for و Array.prototype.forEach بدانید، زیرا ممکن است با عملیات محاسباتی سنگین یا جاوا اسکریپت ناهمزمان با مجموعه داده‌های بزرگ مفید باشد.
برای همه چیز به NPM متکی نباشید – پیاده سازی بیشتر ساده ترین کتابخانه ها توسط خودتان آسان است. شکست پد چپ در سال 2016 را به خاطر دارید؟ خود را از به‌روزرسانی بسته‌ها، آزمایش سازگاری، نجات دهید و با کمی کدنویسی اضافی رنج ببرید.
اگر از یک کتابخانه بدون مستند استفاده می کنید، کد منبع را بخوانید. در صورت تمایل، می‌توانید به کتابخانه‌های مستند و محبوب‌تر بچسبید.
تاثیر اندازه بسته خود را تجزیه و تحلیل کنید. برای یک تماس _.omit نیازی به وارد کردن کل کتابخانه lodash ندارید. بارگیری یک بسته بزرگ، بارگذاری اولیه برنامه شما را به میزان قابل توجهی کاهش می دهد. برای اطلاعات بیشتر در مورد bu

اندازه ndle، به این مقاله عالی کسرا (که بر روی Webpack تمرکز دارد) نگاهی بیندازید.

قالب بندی کد و سبک
عکس کد قالب بندی شده توسط Pankaj Patel (@pankajpatel) از Unsplash.
عکس کد قالب بندی شده توسط Pankaj Patel (@pankajpatel) از Unsplash.

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

از ESLint و Prettier با هم استفاده کنید و می توانید روی کاری که کدتان انجام می دهد تمرکز کنید. تصور کنید دیگر هرگز در یک تست CI خودکار به دلیل کاما از دست رفته رد نشدید. همچنین، با استفاده از پیش‌فرض‌های شگفت‌انگیز Prettier، می‌توانید آرگومان‌های سبک کد را یک‌بار برای همیشه پایان دهید.
از نامگذاری توصیفی برای متغیرها استفاده کنید. فقط با خواندن نام باید بفهمید چیزی چیست. دکمهDomElem در مقابل el را در نظر بگیرید - درک کدام ساده تر است؟ یا بارگیری در مقابل isUserDataLoading. پیشوند متغیرهای بولی را با فعل like is یا has قرار دهید و از نام متغیرهای طولانی تر نترسید. IDE ها نام را پیشنهاد می کنند و کاربران vim به سرعت آن را کپی می کنند.
از فاصله استفاده کنید اگر از زیباتر استفاده کنید، به شکستگی های چند خطی می پیوندد. عالی. اما شکستگی‌های تک خطی، آن را دست نخورده باقی می‌گذارند که می‌خواهید استفاده کنید - حتی در داخل یک تابع یا اعلان شی اگر به خوانایی کمک کند.

نظرات در کد و مستندات درون خطی
نظرات در کد و مستندات درون خطی مثال عملی
نظرات در کد و مستندات درون خطی مثال عملی

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

هنگامی که بخش های پیچیده کد را می نویسید، همیشه هدف خود را بنویسید که کد خود را برای توسعه دهندگانی بنویسید که در زمانی که دیگر برای پاسخ به سؤالات در دسترس نباشید، هرگز آنها را ملاقات نخواهید کرد. پس از بازگشت به همان پروژه برای رفع یک اشکال در 2 سال، متوجه خواهید شد که چگونه همه چیز بدون خواندن کل کد منبع کار می کند.

آیا تا به حال یک setTimeout (someFn، 0) را بدون هیچ توضیحی در مورد اینکه چرا به پایان چرخه اجرا موکول شده است، دیده اید؟ می دانید چه کاری انجام می دهد، اما چرا در یک مکان تصادفی مانند نگاشت رنگ ها به آواتارهای کاربر در یک جدول نامیده می شود؟ در اینجا، یک نظر متفکرانه شما را از سردرد کشف مجدد یک اشکال از قبل رفع شده نجات می دهد.
در صورت لزوم، تست های معنی دار و مفید بنویسید

اگر آزمایش واحد محصول خود را دوست ندارید، به احتمال زیاد مشتریان شما نیز دوست ندارند آن را آزمایش کنند. - ناشناس

حتماً در مورد پارادایم توسعه تست محور (TDD) شنیده اید. اغلب اوقات، توسعه دهندگان را به دو گروه تقسیم می کند - برخی که TDD را اجرا می کنند و برخی که TDD را تحقیر می کنند.

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

تست واحد - روش آزمایشی برای اکثر موارد استفاده است. آزمایش واحد برنامه frontend شما می‌تواند مؤلفه‌های پیچیده‌ای مانند طرح‌بندی‌ها، دیالوگ‌های مدال، جادوگران، فرم‌های تأییدشده چند مرحله‌ای سمت کلاینت، و غیره را ارزیابی کند. در توسعه باطن، می‌توانید بررسی کنید که آیا نقاط پایانی موارد خوب و بد را همانطور که انتظار دارید مدیریت می‌کنند.
تست End-to-End (E2E) - MVP واقعی تست ها. هنگامی که برنامه frontend شما بزرگ شد، منطقی است که هر بار که می خواهید آن را برای کاربران منتشر کنید، یک پایگاه داده آزمایشی ایجاد کنید و کد واقعی خود را در یک مرورگر واقعی آزمایش کنید. جامع ترین راه برای انجام تست E2E در بخش جلویی این است که مانند یک مهندس UX فکر کنید — جریان های کاربری خود را توسعه دهید یا آن داده ها را از ابزارهایی مانند HotJar جمع آوری کنید و کارهایی که کاربران شما انجام می دهند را آزمایش کنید.

اگر بخواهید می توانید چیزهای بسیار بیشتری را آزمایش کنید. یک اسکریپت آزمایشی رایج در package.json در پروژه‌های بزرگ‌تر ممکن است به این شکل باشد - "test": "NODE_ENV=test eslint && tsc --noEmit && jest && cypress run".

تست های بیشتر !== کیفیت بیشتر.

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


مجریان لیست مجریان نظام مهندسی اراک مجری ذیصلاح

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

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


n ذهن خود را از کار معمولی دور کنید و نتیجه را ارزیابی کنید. این بهترین زمان برای انجام برخی تست‌های عملکرد اضافی، بازسازی جزئی یا سایر پیشرفت‌ها است.

بعد از هر ویژگی اصلی، قطعات کوچک‌تر را تمیز کرده و بازسازی کنید

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

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

از نمونه های اولیه برای آزمایش ویژگی ها استفاده کنید و از بازسازی بی پایان خودداری کنید.

این جایی است که زشت ترین کد غیرقابل نگهداری شما می تواند باشد. یک پروژه نمونه اولیه تک منظوره جداگانه. به عنوان مثال، اگر برای اولین بار با WebRTC کار می کنید، آن را در یک نمونه اولیه انجام دهید. پس از اینکه تأیید کردید که الزامات شما را برآورده می کند، زمان نوشتن کد واقعی فرا می رسد. در این مرحله، باید دید بسیار واضح تری از نحوه ظاهر و رفتار کد خود داشته باشید.
پاداش: چند نکته اضافی

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

این لیست جامع از نکات مربوط به نوشتن کد قابل نگهداری بیشتر است.

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

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

سایت سفارش طراحی سایت با بهترین طراحان سایت

من را اشتباه نگیرید سندرم ایمپوستر بسیار واقعی است. در هر صورت، صنعت ما آن را تشدید می کند. انتظار ظریفی وجود دارد که قهرمان هر تیمی باشید که در آن حضور دارید.

اما اکثریت قریب به اتفاق توسعه دهندگان در حال انجام کار عالی هستند!

حقیقت واقعی این است که همه ما فقط در حال ساختن چیزهایی هستیم.
کد جعلی نمی تواند

کامپیوتر کاری را که شما به آن می گویید انجام می دهد.

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

با این حال، فراتر از "کدی که کار می کند"، مقدار زیادی جعل و ساختن چیزها وجود دارد.

متلب انجام پروژه متلب با بهترین متلب دانان

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

نکته این مقاله: همه ما در حال بداهه سازی هستیم. این فقط شما نیستید.
کتاب مقدس توسعه دهنده

هیچ کتاب مقدسی وجود ندارد که توسعه دهندگان آن را دنبال کنند.

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

آنها در حال ساختن پاسخ هستند! بداهه پردازی!

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

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

با تمرین در بداهه گویی بهتر می شوید. در ابتدا، ممکن است به نظر برسد که «تا زمانی که آن را بسازید، آن را جعلی کنید». از این گذشته ، شما هنوز هیچ تجربه ای ندارید.

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

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

و این چیز خوبی است!


سفارش طراحی لوگو با بهترین طراح لوگو همچنین طراحی لوگو حرفه ای

اشتباه کردن از شما یک شیاد نمی سازد. تو را انسان می کند! یعنی چیزی را امتحان کردید و از شکست درس گرفتید.
دیگر فریبنده نیست

اگر شما یک شیاد هستید، پس من هم هستم. ما همه هستیم.

واقعیت این است که ما همه آن را جعل می کنیم. همه دارند آن را درست می کنند که ما می رویم.

هیچ راه درستی برای توسعه دهنده شدن وجود ندارد. بنابراین، خود را رها کنید. برای قهرمان بودن تحت فشار نباشید. شما در حال حاضر عالی کار می کنید.
منابع بیشتر

به مشاوره شغلی نیاز دارید؟ مشاوره ایمیلی 7 روزه مستقیما از من مشاوره بگیرید

کسب تجربه جدید، نه با خواندن. با انجام کاری…
بداهه نوازی خلاق همه چیز در مورد داشتن یک ذهنیت مهندس است

پسوند کد ویژوال استودیو شگفت انگیز که ممکن است درباره آن ندانید
معرفی Blackbox: هوش مصنوعی که در پاسخ به سوالاتی که وارد می کنید، راه حل های کد را به شما می دهد.

طراحی سایت سفارش طراحی سایت با بهترین طراحان سایت

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

Blackbox یک هوش مصنوعی است که کد مربوط به سوالی را که شما به آن داده اید به شما می دهد. شما حتی می توانید سوالات پیچیده بنویسید و اکنون یک پسوند برای Visual Studio Code دارد.

شما فقط باید بعد از دو اسلش رو به جلو (//) سوال خود را در ویرایشگر متن در ویژوال استودیو کد بنویسید و وقتی علامت سوال (؟) را بعد از سوال وارد کردید قطعه کد را می دهد و می توانید با فشار دادن دکمه از آن استفاده کنید. دکمه "Tab".
منفی

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

امیدوارم این مقاله برای شما مفید باشد و Blackbox به شما در سفر کمک کند. در صورت تمایل به من پیشنهاداتی بدهید.


انجام متلب انجام پروژه متلب با بهترین برنامه نویسان متلب

خداحافظ.

مطالب بیشتر در PlainEnglish.io. برای دریافت خبرنامه هفتگی ما ثبت نام کنید. ما را در توییتر، لینکدین، یوتیوب و دیسکورد دنبال کنید. به هک رشد علاقه دارید؟ مدار را بررسی کنید.

خطای tal و از کار افتادن برنامه بدون هیچ نشانه ای از اشتباه رخ داده است. این یک تجربه کاربری وحشتناک است و ما هیجان زده هستیم که از آن دور شویم.

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

سایت سفارش طراحی سایت با بهترین طراحان سایت
مثال

در زیر یک مثال ساده
از انتقال یک برنامه تک صفحه ای از محبوب ترین کتابخانه ناوبری React Native، React Navigation است.

Expo Router بر روی React Navigation ساخته شده است و انتقال برنامه های React Native موجود به مسیریابی مبتنی بر سیستم فایل را آسان تر می کند.

بدون نیاز به دیگ بخار! اکنون برنامه‌ها چندین نقطه ورودی ثابت دارند که به ابزارها امکان می‌دهد در مورد ساختار برنامه شما استدلال کنند و در پشت صحنه بهینه‌سازی‌هایی انجام دهند.
❌ قبل از اکسپو روتر

برای اختصار، مراحل نصب وابستگی و مراحل بومی Xcode/Android Studio را که هنگام کار بدون Expo لازم است حذف کرده‌ام. این مثال همچنین دلیلی برای پنهان کردن صفحه چلپ چلوپ پس از نصب ناوبری ندارد.

ابتدا باید یک جزء صفحه نمایش ایجاد کنید:
app/home.js

سپس یک فایل ناوبری:
./App.js

در نهایت یک فایل ورودی برای ثبت کامپونت ریشه ایجاد کنید:
index.js
✅ روتر بعد از اکسپو

index.js و App.js را حذف کنید - به سادگی یک فایل در فهرست برنامه ایجاد کنید و یک جزء React را صادر کنید. این چارچوب، ناوبری و پیوندهای عمیق را در حافظه، فوراً با Fast Refresh ایجاد می‌کند!

متلب انجام پروژه متلب با بهترین متخصصان متلب


app/home.js

می توانید برنامه را با npx expo start راه اندازی کنید و از مسیر home / در هر دستگاهی بازدید کنید. توصیه می کنم از uri-scheme برای آزمایش لینک های عمیق در iOS و Android استفاده کنید. همچنین می توانید برای رسیدن به نقشه سایت (فقط توسعه) به /__index بروید:
بازگشت به عقب شاخص آپاچی

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

برخی از تنظیمات اضافی موقت در طول بتا وجود دارد که نیاز به استفاده از یک افزونه babel اضافی دارد. این در نسخه رسمی از بین خواهد رفت.

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

ما مشتاقیم که بتای اولیه روتر Expo را امروز با شما به اشتراک بگذاریم. ما می‌خواهیم بازخورد شما را بشنویم و به ما کمک کنید تا مرزهای ممکن را کنار بگذاریم!

ما به دنبال بازخورد در مورد موارد زیر هستیم:

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


طراحی لوگو حرفه ای با بهترین طراح لوگو در فریلنس لوگو



با تشکر ویژه

این بتا بدون کمک برخی از توسعه دهندگان با استعداد ممکن نبود:

Moti Zilberman • باندلر مترو در Meta.
Brent Vatne & Satyajit Sahoo • Expo / React Navigation.
چارلی چیور • اکسپو / طرفدار پی اچ پی.

بخش‌هایی از API عمومی یک نسخه بومی‌شده از چارچوب‌های وب محبوب Remix (مسیرهای تودرتو) و Next.js (قراردادهای فایل) هستند. با الهام از API اضافی از SvelteKit (گروه ها → قطعات) و Redwood (مرزهای خطا مشابه سلول ها هستند). هر چیزی که باقی مانده از PHP الهام گرفته شده است. من سعی کردم تا حد ممکن احساس API را برای توسعه دهندگانی که تجربه قبلی استفاده از چارچوب های React را دارند آشنا نگه دارم.
با تشکر برای خواندن

برای شروع، به مستندات Expo Router مراجعه کنید. لطفاً اشکالات و مشکلات موجود در مخزن Expo Router GitHub را گزارش کنید.

RFC: مسیریابی بومی مبتنی بر سیستم فایل با Expo و React Native

TL;DR: کتابخانه جدید Expo Router در حال پیشرفت است، به بحث در GitHub بپیوندید! برای شروع و کسب اطلاعات بیشتر به مستندات Expo Router مراجعه کنید.

سایت سفارش طراحی سایت سایت
انگیزه

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

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

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

اینجاست که React Native وارد می‌شود. رابط جاوا اسکریپت/نیتیو، تکنیک‌های بسته‌بندی پیشرفته، و معماری مبتنی بر کامپوننت، نیازهای پایه را برای ایجاد یک گردش کاری که در توسعه سریع و بهینه‌سازی شده برای تولید است، فراهم می‌کند.

متلب انجام پروژه متلب با متلب دانان

از آوریل 2021، من روی یک روتر چند پلتفرمی جدید کار می کنم که ناوبری تودرتو و پیوندهای عمیق را کاملاً بر اساس ساختار فایل پروژه ایجاد می کند. مفهوم روتر مبتنی بر سیستم فایل برای توسعه دهندگان وب (PHP، Next.js و غیره) جدید نیست، اما برای توسعه موبایل کاملاً جدید است. با آوردن این پارادایم اساسی به موبایل، به تطبیق قابلیت کشف و مقیاس پذیری وب سایت ها در برنامه های بومی بسیار نزدیکتر می شویم.
اهداف

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

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

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

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

از آنجایی که Expo چند پلتفرمی است، می‌توانید مسیرهای خود را یک بار توسعه دهید و آنها را در iOS، Android و وب به اشتراک بگذارید. این بدان معنی است که می توانید از مدیریت URL داخلی مرورگر برای ایجاد سریع مسیرهای برنامه بومی خود استفاده کنید.

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


طراحی لوگو با بهترین طراح لوگو با بهترین متخصصان

بر خلاف برنامه های وب، برنامه های بومی انتظار می رود همه به صورت آفلاین کار کنند. این بدان معنی است که برنامه باید بتواند هر URL ورودی را بدون اتصال شبکه یا سرور مدیریت کند.
ناوبری واقعاً بومی و برای iOS و اندروید بهینه شده است

ما این مشکل را با پیاده‌سازی ویژگی‌های جدید در کل چارچوب از Expo SDK گرفته تا Expo CLI و بسته‌کننده Metro حل کردیم.

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

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

Expo Router این قابلیت را دارد که مرزهای خطای React را برای هر مسیر تنظیم کند (مرزهای Suspense در نسخه بعدی ارائه می شوند). این بدان معنی است که می توانید به راحتی خطاها و وضعیت های واکشی داده ها را به روشی ثابت در کل برنامه مدیریت کنید و درخواست های ناموفق را دوباره امتحان کنید.

این یک انحراف بزرگ از رویکرد سنتی برای رسیدگی به خطاها در یک برنامه بومی است: پرتاب یک فا