انگولار بهتر است یا ری اکت؟ اگه شما تو حوزه طراحی و برنامه نویسی وب فعالیت داشته باشین، قطعا اسم تکنولوژی هایی مثل react و angular رو حداقل یه بار شنیدین. اگه سایت های مختلف در حوزه آگهی های استخدامی مثل جابینجا رو بررسی کرده باشین، قطعا دیدین که اکثر آگهی های استخدامی در حوزه برنامه نویسی مهارت تو یکی از تکنولوژی های react و angular رو از شما می خوان. آموزش ری اکت ( ReactJs)

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

فرض کنین یکی از این افراد مختلف مشاوره غلطی ارائه بده و برنامه نویس عزیز به اشتباه یکی از این تکنولوژی ها ( react یا angular ) رو انتخاب کنه و بعد از مدتی که کلی هزینه و زمان صرف کرده، متوجه میشه مسیری که اومده اشتباهه و این موضوع یکی از فاجعه بار ترین و شایع ترین مشکلات تو حوزه برنامه نویسی هست.

از کسی نپرسین که کدوم بهتره انگولار بهتر است یا ری اکت؟ !

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

اگه یه مثال بزنیم، این سوال شما مثل این میمونه که از یکی بپرسین چه غذایی خوبه؟

خب قطعا هر شخص بنا به علاقه و سلیقه ای که داره، به یه غذای خاصی علاقه داره.

ممکنه از افراد مختلفی بپرسین چه غذایی خوبه؟

یکی میگه برنج. یکی میگه کوبیده. یکی میگه ماکارونی و ….

شما میخواین با سلیقه بقیه مردم پیش برید؟!

اگه یه موقع علاقه شما با اونا یکی نبود چی؟

یا مثلا در مورد رنگ ها.

ممکنه از چند نفر بپرسین چه رنگی خوبه؟

یکی بگه سبز. یکی بگه قرمز و …

چون سلیقه ای هست.

مثل ریاضی نیست که همه بگن 2+2 میشه 4.

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

بیشتر اوقات سعی کنین این سوالات رو از هر کسی نپرسین. چون ممکنه تو یه گروهی بپرسین “کدوم فریمورک خوبه یاد بگیرم؟” و یه نفر از روی ناآگاهی یا تعصبی که داره مثلا بگه ریکت، یا بگه ویو یا انگیولار

و شما هم بنا به حرف ایشون میرید مثلا سمت ریکت

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

پس هر موقع خواستین همچین سوالی بپرسین، حتما حتما معیارهاتون رو بیان کنین.

شاید براتون سوال باشه که منظور از معیار چیه؟

خب بریم سراغ قسمت بعدی …

چه معیارایی واسه انتخاب react یا angular مناسب هستن؟

شاید اولین باری هست که تو حوزه برنامه نویسی کلمه “معیار” رو میشنوین. یه مثال براتون میزنم که براتون قابل درک تر باشه.

کلمه “معیار های ازدواج” رو قطعا شنیدین. مثلا واسه یه شخص معیار قد برای ازدواج مهمه، واسه یه شخص تحصیلات مهمه، واسه یکی ممکن هست وزن مهم باشه و … .

اینا معیار هایی هستن که شما واسه انتخاب همسر به عنوان شریک زندگی بنا به این معیار ها عمل می کنین و تصمیم می گیرین.

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

مثلا یه نفر ممکنه براش بازار کار مهم باشه، واسه یه نفر محبوبیت اون تکنولوژی مهم باشه، واسه یکی آسون بودن، واسه یه نفر دیگه سرعت توسعه و …

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

تو قسمت های بعدی مقاله react و angular رو با این معیار ها مقایسه می کنیم.

کدومش بهتره؟ react یا angular

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

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

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

پس سعی کنین تا جایی که امکان داره همچین سوال هایی رو مطرح نکنین.

توضیح مختصر در مورد React

react یکی از لایبرری (کتابخونه) های جاوا اسکریپت هست که توسط فیسبوک ارائه شده.

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

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

طبق گفته داکیومنت خود ریکت، ریکت یه کتابخونه واسه ساختن UI (رابط کاربری) وب سایت هست.

وقتی شما از ریکت استفاده می کنین، دیگه هیچ خبری از هیچ فایل html نیست و کل وب سایت رو تو فایل هایی با فرمت Js توسعه میدین.

ممکنه براتون سوال باشه که همچین چیزی چطور ممکنه! ریکت از یه سینتکسی به نام JSX استفاده می کنه که مخفف Java Script XML هست.

شما تمام کد های Html که واسه سکشن های مختلف سایتتون نیاز دارین، داخل فایل های Js می نویسین.

همین موضوع استفاده از Jsx، ریکت رو واسه دوستانی که تازه شروعش کردن براشون سخت به نظر برسه.

ولی همین که سینتکس JSX و XML رو درک کرده باشین و با سیستم ماژولار آشنایی داشته باشین، هیچ سختی در کار نیست.

آدرس داکیومنت ریکت وب سایت reactjs.org هست که می تونین واسه اطلاعات بیشتر و آشنایی بیشتر با ریکت بهش مراجعه کنین.

به نظرم همین قدر توضیح برای معرفی ریکت کافیه و ادامه توضیحات رو تو قسمت مقایسه ریکت با انگولار ادامه میدیم.

توضیح مختصر در مورد Angular

Angular (با تلفظ انگیولار) یکی از فریمورک های قدرتمند جاوا اسکریپت هست که تو سال 2010 توسط شرکت Google ارائه شد.

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

آدرس داکیومنت Angular وب سایت angular.io هست که می تونین واسه اطلاعات بیشتر و آشنایی بیشتر با Angular بهش مراجعه کنین.

به نظرم همین قدر توضیح برای معرفی Angular کافیه و ادامه توضیحات رو تو قسمت مقایسه ریکت با انگولار ادامه میدیم.

تفاوت های بین React و Angular

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

دو تا تصویر زیر نقاط قوت و ضعف ریکت و Angular رو به خوبی نشون میده. بهشون توجه کنین:

انگولار بهتر است یا ری اکت؟ مقایسه angular و react

انگولار بهتر است یا ری اکت؟ مقایسه angular و react

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

تو قسمت های بعدی این دو تکنولوژی قدرتمند رو با معیار های غیر فنی هم مقایسه می کنیم.

مقایسه از لحاظ بازار کار

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

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

به عکس زیر توجه کنین:

انگولار بهتر است یا ری اکت؟ مقایسه angular و react

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

در حالی که با توجه با توجه به تصویر زیر:

انگولار بهتر است یا ری اکت؟ مقایسه angular و react

فریمورک angular فقط 127 تا آگهی برای استخدام داره. یعنی ریکت 2 برابر بیشتر از angular تو بازار کار جا داره.

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

محبوبیت و جامعه آماری کدومش بیشتره؟

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

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

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

قطعا هممون سایت استک اور فلو رو قبول داریم. اگه به آمار استک اور فلو توجه کنیم: با توجه به عکس زیر React محبوبیت و جامعه آماری زیادی نسبت به Angular داره:

انگولار بهتر است یا ری اکت؟ مقایسه angular و react

بله …

همون طور که تو این عکس هم مشاهده می کنین، ریکت از محبوبیت و جامعه آماری بیشتری نسبت به Angular برخوردار هست. ممکن هست براتون سوال باشه که منظور از جامعه آماری چیه؟!

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

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

حالا ممکنه براتون سوال باشه که خب محبوبیت یا جامعه آماری بالا به چه دردمون میخوره؟

حتی ممکنه براتون سوال باشه که وقتی جامعه آماری بالا باشه، پیدا کردن کار و استخدام شدن سخت تر هم میشه!!

حالا بریم این دو تا ابهام رو هم برطرف کنیم.

خب اولش سوال اول (رابطه جامعه آماری و معیار خوب) رو بررسی می کنیم. واسه جواب دادن به این سوال یه خاطره از خاطرات تلخ (یا شیرین) از خودم تعریف می کنم.

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

اما اگه شما یه ریکت کار باشین و تو توسعه های پروژه های ریکتی یه مشکلی داشته باشین، با یه سرچ کوچیک تو گوگل کلی منبع و مقاله و وب سایت های پرسش و پاسخ براتون میاد که سوالتون سه سوته حل میشه.

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

حالا بریم سراغ سوال بعدی (سخت شدن فعالیت در بازار کار در صورت بالا بودن جامعه آماری).

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

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

react یا angular بر اساس سرچ گوگل

این قسمت رو می تونیم ادامه همون جامعه آماری و محبوبیت بدونیم.

به تصویر زیر که از طریق آنالیز دقیق سرچ های گوگل به دست اومده توجه کنین:

انگولار بهتر است یا ری اکت؟ مقایسه angular و react

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

تو این مرحله خیلی عمیق و کامل به محبوبیت بالای ریکت پی بردیم.

کدومش آسون تره؟ react یا angular؟

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

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

واسه این معیار قطعا نمیشه جواب قطعی داد (چون ممکنه هر کدومش واسه افراد مختلف آسون یا سخت باشه) اما بنا به برخی شواهد موجود میشه نظر تقریبا درستی ارائه داد.

ریکت از سینتکس JSX استفاده می کنه و دقیقا همین موضوع باعث اذیت شدن برنامه نویسای ریکت هنگام یادگیری میشه.

فریمورک انگولار هم بر اساس تایپ اسکریپت نوشته شده و شما واسه یادگیری Angular باید تایپ اسکریپت رو هم بلد باشین و دقیقا مثل JSX همین موضوع هم تو Angular صدق می کنه و ممکن هست برنامه نویسایی که به تازگی قصد ورود به همچین تکنولوژی هایی رو دارن، ابتدای کار یکم اذیت بشن.

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

پس به نظر من انتخاب بر اساس معیار آسونی یا سختی نمیتونه معیار خوب و معقولی واسه انتخاب تکنولوژی باشه و پیشنهاد می کنم انتخابتون رو با این معیار انجام ندین.

سخن پایانی

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

علاوه بر این که تو همین مقاله گفته شد، باز هم تاکید می کنم خوب یا بد بودن بین فریمورک ها و لایبرری های جاوا اسکریپت وجود نداره و شما فقط و فقط باید بنا به علاقه و معیار های خودتون یکی از اونا رو انتخاب کنین و هیچ وقت از هیچ کسی نپرسین که “تو کدوم یکی رو پیشنهاد می کنی؟!”

منبع

https://sabzlearn.ir/

React ssr چیست

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

دارای تعدادی از مزایای عملکردی است که UX وب سایت شما را بهبود می بخشد. صفحات SSR زمان بارگذاری بسیار سریع‌تری دارند و اولین رنگ محتوای سریع‌تری دارند زیرا محتوا زودتر در مرورگر در دسترس است. این بدان معناست که کاربر شما زمان کمتری برای نگاه کردن به صفحه بارگیری دارد.

جاوا اسکریپت دارای منابع سنگین و کد فشرده است. دانلود آن بر روی یک مرورگر با استفاده از CSR کمک قابل توجهی به وزن صفحه می کند. یک فایل جاوا اسکریپت به طور متوسط ​​حدود ۱ مگابایت است، در حالی که بهترین روش توسعه وب توصیه می کند کل صفحه را کمتر از ۵ مگابایت نگه دارید.

بهبود عملکردی که با SSR ارائه می شود مزایای SEO خاص خود را نیز دارد. گوگل رتبه های جستجوی ترجیحی را به سایت هایی می دهد که سریع ترین بارگیری می شوند. زمان بارگذاری سریعتر معیارهای کاربر مانند مدت زمان جلسه و نرخ پرش را بهبود می بخشد . الگوریتم های گوگل به این معیارها نگاه می کنند و سئو بیشتری به شما می دهند-

آیا SSR به Core Web Vitals کمک می کند؟

در مرکز هر دنیای SEO در حال حاضر Core Web Vitals (CWV) قرار دارد. این سه کلمه کوچک، فهرست جدید موبایل اول ما هستند. جهان ما دوباره در حال تغییر است و اکنون زمان سازگاری است. در مورد SSR، بله، می تواند به CWV شما کمک کند. از آنجایی که صفحات در سایت شما رندر می شوند، سرعت سایت بهبود یافته است، به ویژه در رابطه با بزرگترین رنگ محتوایی (LCP). ما می دانیم که باید معیارهای سه معیار را برآورده کنیم. LCP یکی است. یک LCP سریع به این معنی است که شما یک سوم راه رسیدن به آن اهداف جدید را دارید.

نظر موتورهای جستجو در مورد SSR چیست؟

اولویت یک موتور جستجو برآوردن نیازهای کاربر است. آیا آنها محتوای مرتبط با یک پرس و جو را توصیه می کنند؟ برای اینکه موتورهای جستجو به این هدف برسند، باید بتوانند در کل اینترنت بخزند. تا 11 فوریه 2021، بیش از 5.65 میلیارد صفحه وب وجود داشت . حجم کاری که برای خزیدن در صفحات زیادی لازم است کار آسانی نیست. موتورهای جستجو برای کمک به شما از جدیدترین فناوری ها و توصیه ها به وب سایت ها متکی هستند. SSR یکی از بهترین راه‌ها برای کمک به ربات‌ها در خزیدن سایت شما است. گوگل توسعه دهندگان را تشویق می کند تا با استفاده از رندر پویا یک گام فراتر بروند تا سرعت خزیدن در اینترنت را افزایش دهند.

چگونه تأیید کنیم که SSR صفحات را به درستی رندر می کند؟

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

مشاهده منبع رندر شده – یک افزونه کروم که تفاوت بین HTML اولیه و HTML رندر شده را به شما نشان می دهد.

ابزار بازرسی URL در GSC - هشدارها و خطاهای JS در زمان واقعی که Google با آنها روبرو می شود.

تست سازگار با موبایل - عکس‌های فوری HTML صفحه را دریافت کنید.

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

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

منبع

https://www.pixellair.ir/

ساخت اپلیکیشن PWA

پل ارتباطی شما با مشتریان در دنیای مدرن

جاوا اسکریپت یک زبان اسکریپت‌­نویسی (یا برنامه­‌نویسی) است که برای افزودن ویژگی­‌های پیچیده (مانند انیمیشن­‌های 2 و 3 بعدی، نقشه­‌های واکنش­‌گرا و...) به وب­‌سایت از آن استفاده می­‌شود. برنامه‌­نویسان جاوا اسکریپت به منظور کدنویسی کم­‌تر و رسیدن به نتیجه مورد نظر در کوتاه‌­ترین زمان، از فریم‌­ورک‌­های این زبان مانند Vue ، React، Angular و... استفاده می­‌کنند. هر کدام از این فریم‌­ورک­‌ها شامل کتابخانه­‌های کوچک و بزرگ به همراه قواعد و دستورات خاص خود هستند و برنامه‌­نویسان برای انتخاب هر کدام از آن‌ها دلایل خود را دارند. شما نیز اگر در انتخاب کتابخانه­‌های جاوا اسکریپت برای یادگیری مردد هستید، ابتدا باید ویژگی­‌های هر کدام را به خوبی بشناسید.

منبع 

https://7learn.com/

Core Web Vitals چیست؟

Core Web Vitals که با نام CWV هم شناخته میشود، در واقع یک سری فاکتور یا معیار هستند. معیارهایی که به شکل دقیق روی تجربه کاربری یا همان UX تمرکز کرده اند و گوگل به کمک شان میفهمد کاربران در هر صفحه وب چه تجربه ای دارند. اجازه بدهید ساده تر صحبت کنم:

در واقع گوگل یک سری معیار برای خودش در نظر گرفته و طبق آنها، رفتار کاربران در سطح وب را بررسی میکند. به این ترتیب به کمک این معیارها متوجه میشود که کاربران در هر صفحه سایت شما، با چه مشکلاتی روبرو میشوند. این مجموعه معیارها که روی سرعت سایت، تعامل کاربر و… تمرکز دارند، Core Web Vitals نام گرفته.

دقت کنید؛ گوگل از بررسی رفتار کاربران با این معیارها، میفهمد که هر صفحه از سایت شما باید لایق چه جایگاهی باشد؟ بنابراین میتوان گفت Core Web Vitals، فاکتورهایی هستند که روی سئو سایت شما تاثیر زیادی دارند.

معیارهای Core Web Vitals چیست؟

اول از همه باید بدانید که منبع این سیگنال ها، مرورگر کروم است. این یعنی گوگل رفتار کاربران را از طریق مرورگر کروم بررسی کرده و طبق آن، این معیارها را میسنجد. اما معیارها کدامند؟ به طور کلی Core Web Vitals در حال حاضر شامل این 3 دسته معیار است:

LCP FID CLS در ادامه مقاله همه اینها را به شما توضیح داده و سپس به شما خواهم گفت که چطور میتوانید هر کدام از این معیارها را در سایت خودتان بسنجید.

نکته: الان روی صحبت من خود Core Web Vitals است نه گزینه Core Web Vitals در سرچ کنسول! بنابراین در سرچ کنسول به دنبال این گزینه هایی که پایین تر به شما توضیح میدهم نباشید. بعد از توضیح آنها به سراغ سرچ کنسول هم رفته و جزئیات بخش CWV را نشان تان میدهم.

Largest Contentful Paint یا LCP

شاید نامش کمی ترسناک باشد، اما درکش خیلی هم سخت نیست. همانطور که در وبینار Core Web Vitals هم استاد الوهیمی عزیز گفتند: خیلی ها به اشتباه میگویند که LCP یعنی مدت زمان لود صفحه. اما خب به طور دقیق تر:

LCP به زمانی اشاره دارد که بزرگترین اِلِمان صفحه شما لود شود!

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

0 تا 100 سئو جوملا - 13 قدم مهم افزایش سئو سایت Joomla در واقع LCP همان مدت زمانی است که این بخش پرحجم صفحه شما، که میتواند یک تصویر، یک تکه متن یا یک المان گرافیکی باشد، به طور کامل لود شده و نمایش داده شود.

First Input Delay یا FID

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

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

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

CCumulative Layout Shift یا CLS

به ثبات ظاهری سایت یا بهتر است بگویم واکنشگرایی صحیح صفحه اشاره دارد. اما این یکی چه معنی دار

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

گوگل چطور این معیارها را اندازه گیری میکند؟

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

در ادامه اما گوگل برای اندازه گیری نمره صفحات وب در هر کدام از 3 معیار بالا یک امتیاز قائل شده! پس هر صفحه از سایت شما در هر کدام از این 3 معیار یکی از این امتیازها را خواهد گرفت:

GOOD یا همان عالی،

NEED IMPROVEMENT یا نیازمند به بهبود،

POOR یا ضعیف.

این یعنی ممکن است صفحه سئو چیست سایت ما، در LCP نمره GOOD، در FID نمره POOR و در CLS هم نمره POOR بگیرد. حالا در ادامه توضیح میدهم که هر صفحه از سایت تان چطور میتواند هر کدام از این نمره ها در 3 معیار اصلی را بگیرد:

LCP

LCP سرعت لود کمتر از 2.5 ثانیه برابر با نمره GOOD است،

سرعت لود 2.5 تا 4 ثانیه برابر با نمره NEED IMPROVEMENT است،

سرعت لود بیشتر از 4 ثانیه برابر با نمره POOR است. آموزش حرفه ای و رایگان Ahrefs و Moz و SEO SpyGlass

FID

FID سرعت پاسخگویی کمتر از 100 میلی ثانیه برابر با نمره GOOD است،

سرعت پاسخگویی 100 تا 300 میلی ثانیه برابر با نمره NEED IMPROVEMENT است،

سرعت پاسخگویی بیشتر از 300 میلی ثانیه برابر با نمره POOR است.

CLS

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

نمره 0.1 امتیاز GOOD

نمره 0.1 تا 0.25 امتیاز NEED IMPROVEMENT،

و بالاتر از 0.25 برابر با POOR است.

ابزارهای اندازه گیری Core Web Vitals

ابزارهای زیادی وجود دارند که بتوانیم به کمک شان جزئیات هسته های حیاتی گوگل را اندازه گیری کنیم که در ادامه آنها را به شما معرفی میکنم:

pagespeed insights

chrome ux report

سرچ کنسول

chrome devtools

LightHouse

web vital extension

البته در این مقاله به طور مبتدی با دو ابزار سرچ کنسول و گوگل پیج اسپید اینسایتس کار کرده و بررسی Core Web Vitals با آنها را نشان تان میدهم.

آموزش اندازه گیری Core Web Vitals

همانطور که بالاتر هم گفتم، در ادامه 2 راهکار برای اندازه گیری و بررسی Core Web Vitals را به شما نشان میدهم. ابتدا به سراغ سرچ کنسول برویم:

سرچ کنسول و Core Web Vitals

ابتدا سرچ کنسول سایت تان را باز کنید و روی گزینه Core Web Vitals که در تصویر پایین هم مشخص شده کلیک کنید:

سرچ کنسول و Core Web Vitals در ادامه آمار صفحات تان را در دو دیوایس موبایل و دسکتاپ مشاهده میکنید:

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

نمرات Core Web Vitals همانطور که در تصویر پیداست، 193 صفحه از سایت ما در LCP نمره پایینی دارند اما هیچ کدام در CLS نمره بدی نگرفته اند. حالا برای بررسی آن صفحاتی که نمره پایین گرفته اند، روی LCP کلیک میکنم. به این ترتیب آدرس صفحات به من نمایش داده میشود:

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

pagespeed insights و Core Web Vitals

ابزار بعدی که به شما در بررسی Core Web Vitals کمک میکند، پیج اسپید اینسایتس گوگل است. برای بررسی معیارهای کور وب وایتالز، باید لینک هر صفحه از سایت تان را در این ابزار وارد کنید. ابتدا بعد از روشن کردن فیلتر شکن، وارد این صفحه شوید:

آموزش کار با PageSpeed Insight در این صفحه لینک صفحه مورد نظرتان را وارد کرده و دکمه ANALYZE را انتخاب کنید.

pagespeed insights و Core Web Vitalsهمانطور که مشاهده میکنید، آمارهایی در مورد صفحه نمایش داده شد. به جز گزینه FCP، الان شما همه این گزینه ها را میشناسید.

3 دلیل موجه برای استفاده از وبلاگ برای ایجاد لید جنریشن (lead generation) در مورد FCP: این گزینه به سرعت لود اولین اِلمان صفحه اشاره دارد.

سوال: آیا نمرات بد در هسته حیاتی گوگل باعث کاهش قدرت سئو میشود؟

احتمالا در تصاویر بالا مشاهده کردید که خیلی از صفحات ما در فرین آکادمی از نظر Core Web Vitals امتیاز خوبی نگرفته اند. اما نکته جالب اینجاست که خیلی از همین صفحات در صفحه اول گوگل و حتی لینک اول هستند!

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

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

سئو نسبی است!

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

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

آیا Core Web Vitals معیارهای دیگری هم دارد؟

اندازه گیریجواب منفی است، در حال حاضر در Core Web Vitals معیار دیگری وجود ندارد، اما اجازه بدهید کمی قضیه را کلی تر نگاه کنیم. در نوامبر سال 2020، گوگل از این خبر داد که در ماه مه سال 2021 (اردیبهشت 1400) آپدیت جدیدی به اسم Google Page Experience منتشر میشود. در واقع این هشدار گوگل در مورد این بود که نکات تجربه کاربری در سئو سایت در آینده تاثیر زیادی خواهد داشت.

اما این موضوع چه ربطی به بحث این مقاله دارد؟ خب راستش را بخواهید، خود Core Web Vitals یکی از معیارهایی Google Page Experience است. پس بقیه معیارها چه چیزهایی هستند؟ اینها:

وجود SSL، موبایل فرندلی بودن سایت، (سازگاری با دستگاه های موبایل) امنیت صفحه، بنابراین پیشنهاد میکنم نگاهی هم به وضعیت سایت تان در این موارد داشته باشید تا در آینده دچار مشکل نشوید.

کلام آخر

خب به انتهای مقاله Core Web Vitals رسیدیم. در این مقاله ابتدا به معرفی Core Web Vitals یا هسته حیاتی وب پرداختیم، سپس با معیارهای آن آشنا شدیم، نحوه امتیازدهی اش را بررسی کردیم و بعد به شکل جامع ابزارها و نحوه اندازه گیری امتیاز CWV را شناختیم.

به عنوان کلام آخر؛ یادتان باشد Core Web Vitals در چیزی که در این مقاله یاد گرفتید خلاصه نشده و قطعا در آینده ای نزدیک گوگل با توجه به بازخوردهایی که میگیرد، تغییراتی در معیارهایش میدهد. امیدوارم از مطالعه این مقاله لذت برده باشید.

منبع 

https://farin.academy/

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

Ruby چیست؟

Ruby یا روبی یکی دیگر از زبانهای برنامه نویسی انعطاف پذیر و شی گرا می باشد .زبان روبی رسماً در روز ۲۴ فوریه ۱۹۹۳ (۵ اسفند ۱۳۷۱) توسط یوکیهیرو ماتسوموتو معرفی شد. او دنبال ساخت زبانی بود که امکانات متعادلی برای برنامه‌ نویسی تابعی و برنامه‌ نویسی دستوری برای برنامه‌ نویس فراهم آورد. ماتسوموتو درباره انگیزه‌اش برای ساخت روبی می‌گوید: «در جستجوی زبانی بودم که از پایتون شیءگراتر و از پرل قدرتمندتر باشد. برای همین تصمیم گرفتم خودم آن را بسازم».

روبی ویژگی‌های نگارشی پرل و شی‌گرایی اسمال‌ تاک را با هم در خود دارد. زبان روبی در سال‌های میانی دهه ۱۹۹۰ توسط یوکیهیرو ماتسوموتو در ژاپن اختراع شد. ویژگی‌های گوناگون زبان‌های پرل، لیسپ، اسمال‌تاک و آیفل الهام‌ بخش ماتسوموتو در ساخت روبی بودند. زبان روبی پارادایم‌های گوناگون برنامه‌ نویسی از جمله برنامه‌ نویسی تابعی، شیء گرا و بازتابی را پشتیبانی می‌کند، دارای گزاره‌ها و متغیرهای پویا و مدیریت حافظه خودکار است. نسخه فعلی این زبان Ruby 1.9.1 است که به زبان سی و بصورت زبانی با مفسر تک‌گذره پیاده‌سازی شده است. تا سال ۲۰۱۰، گونه‌های مختلفی از زبان روبی توسعه یافته‌اند که از میان آنها می‌توان به جی‌روبی، روبینوس، مک‌روبی، آیرن‌روبی و هات‌روبی اشاره کرد.

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

برنامه نویسی روبی

روبی برای تعقیب هدف کمترین غافلگیری بیان شدبه این معنی که زبان باید طوری رفتار کند که کمترین گیج‌کنندگی را برای استفاده‌کننده‌های آن داشته باشد. ماتسوموتو همچنین اظهار می‌دارد که هدف اولین طراحی او درست کردن زبانی که خودش از آن لذت ببرد بود. این کار با کم کردن کار برنامه‌ نویس و ابهامات منطقی می‌باشد. اما کمترین غافلگیری هنوز خیلی به بیان زبان برنامه نویسی روبی نزدیک است. افراد ناشی شاید این را به این معنا تعبیر کنند که رفتارهای روبی سعی در متصل کردن اشتراکات رفتارهای دیگر زبان‌ها را دارد. در بحث ماه می ۲۰۰۵ در روزنامه ‘کامپ.لنگ.روبی’ ماکسوموتو تلاش کرد که روبی را از مینیمم غافلگیری دور کند. توضیح اینکه هر شانس طراحی بعضی‌ها را متعجب می‌کند. او از استاندارد خود برای ارزیابی غافلگیری استفاده کرد. ماتسوموتو این را در یک گزارش مطرح ساخت. ‘همه یک پیشینه شخصی دارند، بعضی‌ها از جانب پایتون می‌آیند بعضی‌های دیگه از پرل و آن‌ها ممکن است از بعضی از جنبه‌های متفاوت زبان غافلگیر شوند. سپس آن‌ها به من می‌گویند ما از بعضی از جنبه‌های زبان غافلگیر شدیم، بنابرین روبی قانون کمترین غافلگیری را زیر پا گذاشته است. صبر کنید… هدف کمترین غافلگیری فقط برای شما نیست. این هدف به معنای کمترین غافلگیری ممکن برای بیان من می‌باشد. این به معنای کمترین غافلگیری بعد از آموزش کامل زبان است. برای مثال من قبل از طراحی روبی برنامه‌ نویس سی‌ پلاس‌ پلاس بودم. من منحصراً دو، سه سال در سی‌پلاس‌پلاس برنامه نوشتم و بعد از دو سال برنامه‌نویسی با آن، هنوز مرا متعجب می‌کرد.

زبان برنامه‌ نویسی روبی بیشتر به خاطر وجود فریمورک محبوبش تحت عنوان Ruby on Rails شناخته می‌شود چرا که سورس‌کد نوشته شده با این فریمورک به راحتی خوانده شده و این بزرگترین لطفی است که این فریمورک در حق افراد مبتدی می‌کند. از ویژگی‌های این زبان پرکاربرد در توسعهٔ وب می‌توان به دینامیک (پویایی) و شیئ‌گرا بودن اشاره کرد. روبی یک زبان سمت سرور قدرتمند است و به همین دلیل وب‌سایت‌های زیادی از جمله GitHub و Groupon از روبی استفاده می‌کنند.

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

توسعهٔ وب

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

برخورداری از فریمورک محبوبی تحت عنوان Ruby on Rails

کدنویسی سریع با استفاده از RoR

کاملاً شییٔ‌گرا

معایب زبان برنانه نویسی روبی

فریمورک RoR اساساً بر پایه‌ٔ مجموعه‌ای از میانبرها است و به خاطر سپردن همین میانبرها تاحدودی کار را برای مبتدی‌ها دشوار می‌سازد.

برخی از امکانات Ruby

کاملاً شی گرا

داینامیک

انعطاف‌پذیر

پشتیبانی از iterators و closures

پشتیبانی محلی از regular expressions

سربارگزاری عملگرها

قابلیت حمل بالا

در تمام سیستم‌عامل های اصلی پیاده‌سازی می شود

اتصال بومی API ها در C

کتابخانه استاندارد بزرگ

منبع

https://www.sourcebaran.com/

AngularJs هم یکی دیگر از فریم‌ورک‌های زبان جاوا اسکریپت است که مزایا و معایب مخصوص به خود را دارد. در این درس به سوال AngularJs چیست؟ پاسخ می‌دهیم و سپس سری به دستورات این فریمورک می‌زنیم.

AngularJs چیست؟

AngularJs یک فریم‌ورک متن باز و رایگان بر پایه‌ی جاوا اسکریپت است. پروژه‌ی آنگولار جی اس، از سال ۲۰۰۹ توسط شخصی به نام میسکو هوری (Hevery) آغاز شد و اکنون توسط گوگل توسعه داده می‌شود.

این فریم ‌ورک برای ایجاد وب‌سایت‌های تک صفحه‌ای (SPA) بسیار مناسب است. پیاده سازی ساختار MVC درآن باعث می‌شود کدهایی با ساختار بهتر و تست پذیرتر داشته باشید.

دستورات این فریم‌ورک با هدف افزودن امکاناتی به HTML‌ ایجاد شده و باعث می‌شود آن را از استاتیک بودن خارج کرده و به داینامیک تبدیل کند.

در این مقاله از Adminesite به بررسی مزایا و معایب این فریم ورک محبوب می‌پردازیم.

چرا از AngularJs استفاده می‌شود؟

مزایای متعدد AngularJs باعث شده کاربران زیادی به استفاده از آن ترغیب شوند. در ادامه بخشی از مزایای استفاده از این فریم‌ورک را مشاهده می‌کنید:

مزایای آنگولار جی اس

سادگی در یادگیری: برای یادگیری آن کافیست به CSS ،HTML و JavaScript مسلط باشید.

HTML چیست و چه کاربردی دارد؟

CSS چیست؟

تزریق وابستگی یا dependency injection: شما دستوراتی را تعریف می‌کنید و در طول برنامه هرجا که به آن نیاز داشته باشید آنگولار آن را در دسترس شما می گذارد (تزریق می‌کند.)

کم نویسی کد: این فریم‌ورک به گونه‌ای طراحی شده است که شما مجبور به نوشتن کد کمتری خواهید بود! برای مثال نیاز به نوشتن pipeline در ساختار MVC نیست.

دایرکتیوها: بخش هیجان‌انگیز AngularJs استفاده از directiveها است که می‌توان به کمک آن تگ‌های جدیدی به ‌وجود آورد!

ادغام پذیری: آنگولارجی اس، به سادگی با سایر فریم ورک‌ها و ابزارها ادغام می‌شود و این نکته‌ی مثبتی برای توسعه‌دهندگان محسوب می‌شود.

تست‌پذیری راحت: این فریم‌ورک دارای unit testهای آماده است که این فرآیند تست را بسیار سریع و آسان می کند.

معایب استفاده از AngularJs چیست؟

مانند هر ابزار یا تکنولوژی دیگر، آنگولار جی اس هم دارای معایب مخصوص به خود است.

یکی از بزرگترین ایرادهای آن ضعف در سئو است. اگر بحث سئو و بهینه‌سازی سایت برای شما اهمیت زیادی دارد، بهتر است از این فریم ورک استفاده نکنید.

سئو به چه معناست؟

یکی دیگر از معایبی که می‌توان از آن نام برد، گیج کننده بودن انتخاب دستور مناسب است.

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

دستورات AngularJs

آنگولار از attributeهای HTML‌ با پیشوند ng- استفاده می‌کند. کد زیر نمونه ای از دستورات AngularJs است. ng-app شروع‌کننده‌ی دستورات این فریم‌ورک است. ng-init هم برای تعریف داده به کار می‌رود.

در مثال بالا مقدار massege برابر با ‘Hello AngularJS!’ شده است که توسط دو براکت و کلمه‌ی massege به نمایش در می‌آید. بنابراین خروجی این کد نمایش جمله‌ی Hello AngularJS است.

منبع

https://adminesite.com/

React JS؛ کتابخانه محبوب جاوا اسکریپت برای طراحی UI

React JS یکی از سریع‌ترین و محبوب‌ترین کتابخانه‌ها (Library) جاوا اسکریپت است که توسط فیسبوک اینستاگرام و یک جامعه مستقل از توسعه دهندگان وب مدیریت و نگهداری می‌شود.

React یک Libarary متن باز و البته رایگان جاوا اسکریپت برای طراحی رابط کاربری است. این کتابخانه جاوا اسکریپت در ماه مه سال ۲۰۱۳ به صورت عمومی منتشر شد. جالب است بدانید که این فریم ورک در ابتدا توسط یکی از مهندسین فعال در فیسبوک به وجود آمد. آقای «جردن واک» در سال ۲۰۱۱ این فریم ورک را تحت تاثیر XHP که یک کامپوننت HTML برای زبان برنامه نویسی PHP‌ است، ایجاد کرد. در همین سال React روی قسمت News Feed شبکه اجتماعی فیسبوک به کار گرفته شد و ۲ سال بعد، یعنی در سال ۲۰۱۳ هم استفاده از آن توسط فیسبوک به اینستاگرام تعمیم پیدا کرد.

بیشتر بخوانید:

اکما اسکریپت چیست؟

نکته مهم در کاربرد React JS این است که این کتابخانه صرفا در الگوی طراحی MVC، عهده‌دار بخش View است. View یا اینترفیس در واقع مرتبط با نمایش اجزا هستند و طبعا React JS به جای پرداختن به الگوی MVC به وظایفی می‌پردازد که مربوط به نمایش اجزا می‌پردازد. از دیگر کاربردهای React JS استفاده در طراحی و ایجاد سایت تک صفحه‌ای است.

استفاده از React JS در HTML

استفاده از این فریم ورک جاوا اسکریپت در HTML کار چندان مشکلی نیست. برای این کار شما باید از JSX و ECMAScript 2015 استفاده کنید. بنابراین انتظار می‌رود که پیش از استفاده از React دانش کافی از HTML و جاوا اسکریپت داشته باشید. اگر دوست دارید با HTML آشنا شوید، می‌توانید دوره آموزش HTML مقدماتی در لیداوب را مطالعه کنید. برای استفاده از «ری اکت» به کد HTML زیر توجه کنید:

در اینجا، کلاس Greeter یک کامپوننت React است که ویژگی (Property) greeting را می‌پذیرد. پس از آن متد ReactDOM.render مثالی از کامپوننت Greeter ایجاد می‌کند و ویژگی greeting را به عنوان Hello World تبدیل کرده و با شناسه myReactApp ، این کامپوننت را به عنوان المنت فرزند (child) به المنت DOM، رندر می‌کند. بنابراین هنگامی که کد HTML بالا در مرورگر اینترنت نمایش داده شود، نتیجه از این قرار خواهد بود:

چرا React JS اینقدر محبوب است؟

react js

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

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

React چه خصوصیات متمایزی دارد؟

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

JSX

jsx

مطالعه بیشتر در لیداوب:

انگولار جی اس (angular js) چیست ؟

در React، برای پروسه Templating از JSX یا JavaScript Syntax Edition به جای جاوا اسکریپت عادی استفاده شود. JSX نوعی جاوا اسکریپت ساده است که شما اجازه می‌دهد تا کدهای html را درون ساختارش قرار دهید. این کدهای HTML در ساختار JSX در هنگام اجرا به کدهای جاوا اسکریپتی رندر می‌شوند. البته این امکان وجود دارد که کدها را بدون استفاده از HTML و به صورت جاوا اسکریپت هم بنویسید. در این صورت دیگر نیازی به دانش JSX نیست.

React Native

react

React یک سری کتابخانه نیتو (Native) دارد که در سال ۲۰۱۵ توسط فیسبوک به دست توسعه دهندگان اپلیکیشن موبایل رسید. این کتابخانه‌های نیتیو React، یک معماری ارائه می‌دهند که با استفاده از آن بتوان اپلیکیشن اندروید نیتیو و اپلیکشن iOS نیتیو توسعه داد.

Virtula Document Objective Model

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

Single-Way Data Flow

در React یک سری مقدار (Value) تغییر ناپذیر به عوامل رندر کننده کامپوننت‌ها داده می‌شود. این مقدارها دقیقا مثل ویژگی تگ HTML هر رندر کننده است. در این حالت کامپوننت‌ها نمی‌توانند به صورت مستقیم هیچ ویژگی را دستکاری کنند، اما می‌توانند از یک عملکرد call back استفاده کنند تا به کمک آن تغییرات را انجام دهند. به این فرایند، «properties flow down; action flow up» می‌گویند.

انتقال داده react

چرا باید از React استفاده کنیم؟

حال که تا حدودی با React و کارکرد آن آشنا شدیم، سوال اینجا است که، واقعا چرا با وجود پلتفرم‌هایی مثل انگولار، باید از React JS‌استفاده کنیم؟

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

ری اکت

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

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

منبع

https://www.lydaweb.com/

Ember.js چیست؟

Ember.js یک فریم‌ورک‌ رایگان، سمت کاربر و متن‌باز جاوا اسکریپت است که باهدف توسعه وب اپلیکیشن به کار گرفته می‌شود. این فریم‌ورک‌ از طریق فراهم آوردن یک راهکار کامل که شامل مدیریت داده و application flow می‌شود، امکان ساخت اپلیکیشن جاوا اسکریپت سمت کاربر را را می‎‌دهد.

اسم اصلی Ember.js فریم‌ورک‌ SproutCore MVC بود. این فریم‌ورک‌ توسط Yehuda Katz توسعه یافت و برای اولین بار در دسامبر ۲۰۱۱ منتشر شد. نسخه پایدار Ember.js در ۲۸ نوامبر ۲۰۱۶ و با نام Ember.js 2.10.0 به بازار عرضه شد.

چرا Ember.js؟

برای درک کاربرد گسترده Ember.js بهتر است به نکات زیر توجه کنید:

Ember.js یک فریم‌ورک‌ جاوا اسکریپت متن باز تحت لیسانس MIT است.

Ember.js با استفاده از موتور نمونه‌های پیش‌ساخته HTMLBar که از مجموعه‌های اصلی موتور نمونه‌های پیش‌ساخته Handerlbars است، ساختار برنامه‌نویسی یکپارچه تازه‌ای را فراهم می‌سازد.

Ember.js موتور رندرینگ Glimmer را برای افزایش سرعت رندرینگ فراهم می‌سازد.

این فریم‌ورک‌ قابلیت Command Line Interface را فراهم می‌آورد. قابلیت مذکور الگوهای Ember را با فرآیند توسعه یکپارچه می‌کند و به‌راحتی بر بهره‌وری توسعه‌دهنده متمرکز می‌شود.

Ember.js از قابلیت جفت‌سازی داده (Data Binding) برای ایجاد لینک بین دو مؤلفه پشتیبانی می‌کند و هرگاه یک قابلیت تغییر کند، قابلیت دیگر نیز با ارزش تازه روزآمد می‌شود.

ویژگی‌های Ember.js

برخی ویژگی‌های مهم Ember.js به شرح زیر هستند:

Ember.js برای خلق ابزارهای کاربردی جاوا اسکریپت که نگهداشت پذیر و دارای قابلیت استفاده مجدد هستند، استفاده می‌شود.

فریم‌ورک‌ Ember.js در بطن مدل توسعه دارای HTML و CSS است.

این فریم‌ورک‌ شامل تولید نمونه می‌شود.

مسیرها از ویژگی‌های اصلی Ember.js هستند و برای مدیریت URL ها به کار گرفته می‌شوند.

Ember.js ابزار Ember Inspector را برای رفع مشکل ابزارهای کاربردی Ember در اختیار کاربر قرار می‌دهد.

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

نصب Ember.js

نصب کردن Ember.js در سیستم کامپیوتری بسیار ساده است. با استفاده از (Ember CLI (Command Line Interface، می‌توانید پروژه‌های Ember را ایجاد و مدیریت کنید. Ember CLI با انواع متفاوت مدیریت ابزار مانند الحاق، حذف و کاهش موارد غیرضروری و ساخت نسخه‌های جدید سروکار دارد و همچنین ابزارهای تولیدی را برای تولید اجزا، مسیرها و غیره فراهم می‌آورد.

مقاله مرتبط: ۱۹ تکنیک خلاصه نویسی JavaScript

برای نصب کردن Ember CLI باید ملزومات زیر را داشته باشید:

Git- که یک سیستم کنترلی متن باز برای ردیابی تغییرات ایجادشده در فایل‌هاست. برای کسب اطلاعات بیشتر در مورد این برنامه می‌توانید به وب‌سایت Git مراجعه کنید.

Node.js و npm: Node.js یک برنامه متن باز است که برای توسعه ابزارهای کاربردی شبکه‌سازی و سمت سرور به کار می‌رود و همچنین به زبان جاوا اسکریپت نوشته شده است. Npm هم یک ابزار مدیریت بسته‌بندی گره است که برای نصب، به اشتراک‌گذاری و مدیریت متعلقات پروژه به‌کاربرده می‌شود. Ember CLI از زمان راه‌اندازی Node.js و npm برای به دست آوردن متعلقات استفاده می‌کند.

Bower برای مدیریت اجزایی مانند HTML، CSS، جاوا اسکریپت، فایل‌های تصویری و غیره استفاده می‌شود و می‌توان با استفاده از npm آن را نصب کرد.

Watchman یک افزونه اختیاری است که می‌توان از آن برای زیرنظر گرفتن فایل‌ها یا دایرکتوری‌ها و انجام عملیات بعد از تغییر در فایل ها یا دایرکتوری ها، استفاده کرد.

PhantomJS یک افزونه دیگر است و می‌توان از آن برای اجرای آزمون‌های واحد مبتنی بر مرورگر به‌منظور ارتباط با صفحه وب بهره گرفت.

نصب Ember CLI

Ember CLI الگوهای Ember را با فرآیندهای توسعه یکپارچه می‌کند و به‌راحتی بر بهره‌وری توسعه‌دهنده متمرکز می‌شود. Ember CLI با Ember.js و Ember Data برای ایجاد ابزارهای کاربری Ember مورداستفاده قرار می‌گیرد.

شما می‌توانید Ember را با استفاده از npm و طبق دستور زیر نصب کنید.

npm install -g ember-cli

۱

npm install -g ember-cli

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

npm install -g ember-cli@2.10

۱

npm install -g ember-cli@2.10

برای بررسی نصب موفقیت‌آمیز Ember نیز می‌توانید از دستور زیر استفاده کنید.

ember -v

۱

ember -v

بعد از اجرای فرمان بالا، با دستوری شبیه دستور زیر مواجه خواهید شد.

نمونه‌های پیش‌ساخته

مدل‌ها

Components

روتر و نگه‌دارنده مسیر

مفاهیم Ember.js

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

نگه‌دارنده روتر اعمال زیر را انجام می‌دهد:

نمونه پیش‌ساخته را فراهم می‌سازد.

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

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

نمونه‌های پیش‌ساخته

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

مدل

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

مدل یک کلاس ساده است که میزان کاربردی بودن Ember Data را افزایش می‌دهد. Ember Data یک کتابخانه است که به‌خوبی با Ember.js برای دست‌کاری داده‌های ذخیره‌شده در پایگاه داده همکاری می‌کند.

Components

Components رفتار رابط کاربر را کنترل می‌کنند و دارای دو بخش هستند:

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

فایل منبعی که به زبان جاوا اسکریپت نوشته‌شده است و رفتار Componentsرا تعیین می‌کند.

می‌توانید به‌راحتی Ember.js را روی سیستم خود راه‌اندازی کنید.

ساخت ابزار کاربردی

اگر می‌خواهید با استفاده از Ember.js یک برنامه ساده بسازید، ابتدا یک پوشه را در آدرسی که ابزارهای کاربردی خود را می‌سازید، ایجاد کنید. برای مثال، اگر پوشه «emberjs-app» را ساخته‌اید به این فولدر به شکل زیر مسیر بدهید.

$ cd ~/emberjs-app

۱

$ cd ~/emberjs-app

درون پوشه فوق یک پروژه جدید با استفاده از دستور زیر ایجاد کنید.

$ ember new demo-app

۱

$ ember new demo-app

وقتی‌که پروژه را ایجاد کردید، دستور جدید ساختار دایرکتوری زیرا را با فایل‌ها و دایرکتوری‌ها فراهم می‌سازد.

app- پوشه‌ها و فایل‌های مربوط به مدل‌ها، مسیرها، اجزاء، نمونه‌های پیش‌ساخته و سبک‌ها را مشخص می‌کند.

bower_components / bower.json- برای مدیریت اجزائی مانند HTML, CSS, JavaScript، فایل‌های تصویری و غیره به کار می‌رود و می‌توان با استفاده از npm آن را نصب کرد. دایرکتوری bower_components حاوی تمامی اجزاء Bower است و json هم شامل فهرست وابسته‌هایی است که توسط Ember، لایه‌های Ember CLI و QUnit نصب می‌شوند.

Config- شامل دایرکتوری js است که برای راه‌اندازی تنظیمات یک ابزار به‌کاربرده می‌شود.

Dist- شامل فایل‌های خروجی است که هنگام ساختن اپلیکیشن آرایش بندی می‌شوند.

node_modules / package.json- NPM یک مدیر بسته‌بندی گره برای js است که به‌منظور نصب، به اشتراک‌گذاری و مدیریت وابسته‌های پروژه به کار می‌رود. فایل package.json شامل وابسته‌های کنونی npm ابزار کاربردی و بسته‌های فهرست بندی شده و نصب‌شده در دایرکتوری node_modules است.

Public- شامل مواردی مثل تصاویر، فونت‌ها و غیره است.

Vendor- یک دایرکتوری است که در آن وابسته‌های front-end مانند جاوا اسکریپت و CSS توسط Bower کنترل نمی‌شوند.

tests / testem.js- آزمون‌های خودکار در زیرپوشه‌های آزمون‌ها ذخیره‌شده و راه‌انداز آزمون testem از Ember CLI در js مرتب می‌شود.

Tmp- شامل فایل‌های موقتی Ember CLI می‌شود.

ember-cli-build.js- نحوه ساخت ابزار کاربردی با استفاده از Ember CLI را مشخص می‌سازد.

منبع

https://mag.hostiran.net/