آموزش برنامه نویسی در ری اکت و نود جی اس



برنامه نویسی RealTime در React و Nodejs توسط Socket.io

 

برنامه نویسی RealTime یکی از مواردی هست که در بسیار از پروژه ها به اون نیاز داریم . قسمتهایی مثل چت آنلاین ، داشبوردهای مدیریتی ، نمایش لحظه ای اطلاعات سخت افزار ، نمایش لحظه ای قیمت ، مسابقات زنده و . . در این آموزش قصد داریم با یک مثال بسیار ساده نحوه استفاده از Socket.io از کتابخانه های اصلی جاوااسکریپت رو با هم آموزش ببینیم . 

 

سلام به دوستان عزیزم .

امروز با یک آموزش بسیار مهم در عین حال زیبا و پرکاربرد و صد البته اسان در خدمتتون هستم . حتما تا بحال در بسیاری از اپلیکیشین ها و سایت ها بخشهایی مثل چت آنلاین ، پشتیبانی آنلاین و یا داشبوردهای مدیریتی که اطلاعاتی رو به صورت زنده نمایش میدن . به این جور بخش ها اصطلاحا Real Time programming  گفته میشه . در فریمورک ها و زبانهای مختلف معمولا کتابخونه هایی وجود داره که وظیفه  پیاده سازی این نوع عملیات رو به عهده دارن مثلا در فریمورک Entity Framework در زبان های C# یا Vb از SignalR استفاده میشه . جاوا اسکریپت هم به نوبه خودش کتابخانه فوق العاده قدرتمندی داره به اسم Socket.io  که دقیقا همینکار رو برای ما انجام میده . در این آموزش که قصدم اینه که شما رو با یک مثال بسیار ساده با این کتابخونه آشنا کنم . البته این مثال گرچه ساده هست ولی کاملا کاربردی و قابل استفاده در پروژ های شماست . در این مثال قصد داریم اطلاعات سخت افزاری سرور رو بگیریم و در لحظه به کاربر نمایش بدیم  و همینطور یک پیام ساده از کاربر دریافت میکنیم و سرور همون پیام رو بعد از دریافت دوباره به کاربر نشون میده . پس با هم شروع میکنیم . قول میدم زیاد وقتتون گرفته نشه .

Socket.io : بزن بریم برای برنامه نویسی RealTime 

Socket.io یکی از با ارزش ترین کتابخانه ها برای کسانی هست که با Node.js کار میکنن . چرا؟ از اونجا که به شما امکان میده ارتباطات هماهنگ صرفاً در برنامه شما انجام بشه و این به معنای ارتباط در زمان واقعی هست ! مثال ساده تر بزنم ؟ بگذارید این را به روش دیگری بگم : socket.io به شما امکان می دهد مثلاً سرویس چت را در وب سایت خود پیاده کنید! امکاناتی که socket.io ارائه می دهد بسیار زیاد است و بسیار فراتر از بحث این آموزش و برای همه چیزهایی که نیاز به ارتباط فوری بین بازدید کنندگان وب سایت شما دارند کاربرد دارد .به عنوان مثال نمایش اطلاعات یک بازی آنلاین در صفحه بدون صفحه رفرش بشه. این وسوسه انگیز است ، اینطور نیست! اگر بگی اینطور نیست کلاهمون میره تو همدیگه ها ! 

 

socket.io چه کاری انجام می دهد؟

قبل از شروع کد ، می خواهم به سرعت ایده socket.io را توضیح بدم . این یک کتابخانه به ما اجازه میده که خیلی از عملیات ها رو بسیار ساده پیاده سازی کنیم . با این حال ، socket.io خودش مبتنی بر تعدادی از تکنیک های مختلف است که امکان برقراری ارتباط در زمان واقعی را فراهم می کنه  (و بعضی از این تکنیک ها سالهاست که وجوددارن ). مشهورترین و جدیدترین  تکنیک که درمورد  اون صحبت میکنیم WebSocket است.

WebSocket؟ آیا این یکی از اون  نوآوری های HTML5 نیست؟

 

نه ! این یکی از پیشرفت  های تکنولوژی جدید هست که تقریباً همزمان با HTML5 ظاهر شده ، اما HTML نیست: یک API جاوا اسکریپت است.

WebSocket یکی از امکاناتی هست که توسط همه مرورگرهای موجود پشتیبانی شده و امکان  تبادل دو جانبه همزمان بین کلاینت و سرور فراهم می کنه . منظورت از تبادل دو جانبه چیه ؟! بیایید دوباره به اصول اولیه برگردیم. ارتباطات در وب معمولاً هماهنگ نیستند. اینترنت همیشه به این صورت بوده است: کلاینت درخواست می کنه و سرور پاسخ می ده (شکل بعدی را ببینید).

ارتباط بین سرور و کلاینت در اینترنت

 

خوب وقتی وب شروع شد  ما به ارتباطات واکنشی و فوری بیشتری نیاز داشتیم . به عنوان مثال ، در این تصویر ، سرور نمی تونه تصمیم بگیره که چیزی برای مشتری ارسال بکنه یا نه (برای مثال برای گفتن: "یک پیام جدید وجود دارد!"). اول  کلاینت باید که صفحه را بارگیری مجدد بکنه یا برای تماس با سرور اقدامی انجام بده و سرور این حق را نداره که به تنهایی با کلانت صحبت کنه یا اطلاعات بفرسته .

WebSocket نوآوری است که به نوعی "ارتباط" لوله ای شکل بین کلاینت و سرور باز میکنه . مرورگر و سرور به یکدیگر متصل می شوند و می توانند از طریق این لوله پیام ها را از یک جهت و جهت دیگر مبادله کنند. بنابراین از این پس سرور می تواند به تنهایی تصمیم بگیرد که مانند یک فرد بزرگتر پیامی را به کلاینت ارسال کند (شکل بعدی را ببینید)!

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

 

صبر کنیدددددددددد!!!!!!

WebSocket را با AJAX اشتباه نگیرید یک وقت !

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

 

برگردیم به Socket.io

Socket.io  امکان استفاده از WebSockets را بسیار آسان  کرده است  و از آنجا که همه مرورگرها WebSockets رو پشتیبانی نمی کنند ،  Socket.io با مدیریت مرورگر ، می تونه از سایر روشهای ارتباطی هماهنگ استفاده کنه . بهتر هست نیم نگاهی به بخش پشتیبانی مرورگر وب سایت socket.io نگاهی بندازید . می تونیم ببینیم که socket.io تعیین می کند که کدام روش ارتباطی در زمان واقعی برای هر کلاینت مناسب است:

WebSocket

Adobe Flash Socket

AJAX long polling

AJAX multipart streaming

Forever Iframe

JSONP Polling

به عنوان مثال ، اگر مرورگر از WebSocket پشتیبانی نکنه اما Flash نصب شده باشه ، socket.io برای انجام ارتباط در زمان واقعی از طریق Flash اقدام می کنه . اگر فلش هم نصب نشده باشه  ، می تونه از تکنیک های دیگری مانند AJAX Long Polling استفاده کنه (کلاینت بطور مداوم از سرور می پرسه  آیا برای  موضوع مشخص شده به روزرسانی جدیدی وجود داره یا نه ،این روش ساده ترین یا کارآمدترین روش نیست ولی کار می کنه ) یا "Forever Iframe" که مبتنی بر iframe نامرئی هست که اطلاعات به تدریج بارگیری می شوند.

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

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

Internet Explorer 5.5+ (yes, you read that correctly!).

Safari 3+

Google Chrome 4+

Firefox 3+

Opera 10.61+

Safari for iPhone and iPad

The Android browser

 

حالا که ما اطلاعات بیشتر ی در مورد چگونگی عملکرد socket.io می دونیم ، آیا می تونیم شروع به استفاده از آن بکنیم ؟

 

برای مطالعه آموزش نحوه برنامه نویسی چت آنلاین در ری اکت توسط socket.io به سایت نیلوتک در بخش اموزش مراجعه بفرمائید


پیاه سازی سبد خرید در React Js توسط Redux

در این آموزش قصد داریم نحوه پیاده سازی سبد خرید رو در سایت فروشگاهی توسط دو کتابخانه پر قدرت Redux و React Redux به شما آموزش بدهم .

 

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

 

قدم اول برای شروع پروژه

ما در این سایت برای همه آموزش ها و طراحی ها از محیط کد نویسی Visual Studio Code استفاده میکنیم . فرض ما بر این هست که شما با نحوه استفاده از این محیط آشنا هستید و فقط نیاز دارید با پیاده سازی سبد سفارش در سایت توسط ری اکت آشنا بشید .

پس ابتدایک پروزه React رو ایجاد میکنیم . توسط چی ؟ معلومه دستور معروف 

npx create-react-app samplecart

 

اگر که هنوز create-react-app رو نصب نکردید ابتدا این دستور رو اجرا کنید

npm i -g create-react-app

 

اون اسم samplecart چی هست ؟ اسم پروژه ما هست که باید بعد از فرمان create-react-app نوشته بشه و نباید همنام با ماژولهای مورد استفاده در پروژه  باشه . بعد از اجرای این دستور فولدری با همین نام در مسیر مشخص شده ایجاد میشه . اکی ؟

 

پس ادامه میدیم

بعد از اجرای دستور ساخت پروژه ری اکت یک مقدار صبر میکنیم تا همه ماژول های مورد نیاز نصب بشن . سپس فولدری رو که با نام پروژه یعنی samplecart ساختیم رو از منو File/Open Folder انتخاب میکنیم

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

درون ترمینال که توسط کلید میانبر Ctrl + `   (کنترل + بک تیک ) فعال میشه ، دستور زیر رو اجرا کنید

npm i redux react-redux bootstrap

 

Redux و React Redux چی هستن ؟

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

 

شما میتوانید ادامه مقاله ایجاد سبد خرید در ری اکت توسط ماژول Redux را در سایت نیلو تک در بخش آموزش مطالعه بفرمائید


Mongodb چیست؟ معرفی، معماری، ویژگیها و مثال

Mongodb یک پایگاه داده غیررابطه ای است که جهت ذخیره سازی دادههایی با حجم بالا استفاده می-شود. Mongodb یک پایگاه داده است که در اواسط سال 2009 ظهور کرد. این پایگاه داده در گروه پایگاه داده غیررابطه ای قرار دارد

 

سلام به همه دوستان .

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

 

ویژگی­های Mongodb

  1. هر پایگاه داده شامل مجموعه ای است که به نوبه خود شامل اسناد می­باشد. هر سند می­تواند به همراه تعداد فیلدهای مختلف متفاوت باشد. اندازه و محتوای هر سند می­تواند متفاوت از یکدیگر باشد. 

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

     
  3. همانطور که در پایگاه­های داده نو اس کیو ال مشاهده شد، ردیف­ها ( یا اسناد همانگونه که در Mongodb نامیده می­شوند ) نیاز  به داشتن یک شمای از پیش تعریف شده ندارند. در عوض، فیلدها می­توانند در زمان اجرا ایجاد شوند. 
     
  4. مدل داده­ های موجود در Mongodb این امکان را به شما می­دهد تا روابط سلسه مراتبی را نشان دهید، آرایه ­ها و دیگر ساختارهای پیچیده تر را راحت تر ذخیره کنید.

 

مقیاس پذیری یا Scalability

محیط­های Mongodb بسیار مقیاس پذیر هستند. شرکت ها در سرتاسر جهان خوشه ­هایی را تعریف کرده اند که برخی از آنها 100 گره با حدود میلیون­ها اسناد در پایگاه داده دارند. 

 

مولفه­ های کلیدی معماری مانگو دی بی

id_ :  

این فیلدی است که در هر سند Mongodb مورد نیاز است. فیلد id_ یک مقدار منحصر بفرد را در سند Mongodb نشان می­دهد. فیلد id_  همانند کلید اولیه ­ی سند است. اگر شما یک سند جدید را بدون فیلد id_ ایجاد کنید، Mongodb بطور خودکار این فیلد را خواهد ساخت. بنابراین بعنوان مثال، اگر به مثال جدول مشتری بالا نگاه کنیم، Mongodb یک شناسه خاص 24 رقمی را به هر سند در مجموعه اضافه خواهد کرد. 

 

نمونه یک جدول یا سند در مونگو دی بی


 

مجموعه یا Collection  :

مجموعه یک گروه بندی از اسناد Mongodb است. یک مجموعه معادل یک جدول است که در هر پایگاه داده رابطه ای دیگر مانند Oracle  و  MSSQL ایجاد می­شود. یک مجموعه درون یک پایگاه داده موجود است. همانطور که از مقدمه دریافت میشود مجموعه­ها هیچ گونه ساختاری را اعمال نمی­کنند.

 

اشاره گر یا Cursor  :

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

 

پایگاه داده یا Database :

این یک محفظه برای مجموعه­ ها است مانند RDBMS که در آن یک محفظه برای جداول وجود دارد. هر پایگاه داده مجموعه فایل­های خود را بر روی سیستم فایل ارائه می­دهد. یک سرور مانگو دی دی می­تواند چندین پایگاه داده را ذخیره کند. 

 

سند یا Document  :

یک رکورد در یک مجموعه Mongodb اساساً یک سند نامیده می­شود. سند، به ترتیب، شامل فیلد نام و مقادیر خواهد بود. 

 

فیلد یا Field  :

یک جفت نام مقدار در یک سند. یک سند دارای صفر یا تعدادی فیلد است. فیلدها نظیر ستون­ها در پایگاه­های داده رابطه­ای هستند. 

 

نمودار زیر نمونه ای از فیلدها با جفت­های کلید مقدار را نشان می­دهد. بنابراین در مثال زیر CustomerID و 11 یکی از جفت­های کلید مقدار تعریف شده در سند است. 

نمونه کلید مقدار در مونگو دی بی
مثالی از جفت­های کلید مقدار

 

JSON :

این اصطلاح بعنوان JavaScript Object Notation شناخته می­شود. این یک قالب متنی ساده و خوانا برای انسان جهت انتقال داده­های ساختاریافته است. JSON درحال حاضر در بسیاری از زبان­های برنامه نویسی پشتیبانی می­شود.

تنها یک نکته حساس درمورد تفاوت بین فیلد _id و یک فیلد معمول مجموعه. فیلد _id برای شناسایی منحصر بفرد اسناد در یک مجموعه استفاده و بطور خودکار توسط Mongodb در زمانی که مجموعه ساخته می­شود افزوده می­شود.

 

چرا از Mongodb استفاده می­کنیم؟

معلومه چونکه بیکاریم ؟! شوخی کردم با هم دلایلش رو بررسی میکنیم .

  1. سند گرا :  از آنجایی که Mongodb یک نوع پایگاه داده غیررابطه ای است، بجای داشتن داده­ها در قالب رابطه ­ای، آن­ها را در اسناد ذخیره می­کند. این امر باعث می­شود که Mongodb بسیار انعطاف پذیر و سازگار با شرایط و اامات کسب و کار دنیای واقعی باشد. 
     
  2. پرس و جوهایAd hoc – Mongodb : از جست و جو براساس فیلد، جست و جوهای محدوده، و جست و جوی منظم عبارت پشتیبانی می­کند. پرس و جوها می­توانند برای بازگرداندن فیلدهای خاص درون اسناد ایجاد شوند.
     
  3. شاخص گذاری : شاخص­ها می­توانند برای بهبود عملکرد جست و جوها در Mongodb ایجاد شوند. هر فیلد در یک سند Mongodb می­تواند شاخص گذاری شود. 
     
  4. همانند سازی : Mongodb می­تواند قابلیت دسترسی بالا را با replicasets فراهم کند. یک replica set متشکل از دو یا چند نمونه Mongodb است. هر عضو replica set ممکن است در هر زمان در نقش یک replica اولیه یا ثانویه عمل کند. replica اولیه سرور اصلی است که با مشتری در تعامل است و تمامی عملیات خواندن/نوشتن را انجام می­دهد. Replica­های ثانویه یک نسخه از داده­ های replica اولیه را با استفاده از همانند سازی درونی نگهداری می­کنند. هنگامی که یک replica اولیه از کار می افتد، replicaset بطور خودکار با replica ثانویه جا به جا و سپس تبدیل به سرور اصلی می­شود.
     
  5. تعادل بارگزاری : Mongodb از مفهوم خرد کردن به اجزاء کوچکتر برای اندازه گیری افقی با جداسازی داده­ ها در چندین نمونه از Mongodb استفاده می­کند. Mongodb می تواند برروی چندین سرور اجرا شود، بارگذاری را متعادل سازی کند و یا از داده ­ها برای بالا نگه داشتن سیستم و اجرا در صورت مشکل در نرم افزار نسخه برداری کند

 

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

 

 


خلاصه تاریخچه جاوا اسکریپ

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

تا خلاصه ای از تاریخچه زبان جاوااسکریپت رو با هم مرور کنیم . 

 

تاریخچه مختصری از جاوا اسکریپت

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

 

این افراد شرکت خود را Mosiac Communication نامگذاری کردند و اولین محصول آنها در سال 94 با نام mosaic   Netscape عرضه شد. آنها  جرئت این را داشتند که کارمندان شرکت NCSA Mosaic  را به سمت خود جذب کنند  ،بنابراین برای شرکت و محصولات خود این نام را انتخاب کردند.اما طولی نکشید که با برخی مشکلات مربوط به حق تکثیر روبرو شدند و در نتیجه آن را Netscape Navigator نامیدند ، اما همچنان به مرورگر داخلی خود Mozilla - Mosiac Killer  می گفتند.

 

 Netscape Navigator  بسیار موفقیت آمیز بود و در 4 ماه اول انتشار نزدیک به 75٪ کل بازار مرورگر ها را در اختیار داشت.در مدت زمان کوتاهی مرورگر پیش فرض قرار گرفت. این افراد برای مدتی حکمرانی می کردند ، اما خیلی زود آنها با غولی به نام مایکروسافت به مقابله پرداختند، بنابراین تصمیم گرفتند با غول دیگری به نام  Sun Microsystems همکاری کنند تا بتوانند جاوا را در همه سیستم عامل ها بگنجانند. همه چیز طبق برنامه پیش نرفت در نتیجه مجبور به ساخت یک زبان برنامه‌نویسی شدند که به عنوان زبان مرجع برای HTML  عمل می‌کرد.

 

استفاده از این نرم‌افزار توسط طراحان وب و برنامه نویسان نیمه‌وقت، که در آن کد را به طور مستقیم در حاشیه وب سایت می نوشتند ساده بود. این زبان تحت نام Mocha ساخته شد وبه طور رسمی  LiveScript نامیده شد، اما در دسامبر 1995 وقتی که مورد استفاده قرار گرفت به جاوا JavaScript تغییر نام یافت. آنها دوباره همان ترفند را به کار بردند و نام آن را بر اساس یک زبان برنامه نویسی موجود انتخاب کردند  تا به آن ارزش و اعتبار آنچه به آن زبان برنامه نویسی جدید و به روز  می گفتند را بدهند، در نتیجه باعث ایجاد سردگرمی شدند.

 

جنگ جستجوگر ها مدت زیادی بینNetscape Navigator  و اینترنت اکسپلورر  (IE) طول کشید. در سال ۹۷ بعد از انتشار اینترنت اکسپلورر ۴ و برگزاری یک مهمانی تمام شب در سانفرانسیسکو، افراد مایکروسافت یک لوگوی ۱۰ فوتی با علامت "e" در چمن مقابل نت‌اسکیپ تشکیل دادند با نوشته ای با مضمون "ازطرف تیم EI . ما شما را دوست داریم” . صبح روز بعد وقتی هرکدام از اعضای نت‌اسکیپبه دفتر رسیدند، این لوگوی عظیم را می دیدند و بدون فکر کردن آن را ازبین بردند و شکلغول‌پیکری از Mozilla  را بالای آن قرار دادند که یک تابلو با متن "نت‌اسکیپ ۷۲، مایکروسافت ۱۸"را به نمایش می داد که در آن زمان  توزیع بازار را نشان می‌داد. از آن زمان همه چی برای نت اسکیپ رو به نزول بود زیرا تنها منبع درآمد آن ها مرور گر ها بود و مایکروسافت شروع به ارسالIEبه  صورت رایگان کرده بود.

 

معرفی کتابخانه جاوا اسکریپت در سایت نیلوتک

 

همچنان مایکروسافت ویندوز،  ۹۰ % از بازار سیستم ‌عامل رومیزی را در اختیار داشت. اینترنت اکسپلورر همراه با هر نسخه ی ویندوز نصب شده بود ، بنابراین مایکروسافت توانست به راحتی با پیش فرض قرار دادن مرورگر خود بر بازار مسلط شود. نت‌اسکیپ نتوانست ادامه دهد و در نهایت فروخته شد و IE با داشتن  ۹۶ درصد از کاربران مرورگر وب به اینترنت حاکم بود.

 

جاوا اسکریپت با کمک سازمان بین المللی ECMA  از جنگ مرورگرها جان سالم به در برد و آن ها ، آن را  به یک استاندارد تبدیل کردند. مایکروسافت همچنین یک اسکریپت مشابه برای اینترنت اکسپلورر می خواست ، اما نمی خواست در مورد مسئله نام تجاری با Sun Microsystems مقابله کند ، و به همین دلیل آنها محصول خود را JScript نامیدند. اکنون توسعه دهندگان باید سخت کار کنند تا سایت هایشان در همه مرورگرها کار کنند و از آنجا که IE در آن زمان بسیار مورد استفاده قرار می گرفت ، JavaScript  نیز مشهور شد به دلیل اینکه یکی از ایستگاه ها برای صفحات وب متقابل و استاندارد محور بود.

 

با گذشت زمان مشخص شد که مایکروسافت قصد همکاری یا اجرای مناسب JavaScript در Internet Explorer را ندارد. بعداً یاهو ، مایکروسافت ، گوگل و برخی دیگردور هم جمع شدند و تا  زیرمجموعه ای به منظور ایجاد یک به روزرسانی کمتر جاه طلبانه از ECMAScript (همان JavaScript) تشکیل دهند. یک روز شخصی به نام جیمز اصطلاح Ajax را اختراع کرد که می تواند بدون نیاز به بارگیری مجدد کل صفحه ، داده ها را در پس زمینه بارگذاری کند.

 

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

 


S (React یا React.js) به عنوان یک کتابخانه متن‌باز جاوا-اسکریپت (نه یک فریمورک) برای ساخت رابط کاربری تعریف شده است. مهندسان برتر فیسبوک React.Livecoding را توسعه داده‌اند که محیطی برای شروع یادگیری یا بهبود مهارت‌های کدنویسی React است. ما نیز در ‌این محیط بخشی را برای آموزش‌ها و منابع react js اختصاص داده‌ایم.

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

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

 

معرفی کتابخانه React JS

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

 

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

 

تاریخچه React JS

React یک تکنولوژی جدید است که با سایر تکنولوژی‌های موجود در بازار مقایسه می‌شود. React در سال 2011، زمانی‌که Jordan Walke (یک مهندس نرم‌افزار در فیسبوک) این کتابخانه را ‌ایجاد کرد، به بازار عرضه شد. React تحت تاثیر فریمورک هایی مثل XHP (که یک فریمورک ساده HTMl برای PHP است) قرار گرفته است. اولین مورد استفاده React در سال 2011 در خوراک (فید) خبری فیسبوک بوده است. بعدها، توسط ‌اینستاگرام برای بهره‌گیری در سیستم اینستاگرام مورد استفاده قرار گرفت. با گذر زمان، React رشد کرد و فیسبوک تصمیم گرفت تا آن را در کنفرانس جاوا-اسکریپت آمریکا (JSConf US) در سال 2011 به صورت متن‌باز در آورد. در کنفرانس جاوا-اسکریپت آمریکا در سال 2015، React Native معرفی شد تا توسعه آسان را با توسعه ‌اندروید و iOS فراهم سازد. در همان سال، Rect Native متن‌باز شد تا به رشد آن کمک شود.

 

نیاز برای کدی بهتر

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

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

مدلی که ارائه کرده بودند مشکلی نداشت، اما آن‌ها باید در مورد تجربه کاربر تغییری انجام می‌دادند. بنابراین، Jordan Walke نمونه اولیه‌ای ‌ایجاد کرد که فرایند را کارآمدتر می‌کرد و ‌این نقطه شروع React.js را نشان می‌دهد.

 

ظهور React.js به طور فزاینده‌ای فرصت‌هایی را برای توسعه‌دهندگان فرانت-اند به منظور خلق رابط‌های کاربرپسند گسترش داد. 

 

برای نمایش ویژگی‌های منحصر‌به‌فرد آن، در حال انتشار مطالب بسیاری در مورد React.js هستیم. علاوه بر آن، متخصصان کاربلد فرانت-اند ما، ویدئوهای زنده بسیاری را منتشر خواهند کرد که در آن‌ها چگونگی ساخت اپلیکیشن‌های React را در یک سرور میزبان محلی و رایگان را نشان می‌دهد.

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

 

شما میتواندی ادامه معرفی ری اکت را در سایت نیلوتک مشاهده نمائید .

 

 


تبلیغات

آخرین ارسال ها

آخرین جستجو ها

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