توسعه دهنده فرانت اند(Front-End Developer) شخصی است که با استفاده از HTML ، CSS و Javascript طرح ها را به صفحات وب سایت فعال تبدیل می کند تا کاربران بتوانند از طریق مرورگر به آن صفحات وب دسترسی داشته و با آنها تعامل داشته باشند.
یک دهه پیش اصطلاحی به عنوان توسعه دهنده Front-end وجود نداشت. وقتی کسی وب سایتی را توسعه می داد ، فقط با عنوان توسعه دهنده وب شناخته میشد
با تغییر سریع فناوری وب ، اصطلاحاتی مانند طراحی UI / UX ، توسعه Back-end ، توسعه Front-end ، DevOps و غیره ظاهر می شوند. آنها نقشها را در توسعه وب طبقه بندی می کنند زیرا روز به روز با پیشرفت تکنولوژی تبدیل شدن به یک برنامه نویس کامل هم سخت تر میشد
توسعه دهنده فرانت اند به این معنی است که شما پلی بین طراح و توسعه دهنده بک اند هستید. شما باید طراحی را درک کنید و در عین حال قادر به کد نویسی نیز باشید.
با داشتن چنین منابع عظیمی در اینترنت ، یادگیری توسعه front-end به تنهایی بسیار آسان است. اما ، تصمیم گیری در مورد اینکه از کجا یادگیری را شروع می کنید یا آنچه را که باید در آینده انجام دهید می تواند گیج کننده باشد.
به همین دلیل در این پست مسیری را به شما نشان می دهم كه وقتی تصمیم گرفتید به عنوان یك توسعه دهنده فرانت اند فعالیت کنید ، باید دنبال كنید
قبل از ادامه کار ، به خاطر داشته باشید که برای انجام تمام مراحل زیر ممکن است ماه ها یادگیری لازم باشد. منابع بسیاری وجود دارد که می توانید با استفاده از آنها به یک توسعه دهنده خوب در قسمت فرانت اند تبدیل شوید.
تنها کاری که باید انجام دهید این است که تمرکز خود را حفظ کنید و صبر داشته باشید.
در این مرحله شما باید بتوانید یک وب سایت ساده کار کنید. شما چیزهای اساسی برای ساخت یک وب سایت ، از مفهوم آن تا موارد فنی را یاد خواهید گرفت.
اول از همه ، شما باید نحوه کار وب را درک کنید. خوب ، ممکن است بی اهمیت به نظر برسد اما قبل از اینکه به سراغ نکات فنی بروید ، باید درک کنید که مفهوم آن چیست.
درک اشتباه از نحوه کار وب و اصطلاحات آن ممکن است هنگام یادگیری نکات فنی باعث کندی شما شود.
در اینجا HTML مخفف Hypertext Markup Language است. این یک زبان نشانه گذاری برای ایجاد و ترتیب محتوای وب مانند عناوین ، پاراگراف ها ، تصاویر و سایر مطالب است.
همچنین CSS مخفف Cascading Style Sheets است. این یک زبان ارائه برای سبک دادن به ظاهر و طرح مطالبی است که توسط HTML ساخته شده است. با CSS می توانید سبک قلم ، رنگ ، موقعیت ، padding ، حاشیه و موارد دیگر را تنظیم کنید.
این دو مورد در ساخت یک وب سایت مستقل هستند اما با یکدیگر ارتباط دارند. 99٪ (اگر 100٪ نباشد) وب سایتهای موجود در اینترنت با این زبانها ساخته شده اند.
اگر تعجب می کنید که HTML و CSS چگونه به نظر می رسند ، می توانید CTRL + Shift + i یا F2 را فشار دهید ، در اینجا برگه Element را انتخاب کنید و آنها را مشاهده کنید ، HTML در سمت چپ و CSS در سمت راست.
در این مرحله ، من انتظار ندارم که شما به Javascript یک باره تسلط داشته باشید زیرا بعداً در مرحله 10 با آن بیشتر آشنا خواهید شد. شما فقط باید بفهمید که این چیست و چگونه از آن به همراه HTML & CSS در وب استفاده کنید.
هدف اصلی این مرحله این است که شما می توانید با استفاده از Javascript ، به ویژه با استفاده از JQuery ، وب سایتی با عملکرد و محتوای پویا ایجاد کنید.
جاوااسکریپت (به اختصار JS) یک زبان برنامه نویسی است که برای افزودن عملکرد ، تعامل ، اتوماسیون ، محتوای پویا و موارد دیگر در وب سایت استفاده می شود. Javascript کاری را انجام می دهد که HTML & CSS نمی تواند انجام دهد.
جی کوئری (JQuery) محبوب ترین کتابخانه جاوا اسکریپت است که نوشتن وظایف معمول Javascript را مختصر تر می کند.
نکته ای که به احتمال زیاد قراره در ادامه مسیر بهش بربخورید بلااستفاده بودن جی کوئری یا بحث مرگ جی کوئریه،ببنید دوستان من این موضوع رو رد نمی کنم،اما به جد به شما پیشنهاد می کنم که مبحث یادگیری جی کوئری رو حتما در ادامه داشته باشید
من قبلاً اشاره کردم که توسعه دهندگان فرانت اند پل ارتباطی بین توسعه دهنده و طراح هستند. بنابراین ، از شما انتظار نمی رود که فقط بتوانید کدنویسی کنید ، بلکه باید مفهوم UI / UX (رابط کاربری / تجربه کاربری) را نیز درک کنید.
این مهارت فنی نیست ، اما با درک آن ارزش افزوده ای خواهید داشت ، به ویژه هنگامی که هیچ طراح در تیم شما وجود ندارد.
شما قبلاً در مورد HTML ، CSS و Javascript / JQuery آموخته اید ، اما هنوز بر آنها تسلط ندارید. فقط زمانی می توانید بر آنها تسلط پیدا کنید که وب سایت های واقعی ساخته شده باشید. این زمان شما برای ایجاد نمونه کارها است.
شما ممکن است دوره ها و آموزشها را در مدت یک ماه به پایان رسانده باشید ، اما تمرین در HTML ، CSS و JQuery حداقل 2 ماه طول می کشد تا شما را به عنوان یک توسعه دهنده فرانت اند تبدیل کند.
در این مرحله توقف وجود ندارد زیرا شما همچنان باید برای مراحل بعدی تمرین کنید.
در این مرحله ، از برخی فریمورک ها و ابزارهای فرانت اند برای کمک به شما در ساخت وب سایت خود استفاده خواهید کرد. استفاده از آنها در پروژه شما روند توسعه وب شما را تسریع می کند زیرا آنها می توانند کارهای مشترک در توسعه وب را برای شما به طور خودکار انجام دهند.
اگر بعد از انجام مراحل 1 تا 5 به اینجا رسیدید ، باید حتماً نمونه کارهای وب سایت خود را ایجاد کرده باشید.
از آنجا که قبلاً اصول را فرا گرفته اید ، تا جایی که بتوانید کدنویسی موثرتر و کارآمدتری داشته باشید ، سطح خود را بالا خواهید برد. با استفاده از چارچوب CSS در پروژه خود ، بهره وری خود را در ایجاد وب سایت افزایش می دهید.
به زبان ساده ، CSS Framework دسته ای از کدهای CSS است که می توانید از آنها در پروژه خود استفاده کنید. با قرار دادن یک چارچوب CSS در پروژه خود ، حتی اگر کد CSS خود را ننویسید ، می توانید وب سایت خود را زیبا و مناسب جلوه دهید. فقط برخی از کلاس ها را در div خود قرار دهید که یک چارچوب CSS آنها را برای شما سبک کرده است.
در این مرحله ، شما می آموزید که از Bootstrap استفاده کنید زیرا محبوب ترین چارچوب CSS در وب است
پروژه وب سایت شما بزرگتر ، پیچیده تر و دارای صفحات زیادی است. شما باید کدهای CSS بیشتری بنویسید. شما ممکن است اغلب با استفاده از کپی کردن ، از برخی از استایل های CSS در صفحات مختلف استفاده مجدد کنید. در پایان ، کدهای CSS شما کثیف خواهند بود. همچنین می خواهید کد کمتری بنویسید زیرا صفحات زیادی باعث استرس شما شده است.
خوب ، اگر اتفاقی که برای شما افتاده است ، وقت آن است که از پیش پردازنده CSS استفاده کنید. به زبان ساده ، CSS Pre-processor ابزاری است که به شما امکان می دهد کدهای CSS را با نحو خاص خود تولید کنید.
دارای برخی از ویژگی ها مانند nesting ، متغیر و mixin است که به شما امکان می دهد کدهای CSS قابل استفاده مجدد ایجاد کنید. بیشتر نحوهای پیش پردازنده های CSS شباهت زیادی به CSS دارند. در یادگیری آن مشکلی نخواهید داشت زیرا بیشتر شبیه نسخه مختصر CSS است.
پیش پردازنده های CSS بسیاری برای انتخاب وجود دارد. SASS و LESS محبوب ترین آنها هستند. نحو آنها نیز بسیار شبیه به یکدیگر است.
کنترل نسخه یکی دیگر از ابزارهای مفید برای کمک به شما در مدیریت پرونده ها و تغییرات در هر نوع پروژه توسعه نرم افزار است. بنابراین ، این فقط برای توسعه وب نیست.
مزیت کنترل نسخه در صورت همکاری با برنامه نویسان دیگر در یک پروژه یا زمانی که مجبورید پروژه خود را به نسخه های مختلف تقسیم کنید ، قابل درک خواهد بود.
در حال حاضر ، پرکاربردترین کنترل نسخه برای توسعه نرم افزار Git است. Git یک سیستم کنترل نسخه توزیع شده رایگان و متن باز است که برای مدیریت همه کارها از پروژه های کوچک تا بسیار بزرگ با سرعت و کارایی طراحی شده است.
گیت با گیت هاب متفاوت است. در حالی که Git یک نرم افزار است ، Github یک وب سایت محبوب است که می توانید مخزن Git خود را در آنجا نمایش دهید یا بارگذاری کنید.
مدیر بسته ابزاری برای توسعه نرم افزار است که به برنامه نویسان کمک می کند تا به راحتی کتابخانه های خارجی یا وابستگی ها را برای یک پروژه وارد یا اضافه کنند.
قبل از استفاده از مدیر بسته ، متوجه خواهید شد که هر زمان به کتابخانه خارجی مانند JQuery یا چارچوبی مانند Bootstrap نیاز دارید ، آن را بارگیری کرده و به صورت دستی در پروژه خود قرار می دهید.
مشکلی نیست تا زمانی که روی طرحی کار کنید که به مجموعه عظیمی از کتابخانه ها نیاز دارد. دیگر نمی توانید آن را دستی بارگیری و اضافه کنید زیرا کارآمد نیست. به همین دلیل شما به یک مدیر بسته نیاز دارید تا این کار را برای شما اتوماتیک کند.
در توسعه front-end ، محبوب ترین مدیر بسته NPM (Node Package Manager) است. NPM مدیر بسته پیش فرض برای محیط زمان اجرا JavaScript Node است.
قبل از ادامه کار ، باید مطمئن شوید که پروژه توسعه وب شما توسط NPM آغاز شده است (مرحله 9). یک task runner به عنوان یک وابستگی dev ، در پروژه NPM شما قرار می گیرد.
ابزار Task Runner ابزاری اتوماسیون است که به شما کمک می کند کار مشترک در توسعه وب مانند کامپایل SASS یا LESS به CSS ، کوچک کردن HTML / CSS / JS ، بهینه سازی دارایی ها و راه اندازی وب سرور را اجرا کنید.
با استفاده از task runner می توانید کد خود را برای تولید بهینه کنید تا بتواند عملکرد را افزایش دهد.
بعد از طی مراحل 1 تا 10 ، ممکن است احساس کنید که از قبل یک برنامه نویس واقعی شده اید. خوب ، شما واقعاً به این هدف نرسیده اید زیرا آنچه قبلاً یاد گرفته اید بیشتر زبان Markup (HTML) و Presentation Language (CSS) است. شما فقط کمی در مورد javascript می دانید.
به همین دلیل هم اکنون درمورد آن اطلاعات خواهید گرفت. اما ، قبل از یادگیری موارد فنی ، طبق معمول ، من به شما توصیه می کنم که ابتدا مفهوم مربوط به زبانهای برنامه نویسی را بخوانید
شما قبلاً کمی در مورد javascript یاد گرفته اید. اکنون وقت آن است که شما آن را به عنوان یک بخش اساسی یاد بگیرید. این بار ، شما فقط از طریق مقالات یا برخی از فیلم های یوتیوب یاد نخواهید گرفت زیرا بسیاری از درس ها برای یادگیری وجود دارد. . .
درباره سه فریمورک و ابزار برتر بخش فرانت اند ( Vue,React,Angular ) نمینویسم،یا اگر بنویسم در مطلب جداگانه به اون میپردازم،با یه جستجو کوچیک میتونید به سطح عظیمی از اطلاعات درباره این سه عزیز برسید،این بخش قطعا به عهده خودتونه
اگر فقط بخوانید ، تمام منابع جمع آوری شده در بالا بی فایده خواهد بود و سپس آن را فراموش خواهید کرد. برای یادگیری آن باید صبور و پرتلاش و سخت کوش باشید.
بنابراین ، از این به بعد ، امیدوارم که دیگر هیچ بهانه ای برای یادگیری توسعه front-end نداشته باشید زیرا من مسیر یادگیری را به شما نشان داده ام. بیشتر منابع فوق حتی رایگان هستند.
موفق باشید ?
