امروزه صحبتا و زمزمه های زیادی در مورد تبدیل شدن به یه پیشرفت دهنده شنیده می شه. اما با اینحال همه حرف هنوز حتی اینکه از کجا باید شروع کرد کار سختیه. یا یعنی پیشرفت front-end و back-end ؛ کدوم رو باید یاد نمی گیرین و به چه دلیل؟

باید شروع به یادگیری واسه یه پیشرفت دهنده front-end شدن یا یه پیشرفت دهنده back-end شدن کرد؟ یا باید یادگیری واسه یه پیشرفت دهنده full-stack شدن رو شروع کرد؟ در این مقاله به این سوالات جواب میدیم.

سرفصل محتوا

  • این عبارات به چه معنایی هستن؟
  • برنامه نویس front-end چیه؟
    • HTML
    • css
    • javaScript
  • بهترین تمرینات واسه پیشرفت دهندگان front-end
    • پیش پردازنده سی اس اس ( css pre-processors )
    • الگوای CSS پیشرفته
    • Frameworkهای جاوااسکریپت
    • javascript Transpires (جاوا اسکریپت Transpilerها)
  • چند تا نکته مهم در پیشرفت front end
  • پیشرفت دهنده back-end چیه؟
  • Databaseا
    • (Model / View / Controller Architecture) معماری MVC
    • معماری RESTful. REST
    • Business Logic (منطق تجارت)
  • چند تا نکته مهم در پیشرفت front end
  • جایگاه شغلی کارشناسان front end و back end
  • پیشرفت دهندگان full-stack

این عبارات به چه معنایی هستن؟

واسه اینکه به شما کمک کنیم که این موارد رو بفهمین، ما میخوایم با توضیح سطح بالای فرق بین front-end و back-end شروع کنیم. بعد ما عمیق تر به هر کدوم از این موارد می پردازیم و در مورد تکنولوژیای جور واجور و مسئولیتایی که هر کدوم از اونا شامل می شن صحبت می کنیم.

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

درباره یه فروشگاه متوسط فکر کنین تقریبا همه اینا یه front-end و یه back-end دارن .

front-end فروشگاه، جاییه که مشتریان وارد می شن و به خرید اجناس مشغول می شن .بازاریابان وقت زیادی رو واسه فکر کردن در مورد این که کدوم اجناس باید در کجا قرار بگیرن و اینکه چیجوری میتونن تجربه مشتریان رو در قدم زدن دور فروشگاه بهینه سازی کنن،صرف میکنن.

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

یه فروشگاه که front-end داره ولی back-end نداره خیلی سریع اجناس قفسه هاش خالی میشه و قادر نیس سریع اونا رو بازسازی کنه.

یه فروشگاه که back-end داره و front-end نداره هدایت مشتریان خیلی سخت میشه costoco یه مثاله در costoco پیدا کردن چیزی که دنبالش میگردین بدون کمک گرفتن بسیار سخته.

هم front-end و هم back-end به طور کل واسه کارکرد فروشگاه حیاتی هستن. هر کدوم واسه نیازای مختلفی به کار میرن full-stack فروشگاه واسه موفقیت فروشگاه کار میکنه.

تموم این موارد تو یه اپلیکیشن اینترنتی هم صدق می کنه.

برنامه نویس front-end چیه؟

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

کارشناسان front end باید به زبانای برنامه نویسی مسلط باشن چراکه بیشتر سایتا با چند زبون نوشته می شن. واسه تحقق خواستای مشتری نیاز به فیچرهای مختلفیه که واسه ایجاد هریک شاید مجبور باشین از برنامه های مختلفی مثل HTML و CSS و JavaScript بهره ببرین.

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

ایده

اینجا به بررسی تکنولوژیایی میپردازیم که پیشرفت دهندگان front-end معمولا استفاده میکنن

HTML

پایه و بنیاد وبه همه صفحات وب و برنامه های وب از html ساخته شدن که مرورگر با اون رابطه دوطرفه داره یادگیری html بسیار آسونه پس HTMLدر حالی که به صورت تکنیکی یه تکنولوژی front-endاست، واسه همه پیشرفت دهندگان خوبه که دست کم یه آشنایی با اون داشته باشن.

css

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

javaScript

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

جاوا اسکریپت یه رابطه روون با کاربر برقرار می کنه.Gmail و Google map مثالایی از همین اپلیکیشنای براساس جاوااسکریپت هستن. . پیشرفت دهندگان front-end کلا تلاش خودرا روی به کار گیری این سه تکنولوژی واسه ساختن UI قشنگتر متمرکز میکنن.

بهترین تمرینات واسه پیشرفت دهندگان front-end

از وقتی که پیشرفت دهندگان front-end روی جنبه های دقیق پیشرفت وب تمرکز کردن، در مورد چگونگی ساختن چیزها نظراتی دادن.

پیش پردازنده سی اس اس ( css pre-processors )

در سال ۱۹۹۶ یه کمیته استاندارد در اول مشخصاتی واسه این که چیجوری همه مرورگرهای وب باید جنبه های جور واجور رو نمایش بدن تعریف کرد .چون مرورگرهای وب مختلفی هست و شما می خواید صفحات وب با همه مرورگرها موافق باشه W3C استانداردها رو درست کرد .

بعد از اون پیشرفت دهندگان می خواستن ویژگیای اضافه ای رو به css اضافه کنن پس زبانای دیگری رو ساختن که به css معمولی تبدیل می شن.این تبدیل به عنوان css-pre-processing شناخته میشه. این نام گذاری به این دلیله که در واقع مرورگرهای وب این کد رو نمیفهمن و احتیاجی هم ندارن که فهمیده باشن چون به یه زبون متفاوت نوشته شده.

زبانای Less و Saas عادی ترین زبانای پیش پردازنده هستن.اینجا به بررسی تفاوتای اونا میپردازیم:

less – از زبون cssکاملا فرق داره. cssمعمولی در saasکار میکنه اما از ویژگیای اضافی هم پشتیبانی میکنه .

-سایت saas، saas رو به عنوان” cssبه همراه ابرقدرتا “نامگذاری کرده.

وقتی که می خواید از css استفاده کنین کار با هردوی less و saas بسیار آسونه.

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

الگوای CSS پیشرفته

یه دانشجو Firehose (پردازنده داده) در مورد Css متوسط میگه، که مفاهیم مدرن در مورد بهترین راهکارها واسه سازماندهی مناسب CSS رو پوشش میده.

دانشجو

Frameworkهای جاوااسکریپت

در برنامه نویسی، فریم ورکا به ساختار کد شما کمک می کنه. فریم ورکای Front-end واسه اضافه کردن ساختار، به برنامه های وب با تعاملات پیچیده کاربر، هست.

حالا سه فریم ورک کلی هست:

Angular به وسیله گوگل پیشرفته و به وسیله خیلی از برنامه های وب استفاده می شه. نسل بعدی Angular، Angular2ه، و بعضی فرق کلی بین این دو هست.

– Ember  یه فریم ورک front-endه که مبدا اون از Appleاست اپل یه فریم ورک به نام SproutCore درست کرد، که بعدا به Ember تغییر نام یافت.

– React  یه فریم ورک front-endه که به وسیله مهندسین فیس بوک ایجاد شد. اکوسیستم React تغییر سریعی داره ولی شروع به اثبات شدن کرده. React-Fiber یه بازنویسی کلی از فریم ورک طراحی شده به خاطر سریعتر بودن و هم اینکه حفظ سازگاری با کدهای قدیمی تر Reactه.

از فرم ورکای قابل توجه دیگه backboneو vuejsه که الان فریم ورک “مناسب” به خاطر استفاده وجود نداره. شرکتای جور واجور از فریم ورکای جور واجور استفاده می کنن.

پس در مورد انتخابتون زیادتر از اندازه نگران نباشین. اگه به پیشرفت front-end علاقه دارین، در مقابل انتخاب فریم ورک “مناسب” ، داشتن درک درستی از اصول خیلی مهمتره.

javascript Transpires (جاوا اسکریپت Transpilerها)

همه مرورگرهای وب javascript رو پشتیبانی میکنن بعضی از Transpiresا کدها رو از زبانای برنامه نویسی به javascript بازنویسی میکنن. پیشرفت دهندگان وب بیشتر این وسیله ها رو هم یادمیگیرند.

بعضی از transpilerهای عادی به توضیح زیر هستن :

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

CoffeeScript  یه زبون برنامه نویسی شبهrubyه که به جاوا اسکریپت تبدیل می شه. این زبون به طور پیش فرض طبق مسیرهای فریم ورک ایجاد شده و به وسیله خیلی از پیشرفت دهندگان استفاده می شه.

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

چند تا نکته مهم در پیشرفت front end

همه چیزها در حال تغییر بسیار سریع هستن. این موضوع در عین هیجان انگیز بودن ، دلهره آور هم هستش.

واژه فرسودگی جاوا اسکریپت (JavaScript Fatigue ) واسه توصیف گرایش جامعه جاوا اسکریپت به حرکت به طرف وسایل جدید و نورانی به کار میره.

در مورد استفاده نکردن از آخرین تکنولوژی زیادتر از اندازه نگران نباشین.

پیشرفت دهنده back-end چیه؟

بک ان از سه بخش سرور، برنامه(application) و پایگاه داده(database) تشکیل شده. کارشناسان back end باید با زبانا و تکنولوژیای جور واجور سمت back end یا سرور مثل PHP، Ruby و Python آشنا باشن.

پیشرفت دهندگان front-end روی کار با وسیله ها، فن آوریا و زبانای برنامه نویسی که در مرورگرهای وب قابل اجرا هستن، تمرکز می کنن. پیشرفت دهندگان back-end روی …. تموم چیزای دیگه تمرکز می کنن.

پس در واقع back-end شامل چیه؟ بیایید یکم گسترده تر به موضوع نگاه کنیم. بیایید در مورد چگونگی کارکرد برنامه های وب صحبت کنیم.

– در اول، یه مرورگر وب به اینترنت وصل شده و درخواست به مرورگر میرسه و مرورگر اون چه که به عنوان درخواستای http دریافت میکنه رو به آدرسای شناخته شده url می فرستد.

– اتفاق عجیبی (جادو) در بستر اینترنت اتفاق می افته.

– در آخر، به یه سرور (در کامپیوتر) که شما به عنوان یه پیشرفت دهنده وب بر اون کنترل دارین وصل می شه.

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

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

Databaseا

در کامپیوترتان، شاید بیشتر اطلاعات رو در فایلایی روی سیستم فایل خود (file system) ذخیره کردین. سرورهای شما دارای فایلایی هستن که می تونین به اونا هم دسترسی داشته باشین، اما کلا، شما می خواین داده ها رو در پایگاه های داده ذخیره کنین.

پایگاه های داده به شما اجازه اضافه کردن، حذف ، ویرایش، و دسترسی راحت تر به همه چیز مانند داده های تولید شده به وسیله کاربر رو میده. تقریبا تموم برنامه های وب از پایگاه های داده استفاده می کنن، و دو نوع متفاوت از پایگاه های داده هست: SQL و NoSQL.

بیشتر برنامه های وب از پایگاه داده SQL استفاده می کنن و واسه ساخت برنامه های کاربردی وب که به شما اجازه ساخت ، خوندن، ویرایش کردن ردیفا رو میده، رایجه. این موضوع به طور خلاصه “CRUD” می گن.

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

(Model / View / Controller Architecture) معماری MVC

تقریبا همه برنامه های مدرن وب از یه استاندارد معماری MVC استفاده می کنن. Ruby on Rails و بقیه فریم ورکا مانند ExpressJS این کار رو می کنن. این فریم ورک، مسئولیتای جور واجور تو یه برنامه رو جدا می کنه و به بخشای جور واجور برنامه اجازه میده به هر مسئولیت رسیدگی کنه.

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

View یه صفحه htmlه که مرورگر وب باید ببینه در حالی که view یه عامل front-endه، ولی بیشتر پیشرفت دهندگان back-end اگه لازم باشه می تونن خیلی سریع چیزی رو به صفحه وب اضافه کنن.

Controller نقش یه رابط بین بخشای جور واجور برنامه وبه.

معماری RESTful. REST

معماری RESTful. REST ، معنیِ تفکر در موردِ معنی اساسی اینکه ، درخواستای HTTP واقعا چه هستن، هستش. پیشرفت دهندگان سمت سرور می تونن در مورد چگونگی درخواستهایhttp که یه برنامه تحت وب قادر هست ببینه، فکر کنن و اون درخواست رو از راه چیزی که به اون مسیریابی می گن، به برنامه خود (مخصوصا کنترل کنندگان اون) در رابطه کنن.

Business Logic (منطق تجارت)

در نرم افزار کامپیوتر، business logic یا domain logic بخشی از برنامه س که قوانین کار و کاسبی دنیای واقعی رو کد گذاری می کنه که تعیین کنه چیجوری میشه داده رو ایجاد، ذخیره و عوض کرد.

اگه شما در مورد ساخت یه بازی شطرنج فکر می کردین، یه مثال از business logic (منطق کار و کاسبی)، کد گذاری اطلاعاتیه که یه رخ به روشی متفاوت از یه وزیر حرکت می کنه.

چند تا نکته مهم در پیشرفت front end

پیشرفت دهندگان Back-end با سرورها و پایگاه های داده سر و کار دارن. اونا هم اینکه به تبدیل درخواستای HTTP به جواب واقعی از اینترنت، کمک می کنن.

جایگاه شغلی کارشناسان front end و back end

درمجموعهای جور واجور جایگاه این تخصصا فرق داره دریک مجموعه ممکنه متخصص front end فقط با کمک نرم افزارهای مثل فتوشاپ یا فرم ورک ظاهر سایت رو طراحی کنه و به برنامه نویسی کاری نداشته باشه یا برعکس متخصص front end در روند برنامه نویسی هم مشارکت فعال داشته باشه. این به مهارت فردی و سیاستای شرکت بستگی داره.

طراحی واسط کاربری و تجربه کاربری هم خود بحث دیگه ایه که چگونگی اجرای اون در روند طراحی سایت بسیار تاثیر گذاره.

کارشناسان بک ان روی بخشی از سایت کار می کنن که کاربر اونو نمی بینه اما خیلی خیلی مهمه. برنامه نویسان یا پیشرفت دهندگان back end نگرانی امنیت، ساختار ومدیریت محتوای سایت رو دارن.

فرق تخصص front end و back end و روش اجرای متفاوت اون اهمیت همکاری و مشارکت کارشناسان این بخشا با همدیگه رو رو می کنن. این دو معنی جداگونه به شکل غیرقابل انکاری با همدیگه وابسته هستن و این حقیقت رو می شه که طراحی سایت یه کار به طور کامل گروهیه که به همکاری تموم نیروهای متخصص وابسته.

پیشرفت دهندگان full-stack

اینجا به بررسی این که به چه دلیل برنامه نویس full-stack بهتره میپردازیم:

پیشرفت دهندگان full-stack می تونن که هم front-end بنویسن و هم با کدهایی که روی سرور اجرا می شن سر و کار داشته باشن.

دلایل زیادی واسه این که تلاشای خود رو روی پیشرفت دهنده full-stack شدن متمرکز کنین هست.

اول اینکه پیشرفت دهندگان full-stack میتونن روی هر جنبه ای از یه ویژگی کار کنن این به این معنیه که یه پیشرفت دهنده full-stack میتونه به جای اینکه ایده های خود رو فقط تا نیمه راه پیش ببره ، تا انتها و تبدیل شدن به واقعیت پیش می بره.

این به این معنیه که چه شما …

تو یه شرکت واسه اضافه کردن یه ویژگی کار کنین

ایده ای واسه یه پروژه جانبی بسازین

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

… میتونین با تموم جنبه های کد کار کنین.

دوم، حتی اگه شما تمایل بیشتری به کد front-end یا کد back-end داشته باشین، باید پایه در جنبه دیگه هم داشته باشین.

شما نمی تونین یه پیشرفت دهنده front-end عالی باشین بدون اینکه قادر به صحبت با پیشرفت دهنده back-end در مورد مفاهیم ساختارهای پایگاه داده باشین.

هم اینکه نمی تونین یه پیشرفت دهنده back-end عالی باشین اگه درک نکنین که چیجوری شکلای جور واجور RESTful APIایی که واسه پیشرفت دهندگان front-end آسونه که با اونا ترکیب شن، ساخته می شن.

سوم، برنامه های وب همیشه شامل هر دو بخش هستن. به خاطر درک کامل از چیزی که تو یه برنامه وب اتفاق می افته، شما نیاز به درک قوی از front-end و back-end دارین.

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

بهترین مدیر ممکن فروشگاه، مدیر فروشگاه “FULL STACK” است که می دونه هر قسمت چیجوری کار میکنه و اینکه چیجوری روی قسمتای دیگه تاثیر میگذاره رو میفهمه.

درست همون چیزیه که در پیشرفت صدق می کنه.

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

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

پس، واسه بیشتر آدمایی که به دنبال پیشرفت وب هستن، باید واسه ایجاد یه پایه در اول روی هر دو پیشرفت front-end و back-end تمرکز کنین. بعد می تونین به یه تخصص بپردازید.

منبع: barnamenevisan.org – dpr.co.com