Frontend это: Что должен уметь фронтенд-разработчик / Блог компании Нетология / Хабр

Содержание

Фронтенд разработчик кто это

Фронтенд разработчик кто это? Чем он отличается от бэкенд разработчика, верстальщика, веб-дизайнера? И сколько зарабатывает? Рассказываю в этой статье.

Содержание статьи

Фронтенд разработчик кто это

Фронтенд-разработчик – это тот, кто создает сайты. По большому счету. А почему его называют не создатель сайтов, а именно фронтенд-разработчик? Сейчас объясню.

Начнем с главного, т.е. происхождения слов. В словах “фронтенд” и “бэкенд” задействованы два разных начала, и одинаковый конец. Front – перед, Back – зад, End – конец. Понятно, что если переводить дословно и буквально, то получится полная чушь: передний конец и задний конец.

Однако, так это никто и не переводит. Frontend означает “передняя часть”, а Backend, соответственно, “задняя часть”. И да, речь идет не только о сайтах, но и о современных программах, приложениях для смартфона. Это на тот случай, если вы однажды услышали от кого-то из знакомых “Я фронтенд-разработчик” или хуже того “Я – бэкенд разработчик”. И подумали про этого человека чего-то не того 😉

В этом конкретном материале я почти ничего не буду говорить о бэкенде, но коротко объясню, чем он от фронта отличается. А вот о фронтенде постараюсь объяснить максимально понятно. Ибо сегодня это востребованное направление образования и работы, платят фронтендерам очень неплохо. Поехали.

Front-end разработчик – что это за зверь?

Когда вы заходите на любой веб-сайт (в том числе и на internetprofessia.ru), вы видите его, так называемое, лицо. Картинки, тексты, ссылки. Для обычного пользователя все взаимодействие с любым сайтом ограничивается нажатием на эти ссылки, вбиванием каких-нибудь слов в поля для ввода, возможно, сохранением картинок себе на компьютер. Все это время вы взаимодействуете с так называемым фронт ендом – лицевой частью сайта. С его крыльцом, витриной. “Сзади” у сайта тоже есть много всего важного, и это называется бэк енд – то, что глазу пользователя не показывается.

Вряд ли вы догадывались прежде, если только прицельно не интересовались этой темой, что за каждым сайтом стоит самое настоящее программирование. Причем, не сказать, чтобы простое. Убедиться в этом очень просто. Во многих современных браузерах сегодня есть функция быстрого просмотра кода страницы.

Просто нажимаете правой кнопкой мышки на любом пустом пространстве сайта, выбираете в появившемся меню функцию “Просмотреть код страницы”. И наблюдаете ровно ту же самую картину, какую каждый день видит, например поисковая машина, когда она исследует веб-сайт. Множество строк кода, из которого браузер впоследствии формирует для вас, для пользователя, конечный внешний вид любого сайта.

Так вот, фронтэнд (front-end, frontend, фронтенд, произносите как хотите) разработчик занимается ровно тем, что программирует внешний вид сайта, а также все функции, которые этот сайт выполняет. То есть, без фронтенд-разработчиков не было бы никаких веб-сайтов!

Фронтенд-разработчик, верстальщик или веб-дизайнер?

Нередко для людей далеких от всей этой внутренней кухни, такие термины, как разработчик сайтов, верстальщик и веб-дизайнер сливаются воедино, Они не видят между ними разницы. Но разница есть и немаленькая.

Начнем с веб-дизайнера. Это человек, который по заказу своего клиента буквально рисует внешний вид сайта. Чаще всего это делается в программе типа Adobe Photoshop или других, специальных, вроде Figma. Он делает сайт красивым, продумывает каждую мелочь и деталь: кнопки, тени, размер и стиль начертания шрифтов, отступы от края до края.

Именно веб-дизайнер отвечает за то, чтобы сайт был приятен визуально, чтобы им удобно было пользоваться. Так что от веб-дизайнера требуется не только и не столько уметь рисовать (многие веб-дизайнеры вообще этого не умеют), сколько понимать, как сделать сайт удобным для пользователя.

Далее верстальщик. Это человек, который занимается воплощением идей дизайнера в виде разметки и программного кода сайта. То есть, верстальщик буквально берет все те картинки, которые нарисовал дизайнер, все шрифты, все логотипы, все цвета – и создает на их основе реально работающий сайт, идентичный тому изображению, что прислал в макете дизайнер. И благодаря верстальщику на этом сайте все кнопки и ссылки оживают.

Так выглядит изнутри код любого современного веб-сайта. Именно его пишет верстальщик.

Верстальщик – это человек, на сто процентов зависимый от веб-дизайнера. Они в подавляющем большинстве случаев работают в паре, и слава Богу, если у верстальщика адекватный и грамотный дизайнер. Тогда их ждёт светлое будущее. Они должны прекрасно друг друга понимать, потому что именно от этого взаимопонимания зависит то, насколько изначальный замысел веб-дизайнера будет правильно и точно воплощен при создании сайта.

Наконец, фронтенд-разработчик. Его можно назвать человеком, который вырос из обычного верстальщика. Если верстка — довольно несложный процесс, предполагающий лишь создание «тушки сайта», его осязаемой оболочки, то непосредственное программирование всех функций — это уже работа фронтэндера.

Именно фронтендер занимается написанием кода, который срабатывает при заполнении всех форм на веб-странице. Именно он отвечает за то, чтобы при покупке в интернет-магазине, на странице отображалось количество товара, оставшееся на складе. Для этого нужно знать, как обратиться к базе данных, которая находятся на стороне «бэкенда», и как связать веб-страницу с этой самой базой данных буквально в реальном времени.

Что должен уметь фронтенд-разработчик?

Чтобы до конца прояснить всю эту историю с фронтом и бэком, скажу, что задача фронтендера — сделать так, чтобы красиво и легко срабатывало «лицо» сайта. Или «лицо» приложения на смартфоне. То, с чем вы, как пользователь, непосредственно соприкасаетесь.

А задача бэкенд-разработчика состоит в том, чтобы корректно работали базы данных, скрипты на стороне сервера, и все остальные чудеса техники, которые не видны глазам пользователей, но без которых фронтенд останется просто пустышкой, хоть и очень красивой.

Фронтенд-разработчик должен уметь многое. В самую первую очередь — верстать, потому что именно с этого, как правило, начинается путь в веб-разработке. А любая верстка начинается с разбиения макета, присланного дизайнером, на составные части и последующего их воплощения, посредством кода. На самом деле, любой веб-сайт состоит из составных частей — шапка, боковушки, подвал, основная часть, какие-то появляющиеся и исчезающие окна и меню.

Так может выглядеть рабочее место современного фронтендера. Наушники помогают абстрагироваться от окружения и сосредоточиться на главном. А пара мониторов нужна, чтобы не скакать постоянно с редактора в браузер и обратно.

Каждую из этих частей необходимо сверстать, то есть, задать их внешний вид с помощью специального языка разметки. Сегодня таким языком служит HTML5. А чтобы упростить задачу браузеру, загружающему страницы сайта, был придуман специальный язык стилей, который называется CSS, Cascading Style Sheet, то есть, каскадная таблица стилей. Он нужен, чтобы разгрузить основной файл (обычно он называется index.html) от всех этих красивостей, занимающих кучу места в коде и утяжеляющих страницу.

К тому же, при помощи CSS можно очень ловко создавать графические визуальные элементы на странице, и при этом не использовать картинки — все создается с помощью определенных строк кода, воспринимаемых браузером. CSS позволяет создавать простейшие графические элементы, вроде прямоугольником, треугольников, кругов, овалов, квадратов. Анимировать их поведение на странице, создавать фоны и кнопки.

Ну а для совсем продвинутого программирования, связанного с фронтендом, был придуман специальный язык Javascript, который сегодня очень востребован. Именно понимание Javascript отличает простого верстальщика от начинающего Front-end разработчика.

Ну а кроме упомянутого, фронтенд-разработчик должен также знать различные фреймворки, WebAPI, иметь представление о том, как работают все популярные CMS, к примеру WordPress, уметь «натянуть» верстку на эти самые CMS, реализовать все рабочие элементы так, чтобы в любом браузере они работали корректно и не конфликтовали ни с одной операционной системой.

Что такое fullstack front-end разработчик?

Кроме простого фронтенд-разработчика иногда можно встретить ещё резюме и вакансии, где упоминается странное слово fullstack. Если его переводить буквально, то получится ерунда: «заполненная куча». Бред какой-то. На самом деле, fullstack означает, что у какого-то конкретного профессионала имеется так называемый, полный набор знаний и умений.

Технически, конечно же, никакого фуллстека существовать не может, потому что веб-разработка это еще очень молодая отрасль знаний, и в ней постоянно появляются некие новые технологии. На смену flash пришел html5, на смену PHP приходит Python и так далее.

Однако fullstack это просто устойчивое словосочетание, подразумевающее, что фронтенд-разработчик имеет достаточный набор знаний, чтобы, в случае необходимости, уметь выполнить

весь цикл разработки готового продукта: от первой строчки, до итоговой сдачи сайта или приложения под ключ.

Предполагается, что фуллстек программист это настолько универсальный человек, что ему можно дать задание написать хоть верстку, хоть форму для сайта, хоть социальную сеть, хоть интернет-магазин, хоть отладить чужой код, хоть написать свой с полного ноля, и все это он может сделать. Ну или хотя бы, знает где быстро подучиться, чтобы сделать и не подвести заказчика.

Сколько зарабатывает фронтенд-разработчик?

Сейчас я покажу несколько скриншотов с примерами вакансий фронтенд-разработчика, чтобы вы понимали, о каких именно суммах идет речь.

Как видите, фронтендеру также не помешает понимание Объектно Ориентированного Программирования, знание реляционных баз данных, понимание SQL и другие страшные слова.

Здесь к упомянутому выше добавляется уже некий JSON, Schema.org, Vue и прочие ужасы =)

К сонму страшных чудовищ присоединяются JQuery, GitHub, Bootstrap…

Ну да, а еще вам нужно подучить React и Ajax. Страшное дело, в общем. Но согласитесь, уровень зарплаты – топовый. И это только то, что я быстрым поиском нашел за пару минут в Телеграм-каналах. Теперь, когда вы обозрели все перспективы и требования, наверняка вас гложет закономерный вопрос: а как же всему этому выучиться и при этом сохранить рассудок, не взорвавшись от огромного количества новой информации? Варианты есть, читайте ниже.

Где учиться на фронтенд разработчика?

Чтобы выучиться на фронтендера, придется потратить немало времени, потому что к 2020 году область технологий серьезно расширилась, в сравнении с самым началом зарождения Интернета, когда нужен был только голый HTML. Сегодня нужны также CSS, JS, React, GIT и так далее. Перечислять весь стек технологий я не стану, чтобы не запугивать тех, кто только начинает интересоваться всей этой темой, связанной с веб-разработкой. А еще потому что их уже и так запугали без меня авторы вакансий, которые можно увидеть выше =)

Зато я могу порекомендовать несколько отличных мест, где можно с нуля обучиться верстке и веб-разработке, даже если вы никогда в жизни этим не занимались. Сразу скажу, что мощный компьютер для этого не понадобится, потому что верстка совершенно нетребовательна к железу, зато нужен монитор. Достаточно большой, чтобы в него помещались базовые разрешения —1920х1080 вполне хватит.

Skillboxпрофессия Frontend-разработчик

записаться


Skillbox — курс Frontend-разработчик

записаться

записаться записаться записаться

записаться


Сколько учиться на веб-разработчика?

На самом деле, не праздный вопрос, потому что технологий и фреймворков хватает, а это значит, что на полноценное погружение в профессию уйдет никак не 2-3 месяца, а больше. Здесь все полностью зависит от вас: затрачивая по несколько часов в день на полноценное обучение (не вприкуску с сериалами на диване), вы вполне можете освоить профессию фронтенд-разработчик за год, может чуть больше или чуть меньше, все зависит от вашей способности к обучению.

Скажу сразу, несмотря на неплохие зарплаты, это не та работа, где можно валяться на диване, плевать в потолок и получать за это деньги. В Веб-разработке нужно работать. И чаще всего нужно любить это делать. Смотреть, как на одном мониторе выстраиваются друг за другом ступеньки кода в специальном текстовом редакторе (их называют IDE), а на другом мониторе – вырастает буквально из ничего готовый веб-сайт.

Если вы готовы часами смотреть в монитор, строить никому, кроме вас, не понятную абракадабру, а на выходе иметь возможность гордиться созданным продуктом, значит, добро пожаловать в веб-разработку!

Где брать заказы?

Вечный вопрос любого новичка. Если у меня нет опыта, я боюсь, что не справлюсь, и вообще, понятия не имею, откуда берутся заказы в этом вашем фронтенде, то что делать? Ну, начнем с того, что если вы уже фронтэндер, то такой вопрос у вас вряд ли возникнет. Я к тому, что любой фронтендер проходит вначале этап верстки, и уже там получает первые заказы, так что обрасти дополнительными job offer’ами для вас не составит проблем.

А если вы только учитесь верстать, то здесь все довольно просто. Во-первых, вам нужны демо. То есть, у вас должно быть хоть что-нибудь, что можно показать в качестве демонстрации ваших умений. Сделать это очень просто: берёте, например, лэндинг, т.е. посадочную страницу, одностраничный сайт, который вам очень нравится. И воссоздаете его полностью, от начала до конца, наполняя другими картинками, другим текстом.

Эту процедуру с копированием чужого сайта вы повторяете несколько раз, 3-5 сайтов будет достаточно. После чего, публикуете эти лэндинги на каком-нибудь бесплатном хостинге, чтобы можно было показать ваши работы, сбросив ссылки на них при личном общении. А дальше идете в какую-нибудь группу ВК, где тусуются веб-дизайнеры и пишете ее администратору: “Привет, я начинающий верстальщик, можно опубликовать у тебя в группе объявление о поиске заказов от дизайнера?”. Если он соглашается, прикладываете ссылки на свои демо-сайты, сверстанные в рамках тренировки, и ждете, кто откликнется на ваше объявление.

Почему именно такой путь? Я уже говорил, что верстальщик зависит от дизайнера. Чаще всего заказы дают именно веб-дизайнеру, а он уже передает их исполнение верстальщику, после того, как нарисует макет. Поэтому, если вы, как верстальщик, будете искать заказчика, которому нужен сайт, то вам придется все равно искать сначала дизайнера, который этот сайт нарисует. Лучше сразу отправиться на поиски дизайнера, так вы сэкономите кучу времени.

Итог

Спасибо, что дочитали мою статью “Фронтенд-разработчик кто это”, я надеюсь, она была для вас полезна. На моем блоге “Интернет-профессия” есть и другие интересные статьи, ссылки на них вы найдете чуть ниже, в блоке “Еще интересное”. Поделитесь ссылкой на этот материал в своих соцсетях, это можно сделать с помощью кнопок, которые вы тоже увидите ниже. До встречи!


Кстати, я сделал Телеграм канал, в котором публикую ссылки на новые полезные и интересные статьи, когда они выходят на сайт. И там же пишу о других вещах, которые на сайте не выкладываются. Вливайся в теплую компанию =)

где учиться, зарплата, плюсы и минусы

Фронт-энд разработчик (с англ. «front-end developer») — это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере. Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам). В 2020 году центр профориентации ПрофГид разработал точный тест на профориентацию. Он сам расскажет вам, какие профессии вам подходят, даст заключение о вашем типе личности и интеллекте.

Читайте также:

Само слово «фронт» говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем, и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист — бэк-энд разработчик. Для сведения: существует универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. «full stack developer»).

Основные инструменты фронт-энд разработчика в web: JavaScript, HTML, CSS.

JavaScript — главный язык фронт-энд разработчика в web, на котором он осуществляет программирование пользовательского интерфейса. Основная задача фронтендера — вёрстка сайтов: написание HTML-кода и CSS-стилей для представления информации в понятном всем браузерам виде и внешнему соответствию сайта макету дизайнера. Часто бывает, что  макеты не отражают всех деталей общей идеи. В данном случае фронт-энд разработчик включает свои дизайнерские способности, чтобы учесть все технические детали и нюансы. Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы: Sass/SCSS, jQuery, LESS, AngularJS, Bootstrap, Prototype, Ember.js, Backbone, React.js, Grunt Gulp. А появление  Chrome Dev Tools и Firebug позволило повысить производительность труда.  

Фронт-энд разработчик в web отвечает за то, чтобы страницы сайта выглядели во всех браузерах одинаково и соответствовали макету дизайнера. С появлением новых средств разработки и более современных браузеров эта задача  решается проще.  Но интерфейсы современных сайтов или интернет-сервисов становятся более сложными, а многообразие устройств, с которых пользователи выходят в сеть, постоянно расширяется &m

Чем отличаются фронтенд- и бэкенд-разработка

Перевод статьи «Front End Developer vs Back End Developer – Definition and Meaning In Practice».

Сайты и приложения это сложные вещи. Кнопки и картинки — лишь вершина айсберга. А когда все так сложно, для работы со всем этим вам нужны специально обученные люди. Но за какие части приложений и сайтов отвечают фронтенд-разработчики, а за какие — специалисты по бэкенду?

Многослойность разработки

Не важно, работаете вы над сайтом или нативным iOS-приложением: все окружения разработки имеют нечто общее, а именно — фронтенд и бэкенд.

Линия разграничения между ними может быть довольно размытой, особенно с учетом роста популярности JavaScript и бессерверных технологий. Когда инструментарий фронтенда и бэкенда становится общим, мы порой можем задуматься, а не относимся ли мы к full stack разработчикам. Спойлер: не относимся. По крайней мере, не все.

Лично я могу достаточно продуктивно работать над бэкендом приложения, но осознаю, что не это моя сильная сторона. Мне больше по душе заниматься пользовательскими интерфейсами.

А некоторые люди наоборот — лучше всего проявляют себя, создавая API в бэкенде приложения, а UI создают только в виде прототипов.

В чем разница между фронтенд- и бэкенд-разработкой?

Даже если вы full stack разработчик, это не означает, что при работе над проектом у вас не будет разделения труда.

Что из себя представляют обе части разработки?

Что такое фронтенд-разработка?

Фронтенд приложения обычно охватывает слой пользовательского интерфейса (UI). А UI бывает и на статических сайтах, и на полнофункциональных React-приложениях.

Как выглядела фронтенд-разработка раньше?

В настоящее время миром фронтенда правит JavaScript, но так было не всегда. Раньше этот язык использовали для добавления некоторой интерактивности на сайте, но вообще фронтенд рендерился благодаря использованию языков бэкенда, таких как PHP и Perl.

На практике большую популярность приобрели фреймворки и инструменты вроде WordPress, использующие PHP. Огромные сообщества разработчиков создавали свои сайты с помощью этих инструментов.

Работало все следующим образом. Применяемый язык был способен получать данные во время рендеринга прямо с сервера. Когда браузер запрашивал страницу из источника напрямую (т. е., с сервера), логика приложения предоставляла любые необходимые шаблону данные.

К наиболее традиционным инструментам фронтенда можно отнести следующие:

Но со временем JavaScript «повзрослел», да и браузеры стали более мощными. В результате этого мы пришли к идее, что можно передать часть работы браузерам и таким образом обеспечить более быструю и интерактивную работу продуктов.

Что собой представляет фронтенд-разработка в настоящее время?

Сейчас на сайтах и в приложениях интенсивно используется JavaScript, а создаются они при помощи UI-фреймворков, таких как React, Vue и Angular. Эти инструменты позволяют разработчикам строить сложные пользовательские интерфейсы из компонентов, пригодных для многократного использования.

Когда браузер загружает страницу, она получает начальный HTML-документ, в который включен тег скрипта JavaScript (так же, как и было раньше). Но когда JavaScript загружается, он при помощи запросов браузера связывается с API. После выполнения этих запросов страница обновляется и заполняется различными динамическими данными.

Кажется, что шагов стало больше, но в результате получилась более быстрая начальная загрузка страницы и ее рендеринг, не говоря уж о том, что разработчикам стало удобнее работать. Благодаря тому, что при первом запросе загружается совсем немного информации, а дальнейшая загрузка определяется путем расстановки приоритетов, мы обычно получаем лучший пользовательский опыт.

Сегодня широко используются следующие инструменты фронтенд-разработки:

  • UI-фреймворки вроде React или Vue,
  • веб-фреймворки, такие как Gatsby,
  • компиляторы (Babel),
  • сборщики (Webpack),
  • CSS-инструменты, например Sass.

Но API (хоть платные, хоть разработанные нами лично), должны где-нибудь создаваться. Так мы подходим к теме бэкенда.

Что такое бэкенд-разработка?

Слой бэкенда обычно охватывает бизнес-логику. Она может быть очень сложной. К ней относятся, например, правила, определяющие доход e-commerce-компании, а также более общие вещи, такие как профили пользователей.

Как бэкенд-разработка выглядела раньше?

Традиционно бэкенд приложений создавался при помощи таких серверных языков как PHP или Ruby. Идея была в том, что для осуществления сложных операций вам нужен сервер, а значит, нужно применять языки, понятные для серверов.

При каждом запросе к серверу бэкенд осуществлял весь стек операций, включая рендеринг фронтенда. Используя фреймворки или самописную архитектуру, бэкенд принимал запрос, определял, что с ним нужно сделать, запускал необходимую бизнес-логику и предоставлял фронтенду все данные, которые следовало отобразить в ответ на запрос.

К традиционным инструментам бэкенда можно отнести следующие:

  • локально или удаленно управляемые серверы, например Rackspace,
  • HTTP-серверы, использующие Apache,
  • базы данных, например MySQL,
  • серверные языки (PHP или Perl),
  • фреймворки приложений, такие как Ruby on Rails.
Что собой представляет бэкенд-разработка сейчас?

Технологический стек бэкенда выглядит примерно так же, как и раньше, если не считать более новые паттерны кода. Кроме того, сейчас гораздо чаще бэкенд предоставляет данные при помощи API по HTTP-запросам, вместо того чтобы отправлять их прямо в шаблоны, над которыми работают фронтенд-команды.

Но хотя основа не слишком изменилась, бэкенд стал куда более сложным, поскольку разработчику приходится заниматься обеспечением безопасности. Без правильных настроек ваша система может быть скомпрометирована. Такое может произойти, если разработчик, например, оставит открытым для публичного доступа API, возвращающий конфиденциальные данные.

Также может полностью отличаться работа самого сервера. Раньше мы запускали наш Python-код на управляемом нами сервере (это мы и сейчас можем). Теперь мы также можем использовать бессерверные функции — благодаря таким инструментам как AWS Lambda, упрощающим управление кодом.

«Бессерверность» не означает, что серверов и впрямь нет. Просто разработчику больше не приходится беспокоиться о поддержке этого сервера. Вместо этого он может сфокусироваться на коде, который нужно запустить.

Сегодня распространены следующие инструменты бэкенда:

  • облачные серверы вроде AWS EC2,
  • бессерверные сервисы, такие как AWS Lambda,
  • базы данных NoSQL (MongoDB),
  • такие языки как Python или JavaScript (последний — с применением NodeJS),
  • фреймворки веб-приложений, например Serverless Framework.

Сумеречная зона

До сих пор разграничение технологий было довольно понятным. Но штука в том, что сейчас вы можете писать бэкенд на JavaScript. Появление Node.js дало разработчикам возможность использовать любимый язык браузера для работы на сервере.

Пускай не все являются поклонниками использования JavaScript в качестве «серверного» языка, но использовать один язык для всего стека приложения все же немножечко проще. Это несколько меняет правила игры в том, что касается разделения на фронтенд и бэкенд.

При этом мы, можно сказать, совершили полный круг: теперь можно встретить системы, где API создается по соседству с фронтендом, а это напоминает ситуацию с традиционным стеком.

Фронтенд или бэкенд

Разделение на фронтенд и бэкенд будет всегда, вне зависимости от стека. Пользовательский интерфейс и вся интерактивность составляют фронтенд, а данные и бизнес-логика — бэкенд. При этом не важно, где именно осуществляется рендеринг и где находится сервер.

Возможно, вы хотите вы работать с вещами, которые видит пользователь, а может — создавать логику, стоящую за всеми этими вещами. Что бы вы ни выбрали, для вас найдется множество учебных ресурсов.

Учебные ресурсы

Фронтенд

Бэкенд

Для обоих направлений

Что такое Backend и Frontend разработка. Понятия и отличия

Backenв and Frontend

Приветствую вас, дорогой товарищ! Вы пришли узнать,что такое бэкенд и фронтэнд и в чем между ними разница? Очень емкий ответ на этот вопрос дает основная картинка к этому посту. Она многое объясняет. Костыли и велосипеды нарисованы не просто так. Опытные ребята поймут о чем речь )). Если простыми словами, то Frontend — это то, что видит пользователь, например страница сайта, и с чем он может взаимодействовать. Backend — наоборот, все, что скрыто от глаз, программная часть, которая работает «за кулисами», но тесно взаимодействует с фронтэндом. Еще можно сравнить с айсбергом. Мы видим только малую часть. Теперь давайте разберем каждый пункт более подробно.

Что нужно знать о фронтенде

Если вы хотите стать frontend разработчиком, то необходимо изучить несколько смежных технологий, а именно:

  • HTML
  • CSS
  • JavaScript
  • Основы дизайна
  • Верстка

Можно назвать это базовым минимумом. С этими знаниями уже можно делать какие-то проекты для личного пользования, но о коммерческой разработке говорить еще рано. К примеру для устройства на работу в веб-студию этих навыков будет явно недостаточно. Абсолютное большинство работодателей выставляют требования, которые выходят далеко за рамки базовых. Они работают с определенным стеком технологий и готовы рассматривать кандидатов, которые им владеют, плюс ко всему это всегда командная разработка и опыт очень желателен. Полистайте вакансии и поймете, что необходимо знать для полноценной работы. Заодно взгляните на зарплаты фронтенд разработчика.

Зарплаты Фронтенд разработчиков

Что нужно знать о бэкенде и на чем его пишут

Backend это серверное программирование, проектирование баз данных. Новичку довольно сложно понять на начальном этапе что к чему и разобраться в терминах. Вот несколько языков программирования, на котором пишут бэкенд:

  • PHP
  • Python
  • Java
  • C#
  • Ruby
  • JavaScript (Node JS)

Этот список относится в основном к веб-разработке, но использование бэкенд этим не ограничивается, он так же нужен для десктопных и мобильных приложений, серверных продуктов, робототехнике и еще много где. Если вы хотите изучать и не знаете с чего начать, то чисто для себя можно выбрать PHP или Python. Относительно не сложны в понимании. Если говорить о бэкенде, как о выборе профессии, то нужно подстраиваться под рынок и подробно его изучать. Необходимо отслеживать тенденции. IT — одна из самым быстроразвивающихся сфер. Здесь очень быстро меняются тренды. Что сейчас имеет большую популярность, завтра может затмить новая уникальная библиотека или фреймворк и все массово будут переходить на них, потому что они лучше быстрее, легче и т.д. Такова реальность. Поэтому нужно быть, что называется «на волне». А вот и зарплаты backend разработчиков на конец 2019 года.

Зарплаты backend разработчика

Чем фронтенд отличается от бэкенда

Наверное вы и сами уже догадались в чем основные отличия Frontend и Backend. Первые имеют бОльшую востребованность и огромную конкуренцию, ведь освоить гораздо проще, чем вторую. Помимо этих двух понятий существует еще и третий — Full stack. Фулл стек разработчик — это человек, который знает и ту и другую сторону и хорошо ими владеет. Это уже высший пилотаж, но зависит от уровня. Иногда лучше знать хорошо что-то одно, чем плохо всего понемногу. Надеюсь этой статьей я ответил на все ваши вопросы. А если они остались, то милости прошу задать их в комментариях.

Переход из бэкенда во фронтенд: чему я научился

Перевод статьи «What I Learned by Transitioning from Backend to Frontend Development».

Переход из бэкенда во фронтенд

Переход из бэкенд-разработки во фронтенд-разработку не так прост. Я привык работать с бэкендом. Там вы обычно строите структуры данных, пишете тесты, как в разработке через тестирование, используете уровни персистентности, репозитории, таблицы базы данных, создаете конечные точки API для фронтенда.

Список тем бесконечен. Бэкенд достаточно сложен, так что у меня не было времени изучать еще и фронтенд-разработку.

В общем, я работал с бэкендом, пока мне не пришлось заняться и фронтендом тоже, чтобы иметь возможность создавать качественный продукт с отличным UI, не полагаясь излишне на фронтенд-фреймворки.

В этой статье я описал свой опыт перехода.

Во фронтенд-разработке UI и UX стоят во главе угла

В бэкенде вы, главным образом, беспокоитесь о структурах данных, структуре базы данных, производительности, архитектуре кода, сервисах и создании надежных API, понятных для разработчиков и пригодных к использованию во фронтенде.

Фронтенд сильно отличается от бэкенда. Здесь вы заботитесь в первую очередь о пользовательском интерфейсе и о том, как пользователь будет взаимодействовать с вашим приложением, а также замеряете количественные показатели пользовательского опыта. Бывает, что приходится проектировать UX самостоятельно, улучшая работу создаваемого приложения.

Мне нравится, что во фронтенде вы напрямую работаете с нуждами пользователя и заботитесь о его опыте. Я бы сказал, что подход фронтенда сильно отличается от подхода бэкенда, он более пользователецентричный. Здесь все крутится вокруг того, как сделать использование приложения удобным для пользователя, а не над применением баз данных (к примеру).

Фронтенд заставляет вас применять подход «UI-first» с самого начала проекта

Когда я начал заниматься собственными проектами для приобретения навыков работы с фронтендом, это очень помогло мне улучшить мое понимание работы UI. Я стал гораздо лучше разбираться в том, что происходит, когда пользователь кликает по кнопкам и взаимодействует с разными компонентами интерфейса.

Занимаясь бэкендом, я и понятия не имел о всяких там пользовательских взаимодействиях с системой. Я концентрировался, главным образом, на CRUD-операциях, а также заботился о том, как приложение будет сохранять данные в базе данных, в том числе секретную информацию вроде данных кредитных карт. Так что можете представить, насколько далека была от меня тема пользовательского интерфейса.

Когда я перешел во фронтенд, все изменилось. Мне пришлось думать о том, как пользователь взаимодействует с приложением и как он его использует, нравится ли ему вообще этот опыт. И уже отталкиваясь от UI и представленных макетов, я проектировал подходящую структуру бэкенда и базы данных.

Фронтенд-разработка

Переход во фронтенд позволяет вам задуматься над тем, как улучшить повторное использование UI

С момента появления фронтенд-фреймворков, таких как React, мы воспринимаем наш пользовательский интерфейс в виде компонентов, которые можно использовать повторно в разных местах. И это хорошо. Кроме того, прошли времена, когда мы каждый раз заново изобретали велосипед, т. е., самостоятельно придумывали, как именно использовать компоненты повторно. Сейчас это стандартизуется.

Вместе с тем, переход во фронтенд заставил меня задумываться о возможности повторного использования UI и улучшил мое умение выбирать подходящий фронтенд-фреймворк, соответствующий моим нуждам и масштабу проекта.

Появляется желание создавать собственные макеты для приложений

Умение создавать макеты для своих идей, возможно, не относится к фронтенд-навыкам напрямую, но, овладев этой наукой, я определенно стал лучше делать наброски дизайна для написания кода фронтенда.

Умение делать макеты это отдельный навык. Но мой восторг от написания кода фронтенда по чужим макетам и проектам породил желание создавать и собственные макеты, чтобы писать по ним код с использованием изученных фронтенд-технологий.

Производительность в браузере и оптимизация на стороне клиента

Фронтенд-разработчика волнует не только пользовательский интерфейс. Важна также производительность клиентской стороны, поскольку пользователи будут взаимодействовать с вашим фронтендом при помощи браузеров.

Это заставило меня задумываться над тем, как поднять браузерную производительность. Использовать ли стратегии кэширования, такие как localStorage, оптимизировать ли сжатие JavaScript, использовать ли динамический импорт в сценариях?..

Я понял, что оптимизация затрагивает не только бэкенд, но и фронтенд, и предназначена для обеспечения гладкой работы приложения и хорошего опыта его использования.

Вы учитесь создавать отзывчивые веб-страницы

Создание отзывчивых страниц это «головная боль» и одна из сложностей фронтенд-разработки. Вам нужно позаботиться о том, чтобы ваш UI был достаточно отзывчивым для работы на разных устройствах (десктопах, планшетах, смартфонах).

На первый взгляд мне казалось, что создание отзывчивых страниц это плевое дело, но я даже не предполагал, насколько я ошибаюсь.

Конечно, если полагаться на фреймворки, от этой головной боли можно избавиться. Но мы хотели избежать излишней зависимости от фреймворков. Поэтому пришлось выполнять всю грязную работу собственноручно, изучая, как на самом деле работает фронтенд.

Чему я научился, перейдя из бэкенда во фронтенд

Вы также учитесь поглядывать на SEO

SEO это движущая сила ранжирования вашего приложения, так что важно изучить и эту область знаний.

Если вы учитываете SEO при разработке фронтенда вашего приложения, это помогает вашим клиентам (или вашему собственному приложению) привлекать потенциальных пользователей.

Изучая фронтенд-разработку, я понял, что SEO тоже является важным навыком, благодаря которому можно повысить продажи клиентов или более успешно продвигать собственное приложение.

Вы учитесь хорошо разбираться в CSS

CSS это важная часть фронтенд-разработки. Без использования CSS-навыков, без умения с их помощью располагать компоненты вашего UI, вы просто не выживете.

Поначалу для меня это было очень сложно. Я не увлекался вопросами дизайна и не умел правильно располагать компоненты. Но постепенно практика сделала свое дело и все это стало моей второй натурой.

Так что, занявшись фронтенд-разработкой, я хорошо изучил CSS.

Вы учитесь не слишком зависеть от фронтенд-фреймворков

Должен признать, что как человек, привыкший работать с бэкендом, по части фронтенда я, в основном, полагался на фреймворки. Моей целью было просто побыстрее завершить работу над продуктом и перейти к следующему.

Работая в стартапе и имея только бэкенд-навыки, я постоянно полагался на UI-библиотеки и фреймворки, когда мне нужно было сделать выпадающее меню или боковую панель. Но все это очень быстро усложняло код фронтенда и делало его неподдерживаемым, поскольку каждый кусочек кодовой базы зависел от библиотек.

Когда я стал фронтенд-разработчиком, это дало мне определенную свободу. Мне больше не нужно было использовать фреймворки, только чтобы сделать красивый UI. Как бы то ни было, а фронтенд-разработчик может расположить элементы и анимировать их без лишней зависимости от фреймворков.

Вы хотите стать дизайнером

Забавно, что, перейдя из бэкенда во фронтенд, я захотел научиться делать дизайн самостоятельно. Это дало бы мне возможность спроектировать приложение с нуля, а затем написать его код, используя свои навыки работы с фронтендом, приобретенные за последние годы. Так у меня появилась идея научиться работать с Adobe Photoshop, что, конечно, заняло пару месяцев.

Работа с фронтендом определенно подстегнула мое воображение и пробудила интерес к дизайну.

Заключение

Поначалу фронтенд был для меня очень сложной сферой деятельности, но постепенно стал моей второй натурой. Конечно, у других людей может быть другой опыт, но лично мне было сложно. Я совершил этот переход, поскольку считал, что это будет хорошо для моей карьеры и принесет пользу моим клиентам.

Людям, которые только задумываются над переходом из бэкенда во фронтенд и не знают, с чего начать, я советую просто совершить этот прыжок.

Побольше практикуйтесь. Изучайте основы и нужные вам технологии. У вас непременно получится.

Чему я научился, перейдя из бэкенда во фронтенд
Является ли развитие внешнего интерфейса хорошим карьерным путем в 2019 году?
  • почему мерикс
  • насчет нас
  • Сервисы
    • Разработка веб-приложений

.

Backend против Frontend Development: что лучше?

If you

Если вы решили изучать программирование, но до сих пор не знаете, что такое отраслевой язык, вы попали по адресу. Backend, frontend и полная разработка стеков — это три отдельных карьерных пути, которые иногда могут показаться запутанными в технологическом пространстве.

Проще говоря, бэкэнд-разработчиков сосредоточены на данных, моделировании и бэкэнде веб-сайта. Внешние разработчики помогают понять, с чем взаимодействуют клиенты и пользователи.Разработчик полного стека выполняет некоторые или все вышеперечисленные действия.

Вы спрашивали себя, «Мне нравится, когда макеты оживают?» и ответил да? Вы, вероятно, хотите продолжить карьеру переднего конца. Если вы спросите «Как я могу использовать этот алгоритм для принятия обоснованного решения», , скорее всего, ваш мозг. За последние пять лет существует много сходств между внешним интерфейсом и внутренним развитием, в том числе схожие зарплаты, продолжительность жизни и рост занятости.В этом руководстве мы поможем разобраться в более сложных деталях как внутренних, так и внешних путей, чтобы помочь вам решить, что является наиболее целесообразным.

Объяснение

Back-end-разработки

Back-end-разработка удачно названа для разработчиков, занимающихся бэк-эндом программ. В отличие от внешних разработчиков, которые фокусируются на продуктах и ​​программах, ориентированных на клиента, внутренние разработчики имеют дело с функциональностью сайтов. Типичный день разработчиков бэкэнда включает обновление и обеспечение правильной работы веб-сайта или программы.Профессионалы в этой отрасли глубоко разбираются в серверах, приложениях и базах данных, в то время как бэкэнд-разработчик пишет код, чтобы помочь базе данных и приложениям взаимодействовать. Если вы не видите, как что-то работает на веб-странице, но знаете, что это работает, вам нужно поблагодарить бэкэнд-разработчика.

Определена внутренняя разработка

Techopedia определяет разработчика как «компьютерного программиста», который кодирует и создает визуальные внешние элементы программного обеспечения, приложения или веб-сайта.Он или она создает вычислительные компоненты / функции, которые непосредственно доступны для просмотра и доступны конечному пользователю или клиенту. Фронтальный разработчик также известен как клиентский разработчик, HTMLer и кодировщик внешнего интерфейса. «

По сути, бэкэнд-разработчики несут ответственность за все, чего мы не видим.

Вакансии по созданию серверной части

Разработчики бэкэнда отвечают за работу веб-страниц и приложений. Это может быть сделано с помощью Java, Ruby on Rails или аналогичной программы. Внутреннее кодирование охватывает базовый дизайн веб-сайта, включая изображения, кнопки, навигацию и общее удобство использования.Основная задача разработчика переднего плана — обеспечить бесперебойную работу визуальной части сайта, чтобы пользователи могли свободно и комфортно взаимодействовать с сайтом.

Названия заданий Back End могут включать в себя:

  • Back End Developer / Engineer
  • Web Developer
  • WordPress Developer
  • Junior Full Stack Developer
  • Java Developer
  • Python Developer
  • Fullstack Web Developer
  • Full Stack Разработчик
  • Dev Ops
  • Инженер-программист
  • Разработчик мобильных приложений
  • Разработчик iOS

Зарплаты для конечных разработчиков

По данным Glassdoor, средняя базовая заработная плата для разработчиков на внутреннем уровне составляет около 65 тысяч долларов.Заработная плата варьируется от 60 до 140 тыс. Долл. В зависимости от опыта и местоположения. В Сан-Франциско бэкэнд-разработчики начинают зарабатывать около 100 тысяч долларов в год.

Back-end Языки разработки

HTML и CSS могут быть билетом к внешнему кодированию, но для внутреннего интерфейса требуются более продвинутые программы, включая Java, PHP, Ruby on Rails, Python и .NET. Слышали ли вы о программах для разработчиков с полным стеком? Это будет то место, где нужно изучать языки, необходимые для карьеры разработчика.

Язык кодирования Словарь Определение Использует
Java Java — это язык программирования высокого уровня.Синтаксис Java похож на C ++, но является строго объектно-ориентированным языком программирования. Чаще всего используется для создания приложений для компьютеров. Java помогает запускать сценарии для приложений на компьютерах.
PHP PHP — это язык сценариев общего назначения. Любой код PHP в запрошенном файле выполняется средой выполнения PHP, обычно для создания динамического содержимого веб-страницы или динамических изображений, используемых на веб-сайтах или где-либо еще. Веб-разработка на стороне сервера.
Ruby on Rails Платформа веб-приложений, которая включает в себя все необходимое для создания веб-приложений на основе базы данных в соответствии с Model-View-Controller (MVC). JavaScript чаще всего используется в качестве языка сценариев на стороне клиента. Это означает, что код JavaScript написан на HTML-странице.
Python Python — это интерпретируемый объектно-ориентированный язык программирования высокого уровня с динамической семантикой. Язык общего назначения, который может использоваться практически для всего на странице веб-приложения.
.NET .NET Framework — это среда разработки программного обеспечения от Microsoft.Он обеспечивает контролируемую среду программирования, в которой программное обеспечение может разрабатываться, устанавливаться и выполняться в операционных системах на базе Windows. Это прямой конкурент Microsoft на Java.

Back End Development

Если вы заинтересованы в развитии Back End как карьеры, в таблице ниже представлены программы с высоким рейтингом. Чтобы просмотреть наш исчерпывающий список, ознакомьтесь с полным списком разработок более семидесяти пяти школ.

Bootcamp Стоимость Местоположение Рейтинг SwitchUp Обязательство Официальная гарантия работы
Ironhack $ 6500 Мадрид, Мехико, Париж, Барселона , Майами, Амстердам, Берлин, Сан-Паулу 4.91 звезда 60 часов в неделю в классе
Академия приложений 17000 Сан-Франциско, онлайн 4,75 звезды 80 часов в классе Да
HackerYou $ 9000 Торонто 4.98 звезды 35 часов в неделю в классе
Le Wagon $ 900 Париж, Сидней, Мельбурн, Касабланка, Буэнос-Айрес, Брюссель, Милан, Чэнду, Мексика Город, Амстердам, Сан-Паулу, Барселона, Бордо, Копенгаген, Лилль, Лиссабон, Лондон, Бали, Нант, Рио-де-Жанейро, Марсель, Монреаль, Шанхай, Белу-Оризонти, Берлин, Токио, Лион, Тель-Авив 4.99 звезд 40 часов в неделю в классе
Техническая академия 6980 Портленд, Денвер, Сиэтл, онлайн 4,84 звезды 40 часов в классе
Блок $ 9500 Онлайн 4,84 звезды 25 часов в неделю в классе Да
Задумчивый 9500 Вашингтон, Филадельфия, Хьюстон, Портленд, Даллас, Лос-Анджелес, Финикс, Сан Диего, Онлайн, Атланта 4.75 звезд 20 часов в неделю Нет
Школа Flatiron 15000 Нью-Йорк, Нью-Йорк, Вашингтон, округ Колумбия, Лондон 4,89 звезды 40 часов в неделю в неделю Да
Генеральная Ассамблея 14950 Даллас, Провиденс, Сан-Диего, Сан-Франциско, Сиэтл, Нью-Йорк, Вашингтон, округ Колумбия, Остин, Лос-Анджелес, Атланта, Денвер, Чикаго, Лондон, Сингапур, Гонконг, Сидней, Мельбурн, онлайн, Бостон Санта-Моника 4.24 звезды 50 часов в неделю в неделю
Академия Fullstack $ 17610 Нью-Йорк, Чикаго, онлайн 4,92 звезды 50 часов в неделю Да

Кодирование переднего конца Объяснение

Умелые разработчики интерфейса и разработчики интерфейса постоянно пользуются спросом в мире технологий. Высококвалифицированные разработчики фронт-энда и бэк-энда с большим портфелем проектов могут получить высокооплачиваемые должности в стартапах, крупных организациях и даже некоммерческих организациях.Освоение кодирования переднего плана или кодирования внутреннего конца может означать очень светлое и безопасное будущее, но с чего начать? Понимание кодирования внешнего интерфейса и веб-разработки внешнего интерфейса поможет вам решить, на какой стороне машины вы хотели бы сосредоточиться, а какая лучше всего соответствует вашим навыкам, целям и увлечениям.

Определено кодирование внешнего интерфейса

Techopedia определяет разработчика внешнего интерфейса как «тип компьютерного программиста, который кодирует и создает визуальные элементы внешнего интерфейса программного обеспечения, приложения или веб-сайта.Он или она создает вычислительные компоненты / функции, которые непосредственно доступны для просмотра и доступны конечному пользователю или клиенту. Интерфейсный разработчик также известен как клиентский разработчик, HTMLer и кодировщик внешнего интерфейса. «

По сути, разработчики внешнего интерфейса несут ответственность за все, что мы видим.

Задания внешнего кодирования

Разработчики внешнего интерфейса отвечают за преобразование файлы веб-сайта в сырой код. Это может быть HTML, Javascript или CSS. Кодирование веб-интерфейса охватывает базовый дизайн веб-сайта, включая изображения, кнопки, навигацию и общее удобство использования.Задача разработчика внешнего интерфейса — обеспечить бесперебойную работу визуальной стороны сайта, чтобы пользователи могли свободно и комфортно взаимодействовать с сайтом.

Названия внешних заданий могут включать в себя:

  • Front-End Developer / Engineer
  • CSS / HTML Developer
  • Web / Front-End User Interface (также известный как UI) Developer / Engineer
  • Front-End Web Designer
  • Front-End SEO Expert
  • Front-End Accessibility Expert
  • Front-End Testing / QA
  • Full Stack Developer
  • Front-End Dev.Ops
  • Front-End Web Designer
  • Front-End JavaScript Application Developer

Заработная плата интерфейсного кодирования

По данным Glassdoor, средняя национальная зарплата для разработчиков переднего плана составляет около $ 63 тыс. Это колеблется от $ 50 000 до $ 100 000 в зависимости от уровня опыта и отрасли. В Сан-Франциско начальная зарплата составляет около 90 тыс. Долл. И может приносить доход около 118 тыс. Долл. В год.

Языки программирования переднего плана

Основные языки программирования переднего плана могут включать в себя HTML, CSS и Javascript и другие.Ожидайте изучить сеточные системы и теорию цвета, а также изучить типографику и макет. Помните, что внешнее кодирование не требует знаний о внутреннем кодировании.

Язык кодирования Определение словаря Использует
HTML Язык разметки гипертекста, стандартизированная система маркировки текстовых файлов для достижения шрифта, цвета, графики и гиперссылок на страницах всемирной паутины. HTML-код обеспечивает правильное форматирование текста и изображений, чтобы ваш интернет-браузер мог отображать их так, как они предназначены.
CSS CSS означает каскадные таблицы стилей. CSS описывает, как элементы HTML должны отображаться на экране, бумаге или других носителях. CSS позволяет адаптировать презентацию к различным типам устройств, таким как большие экраны, маленькие экраны или принтеры.
Javascript Объектно-ориентированный язык программирования, обычно используемый для создания интерактивных эффектов в веб-браузерах. JavaScript чаще всего используется в качестве языка сценариев на стороне клиента. Это означает, что код JavaScript написан на HTML-странице.

Front End Courses

Если вы заинтересованы в продвижении Front End кодирования как карьеры, эти программы предлагают программы с высоким рейтингом. Чтобы просмотреть наш полный список, ознакомьтесь с нашим руководством по развитию более пятидесяти школ.

Bootcamp Стоимость Местоположение Рейтинг SwitchUp Обязательство Официальная гарантия работы
Ironhack $ 6500 Мадрид, Мехико, Париж, Барселона , Майами, Амстердам, Берлин, Сан-Паулу 4.91 звезда 60 часов в неделю в классе Нет
Блок $ 9500 Онлайн 4,84 звезды 25 часов в классе Да
Вдумчивый 10450 Вашингтон DC, Филадельфия, Хьюстон, Портленд, Даллас, Лос-Анджелес, Феникс, Сан-Диего, Онлайн, Атланта 4,75 звезды 20 часов в неделю
Школа Flatiron 12000 Online 4.89 звезд 10 часов в неделю в неделю
Стартап-институт $ 9500 Бостон 4,73 звезды 15 часов в неделю в школе
Лямбда-школа Отсроченное обучение Онлайн 4.97 звезды 10 часов в неделю в классе Да
Генеральная Ассамблея 3950 Даллас, Провиденс, Сан-Диего, Сан-Франциско, Сиэтл, Нью-Йорк, Вашингтон, Остин, Лос-Анджелес , Атланта, Денвер, Чикаго, Лондон, Сингапур, Гонконг, Сидней, Мельбурн, Онлайн, Бостон, Санта-Моника. 4.24 звезды 6 часов в классе в неделю
Wyncode $ 4000 Майами 4,97 звезд 9 часов в классе в неделю
Skillcrush $ 499 онлайн 4,62 звезды Гибкие
Dev Mountain $ 10900 Прово, Даллас 4,66 звезды 40 часов в неделю в классе
Академия Fullstack $ 17610 Нью-Йорк, Чикаго, Онлайн 4.92 звезды 50 часов в неделю да
CareerFoundry $ 1999 Online, Берлин 4,35 звезды 15 часов в классе в неделю да
LearningFuze $ 12995 Orange Округ 4,98 звезды 70 часов в неделю в классе
.
Как интерфейс взаимодействует с бэкэндом? · Vsupalov.com

Как соединить фронтэнд и бэкэнд?

Как они общаются?

Существует много разных способов структурирования веб-приложения. Интерфейс может принимать различные формы, и это может быть пугающим понять, как соединить два.

Эта статья представляет собой обзор того, что происходит между бэкэндом и интерфейс веб-приложения — как они взаимодействуют.

Давайте начнем с основ.

Почему интерфейс и бэкэнд существуют в первую очередь?

Бэкэнд и внешний интерфейс работают вместе, чтобы обслуживать одну цель . Очень полезно постоянно помнить об этом. Они сделаны, поэтому пользователь может получить к ним доступ . Подробно это взаимодействие может выглядеть так:

  • Пользователь указывает свой браузер на один из URL вашего сайта
    • Это заставляет браузер отправлять один или несколько запросов на ваш сервер
    • Браузер ожидает получения ответов от вашего сервера
    • Каждый ответ используется для визуализации части сайта.
  • Пользователь ждет, пока браузер отобразит страницу
  • Пользователь видит полезную и полезную страницу
  • Пользователь взаимодействует со страницей
    • Вызывает больше запросов, чтобы получать больше данных и отображать новую информацию, и так далее

Это все о пользователе.

Фронт и бэкэнд делают это возможным, вызывая запросы быть отправленным и отвечая с ответами.

Прежде чем погружаться глубже, мы должны убедиться, что мы говорим о те же вещи.

Определения

Чтобы убедиться, что мы находимся на той же странице, Вот описание возможных неоднозначных «громких слов» в этой статье:

Сервер — абстрактная «вещь», куда поступают запросы браузера. Мы не заботимся об этой детали много Вот.Достаточно знать, что бэкэнд-код работает как на сервере, так и на других сервисах. Запрос на бэкэнд прибыть на сервер и в конце концов перейти к вашему бэкэнд-коду.

Backend — часть вашего веб-приложения, которая не видна непосредственно пользователю. Получает запросы и подготавливает данные, которые передаются обратно в браузер пользователя. Внутренний код создан для работы на сервере и никогда не запускается на компьютере пользователя.

Frontend — части вашего веб-приложения, которые предназначены для непосредственного использования браузером пользователя.Код, который выполняется внутри браузера, или разметка, которая интерпретируется при отображении страницы. HTML, CSS и JavaScript в браузере являются хорошими примерами того, что я считаю частью концепции внешнего интерфейса. Но только в готовом виде. Хотя внутренний код может быть , собирая ответ HTML, здесь подразумевается окончательный HTML, поступающий в браузер.

Браузер — приложение, работающее на устройстве пользователя. Он отправляет HTTP-запросы, получает ответы, обрабатывает полученные данные и использует их для визуализации просматриваемой страницы.Все общение со стороны пользователя происходит через браузер.

Когда браузер общается с бэкэндом?

HTTP-запросов поступают из браузера на серверную часть. Эти запросы могут содержать данные в заголовках HTTP или теле запроса. Задача может состоять в том, чтобы запросить новые данные или передать созданные пользователем данные на серверную часть.

HTTP-запросов создаются в браузере пользователя и отправляются. Для каждого запроса есть ответ, содержащий информацию в заголовках HTTP и теле запроса.Эти ответы возвращаются в серверную часть и возвращаются в браузер пользователя.

Что должно произойти, чтобы браузер отправил запрос? Те запросы, которые запускаются из-за того, что пользователь нажал на ссылку или с помощью кода JS на заднем фоне. Но есть и другие возможные триггеры:

  • Пользователь вводит URL, который заставляет браузер пойти и запросить его.
  • Браузер читает входящий HTML-код и замечает, что есть ресурс, который ему нужно загрузить, например, файл JS, изображение или файл CSS.Он идет вперед и запрашивает каждый с новым HTTP-запросом. Обычно это происходит при загрузке сайта. (Эти запросы не должны идти в один и тот же бэкэнд, вы можете загрузить JS с другого сайта. Люди любят использовать для этого CDN, поскольку это довольно быстро и удобно.)
  • Пользователь нажимает на обычную ссылку, веб-страница загружается и отображается. Браузер знает, что им нужно перейти на новую страницу, и запрашивает соответствующий URL.
  • JavaScript выполняется на сайте и хочет, чтобы некоторые данные загружались в фоновом режиме.Запросы выполняются, но браузер делает это в фоновом режиме. Это не перезагрузить всю страницу. Это AJAX. Javascript может быть вызван нажатием пользователем чего-либо, и он может сообщить браузеру, что этот щелчок не предназначен для перехода на новую страницу. Это может сбивать с толку.

Это практически все сценарии, которые могут заставить браузер запускать запросы к бэкэнду. В каждом случае присутствуют HTTP-запросы и ответы.

Что они посылают друг другу?

Это может отличаться! Но есть очень популярный способ ведения дел, который используется чаще всего.Это хороший способ сделать что-то для 99% сценариев взаимодействия с веб-интерфейсом.

Магия заключается в полезных нагрузках HTTP-запросов / ответов. Серверная часть обычно отвечает определенным содержимым тела HTTP:

  • ответов в формате HTML
  • другие статические файлы (CSS, JS, изображения,…)
  • данные в формате JSON
  • Нет тела вообще. Просто код статуса и поля заголовка.

Интерфейс отправляет:

  • простых HTTP-запросов без тела
  • Данные формы
  • данные в формате JSON

Давайте рассмотрим несколько примеров

Пока все хорошо! Давайте возьмем эти смутные описания сверху, и посмотрите на некоторые очень конкретные примеры.Даже если вы знаете, все, что вам нужно сейчас, может быть трудно соединить точки с примеры из жизни, так как в них может быть много сложностей и путаницы.

Я надеюсь, что эти примеры помогут вам увидеть, как все вписывается. И понять, как взаимодействуют бэкэнд и фронтэнд.

Сценарий: просто статический контент

Если браузер запрашивает что-то вроде http://example.com/style.css , это обычно обрабатывается веб-сервером (например, Nginx) серверной части.Запрос GET для этого ресурс, а серверная часть отвечает ответом, содержащим содержимое файла.

Такая статика файлы могут обслуживаться самим веб-приложением (сервером приложений), но обычно это считается плохим вкусом. Веб-серверы очень быстро справляются с этой задачей, а веб-приложения довольно неуклюжи.

Vanilla Django, используя шаблоны Django

Следующий случай касается запроса динамического контента .Со стороны браузера это выглядит так же, как запрос статического контента — есть запрос который отправляется по URL-адресу, например http://example.com/cute-puppies . Браузер не заботится о том, какая часть серверной части будет обрабатывать запрос, он просто хочет получить ответы. (СЕЙЧАС.)

Запросы поступают на сервер, передаются на веб-сервер (например, Nginx), и веб-сервер передает запрос серверу приложений (Django обрабатывается Gunicorn). Веб-сервер просто делает то, для чего он настроен.Здесь нет ничего волшебного.

Во всяком случае. Django получает запрос, обрабатывает его, может, ищет некоторые данные в базе данных и отправляет ответ.

Более подробно: Ваше приложение Django реагирует на запрос. Запрашиваемый URL-адрес интерпретируется с использованием ваших конфигураций urls.py. Правильный вид выбран для обработки запроса. Код представления может использовать модель для получения данных из базы данных и выдает шаблон, передавая ему данные в объекте контекста. Уф. Вот что такое «классический» проект Django.Вы получаете это из коробки, и это очень хороший способ начать почти для каждого веб-проекта там.

Полученный HTML-код упакован в ответ. Ответ содержит HTML-страницу внутри тела HTTP.

Браузер получает ответ и отображает DOM из HTML. Оттуда браузер, вероятно, делает больше запросов на загрузку этих изображения щенка и немного CSS, чтобы он мог стилизовать страницу. Эти ресурсы являются статическими и должны обрабатываться, как в первом примере.

Посыпать в интерактив с JQuery, Vue.js или ванили JS

Теперь, это становится немного более причудливым: JavaScript входит в картину во внешнем интерфейсе.

Представьте, что динамическая страница загружается из бэкэнда, как описано в предыдущем примере. Возвращенный HTML содержит Код JS внутри тега сценария .

Браузер отобразит страницу и начнет выполнять код JS.

В этом случае код только настраивает некоторые интерактивность.Может быть, чтобы скрыть или показать элементы динамически, когда кнопка или для связи по требованию с бэкэндом.

Код JS, независимо от его вида, может запрашивать больше запросов быть отправленным на сервер. Свежие данные могут быть запрошены таким образом, а код JS заботится об обработке когда он прибудет без полной перезагрузки страницы. HTTP-запросы, запускаемые кодом JS, обычно выполняются в фоновом режиме.

У нас та же страница, что и раньше, но мы можем запускать события браузера без перезагрузка страницы.Это делает работу пользователей более непрерывной, так как они не видят вспышку экрана и новые данные загружаются плавно, не нарушая поток UX.

Интегрированная среда интерфейса: Vue.js, например,

Теперь мы попадаем на территорию JS Framework. Этот случай такой же, как и выше, но шаблон, возвращаемый бэкэндом, не обязательно завершен. Куски последней страницы отсутствуют в исходном HTML-ответе.

Вместо этого он содержит код JS, который отвечает за заполнение пробелов.В предыдущем примере разметка HTML была завершена, и JS только добавлял некоторую интерактивность.

В результате конечный HTML-код, который отображается пользователю, не является который покидает сервер.

Браузер позаботится о выполнении кода JS после появления страницы, которая, в свою очередь, создает остальную часть страницы. Вы можете сделать это удобно с Vue.js — читайте больше здесь.

Одностраничное приложение (SPA) — данные извлекаются впоследствии

С архитектурой одностраничного приложения, статическая страница загружен с кучей JS в нем.Ваш бэкэнд-код не используется для этого первоначального запроса. В этом нет ничего динамичного это в конце концов — это просто загрузка очень простого HTML и выборка JS в начало.

Веб-сервер обеспечивает те. В этом случае Django обычно участвует в обслуживании статических ресурсов — об этом заботится веб-сервер или другой сервис, такой как AWS S3.

Как только HTML и JS поступили в браузер, JS выполняется и запускается отправка запросов на сервер за DATA .Это то, что обеспечивает внутренний код — обычно в форме ответов JSON.

Код JavaScript внутри статической страницы заботится о загрузке данных из вашего бэкэнда, и DOM строится динамически на основе этих данных, начиная с пустой страницы. Элементы DOM, которые динамически собираются с помощью JS, показываются пользователю. Ваш бэкэнд-код не знает, как выглядит эта страница, и не волнует сильно. Он заботится только об ответах на запросы данных с помощью ответов JSON.

Рендеринг на стороне сервера

В предыдущем случае браузер изначально получил пустую страницу с некоторыми JS связан с этим.

Оказывается, это то, что не нравится поисковым системам. Они думают, что эти изначально пустые страницы скучны, и это вызывает им меньше думать о вашем сайте.

Они бы предпочли увидеть красивый, полный сайт.

Вот для чего предназначен рендеринг на стороне сервера. Исходные HTML и JS загружаются на сервер и предварительно визуализируются в HTML, но с использованием технологии внешнего интерфейса!

По сути, есть часть бэкэнд, который некоторое время притворяется браузером! Это делает запрашивает ваш бэкэнд-код и создает HTML сайт, выполнив часть JS кода внешнего интерфейса.

Как только это будет сделано, браузер получает ответ HTML, который был производится с помощью кода JS. Сервер Django используется для предоставления данных JSON для этого шага рендеринга.

«Почему все хлопоты?» Вы можете спросить. Ну, это то, что вы должны сделать, если вы хотите иметь архитектуру SPA, но все же дружить с поисковиками.

В основном, SSR используется по причинам SEO. Используется для решения проблем которые вызваны тем, что сначала доставляют пустые (или просто неполные) HTML-ответы, которые еще должны быть собраны JS.Может быть производительность и кэширование, но обычно это не так важно.

В заключение

Вот и все! Я надеюсь, что эта статья была полезна для вас, и у вас есть лучшее представление о том, как бэкэнд и внешний интерфейс взаимодействуют после прочтения.

Есть много особых случаев, и все может быть сложно, но в конце концов это только HTML и JSON между сервером и браузером пользователя.

Если вы не уверены, какой способ структурировать связь между вашим интерфейс и бэкэнд — просто держите его как можно проще.

Нет необходимости начинать с SPA с самого начала. Вам также не нужно выполнять тяжелую работу внутри кода внешнего интерфейса. Здорово иметь свой бэкэнд отвечает за построение HTML-ответов и становится более навороченным, как только фактическая необходимость сделать это.

Я надеюсь, что это помогло! Получайте удовольствие от создания классных веб-приложений и подключения ваши интерфейсы и бэкэнды с уверенностью.

Если у вас есть предложения, комментарии или вопросы — напишите мне по электронной почте mail @ vsupalov.ком. Всегда рад услышать от вас 🙂

,
Дорожная карта веб-разработчика 2020 года. Учимся становиться фронтэндом, бэкэндом… | Trey Huffine

Никогда не было лучшего времени, чтобы научиться программировать или менять карьеру в разработке программного обеспечения. Спрос на веб-разработчиков постоянно растет, и он только растет. В Интернете есть как бесплатные, так и платные учебники, которые научат вас навыкам работы в качестве разработчика — не требуется степень CS CS.

Сквозной курс , чтобы освоить интервью по кодированию и получить следующую работу инженера-программиста.

В этой статье подробно описаны необходимые навыки и соответствующие учебные пособия для их эффективного изучения. Иллюстрированное руководство предоставлено Камраном Ахмедом и может быть найдено на roadmaps.sh или в репозитории GitHub — работа Камрана отличная, поэтому обязательно запустите репо и подпишитесь на его рассылку, чтобы поддержать его усилия. Не пугайтесь карты. Это может показаться многим, но я разобью его, чтобы вы могли изучать каждую часть шаг за шагом.

Эта статья будет разделена на следующие разделы:

  1. Необходимое обучение для любого пути : Концепции программирования, которые должен знать каждый разработчик.
  2. Введение в программирование : С чего начать, если вы новичок в программировании.
  3. Разработка внешнего интерфейса : узнайте, как создавать пользовательские интерфейсы (UI).
  4. Backend Development : узнайте, как создавать API и писать код сервера.
  5. DevOps Engineering : Узнайте, как управлять инфраструктурой, развертыванием и системами.
  6. JavaScript и кодирование Углубленное : изучение JS сверху вниз.
  7. Книги по разработке программного обеспечения : Эти книги, как я обнаружил, в целом помогают улучшить мое общее понимание программирования и оказывают положительное влияние на работу.(Найдите полный список здесь)
  8. Советы по работе и подведение итогов : Несколько заключительных быстрых советов о том, как искать работу и продолжать расти как разработчик.

Это все продукты, которые я лично рекомендую. Для некоторых из них я получаю компенсацию, если вы используете ссылки в статье. Если вы найдете то, что вам нравится, ваша поддержка будет принята с благодарностью.

Мы начнем с навыков, которым должен овладеть каждый разработчик, и они будут использоваться по всем направлениям — Frontend, Backend или DevOps.

Чтобы быть эффективным разработчиком, вы должны хорошо разбираться в командной строке, знать, как управлять версиями своего кода с помощью Git, и понимать основы Интернета.

Командная строка

Командная строка — это способ запуска кода. Вы должны быть в состоянии перемещаться и выполнять необходимые команды. Чем лучше вы работаете в командной строке, тем эффективнее вы будете как разработчик.

Pick a Text Editor

VS Code — лучший выбор для веб-разработчиков, что делает его отличным местом для старта — именно то, что я использую.Это бесплатный и с открытым исходным кодом, с множеством плагинов, чтобы сделать вас более продуктивным. Тем не менее, есть много отличных опций, таких как Atom, WebStorm или Vim (для хардкора).

Текстовый редактор — это место, где вы напишите весь свой код, а терминал — место, где вы его выполняете. Как разработчик, это где вы живете. Потратьте некоторое время, чтобы выбрать правильный редактор, настроить плагины и изучить горячие клавиши. Правильный рабочий процесс может значительно повысить вашу производительность.

Git и Version Control

Git — это инструмент, используемый для сохранения кода и создания различных версий, позволяющий вам сотрудничать с другими разработчиками.Лучшим местом для хранения кода и совместной работы над программным обеспечением с открытым исходным кодом является GitHub.

Веб-основы

Прежде чем вы углубитесь в какой-либо из путей, вы должны иметь прочную основу в программировании. Для новых разработчиков я настоятельно рекомендую изучать JavaScript в качестве первого языка. JS может быть использован как для внешнего, так и для внутреннего разработчиков, что означает, что вы можете стать разработчиком полного стека, имея возможность сосредоточиться на освоении только одного языка. Преимущества JavaScript:

  1. JavaScript является относительно простым языком для изучения
  2. JavaScript необходим для создания веб-приложений, так как это язык программирования, который работает в браузере
  3. JavaScript можно использовать на внешнем интерфейсе и бэкэнде, позволяя вам писать приложения с полным стеком на одном языке
  4. Для разработчиков JavaScript существует множество заданий

Если вы знаете, что хотите работать только с данными или исключительно с бэкэндом, изучение Python — это еще один вариант. это хорошо для начинающих.

Существует множество высококачественных бесплатных опций для начала работы с кодированием. FreeCodeCamp и Codecademy — отличный выбор, который отлично подходит для создания основы.

Когда вы освоите основы, следующим шагом станет бесплатный курс JavaScript30 или премиум-курс BeginnerJavaScript. Web Bos обучает вас основным концепциям JavaScript, создавая реальные проекты. Вы должны попытаться сделать реальные проекты как можно быстрее. Проекты — лучший способ выучить навыки для работы и позволяют вам создавать портфолио для начала собеседования.

Если вы хотите ускорить процесс, это несколько отличных курсов премиум-класса, которые начинаются с JS и быстро развиваются.

Современный JavaScript с начала это множественное освещение. Вы должны подписаться на подписку (предлагается бесплатная пробная версия), но они имеют отличный контент практически на все.

Разработка веб-интерфейса — это способ создания пользовательских интерфейсов для Интернета. Вы должны иметь прочную основу в JavaScript, а также понимать, как работает HTML / CSS.

Популярные библиотеки на стороне клиента — React, Angular и Vue — все написаны на JavaScript. Тщательное знание ванильного JavaScript очень важно для повышения уровня и наличия необходимых навыков для создания сложных приложений. Когда у вас есть прочная основа в JavaScript, вы должны изучить HTML и CSS. Хотя пользовательский интерфейс написан на JS, он по-прежнему генерирует HTML и стилизован под CSS.

Обратитесь к ресурсам в разделе «Введение в программирование», если вам нужно больше работать с JavaScript.

The Complete 2020 Bootcamp для веб-разработки

Самый полный курс по веб-разработке. Начните с HTML и CSS, изучите JavaScript и его взаимодействие с DOM, а затем создайте веб-приложение с полным стеком.

Веб-разработчик Bootcamp

HTML и CSS

HTML и CSS обычно изучаются вместе.HTML — это каркас страницы, который дает структуру, а CSS — это язык, который придает ей стиль.

HTML и CSS для абсолютных новичков

Создание адаптивных сайтов реального мира с HTML5 и CSS3

CSS: полное руководство (расширенный CSS)

Библиотеки пользовательского интерфейса (React, Vue, Angular)

Modern Разработка пользовательского интерфейса тяготеет к компонентной модели с 3 библиотеками в качестве основных, используемых профессиональными инженерами внешнего интерфейса — React, Vue и Angular.Вам лучше знать одну из этих библиотек , а не пытаться изучать все 3. Тогда на работе вы сможете выбрать что-то другое, если компания использует среду, которую вы не изучали. React является самым популярным, но Vue и Angular быстро внедряются.

React

Официальное введение Введение

React — Полное руководство (включая крюки, React Router, Redux)

Modern React с Redux

React для начинающих

+ GraphQL

Vue

Официальное введение Введение

Vue JS 2 — Полное руководство (вкл.Vue Router & Vuex)

The Ultimate Vue JS 2 Developers Course

Vue JS Essentials с Vuex и Vue Router

Angular

Angular 8— Полное руководство

: курс Начинающий до продвинутого

Бэкэнд — это то место, где вы обмениваетесь данными с базой данных, обрабатываете бизнес-логику и отправляете необходимые данные во внешний интерфейс.

Ваш бэкэнд / сервер может быть написан на любом языке.Я рекомендую начать с Node / JavaScript, поскольку он относительно прост в освоении, но при этом невероятно мощный. Кроме того, вы можете легче переходить между внешним интерфейсом и внутренним интерфейсом, поскольку вы будете использовать один и тот же язык для каждого из них. Я также подробно опишу другие возможные языки для изучения бэкэнд-разработки — Python, Go, Ruby on Rails.

Работа с базой данных является основой для бэкэнд-инженера, и я также нарисую учебные пособия по изучению SQL, NoSQL и GraphQL. В то время как NoSQL стал более популярным, SQL по-прежнему является наиболее используемым типом базы данных и его необходимо изучать.

Node.js

Узел — это то, как мы выполняем JavaScript вне браузера, который может использоваться для создания API на бэкенде / сервере.

Полный курс для разработчиков Node.js (3-е издание)

NodeJS — Полное руководство (включая MVC, API-интерфейсы REST, GraphQL)

Learn Node

Базы данных

База данных является постоянной хранилище для данных вашего приложения. Обычно сервер выполняет запрос к базе данных во время вызова API.Существует 2 распространенных типа базы данных — SQL и NoSQL.

PostgreSQL / MySQL

Это две основные реализации SQL, и, вероятно, вы увидите, что они используются в большинстве компаний.

GraphQL

Сам GraphQL — это не база данных, а язык запросов поверх баз данных. Многие считают, что это произведет революцию в разработке приложений и полностью изменит способ создания API. Он быстро завоевывает популярность и используется техническими гигантами и топ-стартапами.

В качестве бонуса попробуйте Хасуру.Он позволяет генерировать GraphQL с помощью веб-интерфейса и автоматически создает базу данных Postgres для вас.

MongoDB

Mongo — самая популярная база данных NoSQL, используемая с Node. Он хранит данные в документах, которые представляют собой пары и ключи / со значением , которые легко сопоставляются с объектами JSON и JavaScript. Это

Python

Python прост для начинающих, но также широко используется техническими гигантами и стартапами для серверной части, науки о данных и сценариев.

Полный Python Bootcamp: Перейти от нуля к герою в Python 3

Python и Django Full Stack Веб-разработчик Bootcamp

Go (Golang)

Go является относительно новым, но получил быстрое принятие.Это статически типизированный язык, но он невероятно удобен для разработчиков. Это делает его идеальным для строительных услуг.

Ruby on Rails

Ruby on Rails много лет был языком запуска. Благодаря простоте использования и общепринятому языку легко создавать продукты.

DevOps управляет инфраструктурой компании. Они настраивают процессы для развертывания ваших веб-приложений и управления трафиком на сайт. Инженеры DevOps сосредоточены на том, чтобы позволить другим командам как можно быстрее вводить код в производство, а также следить за тем, чтобы серверы всегда были в рабочем состоянии и отправлять контент конечному пользователю как можно быстрее.

Область DevOps очень широка, и выбор, который они делают, влияет на каждую команду инженеров. Вот несколько важных тем, которые нужно изучить инженеру DevOps:

  • Linux : Linux используется на 67% серверов + и весьма вероятно, что вы будете использовать его в качестве инженера DevOps. Важно полностью понять это.
  • Безопасность : Убедитесь, что все ваше облако защищено и зашифровано. Также настройте API так, чтобы весь контент обслуживался через HTTPS и не был подвержен распространенным атакам.
  • Командная строка / терминалы : Мы представили командную строку в первом разделе, но она еще более важна для инженера DevOps. Вы должны полностью понимать, как это работает и команды Linux, и быть готовым к SSH на удаленных серверах. Вы также будете писать сценарии и автоматизировать программы для всей компании.
  • Автоматическое тестирование : DevOps настраивает систему автоматического тестирования таким образом, чтобы весь код, поступающий в производство, был тщательно проверен и уменьшил вероятность появления ошибок или регрессий.
  • Непрерывная интеграция и непрерывная доставка (CI / CD) : настройте конвейер для развертывания, чтобы код автоматически сливался с производством, одновременно уменьшая количество точек соприкосновения для отдельных разработчиков. Автоматическое тестирование с использованием играет большую роль в CI / CD.
  • Контейнеры : Контейнеры являются основной частью инфраструктуры, и большинство стартапов и технических гигантов используют Docker и / или Kubernetes в той или иной форме. Контейнер гарантирует, что ваш код всегда выполняется в чистой и воспроизводимой среде.
  • Облачные провайдеры : Узнайте, как управлять серверами в облаке с помощью одного из популярных поставщиков, таких как AWS, GCP или Azure.
  • Управление журналами : Важно правильно вести журналы. Это позволяет вам диагностировать ошибки и находить причину для любых проблем в вашем приложении.

Я рекомендую работать над реальными проектами как можно быстрее. Однако в какой-то момент вам захочется глубоко погрузиться в JavaScript и узнать, как все это работает под капотом.Кроме того, важно иметь представление о структурах данных, алгоритмах и других общих знаниях информатики.

Вы не знаете JavaScript (YDKJS) — Это просто лучшая книга по JavaScript. Если вы проработаете это полностью, вы будете знать весь основной язык JS. Прочитайте его бесплатно на GitHub или купите физические или Kindle копии на Amazon.

TypeScript — Это не является обязательным требованием для начинающих (если вы не используете Angular), но принятие TypeScript быстро растет и поглощает мир JS.Многие думают, что это будущее JavaScript.

Структуры данных в JavaScript — Создание наиболее распространенных структур данных с нуля в JavaScript. Этот видео-сериал является отличным дополнением к накопленным знаниям, а также прекрасным ресурсом для интервью.

Eloquent JavaScript — Еще одна любимая книга инженеров JavaScript. Он охватывает более широкий круг тем, чем YDKJS, включая браузер и Node.Прочитайте его бесплатно онлайн или купите физические или Kindle копии на Amazon.

Введение в алгоритмы — Хотя это не самая удобная книга для начинающих, она тщательна. Сделайте этот шаг, как только вы почувствуете, что пришло время полностью разобраться в алгоритмах.

Алгоритмы — Этот курс преподается на Java, но результаты обучения все еще действительны. Вы получаете полное понимание наиболее важных алгоритмов в информатике. Курс преподается Принстоном на Coursera.

Этот выбор состоит из 5 книг, которые либо сделают вас лучшим программистом в целом, либо важной книгой, которая вам понадобится в какой-то момент вашей карьеры, например, во время интервью. Или посмотрите полный список рекомендаций по программированию.

Если вы учитесь веб-разработке, высока вероятность того, что вы заинтересованы в стартапах. Это некоторые из лучших книг о стартапах и философии успешных.

Следуя этим инструкциям, вы станете профессиональным веб-разработчиком.Обязательно начните строить реальные проекты как можно быстрее и начните применять их к работе. Проекты и развернутые веб-приложения — это лучший способ показать компании, что вы сможете внести свой вклад после своего найма.

Поиск первой работы — это всегда игра с числами, поэтому, чем больше вы подадите заявку, тем больше у вас шансов получить предложение. Хотя это может занять месяцы, так что будьте готовы к долгому пути. Однако, в конце концов, вы получите его, и после выполнения этой первой роли вам будет гораздо легче получить любую работу.

Советы по работе:

  • Сосредоточьтесь только на нескольких навыках: Пример. JavaScript, React, Node. Не пытайтесь изучать все — React, Vue, Angular, jQuery, Backbone и т. Д. Получите как можно больше знаний о минимально необходимых языках / библиотеках. Идти глубоко, не широко.
  • Создайте веб-сайт портфолио и используйте API-интерфейс портфолио для обработки данных. Возможность показать, что вы можете создавать приложения, очень важна для менеджеров по найму.
  • Применяйте как можно больше заданий, если они соответствуют вашим навыкам.Не сдавайся! В конце концов вы найдете свою роль, если будете продолжать работать. Это долгий и трудный путь, но он того стоит, если вы увлечены этой областью.
  • Практика для собеседования. Используйте «Cracking the Coding Interview» и веб-сайты, чтобы научиться отвечать на вопросы интервью.
  • Прочитайте серию «Вы не знаете JavaScript». Это гарантирует, что вы знаете язык внутри и снаружи.
  • Продолжайте создавать проекты — проекты — лучший способ узнать и показать, что вы понимаете, как создавать приложения для реального мира.

— @treyhuffine | @gitconnected

Создание и ведение резюме — это не весело. Вместо этого, давайте создадим для вас потрясающее резюме 🙂 Resume Builder>

.

Отправить ответ

avatar
  Подписаться  
Уведомление о