طراحی سایت ؛ معرفی برنامه نویسی فرانت

طراحی سایت ؛ معرفی برنامه نویسی فرانت

سلام خدمت دوستان و همراهان عزیز هولوسن

با یک آموزش متفاوت در رابطه با برنامه نویسی سمت کاربر یا همون فرانت اند (front-end) در خدمتتون هستیم.

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

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

  • تاریخچه فریم ورک های وب
  • فریم ورک های جاوا اسکریپت
  • اکما اسکریپت
  • معرفی اکما اسکریپت (جاوا اسکریپت ۶)
  • تفاوت جاوا اسکریپت و اکما اسکریپت
  • آشنایی با 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؟ اصلا چه تفاوتی میکند؟ میتوانم از همه فریم ورک ها با هم استفاده کنم؟

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

شاید این سوالات ذهن شما را هم مشغول به خودش کرده باشد.

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

Java Script Web Frameworks

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

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

ES مخفف Ecma Script هست. حالا اکما اسکریپت چیست؟

اکمای بین الملل یا Ecma International چیست؟

اکمای بین الملل یک سازمانی است که استانداردهای حوزه فناوری اطلاعات را تعریف میکند. مثلا نحوه چینش حروف و عدد روی کیبورد را همین سازمان تعریف کرده.

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

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

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

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

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

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

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

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

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

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


function greeter(person: string) {
return "Hello, " + person;
}

node js

node js چیست؟

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

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

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 سرور، افزایش سرعت بارگزاری صفحات برای کاربران در مرورگرهای آنها و در نهایت رضایت صاحب کسب و کار و همچنین کاربر نهایی میشود.

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

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

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

در ابتدای کار سری به وبسایت hotframeworks.com میزنیم تا ببینیم در حال حاضر کدام فریم ورک ها داغ تر هستند.

hot frameworks

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

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

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

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

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

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

hello world

Imperative Code و Declarative Code

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

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

Imperative Code
Declarative Code
React JS

ری اکت جی اس (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'));
Vue JS

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>

هولوسن

با من یاد بگیر

آموزش های بیشتر در وبسایت هولوسن : https://holosen.net

بدون نظر

فرم ارسال نظر