Веб-әзірлеушілер: Front End, Back End, Full Stack .. Айырмашылығы неде?

Кіріспе

Сіз вебті дамытуға қызығушылық танытасыз, бірақ сіз ол туралы көп білмейсіз бе? Олай болса, бұл мақала сіз үшін!

Күн сайын мыңдаған веб-беттер жарияланады және оларды веб-әзірлеушілер кодтайды, сіздер білесіздер. Екінші жағынан, сіз веб-әзірлеушілердің бірнеше түрі бар екенін білмейтін шығарсыз: негізінен үш түрі: Front-End әзірлеушілері, Back-End әзірлеушілері және толық стек әзірлеушілер. Дамудың осы түрлерінің әрқайсысы нақты мамандық бола алады.

Осы мақалада әр түрлі типтер арасындағы ұғымдар анықталады және сіз әзірлеуші ​​болғыңыз келсе білу үшін ең қызықты болатын құралдар мен құрылымдар туралы білесіз.

Әзірлеушілердің түрлері

Веб-әзірлеушінің көптеген рөлдері бар. Ол жұмыс үстелі компьютерлері, планшеттер және телефондар сияқты әртүрлі платформаларға бағытталған веб-мазмұнды жасайды және қолдайды.

Front-End әзірлеушілері клиент деп аталатын шолғышта жұмыс істейтін тілдермен жұмыс істейді. Осылайша, алдыңғы қатарлы әзірлеушілер ең алдымен HTML, CSS және JavaScript-пен жұмыс істейді. Олар алдыңғы қатарлы технологиялар деп аталады, өйткені олар сайтпен / қосымшамен өзара әрекеттесетіндерді білдіреді.

Динамикалық сайттар арнайы серверді қажет етеді, өйткені кейбір мәліметтер олардың деректері негізінде әр пайдаланушы үшін теңшелген. Әзірлеудің бұл түрі артқы даму деп аталады, өйткені көптеген әрекеттер қолданушының алдында емес, серверде орын алады.

Веб-дамудың әртүрлі деңгейлерімен жұмыс жасайтын адамды кейде Толық стек жасаушы деп атайды. Шындығында, барлық веб-әзірлеушілер барлық стек туралы жақсы түсінікке ие болуы керек. Стек дегеніміз - компания өзінің веб-қатысуын құру үшін пайдаланатын алдыңғы және артқы жағындағы құралдар жиынтығы. Алайда нақты толық стек жасаушылар өте сирек кездеседі.

Тілдер мен құралдар

HTML рөлі

Алдыңғы, артқы немесе толық құрамды жасаушы болсаңыз да, бәрін меңгеруге тиісті тіл бар және бұл HTML.

HTML: (Гипермәтінді белгілеу тілі) бұл шын мәнінде тіл емес, бұл мәтінге контекст пен құрылымды қосу әдісі.

«Гипермәтін» интернеттегі құжаттар сызықтық түрде қолданылуға арналмағанын, оларды басқа құжаттармен байланыстыру үшін жасалғанын білдіреді. Алдыңғы қатарды жасаушы сайттағы барлық парақтардың арасындағы қатынасты және олардың бір-бірімен қалай байланысатындығын түсінуі керек. Бұл ақпараттық архитектура деп аталады, бұл сайтты құрудың ең жақсы әдісі, пайдаланушының осы сайтты қалай басқаратындығы және пайдаланушылардың бір мазмұннан екіншісіне қалай ауысатындығы туралы сұрақ тудырады.

HTML-тің екінші бөлімі - «Белгілеу тілі», бұл оның құрылымын анықтау үшін веб-параққа қосылатын тегтер жиынтығы. оның рөлі өте маңызды. Біріншіден, әрбір мазмұн элементінің рөлін анықтайды; тақырып, ал басқалары навигациялық сілтемелер болады. Кейбір тегтер кескін немесе бейне сияқты мәтіндік емес элементтерді сипаттайды. Барлық веб-әзірлеушілер құрылым мен семантикаға мұқият және құмар болуы керек.

Белгілеу тілі де өте маңызды нәрсені жасайды. Ол DOM немесе Document Object Model құрады. DOM парақтың құрылымын сипаттайды, және ол веб-сайттағы мазмұн картасы сияқты.

HTML-код дұрыс кодталмаса, сайттың дизайны немесе функционалдылығы болсын, ештеңе жұмыс істемейді. Сондықтан HTML негіздерін үйреніп, онымен кодтауды үйрену өте маңызды. Вебті дамытуда көптеген дағдыларға ие болғанымен, HTML осы саладағы кез-келген жұмыс үшін негізгі болып табылады. HTML5 және DOM-да өте жақсы мақалалармен бөліскендер көп, бірақ мен https://www.w3schools.com/html/ тексеруді ұсынамын

Уайымдамаңыз! Бақытты болыңыз: үйрену өте оңай, бәрі алғашқы кезде керемет көрінеді (алғашқы екі сағатта), содан кейін ғажайыптар болады, мен уәде беремін.

CSS рөлі

Дизайн маңызды рөл атқарады, кез-келген сәтті веб-сайттың, әрбір сәтті бизнестің маңызды бөлігі. бұл әр түрлі әзірлеушілердің мамандандыруларын көретін салалардың бірі. Сайттың көрінісі мен сезімін жасауға көбірек қызығушылық танытатын адамдар бар; олар UX деп аталатын пайдаланушы тәжірибесімен жұмыс істегенді ұнатады. Содан кейін сайттың ерекшеліктерімен жұмыс істегісі келетіндер бар, бұл мамандандыру UI деп аталады.

Алайда, барлық әзірлеушілер CSS-тің құжатқа қалай әсер ететінін білулері керек. Сондай-ақ, веб-дизайн адамдардың сайттарды қалай қолданатынын және мазмұнды қалай қарайтындығын жақсы түсінуді қажет етеді. Бұл навигацияның қолданушы тәжірибесін қалай басқаратынын және қолданушыға мазмұнды қалай көрсету керектігін үйренуді білдіреді. Іс жүзінде веб-сайтты жобалау үшін CSS деп аталатын веб-орналасу тілімен жұмыс істеуді үйрену қажет. Бұл стильдердің каскадты парақтарына арналған. HTML сияқты, ол екі бөліктен тұрады. Біріншіден, CSS DOM-ны көрнекі пішінге аудару үшін ережелер жиынтығын немесе стиль кестесін анықтаудан тұрады. Екінші бөлім - каскадты стиль ережелері. Бұл бетте стильдер көрсетілетін басымдықты сипаттайтын ережелер жиынтығы. Бұл дегеніміз, ол сіз меңгеруіңіз керек тіл. CSS-те алдымен өзгертілетін парақтың бөлігін анықтайтын ережелер жиынтығы бар; егер олар бар болса, сіз өзіңіздің бетіңізді көптеген қасиеттер арқылы елестете алатындай етіп жасай аласыз. Бұл қасиеттер түстерді, өлшемдерді, қаріптерді анықтау сияқты қарапайым болуы мүмкін және контраст, туралау, жақындау және т.б. сияқты классикалық дизайн тұжырымдамаларын қолдануға мүмкіндік береді ...

Бұл тілдің жақсы мысалы CSS Zen Garden. Бұл сайт бірдей мазмұнды қалай басқаша көрсетуге болатындығын көрсетеді. Сайтта бірдей HTML бетке арналған әртүрлі стильдер бар. Осы беттің ережелерінің басқа жиынтығын таңдағанда, сайттың орналасуы өзгереді. Кейде күрт. Дегенмен, дәл сол HTML-код, ол әр түрлі жолмен ұсынылған.

CSS сонымен қатар сіздің дизайныңызға белгілі бір қозғалыс және тіпті интерактивтілік деңгейін қосуға мүмкіндік береді. CSS-ті оқу дегеніміз - қозғалыс элементтерімен және графикалық дизайн тұрғысынан өзара әрекеттесу тілімен жұмыс істеуді үйрену.

CSS дамып келе жатқан кезде тілде айнымалылар, есептеулер және одан да күрделі функциялар пайда болды. Сонымен, CSS-те қазір бағдарламалау тілдерінде бар кейбір ұқсас функциялар бар. Интернеттің дизайнындағы үлкен айырмашылықтардың бірі - мазмұн «Жауапты» болуы керек. Басқаша айтқанда, жұмыс үстелдері, ноутбуктер және мобильді құрылғылар сияқты әртүрлі ақпарат құралдарының пропорцияларына бейімделуі керек. CSS әрқашан дамып келеді. Үш негізгі қайта қарау болды, ал үшінші, CSS3 болашақта дамитын тәуелсіз модульдерге бөлінді.

Сонымен, әрдайым осы тілде жаңартулар болады. CSS-пен жұмыс істеу тілдің күрделілігіне байланысты үлкен қиындық тудыруы мүмкін, бірақ оның күрделілігі оны қызықтыратын және өте жақсы мансапқа әкелуі мүмкін.

JavaScript-тің рөлі

Веб-даму әлемінде жұмыс істейтін кез-келген адам, кем дегенде, бағдарламалаумен ыңғайлы болуы керек. Front-End әзірлеу үшін бұл JavaScript-ті, браузердегі өзара әрекеттесуді басқаруға жауапты тілді білуді білдіреді. Бұл тек алдыңғы қатарлы әзірлеушілер ғана емес, тіпті көптеген артқы бағдарламаларды жасаушылар күн сайын JavaScript-тің белгілі бір нысандарын пайдаланады және қазіргі уақытта JavaScript торап деп аталатын серверлік технологиямен артқы жағы үшін көбірек қолданыла бастайды, біз оны « NodeJS ».

JavaScript оқиғаларды өңдеу, медианы жүктеу және DOM бетіндегі элементтерді құру, өңдеу және жою үшін қолданылады.

Бұл мазмұнмен әрекеттесуді құруды және жобалауды бағалайтын адам үшін жұмыс. Тілге бірнеше нұсқалар енгізілді, жаңа нұсқасы әлі де бар. CSS сияқты, бұл жаңа мүмкіндіктердің тұрақты түрде іске асырылуы, демек, әзірлеушілер жаңа мүмкіндіктерді үнемі оқып, зерттеп, олардың ағымдағы және болашақ жобаларға әсерін көруі керек. Әзірлеушілер әр түрлі шолушылардың қолдауына қатысты алаңдаушылық білдіруі керек, өйткені тіл тез өзгеріп жатқандықтан, барлық шолушылар JavaScript-тегі соңғы өзгерістер мен жетілдірулерді біріктіре бермейді.

Барлық браузерлерде JavaScript бірдей әрекет етпейді және бұл кодты күйге келтіру әсіресе ашуландырады, бірақ бұл веб-әзірлеудің өте қажет бөлігі. Кейбір өңдеушілер жаңа техникалар мен жетілдірулерді пайдаланып, содан кейін оларды JavaScript-ке айналдыруға мүмкіндік беретін JavaScript-тен басқа тілдерде код жазады. Осылайша, дамыту TypeScript және Go сияқты JavaScript қосымшаларын үйренуді қамтиды.

Жоғарыда айтқанымдай, JavaScript сервер жағында да жүзеге асырылады және көбінесе өңдеу тәжірибесінде басқару тәжірибесін басқару және басқару әдісі ретінде қолданылады. Бұл NodeJS, WebPack және GulpJS сияқты жұмыс процесінің құралдарын қолданып тез жұмыс жасау үшін кодты сығу немесе біріктіру сияқты әрекеттерді білдіреді.

JavaScript сіздің өміріңізді өте қарапайым ететін қосымшаларды іске қосудың тәсілі болды.

Жеке, JavaScript - ең жақсы жасалған бағдарламалау тілі.

Back-End негіздері

Неғұрлым күрделі сайттарда / қосымшаларда пайдаланушылармен тікелей өзара әрекеттесетін алдыңғы қатарлы технологиялар жеке тәжірибені ұсынудың тәсілі болады. Пайдаланушылар сайтқа кірген кезде, сол сайтта сақталған мәліметтерге байланысты әрқайсысы әртүрлі тәжірибе алады. Жаппай ақпарат алу үшін тек HTML, CSS және JavaScript қолдана отырып, әр бетті қолмен кодтау мүмкін емес. Бұл дерекқорды пайдаланушыға жіберілген ақпараттың жылдамдығын басқару үшін пайдалану керек дегенді білдіреді. Бұл мәліметтер базасының бағдарламалау негізі болатындығын түсінудегі маңызды қадам.

Веб-әзірлеушілер мәліметтер базасын, пайдаланушы ақпаратын қалай өңдейтінін және сол мәліметтер негізінде мазмұнды пайдаланатын және көрсететін бағдарламалау тілдерін түсінулері керек. Әр компания қолданатын құралдар жиынтығы әр түрлі болады. Әр компания өздеріне сәйкес келетін нәрсені таңдайды. Бұл тілдер келушінің көргенімен байланысты болмағандықтан, мұнда көптеген таңдау мүмкіндігі бар. Жаңа веб-әзірлеушілерге Back End әзірлеу платформасының кем дегенде біреуін және кем дегенде бір мәліметтерді өңдеу тілін үйрену қажет.

Егер мен оқуды бастау үшін жеке жиынтығын таңдауым керек болса, онда бұл PHP мен SQL тіркесімі болар еді. Бұл комбинация қазіргі кезде ең танымал. Осыған қарамастан, тек осы екі тілді білу сіз жұмыс істейтін жерлерді және сізге ұсынылатын тапсырмаларды шектейді. Сонымен, PHP-ден бастаңыз, содан кейін Node.js (менің әлі күнге дейін сүйікті), .NET немесе Ruby on Rails сияқты басқа опцияларды қарастырыңыз. Сіз бастаушы болсаңыз жан-жақты болу өте маңызды, бірақ сізде тәжірибе болғаннан кейін, сіз өзіңіздің сүйікті технологияңызда күрделі істерді жасауда маман болатын бір ортаға мамандану одан да маңызды болады (және ол көп төлейді).

Back-end - жылдам қозғалатын тағы бір өріс; сіз жұмыс істейтін құралдар тұрақты жаңартулардан өтеді. Енді инновациялық тәсілдер мен үнемі дамып келе жатқан технологиялар әзірлеушілерді үнемі оқудан шығарады, бұл олардың бәсекеге қабілеттілігі мен тиімділігін арттырады. Бұл артқы дамуды қызықты мансапқа айналдыратын нәрсе.

Серверлер

Веб-сайтқа / бағдарламаға кірген кезде компьютерде мазмұнды шолғышқа жіберетін арнайы бағдарламалық жасақтама іске қосылады. Бұл компьютерлер серверлер деп аталады, өйткені олар ақпаратқа қызмет етеді. Негізінен, олар HTML, CSS, JavaScript және пайдаланушы сұрайтын файлдарды жібереді. Сондай-ақ, сервер деректердің өзара әрекеттесуін және пайдаланушыларға ұсыну тәсілін басқаруға жауап береді. Сервер көбінесе веб-әзірлеушілер басқаратын әртүрлі параметрлерге сәйкес теңшелген беттерді жасайды.

Көптеген сайттар / бағдарламалар мұны жұмыс істеп тұрған мазмұнды ұйымдастыруды басқаратын бағдарламалық жасақтама арқылы жасайды. Артқы немесе толық стек жасаушылар осы жүйелерді құру және қызмет көрсету үшін жауап береді. Екінші жағынан, Front End әзірлеушілері дизайнды басқара алады және осы парақтардың функционалдығын құруға көмектеседі.

Түрлі формалар, әртүрлі операциялық жүйелермен жұмыс істейтін серверлердің мөлшері бар. Веб-әзірлеуші ​​ретінде сіз тағы да осы машиналардың кем дегенде біреуімен және осы амалдық жүйелердің кем дегенде біреуімен тәжірибе жинақтаған болуыңыз керек, бірақ бәсекеге қабілетті болу үшін сіз бірнеше шешімді таба аласыз, жан-жақты бола аласыз, содан кейін мамандандырыласыз.

Осы платформалардың біреуін игергеннен кейін жаңа технологияларды үйрену әр түрлі тілдерді үйренуге ұқсайды, әлдеқайда оңай. Әрбір тіл бірдей ұғымдарды түсіндіру үшін әртүрлі синтаксисті қолданады. Сіз бір тілді үйреніп алғаннан кейін, басқа тілге ауысу - бұл жаңа командалар жиынтығын үйрену ғана.

Кейбір платформалар нақты жүйелермен жұмыс істейді, және екі негізгі таңдау бар - Windows және Linux. Linux көп таралған және арзанырақ, ал Windows серверлері ірі компаниялармен танымал. Майкрософт ірі орталар мен қызметтік бағдарламаларды дамытумен әйгілі және көптеген ашық көздер жобаларын қабылдады. Алайда, біз Microsoft ортасын өте қымбат орта ретінде қарастырамыз. Linux, керісінше, толықтай ашық және белсенді әзірлеушілер қауымдастығының қолдауымен жүзеге асырылады.

Егер сіз артқы жағында маманданбасаңыз, сервердің өзімен көп нәрсе жасаудың қажеті болмайды. Дегенмен, кейбір ұғымдарды түсіну және құралдарды түсіну әлі де пайдалы болуы мүмкін. Мұнымен бастаудың жақсы әдісі - өзіңіздің жұмыс станцияңызға PHP және MySQL серверінің жергілікті нұсқасын орнату. Apache, MySQL және PHP-ді орнату туралы мақалалар сізге оқуды бастауға көмектеседі. Windows жүйесінде мұндай серверлерді жергілікті түрде WAMP немесе XAMPP сияқты бағдарламалық жасақтамамен орнату оңай. Mac жүйесінде баламасы Linux үшін MAMP және LAMP болады.

Егер сіз Node.js-ті сервер ретінде пайдаланып, басқа опцияны зерттегіңіз келсе, Node.js және Express.js-пен веб-сайт құру туралы мақалаларды қарауға болады. Егер артқы жағы сіздің мамандығыңызға айналса, сізден дерекқорды енгізу, пайдаланушыларды құру, өнімділікті баптау, қатынасты басқару, қауіпсіздік және қауіпсіздік сияқты тапсырмаларды орындау қажет болады. техникалық қызмет көрсету.

Серверлік сценарий тілдері

Back-end әзірлеушілері серверлік сценарий тілі (немесе жай сервер тілі) деп аталатын басқа тілмен жұмыс істейді. Атау көрсеткендей, бұл тікелей серверде жұмыс істейтін кодпен жұмыс жасауды білдіреді. Бұл код сервердегі деректерді басқарады және оны шолушы көрсете алатын ақпаратқа айналдырады. Бұл, бәлкім, әзірлеушілер арасындағы үлкен айырмашылықтың бірі. Көптеген әртүрлі платформалар болғанымен, олар негізінен бірдей нәрсені жасайды. Веб-дамуды үйрену барысында сіз өзіңіз игергіңіз келетін платформаны таба алатындай бірнеше платформаларда тәжірибе жинау өте маңызды.

Серверлік сценарийлердің негізгі тілдері - PHP, NodeJS, .NET, ASP.NET, Ruby және Python. Енді олардың кейбіреулері серверлік амалдық жүйенің белгілі бір түріне қатысты. Мысалы, .NET - бұл тек Windows серверлеріне арналған серверлік платформа. Кейбіреулер, PHP сияқты кез-келген платформада және операциялық жүйеде жұмыс істей алады, бірақ серверлік негізде жүзеге асыруда аздаған айырмашылықтар бар. Мен PHP-ден бастауды ұсынамын.

Бұл ең танымал платформа және ол сізге көптеген есіктерді ашады. NodeJS - тағы бір танымал платформа. Бұл платформа JavaScript-пен сервер тілі ретінде жұмыс істейді. Егер сіз Windows сервер ортасында жұмыс істегіңіз келсе, онда ASP.NET нұсқасын қараңыз. Сервер сценарийлерінің тілдері бастапқыда біршама қиын болып көрінуі мүмкін, бірақ олар үлкен сайттармен жұмыс жасауды тездетеді. Құралдар қорабына осы тілдердің біреуін қосу арқылы не істей алатыныңызды бағалайсыз.

Мәліметтер базасының тілдері

Артқы ақпараттармен жұмыс істеу үшін веб-әзірлеушілер өздерінің кодтарын мәліметтерді іздеуге арналған мәліметтер қорына сұрау салуға мүмкіндік беретін жеке тілмен танысуы керек. «Стек» -те жұмыс жасайтын деңгейге байланысты, сіз мәліметтерге қалай қол жеткізуге болатындығын білуіңіз керек және оны макетіңізге серверлік тіл арқылы қосуыңыз керек. Бақытымызға орай, бұл ортада аздап стандарттау бар. Көптеген серверлер реляциялық дерекқорды басқару жүйесінің немесе Sequel немесе SQL деп аталатын RDBMS нұсқасын пайдаланады. Бұл тіл Excel кестелері сияқты әр түрлі өрістері бар кестелер қатарын құру арқылы жұмыс істейді, олар деректер арасында байланыс орната алады.

Сондықтан оларды реляциялық деп атайды. Ең танымал бағдарламалар - Oracle, MySQL, MS SQL және PostgreSQL. Дегенмен, веб-сайтты дамыту туралы көптеген нәрселер сияқты, басқа да танымал әдістер бар. Ең үлкені - NoSQL. SQL әзірлеушілерді әртүрлі кестелерге мәліметтерді бөлуге шақырса, NoSQL белгілі бір құрылымсыз жазбаларға мүмкіндік береді.

Бұл әр түрлі тәсілдермен жасалған, бірақ бұл танымал әдіс және іздеу жүйелері, Google Analytics, Maps және Gmail сияқты нәрселерді беретін Google-дің Үлкен кестесі сияқты мәліметтер базасының тілдерінде қолданылады.

NoSQL-дің басқа танымал тілдері, мысалы MongoDB, Couch Base және Couch DB. Енді басқалары бар, бірақ SQL-ді азырақ біліп алыңыз, NoSQL платформаларының бірін қолданыңыз және сізде мәліметтер базасының тілдері туралы жақсы шолу болады.

Қорытынды

Осы мақалада біз толық стек, фронтальды және артқы аяғындағы әзірлеушілердің арасындағы айырмашылықты, сондай-ақ осы веб-даму салаларының бірінде маман болғыңыз келсе, игеруіңіз керек әр түрлі құралдарды көрдік. Бұл мақалада сіз веб-дамуды бастағыңыз келсе, сізге жолдар ұсынатын түрлі тілдер ұсынылған. Егер бұл сізді мамандандыруға немесе тілдің түріне бағыттаған болса, мен сізге мақалалар, YouTube-тен аз сөйлесетін және бір уақытта оқитын / көрген және кодтайтын жерде көп тәжірибеге бағытталған бейнелерді іздеуді бастауға кеңес беремін. Удеми - бұл курстарды 12 долларға сатып алатын жерден үйренудің жақсы тәсілі.

Мен өз тарапымнан оқыту мен дамытуға арналған мақалаларды жазуды жалғастырамын деп үміттенемін. Мен сөйлесуден гөрі практикаға көп көңіл бөлемін.

Сізге бұл мақала ұнады деп үміттенемін және сіз веб-әзірлеуші ​​болуды шешесіз!

Пікір бөлімінде сұрақтарыңыз болса, маған айтыңыздар :)

Бұл менің алғашқы мақалам.