8 نکته برای ساخت اپلیکیشن‌های فوق‌العاده React.js در ۲۰۱۸
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 7 دقیقه

8 نکته برای ساخت اپلیکیشن‌های فوق‌العاده React.js در ۲۰۱۸

سال جدید، روند کدنویسی بهتر: این مطلب به صورت بسیار کوتاه و مختصری به نکاتی می‌پردازد که با پیروی کردن از آن‌ها می‌توانید به تکنیک‌ها و نکته‌های جدیدی از ری‌اکت‌جی‌اس در سال ۲۰۱۸ دست پیدا کنید. امیدوارم که بتوانید در میان این موارد، نکته مناسب و مفیدی را پیدا کنید.

نکته شماره ۱: از ری‌اکت ۱۶ استفاده کنید

ری‌اکت نسخه ۱۶ تقریبا ۶ ماه پیش در ماه ۹ سال ۲۰۱۷ عرضه شد. این زمانی است که همگان باید از این نسخه استفاده کنند. شانس شما در این است که اگر از نسخه‌های قبل استفاده کنید، مهاجرت کردن به این نسخه کار بسیار ساده‌ای است و علاوه بر آن باید گفت که ویژگی‌های جدید‌تر و بهتری نیز افزوده شده است. در این بین من از ساختار Fiber و توانایی در ایجاد صفت‌های سفارشی در DOM بسیار خوش‌م می‌آید. آخرین نسخه از این سری را همراه با بهترین ویژگی‌های آن را به صورت رسمی دانلود کنید و بهترین شکل ممکن از آن استفاده کنید. 

نکته شماره ۲: آن را ساده نگه‌دارید

ابزارهای‌تان را هوشمندانه و بدون وجود سنگینی بیش از حد انتخاب کنید. با استفاده از پکیج Create React App می‌توانید در زمان بسیار کمی اپلیکیشن‌هایی درست کنید و آن را در اینترنت قرار دهید. 

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

نکته شماره ۳: الگوهای ری‌اکت‌ را یاد بگیرید

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

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

higher order components

container and presentational components

controlled and uncontrolled inputs

function as child components

نکته شماره ۴: چیزهای جدید را در اکوسیستم ری‌اکت جی‌اس انتخاب کنید

اگر زمان مناسب و اضافی دارید، پس از امتحان کردن موارد جدید در ری‌اکت جی‌اس هراسی نداشته باشید. ری‌اکت جی‌اس اکوسیستم بسیار عظیمی دارد. در این اکوسیستم تقریبا می‌توانید برای هر مشکلی یک راه‌حل مناسب را پیدا کنید و از آن استفاده نمایید. در میان لیست awesome-react جستجویی کنید، مطمئنا موارد جدید و جالبی را پیدا می‌کنید که توجه‌تان را جلب می‌کند. مطمئن شوید که ابزارها، استایل‌ها و راه‌حل‌های بسیار زیادی را امتحان کرده‌اید، با این کار مطمئنا می‌توانید بسیار بهتر با مسائل مواجه شوید و الهام بگیرید.

نکته شماره ۵: پلتفرم را بپذیرید

کاربران معمولا انتظار دارند که وب اپلیکیشن شما قابلیت کاوش داشته باشد، از طریق URL قابلیت به اشتراک گذاری داشته باشد و بتواند Sessionها را ذخیره کند. وقتی هرکدام از این موارد عادی از دسترس خارج باشند، کاربر شما سرخورده و سردرگم می‌شود. همواره سعی و تلاش زیادی بکنید و سعی کنید بهترین چیزها را با مرورگرتان ادغام نمایید.

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

نکته شماره ۶: آفلاین شوید

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

اگر این مطلب (Offline Cookbook) برای‌تان کمی پیچیده بود نگران نباشید، در نگاه اول همواره اینگونه به نظر می‌رسد. Create React App به صورت پیشفرض به شما دسترسی به پوسته آفلاین اپلیکیشن را می‌دهد که به نظر شروع بسیار خوبی است. شما همچنان باید داده‌های خود را برای استفاده آفلاین پیاده‌سازی و آماده کنید. Google Workbox و Firebase می‌توانند دوستان خوبی برای شروع کار شما باشند.

نکته شماره ۷: برای دستگاه‌های کند بهینه‌سازی کنید

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

از Lighthouse استفاده کنید، این سرویس به شما ایده بسیار بهتری راجع به اینکه چه مواردی نیاز دارند تا بهبود بیابند می‌گوید. بعد از آن وارد نسخه جدید webpack dashboard یا webpack bundler analyzer شوید و ببینید در کجا می‌توانید این کارها را انجام دهید.

اگر به همه چیزهایی که شما وارد کرده‌اید نیاز دارید پس نگران نباشید. به این دلیل که راه‌های دیگری نیز برای بهتر کردن کارایی وجود دارد: مواردی مانند code plitting and dynamic imports، HTTP/2's multiplexing and push capabilities و یا prefetching link attributes.

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

نکته شماره ۸: دقیق‌تر نگاه کنید

یادگیری تمام مفاهیمی که پشت ری‌اکت جی‌اس قرار دارد زمان‌بر است. پروژه‌ای را بدون در نظر گرفتن JSX ایجاد کنید تا به vDOM نزدیک‌تر شوید. با یادگیری بهتر و عمیق‌تر از این مسئله، می‌توانید اپلیکیشن‌تان را به صورت بسیار کاراتر و بهتری بهینه‌سازی نمایید.

با APIهای محتوا آشنایی بیشتری پیدا کنید. این مورد قدرتی به شما می‌دهد که بتوانید محتوای دیگر کتابخانه‌ها را به اشتراک بگذارید و استفاده کنید. مواردی مانند MobX و Redux. 

با ری‌اکت جی‌اس تا بی‌نهایت بروید

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

آموزش ReactJs

آموزش Redux

آموزش پروژه محور React Native

چه نکات دیگری را اضافه کنیم؟

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

منبع

چه امتیازی برای این مقاله میدهید؟

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

/@arastoo
ارسطو عباسی
کارشناس تولید و بهینه‌سازی محتوا

کارشناس ارشد تولید و بهینه‌سازی محتوا و تکنیکال رایتینگ - https://arastoo.net

دیدگاه و پرسش

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

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید