امروزه صحبت ها و زمزمه های زیادی در خصوص تبدیل شدن به یک توسعه دهنده شنیده می شود. اما با وجود این همه حرف هنوز حتی اینکه از کجا باید شروع کرد کار دشواری می باشد. آیا باید شروع به یادگیری برای یک توسعه دهنده ی 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 اساس و بنیاد وب است همه ی صفحات وب و برنامه های وب از html ساخته شده اند که مرورگر با آن رابطه ی متقابل دارد یادگیری html بسیار آسان است پس HTMLدر حالی که به صورت تکنیکی یک تکنولوژی  front-endاست، برای همه ی توسعه دهندگان مفید است که حداقل یک آشنایی با آن داشته باشند.

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

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

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

بهترین تمرینات برای توسعه دهندگان  front-end

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

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

در سال 1996 یک کمیته ی استاندارد در ابتدا مشخصاتی برای این که چگونه همه ی مرورگرهای وب باید جنبه های مختلف را نمایش دهند  تعریف کرد .چون مرورگرهای وب مختلفی وجود دارد و شما میخواهید صفحات وب  با همه ی مرورگرها سازگار باشد 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 چیست؟

توسعه دهندگان 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 ، مفهومِ تفکر در موردِ معنای اساسی اینکه ، درخواست های HTTP واقعا چه هستند، می باشد. توسعه دهندگان سمت سرور قادرند در خصوص چگونگي درخواستهايhttp  كه يك برنامه تحت وب قادر هست ببيند، فكر كنند و آن درخواست را  از طریق چیزی که به آن مسیریابی می گویند، به برنامه خود (به ویژه کنترل کنندگان آن) مرتبط كنند.

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

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

نکات مهم در توسعه ی front end

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

در اینجا به بررسی این که چرا برنامه نویس 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 تمرکز کنید. سپس می توانید به یک تخصص بپردازید.