نقشه راه یاد گیری فرانت اند، مسیر یاد گیری فرانت اند

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

برای آموزش فرانت اند رایگان اینجا کلیک کنید( دوره آموزشی رایگان)

در این ویدیوی آموزشی قصد داریم تا با تکنولوژی های سمت فرانت و کلا هر اطلاعاتی که لازم هست تا بتوانیم استارت اموزش برنامه نویسی فرانت را بزنیم، آشنا بشیم.

مباحثی که در این ویدیو اموزش برنامه نویسی فرانت اند قرار گرفته شامل سرفصل های زیر هست :‌

• تاریخچه فریم ورک های وب
• فریم ورک های جاوا اسکریپت
• اکما اسکریپت
• معرفی اکما اسکریپت (جاوا اسکریپت ۶)
• تفاوت جاوا اسکریپت و اکما اسکریپت
• آشنایی با Babel
• TypeScript
• Node js
• Front-end Build Tools
• Gulp
• WebPack
• BrowserSync
• React js
• Angular
• Vue js
• Cascading Style Sheets (CSS)
• Syntactically Awesome Style Sheets (Sass)
• CSS Frameworks
• Bootstrap
• Performance Optimization

پس لطفا افتخار بدید و همراه ما باشید.

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

Angular بهتر است یا Angular js؟ React js بهتر است یا انگولار؟ Vue Js بهتر است یا React Js؟ اصلا چه تفاوتی میکند؟ میتوانم از همه فریم ورک ها با هم استفاده کنم؟

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

شاید این سوالات ذهن شما را هم مشغول به خودش کرده باشد. برای پاسخ دادن و مقابسه بین این سوالات در اموزش برنامه نویسی فرانت اند همراه من باش!

تصویری را برای شما آماده کرده ایم که می توانید در آن یک تاریخچه از فریم ورک های وب را مشاهده نمایید

همیشه Frontend developer ها با این موضوع درگیرند که کدام Framework واقعا بهتر است و باید کدام فریم ورک را برای پروژه خود انتخاب نمایند.

ECMA-262 یا همان Ecma Script چیست؟

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

جاوا اسکریپت چیست؟

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

https://www.instagram.com/p/CKRGyargOSq/

آموزش جاوا اسکریپت

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

اکما اسکریپت ۶ ششمین نسخه از استاندارد Ecma-262 است که تغییرات زیادی نسبت به قبل داشته.

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

https://www.instagram.com/p/CKL4u7lAV7A/

تایپ اسکریپت (Type Script) چیست؟

تایپ اسکریپت یک زبان برنامه نویسی متن باز (open source) است که توسعه و پشتیبانی اون توسط مایکروسافت انجام شده.

نمونه ای از کدهای تایپ اسکریپت در زیر آورده شده است.

 node js در اموزش برنامه نویسی فرانت اند چه نقشی دارد؟

نود جی اس یک پلتفرم بر پایه موتور جاوا اسکریپت گوگل کروم است که باعث سهولت در راه اندازی برنامه ها میشود. با استفاده از ابزار قدرمتندی به نام npm یا node package manager میتوان تمام لایبرری ها و ماژول هایی که در یک پروژه نیاز داریم را به پروژه خودمان اضافه کنیم.

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

Build Tools چیست؟

build tool ها ابزارهای اتوماتیک ساز ساخت و اجرای اپلیکیشن های ما از روی سورس کد هستند. از نمونه های معروف این ابزار ها میتوان به gulp و webpack اشاره کرد.

این ابزارها با داشتن یک فایل کانفیگ که اغلب بصورت یک فایل json میباشد، متوجه میشوند که چه وظایفی (task) دارند و باید چه کارهایی بر روی پروژه ما انجام دهند.

اگر بخواهیم ساده ترین وظیفه این ابزار را بگوییم، فرض کنید که وظیفه ای برای gulp یا webpack تعریف کرده ایم که به محض تغییر در یک فایل java script یا js و ذخیره ی آن با استفاده از یک watcher، برنامه بصورت اتوماتیک در محیط توسعه، فایل های js ما از حالت ES6 تبدیل به JS معمولی میشوند و مجددا روی مرورگرمان عملیات بارگزاری مجدد (refresh) انجام میشود.

Single Page Application یا SPA چیست؟

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

به طور مثال میتوان گفت که وقتی شما آدرس سایت را وارد میکنید، بعد از بارگزاری صفحه، تنها تعامل شما با سرور از طریق ajax انجام میشود و این باعث میشود تا تعداد درخواست های تکراری از قبیل استایل های css، اسکریپت های js، قسمت هایی از صفحه که ثابت است و … کمتر شود که در نتیجه موجب افزایش performance سرور، افزایش سرعت بارگزاری صفحات برای کاربران در مرورگرهای آنها و در نهایت رضایت صاحب کسب و کار و همچنین کاربر نهایی میشود.

https://www.instagram.com/p/CKZBA5CAdn6/

آغاز جنگ و جدال

برای اموزش برنامه نویسی فرانت اند کدام فریم ورک جاوا اسکریپتی بهتر است؟

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

در ابتدای کار سری به وبسایت hotframeworks.com میزنیم تا ببینیم در حال حاضر کدام فریم ورک ها داغ تر هستند اینجا به بعد مطلب آموزشیمون  در مورد اموزش برنامه نویسی فرانت اند واقعا جالب میشه !

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

انگولار (Angular) چیست؟ تفاوت Angular با Angular js چیست؟

انگولار یک فریم ورک جاوا اسکریپتی است که در حال حاضر توسط شرکت گوگل در حال توسعه میباشد. شامل دو نسخه استیبل است که یکی Angular js و دیگری Angular میباشد.

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

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

https://www.instagram.com/p/CKeFsfLAcbK/

Imperative Code و Declarative Code

ما به طور کلی دو نوع کد نویسی داریم در این فریم ورک ها. یک از آن ها Imperative Code و دیگری Declarative Code میباشد. نمونه ای از این نوع کدنویسی ها را میتوانید در شکل ببینید.

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

ری اکت جی اس (React JS) چیست؟

ری اکت جی اس یک کتابخانه متن باز است که در سال ۲۰۱۱ برای اولین بار در شرکت فیسبوک مورد استفاده قرار گرفت. طبق معرفی در ویکیپدیا، ری اکت یک کتابخانه است ولی در google knowledge panel از آن به عنوان یک Web Framework یاد شده است.

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

import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

ReactDOM.render(, document.getElementById('root'));

https://www.instagram.com/p/CKrYbvoAzlW/

vue js چیست؟

ویو جی اس (vue js) یک فریک ورک جاوا اسکریپتی متن باز بر پایه model – view – viewmodel است برای ساخت single page application یا همان SPA است که توسط شخصی به نام Evan You توسعه داده شده و در حال حاضر توسط تیمش پشتیبانی میشود.

باز هم مثل انگولار و ری اکت برای  مسیر یاد گیری فرانت اند به سراغ نمونه کدی از این فریم ورک میرویم:

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <title>Hello World in Vue.js</title>
  </meta>

  <body>

    <div id="hello-world-app">
      <h1>{{ msg }}</h1>
    </div>

    <script
      src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">
    </script>

    <script>
      new Vue({
        el: "#hello-world-app",
        data() {
          return {
            msg: "Hello World!"
          }
        }
      });
    </script>

  </body>
</html>

پیشنهاد میکنیم از دیگر آموزش های هولوسن هم دیدن فرمایید