برنامه نویسی وب - بخش دوم

بخش 2 از برنامه نویسی سایت : مهارت های front end خود را ارتقاء دهید

هنگامی که اصول اولیه نوشتن سایت با HTML ، CSS و JavaScript را متوجه شدید ، می توانید از مهارت های پیشرفته تر در front end و نوشتن سایت استفاده کنید.

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

طراحی واکنش گرا (responsive) یکی از ضروریات دنیای برنامه نویسی موبایل محسوب می شود.

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

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

در حال حاضر ، بر اساس مطالعات Statcounter.com ، افراد به نسبت بیشتری از تلفن های همراه خود برای مرور اینترنت استفاده می کنند تا از رایانه های رومیزی خود.

بنابراین ما باید مطمئن شویم که تمام وب سایت های ما کار می کنند و همه چیز در بزرگ ترین مانیتورها تا کوچک ترین گوشی های همراه درست نمایش داده می شوند.

این عملکرد چیزی است که به عنوان طراحی واکنش گرا (responsive design) شناخته می شود. این نام گذاری به این دلیل است که طراحی می تواند به هر دستگاهی که در آن مشاهده می شود ، واکنش نشان داده و پاسخ دهد.

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

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

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

فریم ورک ها می توانند به شما در ایجاد سریع وب سایت واکنش گرا کمک کنند

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

اگر شما نمی توانید زمان بیشتری را صرف کنید ، ممکن است سعی کنید از یک فریم ورک واکنش گرا مانند Bootstrap یا Zurb Foundation استفاده کنید.

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

آنها هم چنین دارای مؤلفه های جاوا اسکریپت (اساساً پلاگین های کوچک) مانند پنجره های modal pop-up و نوارهای ناوبری هستند.

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

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

هیچ جایگزینی برای دانستن اینکه چگونه یک وب سایت واکنش گرا را از ابتدا بسازیم وجود ندارد.

برای کسب اطلاعات بیشتر در زمینه آموزش وب می توانید منابع زیر را مطالعه نمایید:

• Examples of responsive design from Designmodo.com
• Responsive Web Design Basics from Google
• Bootstrap 4 tutorial from W3Schools
• Zurb Foundation Tutorials

Sass در هنگام نوشتن CSS ، هم در زمان شما صرفه جویی می کند و هم دردسرهای شما را کاهش می دهد.

پس از این که مبانی CSS را مطرح کردیم ، شروع به آموزش Sass می کنیم.

Sass مخفف “Sheet Style Sheet Syntactically Awesome" است.

و در وب سایت Sass به عنوان "توسعه ای از CSS" توصیف شده است.

Sass باعث می شود سبک های CSS شما بسیار ساده تر ، بصری تر و سریع تر باشند.

اشتباه نکنید! CSS عالی است. اما همان طور که آن را یاد می گیرید ، متوجه خواهید شد که CSS منظم می تواند کاملاً خسته کننده باشد.

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

آنچه که Sass انجام می دهد به شما قدرت و کنترل بیشتری می دهد.

در اینجا دو مثال از این که Sass چگونه کار شما را ساده تر خواهد کرد ، ارائه می دهیم:

• Mixins :  به جای copy و paste کردن یک میلیون بار کد CSS برای عناصر خاصی ، می توانید از mixins استفاده کنید. آنها به شما اجازه می دهند یک مجموعه ای از سبک ها را برای یک عنصر فقط یک بار بنویسید و هر بار که می خواهید استفاده مجدد کنید.
• تو در تویی (nesting) : به جای نوشتن تمام کلاس های والد یک سبک خاص ، شما می توانید همه فرزندان را در سبک های والد قرار دهید. این کار هم چنین باعث کاهش بسیاری از کارهای تکراری می شود.

در اینجا یک مثال از استفاده از تو در تویی در Sass آورده می شود :

.post {

    display: block;

    margin: 20px;

    .header {

        padding: 20px;

        .headline {

            font-size: 24px;

        }

    }

}

به طور خلاصه ، با استفاده از Sass شما در زمان صرفه جویی خواهید کرد و دردسر کمتری نیز خواهید داشت. به اندازه کافی ارزش تلاش برای یادگیری آن را خواهد داشت!

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

• Getting started with Sass
• Sass Basics

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

برای انجام این کار باید از چیزی به نام یک ابزار ساخت (build tool) استفاده کنید و آن را در رایانه خود اجرا کنید.

این موضوع ما را به بخش بعدی از آموزش وب هدایت می کند ...

این ابزارهای ساخت چه چیزی هستند؟

شما احتمالا یک یا چند عبارت زیر را شنیده باشید : npm ، Webpack ، Grunt ، Gulp ، Bower ، Yarn ... این لیست بسیار بیشتر از این است!

این ابزارها اغلب به عنوان build tools ، task runners ، task managers یا "حالا چه چیزی باید نصب کنم؟" توصیف می شوند.

بعضی از این ابزارها کار شما را انجام می دهند.

ابزارهای ساخت مانند Grunt ، Gulp و Webpack معمولاً برای انجام برخی از وظایف زیر استفاده می شوند:

• پردازش فایل های Sass به CSS
• الحاق (ترکیب کردن) چندین فایل CSS یا چندین فایل جاوا اسکریپت در یک فایل CSS یا جاوا اسکریپت بزرگ.
• خرد کردن (فشرده سازی) فایل های CSS ، جاوا اسکریپت ، و حتی فایل های تصویری.
• تازه سازی خودکار (automatically refreshing) ، مرورگر شما با کد CSS یا کد جاوااسکریپت به روزرسانی می شود

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

اما اگر مجبور باشید که بارها و بارها یک تغییر کوچک CSS یا جاوا اسکریپت را اعمال کنید ، این کار می تواند خسته کننده باشد.

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

در حال حاضر ، Webpack در حال گسترش می باشد ، اما Grunt و Gulp هنوز نیز در حال استفاده هستند.

بی شک باید Webpack را یاد گرفت ، اما این کار نمی تواند یادگیری Grunt یا Gulp را خدشه دار کند (Gulp سریع تر است و به نظر می رسد کمی کارآمدتر و راحت تر نیز انجام شود).

سایر ابزارهای (پلاگین ها) نصب پکیچ ها

علاوه بر این ، به منظور انجام تمام این وظایف ، به طور کلی نیاز به دانلود و نصب پلاگین ها یا پکیچ ها دارید.

این جایی است که ابزاری مانند npm (Node Package Manager)، Bower یا Yarn در دسترس است. اینها ابزارهایی هستند که به شما امکان می دهند پکیچ های خود را به سرعت به وسیله ی تایپ دستورات خود در خط فرمان رایانه نصب کنید.

اساساً ! آنها ابزارهایی هستند که امکان دسترسی به ابزارهای بیشتری را برای شما فراهم می کنند.

از آن جایی که npm در حال حاضر به عنوان package manager غالب است ، شما قطعاً باید نحوه استفاده از آن را یاد بگیرید.

Bower یکی از اولین ابزارهای package manager بود ، اما به طور رسمی منسوخ شده است - سازندگان Bower.io اکنون استفاده از Yarn را توصیه می کنند.

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

در حالی که Yarn در اقلیت است ، هنوز توصیه می کنیم آن را بررسی کنید ، زیرا به نظر می رسد محبوبیت بیشتری به دست آورد.

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

• How to setup Webpack +2.0 from scratch
• Javascript Tooling – The Evolution and Future of JS & Front-end Build Tools
• NPM vs Yarn Cheat Sheet

هر کسی عاشق فریم ورک های جاوا اسکریپت می باشد

شما احتمالاً متوجه شده اید که بسیاری از فریم ورک های جاوا اسکریپت ، کتابخانه ها ، toolkit ها و غیره در اطراف شما هستند که نام همه آنها به”.JS?” ختم می شوند.

بیایید یک گام به عقب برگردیم و تعریف کنیم که فریم ورک JavaScript چیست.

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

اما همه آنها اساساً ابزار هستند ، که برخی از کارها را برای شما انجام می دهند.

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

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

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

استفاده از یک فریم ورک مانند خرید یک خانه اسکلتی لخت است که همراه با تمام مؤلفه های ساختاری (پایه ، قاب، سقف) است ، اما کاملاً تمام و کمال نیست.

شما هنوز نیاز دارید که وارد آن شده و آب و برق را وصل کنید ، هم چنین کابینت ها را نصب کنید ، دیوارها را رنگ کرده و تزئین نمایید.

برخی از فریم ورک های front end جاوا اسکریپت React ، Vue و Angular هستند.

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

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

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

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

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

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

یک مثال از یک کتابخانه ، jQuery است.

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

باید گفت که همه در این تعاریف اتفاق نظر ندارند.

React و jQuery خود را به عنوان کتابخانه معرفی می کنند ، و Angular و Vue خود را چارچوب می نامند.

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

که این کار ما را به نقطه بعدی هدایت می کند ...

سه فریم ورک بزرگ جاوا اسکریپت: Angular ، React و Vue

در اوایل سال 2010 ، انفجاری از فریم ورک هایی که به “.js” ختم می شدند ، به وجود آمد و تقریباً هر ماه یک مورد جدید معرفی می شد.

با این حال با نزدیک شدن به سال 2020، این میدان پاکسازی شده است و ما به سه برنده بزرگ هم چون Angular ، React و Vue دست یافته ایم.

Angular، React و Vue همه در حال رشد هستند ، و خود جاوا اسکریپت هم اکنون بسیار محبوب است - این تکنولوژی برای پنجمین سالی است که در Survey سالانه Stack Overflow استفاده می شود.

علاوه بر این ، Stack Overflow روند رشد تکنولوژی ها را بر اساس سوالات بسیاری که در هر ماه پرسیده می شوند ، منتشر می کند.

شما می توانید ببینید که Angular دارای بیشترین حجم است ، و هر دو Angular و React در طول سال گذشته رشد شگفت انگیزی داشته اند.

بررسی State of JavaScript نشان می دهد که React تعدادی از توسعه دهندگان را که از آن استفاده کرده اند و آن را دوست داشتند ، هدایت می کند ، در حالی که Angular به نظر نمی رسد که به همان اندازه کاملا جالب باشد که تمایل زیادی برای استفاده مجدد داشته باشد.

Vue دارای مقدار مصرف واقعی کمتری است ، اما از نظر تکنولوژی در حال هدایت به سمتی است که توسعه دهندگان در آینده می خواهند.

بنابراین ممکن است که Vue بتواند در چند سال آینده به یک بازیکن بزرگتری تبدیل شود.

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

TL ، DR : در آموزش وب کدام فریم ورک را باید در حال حاضر یاد بگیرم؟

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

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

با این حال ، توصیه می شود نه تنها Vue را یاد بگیرید ، بلکه افزودن React یا Angular به مجموعه مهارت های شما بسته تمایل تان ، می تواند ایده خوبی باشد.

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

• Best JavaScript Frameworks, Libraries and Tools to use in 2017
• The Noob’s Guide to Choosing a JavaScript Framework

ادامه مباحث مربوط به آموزش وب سایت نویسی را در مقاله سوم دنبال نمایید.