فرانت اند چیست؟

وقتی صحبت از زبان فرانت اند می شود؛ اولین چیزی که باید به ذهنمان خطور کند، بحث طراحی ظاهر و قالب یک وب سایت است. که طراحی و ظاهر یک وب سایت را باید با سه زبان HTML و CSS و JavaScript و یا فریمورک های وابسته به این سه زبان تشکیل میدهند پس یادگیری این سه زبان در مرحله اول از اهمیت بسیار زیادی برخوردار است. اگر هنوز کار با این زبان ها را شروع نکرده اید میتوانید در دوره های رایگان آموزش جامع و پروژه محور HTML و همینطور دوره آموزش جامع و پروژه محور CSS وب سایت آرتور شرکت نمایید و قدرت و علم خود را در این حوزه بالا ببرید.

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

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

یادگیری html

برای شروع یادگیری فرانت اند اولین گام یادگیری زبان html می باشد. زبان نشانه گذاری ابرمتنی یا همان html صرفا یک زبان نشانه گذاری می باشد که برای دنیای طراحی وب توسعه داده شده است. اگر بخواهیم به بیان خیلی ساده این زبان را معرفی کنیم، با اسکلت یا همان استخوان بدن یک انسان مثال خود را توضیح میدهیم؛ در اصل مثال html برای یک سایت مثال استخوان یا اسکلت برای بدن یک انسان می باشد. زبان html به شما کمک می کند تا بتوانید بدنه و قالب وب سایت را تنظیم و منظم کنید. در این زبان بوسیله تگ ها( tag ) کدها نوشته می شوند، تگ ها امکاناتی در ابعاد مختلف با کاربردهای متفاوت به ما ارائه می دهند که در ادامه بیشتر با آن آشنا میشویم.

ویژگی های تگ در زبان html:

-هر تگی که در این زبان تعریف شده است، کاربرد خاص خودش را دارد به عنوان مثال تگ head برای تعریف سر تیتر متن استفاده می شود و از تگ body برای بدنه متن استفاده می شود و تگ های دیگر نیز خاصیت و کاربرد خاص خودشان را دارند-هر تگ بین دو کاراکتر < > قرار می گیرد و نقطه پایان هر تگ با پرانتز اسلش دار </> تعیین می شود. پس ساختار یک تگ به صورت <tagname> که تگ آغازکننده و <tagname/> تگ پایان دهنده میباشد.مثلا تگ head یک نقطه شروع و یک نقطه پایان دارد.

با کدام ویرایشگر می توان یک فایل html را ایجاد و یا ویرایش کرد؟

-ساده ترین روش برای ایجاد یک برنامه html استفاده از نرم افزار notepad میباشد.بصورت خیلی ساده با استفاده از تگ ها و کدهای html درون برنامه notepad گزینه save را انتخاب نموده و پس از انتخاب نام فایل پسوند html. را به آن اضافه کرده و ذخیره می کنیم. و یک فایل با پسوند html برای ما ساخته میشود و با اجرا آن فایل کدهای html ما در مرورگر به راحتی اجرا میشوند.-روش دیگر استفاده از ویرایشگر قدرتمند ++notepad می باشد. که نسخه پیشرفته نوت پد هست و قابلیت های بسیار زیادی نسبت به نوت پد ویندوز را داراست.

یادگیری css

معمولا پس از یادگیری زبان HTML شما قدم اول را برای یادگیری front end برداشته اید و در قدم بعد باید به سراغ یادگیری زبان CSS برویم، زبان CSS برای زیباسازی و استایل دهی تگ های HTML مورد استفاده قرار میگیرد و می توان از آن برای تنظیم رنگ،فونت و یا تصاویر پس زمینه و ... سایت استفاده نمود به بیان خیلی ساده تر و دقیق تر css برای یک سایت مثال گوشت و پوست برای یک انسان می باشد اگر به یاد داشته باشید قبلا گفته شد که html همانند استخوان و اسکلت بدن انسان می باشد. بنابراین استخوان و اسکلت یک انسان اگر همراه با گوشت و پوست باشد، می توان آن را یک انسان تقریبا کامل در نظر گرفت با توجه به مطالب گفته شده تا اینجا می توان نتیجه گرفت که همانطور که اسکلت و استخوان مکمل گوشت و پوست انسان هستند و همه اینها برای زندگی کردن یک انسان زنده ضروری و حیاتی می باشند، HTML و CSS نیز مکمل هم هستند و وجود هر دوی آنها برای طراحی سایت بخصوص طراحی فرانت اند لازم و ضروری می باشد.

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

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

در دستورات و کدهای بالا که به زبان css نوشته شده اند می بینیم که یادگیری این زبان حتی از یادگیری زبان html نیز آسان تر است.در خط اول از طریق دستور text-align محل قرارگیری متن در صفحه را مشخص کردیم که عبارت center مشخش کننده وسط چین شدن متن در صفحه می باشد. به عبارتی دقیق تر در خط اول کد محل قرارگیری متن در صفحه را وسط صفحه تعیین نمودیم.در خط دوم کد نیز رنگ را برابر با رنگ قرمز قرار دادیمبه همین سادگی!

یادگیری زبان جاوا اسکریپت

تا اینجا گفته شد که برای یادگیری فرانت اند دو زبان html و css ضروری هستند. اما این پایان کار و نیست و شما باید خود را با چالش های ذهنی جذاب زیاد آماده کنید. که این چالش ها را زبان جاوااسکریپت پاسخگویی میکند.

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

زبان جاوا اسکریپت بر خلاف دو زبان html و css یک زبان برنامه نویسی سطح بالا است. بنابراین همانند html و css انتظار نداشته باشید که بخواهید در کوتاه ترین زمان و به ساده ترین شکل ممکن این زبان را یاد بگیرید به طور کلی می توان گفت یکی از چالشی ترین، سخت ترین و گسترده ترین و البته محبوب ترین زبان های برنامه نویسی دنیا زبان برنامه نویسی جاوا اسکریپت می باشد. یادگیری زبان جاوا اسکریپت به مراتب کمی زمان میبرد؛ به همین دلیل توصیه می کنیم که قبل از شروع یادگیری زبان جاوا اسکریپت حتما زبان برنامه نویسی html و css را به عنوان پیش نیاز جاوا اسکریپت یاد بگیرید چچون بسیار در روند یادگیری شما تاثیر بسیار مثبتی دارد.جاوا اسکریپت یک زبان برنامه نویسی سطح بالا و تقریبا همه فن حریف می باشد. وقتی در دنیای برنامه نویسی صحبت از سطح بالا یا high level می شود؛ منظور این است که کدهای زبان سطح بالا به زبان انسان که همان زبان انگلیسی می باشد نزدیک است.

همانطور که در مثال بالا که قبلا توضیح داده شده است، کدهای این زبان بسیار نزدیک به فهم و زبان انسان می باشد.بنابراین می توان گفت که هم زبان css و هم زبان برنامه نویسی جاوا اسکریپت به زبان انسان نزدیک هستند و جزو زبان های سطح بالا محسوب می شوند؛ حال شاید برایتان سوال پیش بیاید که اگر اینطور هست،پس چرا در ابتدای معرفی زبان برنامه نویسی جاوا اسکریپت گفتیم که یادگیری این زبان کمی زمان بر بنظر می رسد؟ بهتر است قبل از اینکه پاسخ این سوال را به شما بدهیم،ویژگی دوم زبان برنامه نویسی جاوا اسکریپت را که همان همه فن حریفی بودن هست؛را توضیح دهیم. به طور کلی در دنیای واقعی همه فن حریف به کسی می گویند که توانایی انجام بسیاری از کارها، فن ها و حرفه ها را دارد. در دنیای برنامه نویسی هم وقتی می گوییم زبان جاوا اسکریپت یک زبان همه فن حریف هست،بدین معناست که با این زبان می توان برنامه های دسکتاپ،موبایل ، بازی، برنامه های سمت سرور و سایت و بسیاری دیگر از انواع برنامه ها را تولید نمود. بنابراین زبان جاوا اسکریپت تقریبا یک زبان همه فن حریف محسوب می شود.خب اما حالا؛ چرا یادگیری جاوا اسکریپت کمی مشکل بنظر می رسد؟ به جرات می توان گفت یکی از مهمترین دلایل زمان بر بودن یادگیری این زبان گستردگی زیر مجموعه ها و زیر شاخه های این زبان هست. زبان جاوا اسکریپت زیر مجموعه های زیادی دارد که هر کدام یک تکنولوژی خاص و به عبارت دقیق تر فریمورک و کتابخانه خاص محسوب می شود.خب بنظر می رسد که برای اینکه بهتر متوجه پیچیدگی زبان جاوا اسکریپت بشوید، برخی از کتابخانه ها و فریم ورک های آن را البته بخش کم و بسیار ناچیزی از آنها را معرفی نماییم:

اکما اسکریپت

اکما اسکریپت که به اختصار ES نام دارد به تکنیک ها و استانداردهایی گفته می شود که از طریق آنها می توان با استفاده از آنها زبان جاوا اسکریپت را به کار گرفت و کدهای خواناتر و ساده تر با حجم کمتری برای زبان جاوا اسکریپت نوشت اکما اسکریپت در حال حاضر در نسخه های بسیار زیادی توسعه پیدا کرده است و تا این زمان که در حال تهیه این مقاله هستیم آخرین نسخه ارائه شده برای آن نسخه 12 می باشد.

فریم ورک react js

این فریم ورک یکی از فریم ورک های بسیار مهم در زبان برنامه نویسی جاوا اسکریپت محسوب می شود که بطور خیلی ساده و خلاصه می توان گفت که برای seo استفاده می شود و کاربرد آن در سئوی سایت می باشد سئو یا seo به تکنیک ها و استانداردهایی در موتور جستجو گفته می شود که به برنامه نویس کمک می کند تا بتواند سایت خود را با کمترین جستجو در گوگل در نتایج ابتدایی جستجو بارگذاری کند و کاربر بدون دغدغه و با کمترین جستجو بتواند سایت موردنظر خود را باز کند به عبارت دقیق تر سئو این امکان را فراهم می کند که سایت را بتوان با یک جستجوی اولیه پیدا نمود خب گفتیم که کاربرد react در سئو می باشد.اما یک نکته بسیار مهم در زبان برنامه نویسی جاوا اسکریپت،یک فریم ورک react. js وجود دارد که توضیح دادیم برای سئوی سایت هست و یک فریم ورک react native که برای طراحی اپلیکیشن های موبایل هست؛بنابراین این دو از هم جدا هستند و لطفا شما برخلاف بسیاری دیگر از افراد که این دو را با هم اشتباه می گیرند این دو را باهم اشتباه نگیرید! علاوه بر reactjs زبان جاوااسکریپت فریمورک های دیگری هم دارد از جمله node js و angular js و بسیاری دیگر از کتابخانه های محبوب برنامه نویسان که بدلیل تعداد زیاد آنها سعی میشود در مقالات بعدی به هر کدام از این فریمورک ها بپردازیم و نحوه استفاده و موارد استفاده از آنها را خدمت شما ارائه دهیم. خب تا اینجای کار با زبان برنامه نویسی جاوا اسکریپت کمی آشنا شدیم. اما بنظر میرسد بهتر است که تمامی مطالب گفته شده در مورد این زبان برنامه نویسی را خلاصه کنیم: همانطور که گفته ایم زبان برنامه نویسی جاوا اسکریپت یک زبان سطح بالا و همه فن حریف می باشد که این دو اصطلاح را قبلا توضیح داده ایم کاربرد زبان برنامه نویسی جاوا اسکریپت در طراحی سایت که مبحث مورد نظر ما می باشد در قسمت هایی است که می خوایم برای سایت یکسری کارها به صورت پویا یا داینامیک انجام بگیرد که این کارها در زبان های HTML و CSS نمیشود انجام گیرد زیرا زبان های HTML و CSS از نوع زبان های ایستا یا استاتیک هستند، که در رابطه با زبان های استاتیک و داینامیک در مقالات بعدی حتما مورد بحث قرار میدهیم و به صورت کامل بررسی میکنیم. اما بحث خود را ادامه میدهیم که اگر قصد این را داشته باشیم که به عنوان مثال دکمه های انیمیشنی طراحی کنیم،یک تایمر یا ساعت برای سایت بسازیم و یا جلوه های پویا و انیمیشنی بسیار زیاد دیگری برای سایت بسازیم باید حتما از جاوااسکریپت در کنار HTML و CSS استفاده کنیم. و اما بحث پایانی این است که اگر چه برخی از کتابخانه ها و فریم ورک های این زبان برنامه نویسی را به شما معرفی کردیم،اما باید بدانید که برای شروع کار نیازی به یادگیری آنها نیست و شما بعنوان یک برنامه نویس تاره کار فقط و فقط باید زبان برنامه نویسی جاوا اسکریپت را یاد بگیرید. و در ادامه حتما باید این آموزش های خود را در قالب اکمااسکریپ یاد بگیرید و طبق این استاندارد مهارت خود را در این زبان بالا ببرید.

در این مقاله چهار گام اساسی برای شروع یادگیری فرانت اند را معرفی نمودیم که به ترتیب:-html-css-flexbox & css grid-java scriptبه طور کلی هر برنامه نویس فرانت اند که قصد یادگیری و ورود به دنیای طراحی وب را دارد باید حداقل این چهار گام را طی نماید. و بعد از یادگیری این مقدمات باید وارد یادگیری فرانت اند پیشرفته شود که در مقالات بعدی حتما فرانت اند پیشرفته را با هم پیش میگیریم و شما را با آن آشنا میکنیم. در مورد زبان html که یک زبان نشانه گذاری ابرمتن می باشد قبلا گفتیم که مانند اسکلت بدن یک انسان می ماند و یادگیری آن 100 درصد ضروری و لازم می باشد.گفتیم که وظیفه زبان html تنظیم چینش قالب و لایه بندی سایت می باشد و در ادامه در مورد زبان css هم توضیح دادیم که زبان css همانند پوست و گوشت بدن یک انسان می باشد که با قرار گرفتن بر روی اسکلت بدن انسان( html ) به انسان توانایی حرکت و زنده ماندن را می دهد. و بعد درباره flexbox و css grid بحث را ادامه دادیم و در پایان هم درباره زبان برنامه نویسی جاوا اسکریپت گفتیم به سایت روح و روان تازه می بخشد از جمله ایجاد انواع انیمیشن برای سایت،ایجاد جلوه های متحرک از جمله تایمر و ساعت برای سایت در کل انجام عملیات های منطقی و کارهایی که html و css قادر به انجام آنها نیستند از کاربردهای جذاب و مفید جاوا اسکریپت می باشد.در پایان نیز باید بگوییم یادگیری فرانت اند چندان سخت بنظر نمی رسد و پیش نیاز ورود به دنیای طراحی سایت می باشد و پس از فراگیری این یه گام های اساسی تازه هنوز مانند دونده ای در میدان دوومیدانی هستید که با سوت داور اجازه دویدن و عبور از خط شروع مسابقه را دارد!

​