مهدی سافت 313 / MS313.IR

بهترین ها برای بهترین ها

بسم الله الرحمن الرحیم

Front-end در گذشته ؟

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

اگر اپلیکیشنی را مد نظر قرار بدهیم هر آنچه که در اپلیکیشن مشاهده می‌شود به عنوان Front-end کار است .

در گذشته که کمتر در رابطه با این تخصص یعنی سِمَت front-end می‌شنیدیم این کار فقط با استفاده از زبان های پایه‌ای وب انجام می‌شد مانند HTML/CSS/JS  و حتی اکثر مواقع برنامه نویس ها به جای استفاده از JS  یا همان جاواسکریپت از کتابخانه آن یعنی JQUERY استفاده می‌کردند که سالیان سال هم مورد توجه برنامه نویسان قرار گرفت .

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

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

بعد از پیشرفت جاواسکریپت در زمینه Node JS و همچنین ارائه نسخه های جدید مانند ES6 ( نسخه 2015  جاواسکریپت ) به بعد ، جاواسکریپت دیگر آن زبان کم اهیمت وب نبود که وظیفه ایجاد تعامل برای کاربر را داشته باشد جاواسکریپت حالا به عنوان یک زبان برنامه نویسی محبوب و پردرآمد شناخته می‌شود که افراد و شرکت های زیادی در خارج و داخل ایران به دنبال متخصصین رشته های مختلف مربوط به این زبان هستند ، که یکی از این رشته ها و یا شاخه ها React JS است که توسط شرکت بزرگ فیسبوک ساخته شد .

تاریخچه‌ی React JS

React JS   جزء گروه SPA هاست که مخفف جمله‌ی Single Page Application است به معنای وبسایت ها و یا برنامه های تک صفحه‌ای است.

این که ما به جای آنکه یک وبسایت کامل را در صفحات گوناگون و متفاوت داشته باشیم تمامی آن ها را در یک صفحه نمایش بدهیم که عملیات رفرش هم انجام نمی‌شود.

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

این کتاب خانه در تاریخ تاریخ 29 می 2013 توسط شرکت فیسبوک متنشر شد .

برنامه نویس این کتابخانه Jordan Walke که یکی از مهندسین فیسبوک است .

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

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

یکی از نقات تمایز React  در ابتدای کار خود نسب به رقبا استفاده از مبحثی به Virtual DOM بود که در ادامه به آن می‌پردازیم .

DOM مجازی یا ( Virtual DOM )

DOM  یا Document Object Model  دسترسی است که ما از JS به سند HTML و CSS داشتیم به طور مثال می‌خواهیم بگوییم که زمانی که بر روی این دکمه کلیک شد رنگ متن تمام صفحه به رنگ قرمز تغییر پیدا کند.

برای این که با استفاده از DOM ابتدا آن عناصر یا  Element ها را معین کنیم در این جا ما دو عنصر داریم یکی دکمه و دیگری تگ Body است که بایستی از طریق آیدی و یا کلاس و یا نام عنصر انخاب شود و بعد متحویات صفحه تغییر پیدا کند .

DOM  در گذشته نیز وجود داشته است ، اما DOM  مجازی یا همان  Virtual DOM چیست و چه تفاوتی با DOM  دارد ؟

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

به طور کلی زمانی که ما از DOM استفاده می‌کنیم اطلاعات جایگزین می‌شوند به طور مثال در حال حاضر تعداد لایک ها در پست اینستاگرام 15 عدد است و بعد به 16 عدد از سمت سرور تغییر پیدا می‎کند در این جا DOM تنها کاری که می‌تواند انجام دهد این است که آن 15 را به 16 بروزرسانی کند .

حالا فرض کنیم که عدد لایک ما در حال حاضر 15 است و عددی  که سرور برای ما ارسال می‎‌کند نیز 15 است در این حالت DOM باز هم تنها کاری که انجام می‌دهد این است که 15 را به جای 15 بروز رسانی می‌کند و این مشکل کار است .

اما زمانی که ما از Virtual DOM استفاده می‌کنیم سرعت بسیار بالاتری نسبت به DOM داریم و روند کار ما به این شکل خواهد بود که اول  Virtual DOM   کل صفحه‌ی ما را اسکن می‌کند و سپس زمانی که به طور مثال عدد لایک ما 15 است و عدد سمت سرور 16 بود از آنجایی که تغییر بین مقدار جدید و مقدار قدیم صورت گرفته است عملیات آپدیت صورت می‌گیرد.

اما زمانی که عدد لایک ما 15 است و عدد جدید از سمت سرور نیز 15 است Virtual DOM متوجه این موضوع می‌شود و تغییراتی را انجام نمی‌دهد .

 

ساختار JSX  جاواسکریپت با طعم  HTML

ساختار جالبی که ما در React JS مشاهده می‌کنیم و در نگاه اول شاید واقعا برای ما عجیب باشد این است که کد های مشابه HMTL کامل درون فایل هایی با پسوند .js نوشته می‌شوند .

به این نوع ساختار ها ساختار JSX گفته می‌شود .

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

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

یاعلی خدانگهدار
مصطفی صالحی پور
یکشنبه 25 فروردین 1398

نظرات ( تاکنون نظری ثبت نشده است )