Автор оригинала: Chris Blakely.
Таким образом, вы начали свое путешествие в мир веб-разработки. Но что вы узнаете в первую очередь? Интернет перегружен множеством информации о миллионах различных технологий, которые могут знать веб-разработчик.
Не усердно видеть, насколько запутаны и выключены все это. Как бывший младший разработчик сам, я знаю борьбу.
Это руководство было собрано на основе моего опыта в отрасли в качестве младшего разработчика. Это руководство также является сводным изложением вещей, которые я, как руководство команды, ожидать от младших разработчиков.
Здесь много информации – так возьмите напиток, комфортно, и давайте начнем!
Должен знать
Независимо от вашего пути и карьерных целей, есть некоторые вещи, которые должны знать каждый разработчик.
- Git/Source Control – Каждый хороший разработчик должен знать, как использовать Git, особенно в командной среде. Поэтому узнайте, как клонировать REPOS, сделать комбиниты, создавать филиалы и код объединения
- Отладка – Frontend, или Backend, будут ошибки. Познакомьтесь с инструментами отладки для вашего IDE. Говоря о IDE …
- IDE – Есть много IDE, вы можете использовать, так что выберите один и узнайте его. Ваш IDE – ваш лучший друг, и знание ярлыков и инструментов сделают вас лучшим разработчиком. Лично я рекомендую использовать VS-код.
- Методологии (Agile/Scrum/Kanban) – При работе в команде шансы вы будете использовать методологию разработки продукта, поэтому убедитесь, что вы знакомы с тем, как они работают
Внешний интерфейс
Интерфейсный разработчик обычно может выполнять следующие задачи:
- Внедрить дизайн с помощью HTML/CSS
- Взаимодействовать с DOM, используя JavaScript
- Взаимодействовать с API, используя Petch API или подобное
Давайте погрузимся в это немного подробно.
HTML/CSS.
Это хлеб и масло листового развития. HTML используется для позиции и размещения элементов на веб-странице, а CSS используется для Стиль эти элементы.
Ожидается, что младший интерфейсный веб-разработчик будет очень хорошо узнать этот материал. Важно знать:
- Использование HTML для создания веб-страницы
- Стиль элементов с использованием CSS
- Разные способы нанесения CSS в HTML – встроенные стили, стиль листы и т. Д.
Как только у вас есть основы прибиты, посмотрите на более продвинутые функции:
- CSS Grid и Flexbox для макетов и легкое позиционирование элементов
- SCSS для изготовления обычных CSS более управляемых через использование переменных
Проверьте CSS-Tricks.com Для всестороннего руководства по CSS. Это один из лучших ресурсов там.
Мы включаем в CSS/HTML-эксперты сейчас! ?
Рамотки
Следующий этап состоит в том, чтобы познакомиться с CSS Frameworks. Они в основном «из коробки» элементов и стилей, которые вы можете использовать в ваших проектах. Большинство компаний используют их, поскольку он экономит время своих разработчиков, поскольку им не нужно изобретать колесо. Есть множество рамки, но я предлагаю вам выбрать один и познакомиться с ним. Они, как правило, все очень похожие, и как только вы знакомы с одним, легко поднять остальные.
Загрузка
Мое личное предложение учится Bootstrap ( getbootstrap.com ). Это очень популярно и используется многими компаниями.
«Подождите, почему я должен был изучить CSS/HTML с нуля, если я могу просто использовать рамки?!»
Хороший вопрос. Да, есть рамки, и хотя многие компании используют их, вам часто приходится настроить вещи время от времени на основе проекта. Для этого вам нужно знать основы.
Отзывчивые конструкции
В наши дни важно принимать множество мобильных устройств во внимание при создании конструкций в интерфейсах. К счастью для нас, каркасы CSS, о которых мы говорили до сих пор (Bootstrap, CSS Grid, Flexbox и т. Д.), делает создание адаптивных конструкций действительно проще.
- СМИ. Как и зная, как использовать CSS для создания отзывчивых конструкций, вам нужно будет понять, как использовать СМИ Чтобы определить, как элементы должны искать разные размеры экрана.
- Избегайте использования пикселей для размеров. Я бы предложил использовать REM единицы над пикселями. Изображение с шириной 100 пикселей, всегда будет ширина 100px независимо от размера экрана. Попробуйте использовать такие блоки, как REM , VH и VW , чтобы добиться отзывчивых конструкций.
Javascript
JavaScript – это язык программирования Интернета. Если вы хотите быть успешным интерфейсом разработчиком, вам нужно знать JavaScript. И действительно это знать. Да, есть рамки, но так же, как мы узнали основы HTML и CSS, прежде чем попасть в рамки, мы сделаем то же самое здесь. Это сделает вас лучшим разработчиком в долгосрочной перспективе. В качестве рамки приходят и уходят, основные элементы языка останутся прежними.
В очень минимальном, как младший разработчик, вам нужно будет знать:
- Объекты, функции, условные контуры и операторы
- Модули
- Массивы (в том числе как их манипулировать)
- Получение данных из API с использованием Petch API
- Манипулировать домом и использованием событий
- Async/a enaiq (дополнительная дополнительная передовая тема, но действительно впечатляет, если вы это знаете)
- Json.
- ES6 +
- Тестирование (шума, фермент, чай и т. Д.)
Младший разработчик не должен знать все На эти темы, но чем больше вы знаете, лучше. Как только вы можете создать Базовое веб-приложение без учебных пособий, Вы можете быть уверены, что вы знаете JavaScript.
Если вы действительно хотите стать экспертом в JavaScript, полностью понимать язык и отказа от толпы, некоторые отличные ресурсы для изучения более продвинутых тем JavaScript:
Не только эти ресурсы учат вам JavaScript, но вы также узнаете много концепций программирования в целом. Серьезно, если вы узнаете ресурсы в приведенных выше ресурсах, вы будете действительно kill junior Developer – некоторые пожилые люди, которые я имел в виду, не знаю этого!
Некоторые идеи проекта:
- Создайте игру Super Mario (вы изучите JavaScript, манипулируя DOM и использую события)
- Создайте приборную панель, показывающую некоторые статистики, которые вытащены из API. E.g, Twitter Dashboard, панель инструментов Github или все, что вам нравится (вы научитесь работать с APIS и JSON)
- Не беспокойтесь о том, как здесь выглядит все. Сосредоточьтесь на изучении JavaScript, а не CSS/HTML. Вы всегда можете заставить это выглядеть красиво позже, если хотите!
JS Frameworks
Есть много JS Frameworks, выберите один и учить это хорошо. Популярные в данный момент – Angular.js , React.js и Vue.js Отказ Это все солидные варианты и никуда не денется. Лично я рекомендую отреагировать .js, но вы можете попробовать других и посмотреть, что вы предпочитаете.
Быстрая отметка – если вы узнали основы JavaScript и имеют прочную основу, основа обучения должна быть куском пирога! Независимо от того, какие рамки вы выбираете, убедитесь, что это хорошо это хорошо узнать.
Вам не нужно знать их всех, Это выглядит более впечатляюще, если вы действительно хорошо знаете одну структуру, в отличие от небольших знаний о нескольких разных рамках.
Реагировать
Он имеет огромную поддержку от Facebook , массивное онлайн-сообщество и является самым популярным в отрасли в минуту.
Если вы следили за шагами выше и узнали немного JavaScript, то выбирая реакцию, не должно быть слишком сложно. Как младший разработчик, вы хотите убедиться, что у вас есть ручка на основных понятиях реагирования:
- Поймите, что реагировать на основе компонентов, и как компоненты работают
- Использование штата и реквизита внутри ваших компонентов
- JSX и как использовать его для рендеринга HTML-элементов на веб-странице
- Как и когда компоненты повторно рендерируют
- Использование реактивных крюков
- NPM, WebPack и Babel
- Восстановите некоторые из ваших предыдущих проектов JavaScript для реагирования
- Создать Приложение калькулятора (Хороший для практики государственного управления, так как много пользовательских действий необходимо будет обновить состояние. Подсказка: попробуйте использовать react крючки)
- Создайте свой собственный, Twitter , Github или Новости корма Отказ Используйте публичные API, чтобы получить данные и отобразить это в вашем приложении.
- Опять же, не беспокойтесь о том, чтобы сделать ваше приложение идеально, или сделать его Super Sexy. Сосредоточиться на том, чтобы сделать его работы и сосредоточиться на изучении концепций реагирования.
Государственное управление (например, redux)
После того, как у вас есть основные концепции реагирования прибиты, следующий шаг – понять Redux Отказ Redux в основном является структурой управления государством, которые в значительной степени комплимент реагируют. Думайте об этом как об этом в качестве базы данных передней панели, которая содержит состояние вашего веб-приложения в одном, легко управлять местом.
Для Redux есть много движущихся частей, поэтому не беспокойтесь, если вы чувствуете себя перегруженным (я все еще изучаю в и вышел!). Вам нужно будет знать только Redux при работе с большими веб-приложениями Scale Enterprise. Сосредоточьтесь на понимании оснований и государственного управления, используя реагирование.
Существует ряд инструментов, которые помогут вам с отладкой React/Redux (часть причины, почему я его люблю)
Веб-браузеры
Как интерфейсный разработчик, важно знать свой путь вокруг веб-браузеров. Chrome, Firefox и Edge – главные. Вам нужно будет иметь основную идею вокруг:
- Инструменты отладки (E.G Chrome Developer Tools)
- Работа с методами хранения (локальное хранение, хранение сеанса, файлы cookie)
- Особенности браузера – самая большая боль в Интернете развивается с учетом поддержки браузера. Следите за WhatWebcando.today Чтобы убедиться, что ваш код поддерживает необходимые браузеры.
Развертывание и хостинг
Интерфейсный разработчик должен знать, как развернуть и провести веб-приложение. Это хорошо для ваших портфолио, знаний и, как правило, получают работу. Я рекомендую использовать управляемый сервис (то есть, пусть кто-то еще делает тяжелый подъем для вас), таких как
- Github Pages.
- Heroku
- Нечто
- Цифровой океан
- Aws
- Firebase
Лично я рекомендую NetLify или Heroku Отказ Он делает его супер легко развертывать и принимать приложения через пользовательский интерфейс. Каждый из этих услуг предоставляет бесплатный уровень, поэтому он не должен стоить вам. Недостатком к этим услугам является то, что они не дают вам более тонкий доступ Что понадобится некоторые разработчики, такие как почтовые услуги, SSH или FTP. Если вы не знаете, что это, вы, вероятно, не нуждаетесь в них, поэтому простой сервис все будет хорошо.
Если вы решите отправиться в Super-Fancy и разместите некоторые из ваших проектов на пользовательском домене (например
Спина
В двух словах, именно здесь данные с интерфейса сохраняются. Например, когда пользователь создает Tweet, это проходит через сервер и сохраняется в базе данных.
Задний разработчик обычно может выполнять следующие задачи:
- Создать API, что интерфейс будет использовать (обычно, возвращая JSON)
- Напишите деловую логику и логику проверки
- Интеграции с 3-го вечеринка API
- Сохранить и прочитать данные из базы данных
Языки программирования
Есть много языков программирования, из которых вы можете выбрать. Как миллионы их. Но не волнуйтесь, главные являются:
- Ява
- C #
- Питон
- Node.js (не технически языка, больше времени выполнения, которое давайте запустим JavaScript на сервере)
- Идти
- PHP (только если вы заинтересованы в разработке WordPress)
Опять же, мой совет состоит в том, чтобы выбрать один и учить это хорошо. Я предлагаю использовать Node.js , как вы уже в мышлении изучения JavaScript. Node.js делает его очень простым созданием API для отдыха, что является одной из главных задач, которым ожидается младший разработчик.
Какой язык вы выберете, убедитесь, что вы знаете следующее;
- Создание API’s.
- Основы языка (создание функций, с использованием условных условий, операторы, переменные и т. Д.)
- Как подключиться к базе данных
- Как запросить базу данных
- Управление пакетами
- Писать тесты
Если вы решили узнать Node.js, многие из этого будут знакомы вам. Не пытайтесь учиться их всех! Как младший разработчик, вам не нужно. Выберите язык, который наилучшим образом соответствует вашим целям (если это веб-разработка, любой из них будет делать) и сосредоточиться на нем и хорошо изучать. Конечно, если вам интересно прочие языки (Node.js и Python совершенно разные), то не стесняйтесь удовлетворить ваше любопытство и играть с ними.
Отдых API & JSON
Создание хорошего API для отдыха – одна из главных заданий для внутреннего разработчика. Вам нужно будет знать:
- Разные глаголы и то, что они используются для
- Как создать хороший ответ
- Как обращаться с запросами
- Аутентификация запросов
- Как документировать ваше API
Отдых API Являются ли мост между задней и передней разработкой, поэтому убедитесь, что вы понимаете, как они работают.
JSON является основным языком, используемым для передачи данных через API для отдыха. Данные представлены как Объекты и массивы. Опять же, если вы узнали JavaScript или Front-End Development, используя очередные шаги, это будет выглядеть знакомым для вас.
Базы данных и DEVOPS.
Это в значительной степени инфраструктурная сторона веб-разработки. Я бы не сказал бы, что тяжелые знания этого материала являются требованием для младшего разработчика. Я почти предложил противоположность и скажем, вам действительно нужно только знать этот материал, если вы хотите попасть в поле DevOps. Широкая область вам нужно знать:
- Как управлять базой данных
- Различные платформы для хостинга (AWS, Azure, Google etc)
- CICD и инструменты, такие как Дженкинс, GitLab и т. Д.
- Регистрация и мониторинг
В зависимости от вашей команды или компании, могут быть другие команды или люди, чтобы управлять этим. Это все еще интересный и впечатляющий навыки навыков, поэтому, если вам любопытно и есть свободное время, изучение некоторых навыков базы данных и навыки DEVOP будет иметь большое значение.
Расширенные темы
Ниже приведены некоторые расширенные темы, которые я рекомендую, как только вы освоили выше. Уже есть много, поэтому я не буду уходить в подробности здесь, но сейчас не стесняюсь пропустить/скинуть этот раздел и вернуться позже.
Аутентификация с использованием JWT/OAUTH
Это общий подход в отрасли, который аутентифицирует и разрешает пользователям (например, вход в систему).
Больше информации на: https://oauth.net/2/
Шаблоны проектирования
Шаблоны дизайна Общие решения для общих проблем Отказ Учетные модели обучения упростит проще решать проблемы и неизбежно быть лучшим разработчиком.
- Подробнее (пример Java): github.com/iluwatar/java-design-patterns.
- Больше информации (JavaScript): github.com/fbeline/design-patterns-js.
Прогрессивные веб-приложения и мобильное развитие
Прогрессивные веб-приложения По существу веб-приложения, которые работают как нативные приложения на телефоне пользователя. Довольно круто верно? Проверьте их, если у вас есть времена.
Больше информации на: developers.google.com/web/progressive-web-apps/
Другие варианты включают в себя:
Реагировать родной – Позволяет написать React Code, который скомпилируется на Android/iOS
Флаттер – похожи на реагировать родной, использует только язык программирования DART
Это подтверждает интерфейсный код на стороне сервера, который они возвращаются и отображаются в браузере. Усовершенствованная тема, имеющая свои собственные достоинства, такие как SEO & Speed Prefits.
Больше информации на: Medium.freecodecamp.org/demestingify-Reacts-server-side-render-de335d408fe4.
Использование командной строки (SSH/BASH ETC)
Иногда вам нужно будет использовать командную строку, когда GUI недоступен. На самом базовом уровне вам нужно знать, как:
- Как подключиться к серверу, используя SSH
- Навигация по использованию команд (CD, LS и т. Д.)
- Редактировать файлы с помощью VIM (или аналогичного. The Cheat Lists Vim.rtorr.com )
Спасибо за прочтение!
Чтобы получить последние руководства и курсы для младших разработчиков прямо в свой почтовый ящик, обязательно присоединитесь к списку рассылки на www.chrisblakely.dev.
Первоначально опубликовано www.chrisblakely.dev 15 марта 2019 года.