سلام. در راستای جمع‌آوری توشه‌ی آخرت، اقدام به شروع همچین کاری کردیم:دی.

بی مقدمه بریم سر اصل مطلب. قبلا توی این لینک و این لینک نوشته بودم که قضیه از چه قراره. فقط به تاریخ پست‌ها کاری نداشته باشین:دی

هدف این دوره

هدف از برگزاری این دوره اینه که در کنار هم، و با در نظر گرفتن ضرب‌المثل «خشت اول را چون نهد معمار کج، تا ثریا می‌رود دیوار کج» چهارتا چیز درباره‌ی اصول و فوندانسیون مهندسی فرانت-اند یاد بگیریم.

در ابتدای منبع اصلی این دوره اینجوری اومده که هدف از نوشتن این کتاب اینه که منبعی باشه حرفه‌ای، برای توسعه‌دهندگان فرانت-اند تا با اصول و ابزارهای(Tools) توسعه در این حوزه آشنا بشن. همچنین این کتاب می‌تونه مورد استفاده مدیران، مدیران ارشد فناوری(CTOs)، و هِد هانترها(اینجا درباره‌ی Head Hunter توضیح دادم) قرار بگیره.

توی کتاب تاکید شده که این کتاب نباید به عنوان منبعی جامع برای تمام ابزارهای توسعه‌ی فرانت-اند در نظر گرفته بشه. یعنی ما نمی‌خوایم خیلی ریز بشیم؛ مثلا قرار نیست فریمورک Bootstrap آموزش داده بشه. حالا شروع که بکنیم بیش‌تر متوجه می‌شیم…

کتاب به سه قسمت کلی تقسیم می‌شه:

قسمت اول: فرانت-اند در عمل

این بخش از کتاب و این دوره، به مواردی مثل عناوین شغلی این حوزه، مهارت‌ها، درآمد، و… می‌پردازه.

قسمت دوم: یادگیری توسعه‌ی فرانت-اند

این قسمت، طولانی‌ترین قسمت کتابه. مواردی که توی این قسمت مطرح می‌شن تقریبا موضوعاتی هستند که شالوده‌ی فرانت-اند رو تشکیل می‌دن، مثل: Web Browsers، DNS، Web Fonts، HTML، CSS، و… .

قسمت سوم: ابزارهای توسعه‌ی فرانت-اند

همون طور که مشخصه این قسمت از دوره، ابزاری رو که در توسعه‌ی حوزه فرانت-اند استفاده می‌شن معرفی می‌کنه.

منابع این دوره

منابعی که من از اونا استفاده می‌کنم تا این دوره رو پیش ببرم، به صورت کلی به سه مورد تقسیم می‌شن:

1. منبع اصلی این دوره، کتاب Front-end Developer Handbook 2017 هستش که از این لینک قابل دانلوده.
2. تجارب جسته و گریخته‌ای که توی این دوسه‌سال در توسعه‌ی فرانت-اند دارم.
3. دریای بی‌کران منابعِ موجود در وب… .

یک توضیح کوچیک بدم در مورد نسخه‌ای که از این کتاب استفاده کردم. الان نسخه ۲۰۱۸ این کتاب قابل دانلوده. دلیل من اما برای انتخاب نسخه ۲۰۱۷ اینه که چندماهی هست که می‌خوام شروعش کنم ولی تا الان فرصت نمی‌شد. اگه بخوایم دوره‌ای از نسخه‌ی ۲۰۱۸اش رو شروع کنیم، کارمون راحته و فقط یک سری آپدیت بهش اضافه می‌کنیم.

بریم سروقت کار.

یه توضیح مختصر درباره‌ی اینکه اصلا فرانت-اند چیه؟

در طراحی و توسعه‌ی وب، به صورت کلی دوتا مفهوم داریم: بک-اند(Back-end) و فرانت-اند(Front-end). البته توی چندسال اخیر و با به روی کار اومدن چندتا فریمورک توسعه‌ی بک-اند برای زبان JavaScript، که ما اون رو به عنوان زبانی برای توسعه‌ی فرانت-اند می‌شناختیم، تعیین مرز برای فرانت-اند و بک-اند یکم مشکل شده. ما به فرانت-اند، کلاینت-ساید یا سمت کلاینت هم می‌گیم(Client-Side). منظور از کلاینت، کاربرانی هستند که با استفاده از مرورگرهای وب، از یک نرم‌افزار تحت وب(مثل وب‌سایت) استفاده می‎‌کنند. این نام‌گذاری به این خاطره که ما چیزی به اسم معماری کلاینت-سرور(Client-Server Architecture) داریم، که یکی از پیاده‌سازی‌های این معماری همین وبیه(World Wide Web) که الان من دارم می‌نویسم و شما دارین می‌خونین. به همین علت توسعه‌ی بک-اند رو، توسعه‌ی سرور-ساید یا سمت سرور(Server-Side) هم می‌گیم.

به طور خلاصه و مختصر فرانت-اند یعنی همه‌چیزهایی که ما از ظاهر یک سایت یا اپ می‌بینیم، شامل چیدمان المان‌های مختلف و رنگ اون‌ها، نحوه‌ی تعامل(Interaction) بعضی از المان‌ها با کاربر(مثلا هنگام کلیک شدن رو یک دکمه چه واکنشی نشون داده می‌شه)، و این طور موارد.

به عمل استفاده از تکنولوژی‌هایی مثل HTML، CSS، و JavaScript، برای تولید رابط کاربری(ظاهر) وب‌سایت‌ها یا اپلیکیشن‌های تحت وب، توسعه‌ی فرانت-اند می‌گیم. چرا تکنولوژی رو بولد کردم؟ چون توی دروس آکادمیک، و متون یکم رسمی و استاندارد، اسم این موارد رو تکنولوژی می‌ذاریم. هدف از توسعه‌ی فرانت-اند، اینه که کاربر به راحتی از این اپ‌ها یا وب‌سایت‌ها استفاده کنه. یکی از مهم‌ترین چالش‌هایی که توی این حوزه هستش، تغییرات سریع و دائمی تکنیک‌ها، ترندها، و ابزارهای این حوزه‌ست. پس توسعه‌دهنده‌های این فیلد باید همیشه گوش به زنگ باشند تا با اومدن یک تکنیک یا ابزار جدید، خودشون رو به‌روز کنند.

یکی از اهداف مهمی که در توسعه‌ی فرانت-اند باید به اون دست پیدا کنیم، اینه که طراحی ما توی مرورگر(Browsers)های مختلف، سیستم‌عامل‌های مختلف، و دیوایس(Device)های مختلف، به خوبی و درستی کار کنه، و مطمئن بشیم که کاربر در استفاده از اطلاعاتی که بخشی از ارائه‌ی اون‌ها بر عهده‌ی مایِ توسعه‌دهنده‌یِ فرانت-انده، هیچ مشکلی نداشته باشه. پس طراحی ما باید Cross-Browser، Cross-Platform، و Cross-Device باشه(اینا اصطلاحات فنی‌ای هستش که برای اون سه‌تا مورد اول این پاراگراف استفاده می‌شه).

اپ‌هایی که با این تکنولوژی‌هایی که گفتم(HTML، CSS، و JavaScript) توسعه داده می‌شند، هم روی پلتفرم وب(Web Platform) اجرا می‌شن، و هم محیط‌هایی که پلتفرم وب نیستند(Hybrid App). خب، حالا این دوتا چی هستند دقیقا؟ یه توضیح جمع‌وجور:

Web Platform

اون اوایل، هر نرم‌افزار برای اجرا، پلتفرم مختص به خودش رو می‌طلبید. مثلا یک نرم‌افزار برای ویندوز، با زبانی مثل #C نوشته می‌شد و توی همون محیط هم استفاده می‌شد. اصطلاحا به این نرم‌افزارها، نرم‌افزارهای دسکتاپ(Desktop) می‌گن. مشابه همین رو برای Web هم داشتیم. مثلا نرم‌افزاری که با تکنولوژی‌هایی مثل HTML، CSS، و اینجور موارد نوشته می‌شد، نرم‌افزارهای تحت‌وب نامیده و توی وب اجرا می‌شدن و می‌شن. منتهی الان اینجوری نیست خیلی. مثلا با JS(جاوااسکریپت) می‌شه برای ویندوز برنامه نوشت.

پلتفرم وب، شامل تکنولوژی‌هایی مثل HTML، CSS، JS، SVG، WebSocket، و… می‌شه، که هدفش ساخت و انتشار صفحات وبه. حالا این صفحات وب توی چه محیط‌هایی اجرا می‌شن؟ اینجا:

1. Web Browsers: مرورگرهای وب(به اختصار، مرورگر) نرم‌افزارهایی هستند که برای مشاهده و بازیابی اطلاعات صفحات وب، ازشون استفاده می‌شه. وقتی ما طفلی بیش نبودیم، مرورگرها رو بیشتر توی کامپیوتر، و نهایتا روی گوشی می‌دیدیم. الان اما، تقریبا هر چیزی برای خودش مرورگر داره؛ چون همه‌ی چیزها به اینترنت وصلن. از بهترین مرورگرهای وب، می‌شه به کروم، فایرفاکس، و سافاری اشاره کرد، و به اینترنت اکسپلورر مایکروسافت(لعنت الله علیه) اشاره نکرد. جدی فکر کرده بهش لینک می‌دم؟
2. Headless Browsers: این مرورگرها فاقد رابط گرافیکی هستند. از طریق شبکه و یا با Command می‌شه باهاشون کار کرد. کاربردشون توی تست کردنه، تست چی؟ اینکه آیا یک صفحه‌ی وب به درستی کار می‌کنه یا نه؟ مثلا توی رندر(Render) کردن تگ‌های HTML مشکلی نداره؟ قشنگ شیرفهم می‌شه؟ خیالم راحت باشه یعنی؟ برم دیگه؟😜 یکی از کارهای دیگه‌ای که مرورگرهای هِدلِس می‌تونن انجام بدند، Web Scraping هستش(این چیز خیلی باحالیه. مثلا بری توی یه سایت و داده‌هاش رو بگیری). یکی از معروف‌ترین مرورگرهای هدلس PhantomJS هستش.
3. Webviews: اون طور که کتاب می‌گه، Webview رو یک Tab توی مرورگر یک موبایل با سیستم‌عاملی مثل اندروید یا iOS در نظر بگیرید، که اجازه اجرا شدن به اپلیکیشن‌هایی رو که با تکنولوژی‌های وب(HTML، CSS، و…) نوشته شده‌اند می‌ده. با ابزاری مثل Cordova می‌شه به‌جای استفاده از زبان برنامه‌نویسی مخصوص یک سیستم‌عامل موبایل، با استفاده از این تکنولوژی‌ها یک اپلیکیشن موبایل نوشت. حالا هر کردوم از این روش‌ها مزایا و معایب خودشون رو دارند، که اینجا جای بحث در مورد این مساله نیست.
4. Native from Web Tech: خلاصه و مختصر: استفاده از تکنولوژی‌های وب برای ساختن اپلیکیشن موبایل، که برای رندر شدن نیازی به مرورگر وب ندارند. اصطلاحا بهشون Native می‌گن. مثلا در این چندسال اخیر حضرت JavaScript با فریمورک‌هایی مثل React Native به این ایده جامه‌ی عمل پوشوندند. تکنولوژی و ادبیات، پیوندتان مبارک!

در همین رابطه، شاید بد نباشه یه نگاهی به این لینک بندازید. لیستیه از تکنولوژی‌هایی که توی Web استفاده می‎شه.

ترانه‌ی این قسمت

قرار بود توی هر قسمت یه آهنگ هم بذاریم دیگه. در انتهای این پست شما رو دعوت می‌کنم به شنیدن این موسیقی🤪 این آهنگ برای من یادآور چیزای خوبه…

باید مقدمه این پست رو اینجوری شروع می‌کردم: آیا به تکنولوژی علاقه دارید؟ آیا مشتاق یادگیری فرانت-اند هستید؟ آیا عاشق رقص هستید؟! پس همین الان این پست رو بخونید!

خب دوستان حالا یکی‌یکی خودتون رو معرفی کنید باهم آشنا بشیم😁😜

با دادن بازخورد در مورد این مطلب و به طور کلی این دوره، باعث پیشرفت‌اش می‌شین. پیشاپیش تشکر می‌کنم. ممنون بابت وقتی که گذاشتین🤛🤜💐