mern stack چیست؟ چرا بهترین گزینه هست؟

هدف از توضیحات این صفحه چیه؟ 

1. یکی از راه هایی که می‌تونیم باهاش بفهمیم یه تکنولوژی خوبه یا نه، اینه که بفهمیم چه سایت ها و شرکت هایی از این تکنولوژی استفاده میکنن. توی بخش اول میبینیم که ریکت و نکست کجاها استفاده شدن.

2. روند طراحی یه وب سایت، چطور هست. برای طراحی یه وب سایت، چیا باید یاد بگیریم.

3. دقیقا Mern stack چیه و کجای جهان طراحی سایت هست؟ برای مرن استک شدن، چی کار باید بکنیم؟( road map) 

4. چرا mern stack بهترین گزینه برای طراحی سایت هست؟ چرا حداقل 20 سال آینده طراحی سایت، دست مرن استک هست؟ 

توضیحات جامع و کامل 

کدام سایت های ایرانی، مرن استک هستند؟ 

 

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

لطفا این عکس رو دانلود کنید و ببینید. یا اینکه افزونه wapplyzer رو از لینک زیر دانلود کنید. وارد سایت های بشید و خودتون چک کنید.

دانلود افزونه

همین موضوع نشون میده که چقدر این تکنولوژی ها، خوب و درجه یک هستن که یکی مثل دیجی کالا که الان رنک یک پربازدیدترین سایت های ایران هست، اومده و سایتش رو با نکست زده. 

خلاصه مفید میخوام بگم، هر چیزی غیر از مرن استک( پکیج next.js ، node.js ، mongodb و tailwind) رو بریزید دور. برام جالبه. امروز که دارم متن این صفحه رو مینویسم، 1 تیر 1401 هست. تا 10 روز پیش، دیجی کالا نکست جی اسی نبود. فقط بخش نتایج جستجوی سایتش رو با next زده بودن. امروز که چک کردم، دیدم که کامل شیفت کرده روی نکست. 

کلا طراحان سایت، با چه تکنولوژی هایی سر و کار دارن؟ 

طراحی سایت سه بخش داره

1. اولیش front end یا client side هست
2. 2. دومیش back end یا server side هست
3. 3. و سومیش database 

فرانت اند: 

طراحی سایت از HTML شروع میشه. 

Html چیست؟ 

اچ تی ام ال یه زبان برنامه نویسی هست که یه سری تگ داره. به کمک این تگ ها ما میایم و صفحه اینترنتیمون رو می‌سازیم. مثلا برای اینکه یه دکمه توی صفحه داشته باشیم، میایم از تگ button استفاده می‌کنیم. یا مثلا برای اینکه بتونیم اسم کاربر رو ازش بگیریم، میایم و یه تگ form باز می‌کنیم. داخل تگ فرم یه تگ input می‌زاریم.

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

Css چیست؟ 

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

Tailwind css چیست؟ 

تیلویند یه سیستمی هست که نوشته شده برای اینکه شمای برنامه نویس، دردسر های کدنویسی css خام رو نکشی. به این سیستم جدیدی که برای راحت کردن یه زبان ینوشته شده، میگیم فریمورک. بوت استرپ شنیدید؟ تیلویند یه چی تو مایه های بوت استرپ هست ولی خیلی بهتر از اون.

سایت خود تیلویند  

Javascript چیست؟ 

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

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

React.js چیست؟ 

  

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

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

خلاصه برای این کار، اومدن گفتن که ما اصلا صفحه html ای توی اپ نباید طراحی بکنیم، ما فایل جاوااسکریپت مینویسیم، توی دل اون جاوااسکریپت، میایم کد html رو هم می‌گنجونیم ( که به این html ای که بین کد های js نوشته میشه میگیم jsx، بسیار شبیه همون اچ تی ام ال هست، یه سری اختلافات کوچیک دارن.) سیستم css هم برای ریکت، عین همون قبل باشه. این دوستان طراحیش کردن و این شد ریکت.

سایت خود ریکت

فانکشنال کامپوننت یا کلاس کامپوننت؟ مسئله این است...

در مورد آموزش react.js خدمتتون بگم توی ریکت ما هم کلاس کامپوننت داریم و هم فانکشنال کامپوننت. کلاس کامپوننت رو اصلا یاد نگیرید. این آموزشایی که توی سطح نت هست و بر این مبنا اومدن و کل آموزش رو بستن و اصلا روی فانکشنال کامپوننت مانور ندادن، بدونید که قدیمین. الان دیگه کسی از کلاس کامپوننت استفاده نمیکنه. خدا بیامرزتش. کل تمرکزتون رو بزارید روی فانکشنال و به ویژه هوک هایی که داره. بین هوک هاش هم، سه تا هوک هستن که از همه مهم ترن. useState، useEffect و useRef که همینجا به طور خلاصه بهتون میگم اینا چطورین 

آموزش هوک های react.js

  

آموزش useState 

نکته اول: ببینید شما توی جاوااسکریپت میخواید یه متغیر تعریف کنید، چیکار میکنید؟

const a=0;

let b=0; 

توی ریکت و نکست اینا جفتش رو داریم و میتونیم استفادهشون کنیم. 

نکته دوم: ساختار کامپوننت توی ریکت چطوریه؟ اینطوریه که شما توی کامپوننت یه بخش بالایی دارید که کارهای برنامه نویسی‌طور توش انجام میدید، یه بخش پایینی هم دارید که توش کارهای jsx ای انجام میدید. 

export default function Home() {

 const a = 0;

 let b = 0;

 return (

 <div>

         <div>

            <section>hellow mernfasection>

         div>

      div>

   );

} 

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

مگر اینکه توی یخش محیط کامپوننت یا به اسطلاح state کامپوننت ذخیره شده باشن. برای تعریفش چیکار میکنیم؟ 

const [item,setitem]=useState(0); 

هر جا بخوایم که خود متغیر رو نشونش بدیم، میگیم item . هر جا بخوایم این آیتم رو تغییرش بدیم، میگیم setitem(7) . بعد از استفاده از این دستور، هر جا item رو استفاده کرده باشیم، عدد هفت رو بهمون میده. چه توی بخش بالایی کامپوننت که واسه کدنویسی جاوااسکریپته و چه توی محیط jsx پایین.

نکته چهرام: اون صفر چیه؟ مقدار اولیه state هست. یعنی اگه هیچ جایی ما از setitem استفاده نکردیم، متغیر آیتم مقدارش صفر هست. 

آموزش useEffect 

نکته اول: ساختار کدنویسی یوز افکت به این صورت هست. 

useEffect(()=>{

  },[]); 

شامل دو بخش هست. بخش اول که یه تابع هست

()=>{} 

و بخش دوم که یه آرایه هست

[] 

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

نکته دوم: 

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

مثلا یه کاری که توش انجام میدیم چیه؟ توی صفحه هر پست، کامنت های پست رو اینجا لود میکنیم. چطور؟ یه state تعریف میکنیم خارج از یوزافکت مثلا 

const [comment,setcomment]=useState([]); 

توی این یوز افکت، یه درخواست میزنیم به بک اند و لیست کامنت های این پست رو میگیریم و میریزیم توی متغیر کامنت. چطور؟ مثلا اگر فرض کنیم خروجی درخواست ما data باشه، مینویسیم 

setcomment(data); 

نکته سوم: گفتیم که یوز افکت دو بخش داره، بخش اول تابع بود، بخش دوم چیه و توش چی میاد؟ 

بخش دوم، منطقش اینه که آقای یوز افکت، شما چه زمانی اجرا میشی؟

1. زمانی که کامپوننت ساخته میشه و صفحه میاد بالا

2. هر وقتی که متغیر های موجود در این آرایه( بخش دوم useEffect)، تغییر کنن. اجازه بدید که یه مثال واقعی براتون بزنم و اگه هر جا نفهمیدید، لطفا به کد دقت کنید.

فرض کنید که این آرایه خالی هست و مثلا ما از صفحه یه پست، مستقیم میریم به صفحه یه پست دیگه، خوب اینجا اطلاعات کامپوننت های موجود در صفحه تغییر میکنن و محتوای صفحه هم کامل تغییر میکنه، ولی بخش نظرات تغییر نمیکنه. چرا؟ 1. نظرات پست که بخشی از اطلاعات خود پست نیست که با تغییر اون، اینم تغییر کنه، کلا جدا لود میشه. 2. صفحه پست هم استراکچرش (dom) که تغییری نکرده، فقط اطلاعات پست تغییر کرده.

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

import axios from "axios";

import { useEffect, useState } from "react";

const Single = ({ data }) => {

 const post = data[0];

 // COMMENTS

 const [comments, setcomments] = useState([]);

 useEffect(() => {

 const srcData = {

 poId: post._id,

      };

 axios

         .post(`${serverUrl}/api/model-coms`, srcData)

         .then((data) => {

 setcomments(data);

         })

         .catch((e) => {

 console.log(e);

         });

   }, [post]);

 return (

 <main>

         <div className="container mx-auto my-12 flex flex-col lg:flex-row items-start justify-between">

            <h2 className="text-yellow-400 text-lg">mernfah2>

         div>

      main>

   );

};

export default Single;

export async function getServerSideProps(context) {

 const { slug } = context.params;

 const res = axios.get(`${serverUrl}/api/get-post/${slug}`);

 const data = res;

 return { props: { data } };

}
 

آموزش useRef 

یوزرف همون ref هست که توی خود html استفاده میشه فقط میایم و نسبتش میدیم به یه متغیر. 😊 گیج نشید لطفا، کد زیر رو نگاه کنید لطفا 

import { useRef } from "react";

const Single = ({ data }) => {

 const post = data[0];

 const titleRef = useRef();

 return (

 <main>

         <div className="container mx-auto my-12 flex flex-col lg:flex-row items-start justify-between">

            <form>

               <input type="text" required ref={titleRef} />

            form>

         div>

      main>

   );

};
 

توی این کد، هر چی توی اینپوت وارد بشه، توی متغیر title داریمش. چرا؟ چون بالا برای تعریف تایتل، مقدارش رو رفرنس دادیم به مقدار اینپوت موجود در فرم. 

Next.js چیست؟ 

ریکت یه سری مشکلات داره، یه سری دوستان دیگه اومدن روی ریکت کار کردن، اون مشکلها رو برطرفش کردن، شد نکست جی اس( توی

مقاله next.js چیست، مقاله next.js چیست کامل توضیح دادم این مشکل ها رو). حالا علاوه بر برطرف کردن اون مشکلات، اومدن یه امکانی هم به ریکت اضافه کردن که به کمک اون میتونید بک اند رو هم توی همین نکست بزنید. 

سایت خود نکست جی اس 

React native چیست؟ 

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

سایت خود ریکت نیتیو  

فریمورک های Vue و angular چی میگن این وسط؟ مقایسه فریمورک های جاوااسکریپت 

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

یه نکته مهم هم در مورد این دو تا اینه. همونجوری که نسخه پیشرفته react میشه next.js، پیشرفته vue.js میشه nuxt.js و پیشرفته angular.js میشه universal . 

سایت ویو جی اس  

سایت ناکس جی اس  

سایت انگیولار 

بک اند: 

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

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

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

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

3. اگه اوکی بود، اطلاعات رو توی دیتابیس ذخیره میکنه و اگر اوکی نبود، درخواست فرانت رو برگشت میزنه و توی فرانت، ما ارور میبینیم.

این اعتبار سنجی ها شامل چی میشه؟ یکی اینکه مثلا فرمت اطلاعات وارد شده درست هست یا نه، مثلا مدیر به جای شماره تلفن، کلمه ننوشته باشه یا حتما نیازه که 11 تا باشه. مثلا کاربری که درخواست رو زده، حتما مدیر سایت باشه نه یه کاربر دیگه یا یه هکر و... 

زبان های برنامه نویسی بک اند

برای برنامه نویسی سمت سرور، میشه زبان های مختلفی استفاده کرد مثلا python، php، asp و... یکی از مهمترین‌ها، توی این عرصه جاوااسکریپت هست که با پلتفرم node.js اومده به میدون و همه رو داره کنار میزنه. روی هر کدوم از اینا هم، یه سری فریمورک زده شده برای راحت تر کردن، مثلا django، laravel و.... برای نود جی اس هم چندین فریمورک وجود داره که بهترینش express.js هست. اکسپرس با پکیج mongoose همه کارها رو آسون کرده و خلاصه، بک اند اپ هایی که با فریمورک های جاوااسکریپتی زده میشن، عموما نودجی اس و اکسپرس هست. 

دیتابیس یا پایگاه داده 

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

پایگاه داده های زیادی وجود داره، بعضیاش مخصوص موبایل هست، بعضیاش مخصوص سایت، بعضیاش هم واسه جفتشون استفاده میشه. معروف ترین دیتابیس هایی که واسه طراحی سایت استفاده میشه، mysql واسه سایت های غیر مرن استک و mongodb واسه سایت های مرن استک هست. مثلا واسه وردپرس از mysql استفاده میشه و برای next.js از مونگو دی بی.  

مسیر یادگیری طراحی سایت( road map طراحی سایت) 

خلاصه مفید بخوام بهتون بگم برای مرن استک شدن، اینا رو یاد بگیرید: 

• 1. HTML
• 2. CSS
• 3. JS
• 4. TAILWIND CSS
• 5. REACT.JS
• 6. NEXT.JS
• 7. NODE.JS
• 8. MONGODB

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

موشکافی mern stack 

مرن استک بر مبنای حروف میشه عکس زیر 

 

ولی مرن استک واقعی که ما استفاده میکنیم، میشه این عکس 

  

چرا مرن استک بهترین گزینه هست؟

   

1. سئو درجه یک مرن استک. البته نه خود ریکت، بلکه next.js و البته همچنین nuxt 

2. سرعت بسیار زیاد این اپلیکشن ها که اصلا قابل مقایسه سایت های غیر مرن استک نیست. خیلی بیشتره 

3. امکان لود اطلاعات از دیتابیس هم پیش از ساخت صفحه که میشه همون ssr و ssg و isr و هم لود اطلاعات پس از ساختن صفحه، به کمک csr. توی سه تای اول از getStaticProps، getStaticPaths و getServerSideProps استفاده میکنیم و توی آخری( یعنی سی اس آر) از useEffect

4. بهینه کردن تصاویر. این موضوع ویژه نکست جی اس هست و توی مقاله next.js چیست کامل توضیح داده شده. 

5. خاصیت lazy loading: یعنی کل اطلاعات مورد نیاز صفحه سایت شما، همهش همون اول و همزمان با ساخته شدن صفحه، لود نمیشه و صفحه ساخته نمیشه بلکه به تدریج این کار انجام میشه. این تدریج یعنی چی؟ یعنی هر چقدر که کاربر سایت، اسکرول میکنه به پایین، اطلاعات مورد نیاز همون بخش لود میشه. این طوری سرعت لود اولیه سایت بسیار بالا میره و سئو خیلی ارتقا پیدا میکنه. 

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