Какие технологии обязан знать любой frontend разработчик: Что должен знать FrontEnd разработчик в 2021 году

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

Требования к hard skills будут зависеть от направления. Например, мы уже подробно рассказывали, что работодатели ждут от Junior-Python-разработчика. Для таких специалистов это чаще всего знание языка программирования Python, алгоритмов и структур данных, опыт работы с базами данных и фреймворками.

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

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

Александр Махновский

руководитель отдела разработки Аванпост

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

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

Основные хард-скиллы:

• Знать синтаксис языка, на котором предстоит работать.
• Знать основу стандартной библиотеки языка и представлять её структуру в целом.
• Понимать принципы работы технологической платформы и среды исполнения (например jvm).

Дополнительные хард-скиллы:

• Понимать принципы работы реляционных СУБД, иметь навыки работы с ними.
• Знать основы веб-разработки.
• Понимать, как в целом устроен мир: как работает сетевое взаимодействие, какая инфраструктура существует в интернет- и корпоративных сетях, понимать отличия парадигм программирования, скриптовых языков от компилируемых и т. д.

Практические навыки:

• Уметь решать простые прикладные задачи, т. е. применять знания, перечисленные выше, с пользой.

Софт-скиллы:

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

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

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

Это не самые высокие требования: могу с уверенностью сказать, что 10-15 лет назад требования были значительно серьезней. Отрасль была менее лояльной к новичкам, готовность брать на работу, платить не самую низкую зарплату и учить была у единиц компаний. Сейчас же все, даже самые небольшие софтверные и не только компании, готовы вкладываться в обучение вчерашних студентов, несмотря на все сопутствующие риски. Всё, что нужно джуну сегодня, — общая адекватность и минимальные знания технологий.

Выводы

Мнения насчёт того, завышены требования к джунам или нет, очень разнятся. Но практически все эксперты сходятся в том, что Junior-разработчик должен знать о преимуществах и сферах применения выбранного языка или технологии, уметь работать с Git, знать основные алгоритмы, библиотеки и фреймворки в своей сфере, быть в курсе возможностей хотя бы одной IDE, знать английский не ниже уровня Intermediate и уметь работать в команде.

А вот что должен знать Middle-разработчик.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Как стать фронтенд-разработчиком в 2021 году: дорожная карта

Как стать фронтенд-разработчиком и что изучать в 2021 году? В этом поможет разобраться дорожная карта по фронтенду:

Профессиональные навыки

Как и прежде, фронтенд-разработка стоит на трёх китах — HTML, CSS и JavaScript.

HTML

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

Материалы для изучения HTML:

CSS

Также важно научиться стилизовать элементы с помощью CSS и делать это правильно, например повторно используя стили для одинаковых элементов. Сперва освойте блочную модель и позиционирование содержимого — компоновку, выравнивание и центрирование элементов, а также их видимость. Почитайте об адаптивном и отзывчивом дизайне. Далее переходите к медиа-запросам, чтобы учитывать технические параметры различных устройств. Неплохим бонусом станет навык работы с CSS Grid и Flexbox. После углубляйте знания, изучая архитектуру и препроцессоры.

Материалы для изучения CSS:

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

JavaScript

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

Так, вам потребуется освоить синтаксис и базовые конструкции. Обратите внимание, что JavaScript — язык со слабой типизацией, то есть выполняет неявное преобразование типов автоматически. Это значит, что вы можете написать что-то вроде 10+"1" и не получить никакой ошибки. Напротив, результат будет строкой — 101. Вы можете почитать об этом подробнее в большом исследовании под названием WTF JavaScript.

Ну а мы вернёмся к дорожной карте по фронтенд-разработке. Важно освоить DOM, интерфейс для работы с HTTP-запросами и ответами Fetch API, технологию AJAX и XMLHttpRequest, ECMAScript 6+, модульный подход и веб-компоненты. Также пробегитесь по перечисленным концепциям вроде строгого режима и теневого DOM.

Материалы для изучения JavaScript:

Веб-безопасность

Знаете, что такое OWASP? Это открытый проект, собирающий статистику и направленный на обеспечение безопасности веб-приложений. Чтобы стать фронтенд-разработчиком в 2021 году, нужно уделять особое внимание безопасности. Хоть способов обезопасить себя и становится больше, но злоумышленники тоже не стоят на месте.

Итак, вам нужно понимать преимущества HTTPS перед HTTP, принцип работы CORS, политику защиты контента (CSP), а также регулярно следить за обновлениями на сайте OWASP.

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

Инструменты

Здесь всё просто:

• Освойте работу с системой контроля версий Git и выберите удобный сервис для хостинга проектов.
• Пользуйтесь линтерами и форматерами для улучшения качества кода.
• Для сборки используйте таскраннеры и бандлеры.
• Возьмите в привычку работать с менеджерами пакетов npm и yarn.

Подробнее о таскреннерах и бандлерах можно узнать из данного видео:

Фреймворки

3 основных фреймворка в работе с фронтендом:

Хорошее сравнение можно найти в этой статье. Для тех, кто желает освоить React с нуля, предлагаем понятную дорожную карту по React-разработке.

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

GraphQL

Это основной язык API-запросов фронтенд-разработчиков. Платформа Apollo в свою очередь представляет собой реализацию GraphQL для транспортировки данных из облака к UI веб-приложения, а Relay Modern — это фреймворк, использующий GraphQL и предназначенный для работы с data-driven приложениями.

Держите руководство по GraphQL для начинающих.

Заключение

Итак, чтобы стать фронтенд-разработчиком в 2021 году, следует хорошо владеть HTML, CSS и JavaScript, уметь обеспечивать безопасность веб-приложений, владеть основными инструментами, такими как Git, Prettier, ESLint, npm scripts и Webpack, изучить хотя бы один из основных JavaScript-фреймворков и получить навык работы с GraphQL. Но ни в коем случае не останавливайтесь на этом. Например, всё чаще компании нанимают именно фулстек-девелоперов, поэтому рекомендуем также ознакомиться с дорожной картой по бэкенд-разработке.

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Что нужно учить фронтенд-разработчику в 2021 году

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

Вступление

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

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

1. Как работает интернет?

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

Вот список некоторых тем, к которым следует присмотреться:

• Что такое интернет?
• Как он работает?
• Что такое HTTP и какие изменения он претерпел?
• Как работают браузеры?
• Что такое доменные имена и хостинги?
• Как работает DNS?

2. Изучите основы HTML и CSS

HTML расшифровывается как Hypertext Markup Language, или «язык гипертекстовой разметки».Он используется для построения “скелета”, разметки вашего сайта. В этом разделе вам нужно будет изучить основы HTML, однако кроме этого можно обратить больше внимания и на формы в HTML, поскольку они точно пригодятся в будущем.

Как только у вас появится базовое понимание HTML, вы можете начать изучать основы CSS. CSS расшифровывается как Cascading Style Sheets, или же «каскадные таблицы стилей». Они используются тогда, когда нужно задать, как должны выглядеть ваши HTML-элементы. Помимо этого, они применяются для создания адаптивных макетов, а также делают ваш сайт более привлекательным.

CSS легко изучить, но трудно овладеть. Есть несколько тем, на которые следует обратить больше внимания, например:

• Боксовая модель: как работают поля, отступы и границы.
• Единицы измерения CSS: они используются для выражения длин (rem, vh и vw).
• Позиционирование: как задавать тип расположения элементов. Эта тема сбивает с толку многих, поэтому уделите ей достаточно времени.
• Переменные: переменные  —  это сущности, которые могут быть повторно использованы во всем документе. Переменные делают работу с CSS настолько удобной, что вы можете создавать свои стили всего лишь с помощью нескольких строк кода.
• Медиа-запросы: медиа-запросы решают, что показывать при разных размерах экрана. Такие запросы являются ключевым компонентом адаптивного дизайна.
• Анимации: анимации позволяют элементам менять один заданный стиль на другой. Если вы знаете, как правильно использовать анимации, то это знание несомненно поможет вам выделить ваш сайт, в ином случае он будет выглядеть нелепо, так что будьте осторожны.
• Flexbox, CSS-сетка: эти технологии применяются для создания адаптивных макетов.

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

3. Научитесь пользоваться Git и Github

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

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

4. Развертывание веб-сайта

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

Раньше это было сделать гораздо труднее, но теперь вы можете использовать инструменты вроде GitHub Pages или Netlify. 

5. JavaScript

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

Когда дело доходит до JavaScript, сначала стоит изучить его основы: переменные, типы данных, функции, массивы, объекты и так далее. Вам также нужно будет узнать, как манипулировать DOM.

Вот список вещей, которые следует рассмотреть поближе:

• Синтаксис и базовая конструкция.
• Манипуляции с DOM
• Работа с Fetch API/Ajax
• ES6+
• Модульный JavaScript

А ещё разберитесь с этими понятиями: замыкания, область действия функций, Async/await, прототипирование, «всплытие» событий, Shadow DOM, «подъёмы», strict-режим.

6. Изучайте Sass

Sass расшифровывается как Syntactically Awesome Style sheets, или «синтаксически потрясающие таблицы стилей». Это CSS-препроцессор, который облегчает работу с CSS, сокращает повторения кода и экономит время разработки. Он помогает с лёгкостью стилизовать страницы, используя меньше строк кода. Это как CSS со сверхспособностями.

Sass  —  мощный инструмент, если приходится много работать с CSS. Он облегчает жизнь и помогает не повторяться в CSS.

7. Пакетные менеджеры и веб-бандлеры

Когда дело доходит до менеджеров пакетов, первое, что приходит на ум,  —  это NPM и Yarn, поэтому нелишним будет изучить основы одного из них.

Менеджер пакетов  —  это инструмент, который автоматизирует процесс установки, обновления, настройки и удаления программ или проектов.

После этого вам нужно будет взять во внимание инструменты сборки. Среди них такие вещи, как системы запуска задач (NPM или Gulp) и веб-бандлеры (Webpack или Parcel).

8. Выберите фреймворк

Изучив все вышеперечисленные основы и инструменты, уже можно подбирать себе любой JavaScript-фреймворк. Разумным решением будет начать с React или Vue. Можно также попробовать Angular.

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

Выберите любой фреймворк, который будет вам удобен, а также в зависимости от рынка в вашем регионе. В любом случае это всего лишь инструменты  —  главное, чтобы вы знали основы JavaScript.

Также стоит узнать об управлении состоянием, и есть много инструментов, которые можно использовать в зависимости от того, какой фреймворк вы выберете (Redux, VueX и другие). На картинке вы можете посмотреть на популярные варианты.

9. Серверный рендеринг и статические генераторы

Next.js используется для рендеринга на стороне сервера или для генерации статических веб-сайтов. Технология Next.js ещё довольно нова, но это точно тот навык, который никогда не будет лишним в багаже любого React-разработчика. Если вы используете Vue, вам предстоит узнать о другом инструменте под названием Nuxt.js, который также используется для рендеринга на стороне сервера. Для Angular таким инструментом будет Universal.

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

10. Тестирование приложений

Что касается тестирования, то нужно знать разницу между модульными, интеграционными и функциональными тестами, а также следует научиться их писать.

Заключение

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

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

Читайте нас в Telegram, VK и Яндекс.Дзен

Перевод статьи Mehdi Aoussiad: The Front-End Web Developer Roadmap for 2021

подборка 34 самых необходимых / Skillbox Media

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

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

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

«Синтаксический сахар» — конструкции, которые не вносят ничего принципиально нового в технологию, но делают работу с ней удобнее, проще и человечнее.

Например, в названиях классов можно использовать разные спецсимволы (кроме ,_,), чтобы придать выразительности коду:

<div>
        <div>
               <div></div>
       </div>
</div>

Такой код будет на 100% валидным, но выглядит ужасно. Зато с помощью препроцессора он станет таким:

.\@sidebar.\$main { ... }
.\@sidebar.\$wrapper { ... }
.\@sidebar.\$wrapper.color\:red { ... }

Что бы там ни говорили, изучить CSS довольно-таки непросто. Чем больше осваиваешь язык и разбираешься в нюансах, тем больше понимаешь, как плохо его знаешь. Поэтому использовать один из двух популярных препроцессоров — удобное решение:

• SASS — компилируется с помощью Ruby;
• LESS — использует JavaScript или Node.js.

Красивый, чистый и строгий код — то, к чему должен стремиться каждый, кто начинает верстать приложения. Помогают написанию правильного CSS-кода методологии именования:

• БЭМ;
• CSS Modules;
• SMACSS;
• OOCSS.

Популярность препроцессоров для CSS повлияла на создание подобных технологий и для HTML. Их цель совершенно идентична: упростить написание кода и сократить время на него, спасти программиста от многократных повторений строк и одинаковых тегов. Вот наиболее известные из HTML-препроцессоров:

Автоматизация в JavaScript — это прекрасно. Такую возможность в современной разработке дают менеджеры задач Gulp и Grunt, которые работают через NPM — Node Package Manager. Также полезно попробовать сборщик модулей Webpack.

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

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

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

Одно слово — Git. Это самая известная и удобная распределенная система контроля версий. Обычно используется для управления большими проектами, где задействовано много разработчиков одновременно. Git позволяет легко переходить между частями кода, которые сохранены в виде архива. Можно не бояться, что какой-то участок будет утерян, — программа всё сохранит в первоначальном виде.

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

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

Первое — опционально: проверять код можно и в текстовых редакторах или IDE, поэтому не все разработчики используют отдельные инструменты для валидации кода. Но мы назовем их тоже, чтобы картина была полной: ESLint и JSLint.

А вот тестировать разработчикам приходится постоянно. Рекомендуем выбирать из этих инструментов:

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

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

6 вещей, которые должен знать каждый джуниор-разработчик — Академия Яндекса

Кэл Эванс, программист с многолетним опытом, делится полезными советами с начинающими разработчиками. Он начинал работать еще на Commodore 64, писал код на диалекте языка BASIC в фирме своих родителей. Занимается программированием более 30 лет, хотя формально нигде этому не учился. В своей статье Эванс рассказывает о том, что он узнал за эти годы и что ему было бы полезно знать с самого начала.

Проявляйте терпение к себе и другим

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

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

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

Научитесь учиться

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

Навыки самообучения — это залог успеха в карьере. Послушайте как автор статьи обсуждает эту проблему с профессиональным коучем Оливией Лиддл в подкасте No BS Engineering.

Освойте принципы, а не инструменты

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

Такие концепции, как объектно-ориентированное программирование, функциональное программирование и паттерны проектирования, послужат вам в работе с разными языками и фреймворками.

Это не значит, что вы не должны постараться стать отличным Java-разработчиком или что вам не надо изучать все тонкости вашего технологического стека и инструментов, но совместите это с концепциями, лежащими в основе языка и инструментов, которыми вы пользуетесь. Эти знания пригодятся и для других языков и стеков.

Умейте изобретать колесо

Тот, кто сказал «не надо изобретать колесо», был идиотом! Никто бы не поставил велосипедную шину на гоночный автомобиль, для них изобрели специальные покрышки. Разработчики ПО переизобретают «колеса» всё время, потому что им нужны «колеса» с определенными свойствами.

Конечно, не стоит писать весь код самому. Исследуйте чужой код на GitHub или GitLab. У PHP-разработчиков есть отличный инструмент под названием Packagist, у разработчиков на JavaScript есть похожая штука — npm. С каким бы языком вы ни работали, изучите инструменты управления пакетами и зависимостями, чтобы понять, что другие люди сделали до вас. С вероятностью 99% то, что вам нужно, уже существует. Проверьте.

Если вы не можете найти решение, которое бы удовлетворяло вас на 100%, посмотрите, есть ли проект, который вы можете довести до ума, вместо того, чтобы писать с нуля?

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

Читайте, читайте, читайте… затем пишите

Вы когда-нибудь видели фильм, где разработчик программного обеспечения (чаще всего его в таком фильме называют хакером) сидит перед двумя мониторами, на которых в бешеном темпе прокручивается код, и кивает, как будто он читает и понимает то, что видит? Конечно, в жизни так не бывает. Более распространенный сценарий такой: разработчик ответвляет репозиторий, копирует его, открывает редактор и начинает читать код. Чтение чужого кода -это, вероятно, лучший способ научиться программировать. Если вы знаете, что код делает, то его чтение покажет вам, как кто-то другой решил нужную вам задачу.

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

Найдите наставника

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

В наши дни разработчики имеют массу возможностей для получения информации и примеров кода: Stack Overflow, Stack Exchange, Reddit и так далее. Тем не менее, поиск кода — это только половина проблемы. Вторая половина — понять, является ли ваше решение хорошим. Единственный способ это понять — найти хорошего наставника.

Найдите кого-то, кто может выслушать ваши идеи. Кого-то, кто желает вам успеха и готов вкладывать в вас своё время

Когда найдете ментора, помните о золотом правиле «Да не потрать зря времени наставника». Не задавайте простые вопросы, на которые можно найти ответы в интернете. Напротив, спрашивайте о том, что вызывает ступор. На этом этапе карьеры наставники — ваша путеводная звезда. Они зададут направление и поделятся советом, но не ждите от них готовых решений.

10 лучших навыков фронтенд-разработчика, которые необходимо знать

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

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

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

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

Веб-дизайн — это то, как выглядит веб-сайт, а — разработка внешнего интерфейса. — это то, как дизайн фактически реализуется на веб-сайте. Front-end разработчик — это человек, ответственный за реализацию.

По данным TechRepublic, веб-разработка является одним из 10 самых популярных технических навыков в 2019 году. Недавняя статистика Бюро статистики труда США прогнозирует, что к 2026 году , количество вакансий веб-разработчиков вырастет на 15% по сравнению с 2016 .

Некоторые ключевые роли внешнего разработчика включают:

• Front End Engineer
• Junior Front End Developer
• Front End Software Engineer
• Front End Developer

Среднее Заработная плата Front End разработчика составляет 4,94,103 в , Индия .

Если говорить о диапазоне зарплат в USA , старший Front-end разработчик зарабатывает в среднем $ 101 747 . Принимая во внимание, что младший Front-end разработчик имеет среднюю зарплату $ 70 687 .

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

Если вы посмотрите на текущие списки вакансий для фронтенд-разработчиков, вы увидите, что существует четкий и общий пул навыков, которые ищут работодатели.Давайте посмотрим на top 10 Технические навыки , которыми должен обладать фронтенд-разработчик:

HyperText Markup Language (HTML) — стандартный язык разметки, используемый для создания веб-сайтов. страниц. Это самый простой строительный блок, необходимый для разработки веб-сайтов. CSS (каскадные таблицы стилей) — это язык, используемый для представления документа, который вы создаете с помощью HTML.

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

Другой важный инструмент для фронтенд-разработчика — JavaScript (JS). Если вы пытаетесь реализовать на своем веб-сайте интерактивные функции, такие как аудио и видео, игры, возможности прокрутки, анимация страниц, JS — это инструмент, который вам нужен.

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступны три типа препроцессоров, такие как Sass, LESS и Stylus .Вы должны написать код, который помогает препроцессору и, в свою очередь, преобразуется в CSS, который будет работать для веб-сайта.

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

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

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

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

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

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

Ознакомьтесь с нашей программой Full Stack Web Developer Masters Program, которая включает в себя обучение под руководством инструктора и практический опыт работы с проектами. Это обучение поможет вам овладеть навыками работы с серверными и интерфейсными веб-технологиями.Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Есть к нам вопрос? Пожалуйста, укажите это в разделе комментариев в блоге «Навыки Front End Developer», и мы свяжемся с вами.

Семь навыков, которые вам понадобятся, чтобы стать фронтенд-разработчиком

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

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

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

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

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

День из жизни фронтенд-разработчика

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

Адаптация к процветанию: развитие клиентского опыта в условиях пандемии

Как идентификация клиента поддерживает быстрые цифровые преобразования

Back-end разработчики, которые управляют и поддерживают «закулисную» инфраструктуру веб-сайта, такие как серверы и базы данных, дополняют работу интерфейсных разработчиков.Вот другие обязанности и обязанности, которые, скорее всего, будет выполнять фронтенд-разработчик в своей роли.

• Оптимизация графики и скорости страницы для улучшения взаимодействия с пользователем
• Проверка согласованности бренда на всем веб-сайте
• Своевременное функциональное тестирование основных элементов веб-сайта
• Разработка функций, позволяющих сделать веб-сайты удобными для мобильных устройств
• Создание инструментов, улучшающих взаимодействие с пользователем в любой браузер
• Внедрить локальную поисковую оптимизацию (SEO)

Навыки, необходимые для интерфейсного разработчика

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

1. HTML и CSS

Язык разметки гипертекста (HTML) и каскадные таблицы стилей (CSS) — это основные элементы веб-сайта. В то время как HTML придает структуру веб-страницам, CSS помогает стилизовать элементы HTML с помощью цвета, шрифтов, гарнитуры и т. Д.

2. JavaScript

HTML и CSS идеально подходят для текстовых веб-сайтов, поскольку они в основном статичны. JavaScript может быть полезным дополнением к адаптивным веб-сайтам.

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

3. Фреймворки и библиотеки

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

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

4. Контроль версий

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

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

5. Кроссбраузерность и тестирование устройств

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

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

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

6. Оптимизация веб-производительности (WPO)

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

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

7. Поисковая оптимизация (SEO)

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

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

Рабочие места веб-разработчиков, по прогнозам, вырастут на 8% к 2029 году

Бюро статистики труда США (BLS) ранее предполагало, что количество ролей веб-разработчиков в экономике США, вероятно, вырастет на 8% в период с 2019 по 2029 год. намного более быстрыми темпами, чем ожидаемый рост всех других профессий, в основном за счет растущей популярности мобильных устройств и платформ электронной коммерции.

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

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

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

Лучшие методы реализации программы для мобильных устройств

Бизнес-ценность Red Hat OpenShift

Экономия затрат на платформе, рентабельность инвестиций, а также проблемы и возможности Red Hat OpenShift

Управление безопасностью и рисками в цепочке поставок ИТ: практический подход

Лучшие практики для обеспечения безопасности цепочки поставок ИТ

Влияние цифровых служб удаленного мониторинга и диспетчеризации на периферийные вычисления и центры обработки данных

Новое определение семи тенденций Требования к удаленному мониторингу и диспетчерскому обслуживанию на местах

11 навыков фронтенд-разработчиков, необходимых для приема на работу в 2021 году

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

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

11 навыков, которые необходимы фронтенд-разработчикам

1. HTML
2. CSS
3. JavaScript
4. Манипуляции с DOM
5. JSON
6. AJAX
7. Node.js
8. MySQL
9. Реагировать
10. Ява
11. Решение проблем

Однако фронтенд-разработчики — это не просто дизайнеры; они программисты, обладающие навыками в HTML, CSS и JavaScript, а также с некоторыми мощными фреймворками и библиотеками, которые могут воплотить в жизнь ориентированный на пользователя веб-сайт.Такие технологии, как Foundation, AngularJS, Bootstrap, Backbone, DOM и EmberJS, помогают гарантировать, что сайт выглядит и хорошо работает на любом типе устройства, а библиотеки кодирования, такие как LESS и jQuery, помогают пользователям сайта экономить время. Внешние разработчики творчески используют эти платформы для создания лучшего и красивого опыта для посетителей веб-сайтов и приложений во всем мире. Они также ищут способы улучшить и поддерживать взаимодействие с пользователем, особенно по мере того, как меняются технологии и у пользователей появляются разные требования и потребности.

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

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

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

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

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

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

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

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

HTML, CSS и JavaScript — это разные языки, но они часто связаны друг с другом в качестве основных навыков фронтенд-разработки, необходимых для создания отличных сайтов.

Объектная модель документа (DOM) предоставляет программный интерфейс для любого документа в Интернете. Он представляет структуру и содержимое любого веб-документа, включая его стили и разделы HTML.

Управляя моделью DOM и взаимодействуя с ней, вы можете изменить способ отображения содержимого любой страницы для пользователя. DOM превращает каждую часть веб-сайта в узлы и объекты; этот переход позволяет разработчикам взаимодействовать с моделью с помощью JavaScript или любого другого объектно-ориентированного языка программирования. Модель DOM содержит несколько API-интерфейсов, которые позволят разработчикам интерфейса изменить работу любого пользователя, от отображения контента на предпочитаемом языке до возможности взаимодействия с сайтом через веб-камеру.Если вы хотите создавать интерактивные веб-сайты, на которых пользователи могут хранить свою информацию или управлять своим цифровым опытом, манипуляции с DOM являются важным навыком фронтенд-разработчика, который можно добавить в свой арсенал.

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

Унаследованный от JavaScript, JSON — это формат данных, известный как нотация объектов JavaScript. Он обеспечивает текстовое представление веб-данных, и за последние 15 лет он стал почти неизбежным в Интернете. Многие из баз данных, лежащих в основе веб-сайтов, — например, MySQL и PostgreSQL — имеют базовую встроенную поддержку запросов и данных JSON.

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

AJAX, что расшифровывается как асинхронный JavaScript и XML, объединяет все основные технологии разработки внешнего интерфейса для передачи информации между клиентом и веб-сервером.

AJAX помогает клиенту — например, веб-браузеру, который использует клиент, — сделать запрос к серверу. Затем он позволяет серверу передавать ответ без принудительной перезагрузки.Поскольку AJAX является асинхронным, сайт не зависает, пока сервер не ответит; вместо этого он работает за кулисами, обрабатывая запрос JavaScript и обновляя DOM, чтобы отразить ответ сервера на запросы пользователя.

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

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

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

Как фронтенд-разработчик, вы можете написать несколько фронтенд-приложений или использовать сборщики пакетов и средства выполнения задач, чтобы обеспечить быстрый и беспроблемный опыт для ваших пользователей. Все эти технологии обычно построены на JavaScript, а затем выполняются с использованием Node.js. Даже альтернативные языки сценариев и инструменты преобразования CSS, такие как PostCSS, основаны на JavaScript. Node.js дает вам возможность создать быстрый фреймворк на основе JavaScript, который минимизирует нагрузку на сервер и время ожидания пользователя.

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

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

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

React — это библиотека JavaScript, которая позволяет интерфейсным разработчикам создавать пользовательские интерфейсы. Разработчики внешнего интерфейса могут использовать React, чтобы описать или объявить, как они хотят изменить DOM и внешний вид пользовательского интерфейса. В этом смысле он похож на HTML, но библиотека React также дает вам возможность отображать динамические, изменяющиеся данные.

По сути, ценность React как библиотеки JavaScript описана в ее названии; он обеспечивает быструю, динамическую и удобную для пользователя адаптацию или реакций, , в зависимости от того, как пользователь взаимодействует с веб-сайтом.React автоматически обновляет DOM и отвечает на запросы пользователя. Есть несколько технологий JavaScript, которые вы можете использовать в качестве фронтенд-разработчика, но React очень популярен, потому что он может использовать JavaScript для создания HTML, а не для улучшения и уточнения HTML, который уже существует.

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

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

Java популярна по нескольким причинам. Во-первых, это повсеместно; Программа на основе Java будет работать на любом компьютере, на котором установлена ​​среда выполнения Java (JRE), и большинство компьютеров это делает. Windows, Macintosh, Linux и даже большинство мобильных операций запускают JRE, что упрощает для подавляющего большинства клиентов выполнение программы JavaScript. Это делает его идеальным языком для разработки мобильных приложений, финансовых инструментов и корпоративных веб-сервисов.

Вторая причина популярности Java — это дизайн.Java — это объектно-ориентированный язык программирования, что означает, что он использует программные «объекты» для представления и определения поведения как реальных объектов, так и абстрактных концепций. Дуг Лоу и Барри Берд приводят пример в «Java для чайников»: «Предположим, вы пишете программу расчета заработной платы. Этой программе нужны объекты, представляющие сотрудников компании. Итак, программа включает класс (вероятно, с именем Employee), который определяет данные и методы для каждого объекта Employee. Затем, когда ваша программа запускается, она использует этот класс для создания объекта для каждого сотрудника вашей компании.Таким образом, создавая «объект», разработчики Java могут определять деятельность по расчету заработной платы для каждого сотрудника.

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

Конечно, решение проблем — это не технический навык, такой как HTML, CSS, JavaScript или их многочисленные реализации и библиотеки, но тем не менее он необходим для фронтенд-разработки. Как говорят эксперты: «Умение решать проблемы, не связанные с разработкой, часто означает, что вы тоже умеете решать проблемы с кодом.В большинстве случаев хорошее решение проблем — это просто разбить большое дело на более мелкие части и решать их по очереди ».

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

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

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

Получить информацию о программе

Высший уровень образования? Наивысший уровень образования? Некоторая средняя школа Диплом средней школы или степень GEDAssociate Степень бакалавра Некоторые выпускные курсовые работы Степень магистра Предпочтительно не говорить

Как скоро вы хотите начать? Немедленно В течение 6 месяцев Через 6-12 месяцев Через год и более

я хочу Я хочу…Что лучше всего описывает вашу цель? Начать новую карьеруПереключить карьеруПродвинуть текущую карьеруНачать / развивать бизнесПредпочтительно не говоритьДругоеНачать новую карьеруИзменить карьерный путьДалее моя карьераСтать предпринимателемНедавний выпускник, Первая работаНе говоритьДругое

10 вещей, которые веб-разработчики должны изучить в 2021 году

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

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

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

В этот список входят языки программирования, такие как javascript, язык разметки, например HTML, инструменты стилизации, такие как CSS, фреймворк, например React, IDE, например VSCode, инструменты, такие как Chrome Developer Tools, NPM и Webpack, а также инструменты REST API, такие как Postman и GraphQL, лучше способ разработки API.

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

1.HTML (HTML 5)

В настоящее время очень редко кто-либо может создать веб-страницу, написав HTML. Вместо этого большая часть веб-страницы, которую вы видите, создается продвинутым фреймворком, таким как Angular и React.Тем не менее, если вы хотите понимать, отлаживать и решать проблемы, вы должны знать основные теги HTML, такие как div, span, title, заголовки и т. Д.

Даже если вы знаете HTML, обновитесь до последней разработки. , а если вы хотите начать с нуля, я предлагаю вам присоединиться к курсу Learn HTML 5 Programming from Scratch на Udemy. Он также охватывает CSS, который мы обсудим далее в списке.

2. Расширенный CSS (Flexbox и Grid)

Как и в случае с HTML, сейчас сложно стилизовать веб-страницы, написав классы CSS вручную, вместо того, чтобы многие люди и команда использовали такие фреймворки, как Bootstrap, Tailwind CSS, Materialize и т. Д. Как и HMTL, CSS также развивается, и теперь у вас есть такие вещи, как Flexbox и Grid.

Поскольку для любого проекта, над которым вы работаете, абсолютно необходимо выглядеть красивее, вам необходимо изучить CSS.Если вы новичок, я предлагаю вам начать с базового CSS, а затем перейти к новым разработкам, таким как Flexbox и Grid.

Если вам нужен ресурс, я рекомендую Advanced CSS и Sass: Flexbox, Grid, Animations, и многое другое! Курс , который не только охватывает CSS с нуля, но также учит вас Flexbox и Grid, который будет хорошо служить вам в 2021 году.

3. Расширенный JavaScript

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

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

Суть в том, что JavaScript абсолютно необходим для любого веб-разработчика, как внешнего, так и внутреннего интерфейса, и вам обязательно стоит потратить некоторое время на изучение JavaScript в 2021 году. Если вам нужен ресурс, я рекомендую The Complete JavaScript 2021: Build Real Класс Project от Йонаса Шмедтманна на Udemy, отличный курс для углубленного изучения JavaScript. Это одинаково полезно как для новичков, так и для опытных веб-разработчиков.

4. React.js

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

Если вы хотите научиться React в 2021 году и ищете рекомендации, я предлагаю вам присоединиться к курсу Максимилиана The Complete React Guide (with Hooks) , который является самым современным и также охватывает React Hooks и основная концепция, которую необходимо освоить в 2021 году.

5. NPM (диспетчер пакетов узлов)

Например, если вы хотите создавать динамические веб-страницы, вам не нужно писать фреймворк, кто-то уже написал его, и вы можете просто импортировать их для использования в своем проекте.Все это стало возможным благодаря NPM или Node Package Manager. Это крупнейший в мире реестр программного обеспечения, в котором хранится более 800 000 пакетов кода.

Технически NPM — это менеджер пакетов языка программирования JavaScript. Это также менеджер пакетов по умолчанию для Node.js, который предоставляет среду выполнения JavaScript для разработки на стороне сервера.

Он состоит из клиента командной строки, называемого npm, для загрузки этих модулей, а также размещает в сети как общедоступные, так и частные пакеты.Обычно вы изучаете NPM, когда изучаете nodejs, но даже если вы не знаете node, вам следует изучить NPM. Если вам нужен ресурс, я рекомендую Андреа Мид и Роб Персиваль The Complete Node.js Developer Course on Udemy, один из моих любимых курсов для изучения Nodejs с нуля.

6. VSCode

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

У вас есть плагины практически для всего, от разработки внешнего интерфейса до подключения к облачным AWS, Azure и GCP и развертывания вашего приложения.Если вы хотите стать опытным веб-разработчиком в 2021 году, я предлагаю вам изучить VSCode в 2021 году, а если вы уже знаете, просто узнайте больше, например, ярлыки, новые расширения и т. Д. Если вам нужен ресурс, тогда John Papa’s The Visual Studio Лучше всего начать с курса Code на Pluralsight.

7. Инструменты разработчика Chrome

Сейчас почти 70% веб-страниц просматривается с помощью Chrome. Многие веб-разработчики не знают, что в Chrome есть встроенный инструмент отладки, известный как Chrome Developer Tool. Вы можете получить к нему доступ, щелкнув правой кнопкой мыши и выбрав «Проверить».

Этот инструмент позволяет не только просматривать необработанный HTML, но и CSS, библиотеки JavaScript и многое другое. Вы даже можете изменять классы CSS на лету и экспериментировать с внешним видом. Я настоятельно рекомендую вам изучить этот инструмент подробно, и если вам нужен ресурс, я рекомендую курс D evTools Pro: от начинающих до эксперта на Udemy.Это хороший курс для начинающих, чтобы начать работу с инструментом разработчика Chrome.

8. Почтальон

Неважно, подключаетесь ли вы к внутреннему API или к внешним API, предлагаемым Google, Facebook, Amazon и многими другими платежными шлюзами, Postman необходим для их изучения и понимания.Это также отличный инструмент для тестирования ваших собственных API.

Почтальон можно получить как расширение Chrome или настольный клиент. Опять же, я настоятельно рекомендую вам изучить Postman, если вам нужен ресурс, ознакомьтесь с этим полным руководством Postman: REST API Testing , написанным Валентином Деспа на Udemy.

9. Адаптивный веб-дизайн

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

Скорее всего, это будет обработано за вас фреймворком, но знание того, как это работает, необходимо для устранения неполадок и поддержки вашего веб-проекта. Если вы хотите изучить адаптивный веб-дизайн в 2021 году, я предлагаю вам взглянуть на курс Йонаса Шмедтманна «Создание адаптивных веб-сайтов реального мира с HTML5 и CSS3 » на Udemy.

10. GraphQL

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

GraphQL решает эту проблему и уже обеспечивает новый уровень разработки API. Если вы хотите быть на шаг впереди, я рекомендую вам изучить GraphQL в 2021 году, а если вам нужен ресурс, я предлагаю вам взглянуть на курс GraphQL с React: The Complete Guide , созданный не кем иным, как Стивеном Грайдером. , один из лучших инструкторов Удеми.

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

Тем не менее, они продолжают развиваться, например, в CSS теперь есть FlexBox и Grid, в JavaScript есть ES6 и WebAssembly, и т. Д. Потратив некоторое время на то, чтобы быть в курсе последних событий, вы сможете стать лучшим веб-разработчиком.

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

Другие Статьи о веб-разработке , которые могут вам понравиться

PS — Если вы полный новичок не только в веб-разработке, но и в мире программирования, но хотите стать веб-разработчиком в 2021 году, то я также предлагаю вам присоединиться к The Complete Web Developer в 2021 году: от нуля до мастерства конечно на Удеми. Это один из самых всеобъемлющих и самых современных ресурсов для изучения веб-разработки в 2021 году.

10 тенденций, о которых следует знать разработчикам фронтендов в 2021 году

Ни одна другая дисциплина веб-разработки не развивается так быстро, как фронтенд-разработка. Быть в курсе последних технологий и идей может быть пугающей и трудоемкой задачей. Несколько лет назад разработчику внешнего интерфейса нужно было знать только HTML, CSS и JavaScript, но по мере того, как веб-браузеры становились все более и более способными, появилась модель для переноса традиционной серверной работы в браузер — домен FED. Столкнувшись с этим постоянно меняющимся ландшафтом и постоянно растущей экосистемой, этих важных навыков, которые все еще необходимы, уже недостаточно.Чтобы помочь вам найти какое-то направление в 2021 году, Switch составил список (без определенного порядка) некоторых тенденций, о которых должен знать фронтенд-разработчик.

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

11 лучших интерфейсных технологий для использования в 2021 году

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

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

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

В качестве иллюстрации, в течение следующего десятилетия, особенно в период 2019-2029 годов, , прогнозируемые темпы роста занятости для веб-разработчиков и цифровых дизайнеров составляют 8% .

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

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

1. JavaScript
2. HTML
3. CSS
4. React
5. React Native
6. Angular
7. Flutter
8. NPM
9. Vue.js
10. Ionic
11. BootStrap

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

Что такое Front-End разработка?

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

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

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

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

Для успешной фронтенд-разработки необходимо несколько важных навыков.Например, ориентированный на мобильные устройства и адаптивный веб-дизайн (RWD) — это два подхода к дизайну, которые стремятся соответствующим образом согласовать элементы дизайна с экранами разных размеров.

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

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

Веб-разработка, в частности, требует определенной комбинации основных инструментов для создания внешнего интерфейса.А именно, HTML, CSS и JavaScript составляют основу интерфейсной веб-разработки .

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

11 лучших интерфейсных технологий для использования в 2021 году

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

1. JavaScript

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

Динамический описывает контент, который может быть изменен, тогда как статический контент неподвижен.

До появления JavaScript Интернет в целом был статичным по своей природе.Веб-страница была просто блоком текста.

Затем появился JavaScript, обеспечивающий интерактивность, такую ​​как прокрутка, щелчок и многое другое.

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

2. HTML

Язык разметки гипертекста (HTML), наряду с JavaScript и CSS, является фундаментальной веб-технологией.

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

HTML5, выпущенный в 2014 году, позволил HTML изначально включать мультимедийные элементы, такие как видео и аудио. Более или менее, эта разработка устранила необходимость в Adobe Flash Player и подобных плагинах.

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

3. CSS

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

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

4. React

React или ReactJS — это интерфейсная библиотека JavaScript для создания пользовательских интерфейсов и компонентов пользовательского интерфейса. React был разработан и поддерживается небольшой командой разработчиков в Facebook.

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

React использует классическую архитектуру модель-представление-контроллер (MVC). В шаблоне MVC существует разделение задач между уровнем представления и уровнем доступа к данным.

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

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

Объектные модели документов (DOM) — это интерфейсы прикладного программирования (API), которые обрабатывают способ доступа к документу и управления им. Модель DOM работает с документами XML и HTML, рассматривая их как древовидную структуру, в которой каждый элемент HTML работает как объект.

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

5. React Native

React Native — это фреймворк для мобильных приложений, также являющийся потомком Facebook. С помощью React Native мобильные разработчики могут создавать приложения для Android, iOS и множества других платформ от macOS до AndroidTV.

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

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

Но само название, React Native, предполагает, что Марк Цукерберг — печально известный создатель Facebook — очень уверен в потенциале React Native.

Другими примечательными особенностями React Native являются возможность повторного использования кода и быстрое обновление.

Конечно, возможность повторного использования кода означает способность React Native совместно использовать код между несколькими платформами.

Быстрое обновление позволяет разработчикам React Native сразу же видеть изменения по мере их внедрения.

6. Angular

Angular — это среда веб-приложений TypeScript и надежный компонент технического стека MEAN — или MongoDB, Express.js, Angular и Node.js.

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

Вместо MVC в Angular используется шаблон проектирования модель-представление-модель (MVVM).Шаблон MVVM также отличает графический пользовательский интерфейс от бизнес-логики.

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

Помимо своей архитектуры, Angular представляет собой довольно универсальный фреймворк. Вы можете создавать прогрессивные веб-приложения или использовать фреймворк с такими технологиями, как Cordova, Ionic или NativeScripy, для создания почти нативных мобильных приложений.

Вы также можете использовать Angular для создания настольных приложений на платформах Mac, Windows и Linux.

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

7. Flutter

Flutter — это набор средств разработки программного обеспечения (SDK) пользовательского интерфейса, любезно предоставленный Google. Наряду с Flutter, разработчики используют быстрый язык программирования Dart и находчивый графический движок Skia для создания кроссплатформенных приложений .

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

Естественно, эти атрибуты Flutter резко сокращают время разработки кода. Более того, готовые к использованию виджеты Flutter заметно настраиваются и помогают сэкономить время.

8. npm

Node Package Manager, стилизованный, как правило, просто под npm, является менеджером пакетов для JavaScript.

npm — это менеджер пакетов по умолчанию для Node.js. Node.js — это среда выполнения JavaScript, позволяющая разработчикам использовать JavaScript для внутренней разработки.

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

Имея более 350 000 пакетов, npm представляет собой типичную интерфейсную технологию, с помощью которой разработчики JavaScript могут делиться своим кодом и повторно использовать код других разработчиков.

9. Vue.js

Vue.js — это прогрессивный JavaScript-фреймворк MVVM. Будучи прогрессивным, Vue.js поощряет постепенное внедрение .

Другими словами, Vue.js запускает разработчиков только с уровня представления. Любая другая структура программного обеспечения должна быть добавлена ​​вместе с поддерживающими библиотеками и пакетами.

Дизайнер Vue.js Эван Вы создали проект после использования AngularJS. Он решил извлечь лучшие функции из Angular и создать что-то легкое.

Разработчикам нравится Vue.js, потому что он легко завершает небольшие проекты и так же легко масштабируется вверх.

10. Ionic

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

Разработчики могут использовать преимущества различных интерфейсных технологий, таких как Angular, React или Vue.js с Ionic во главе, для создания пользовательских интерфейсов.

Плагины Cordova и Capacitor играют равную роль в ловкости Ionic. В них встроены встроенные функции операционной системы, такие как GPS, камера, фонарик и т. Д.

Разработка приложений для упаковки в Cordova или Capacitor объединяет простое создание пользовательского интерфейса с обширными собственными инструментами.

11. BootStrap

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

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

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

Заключение

Front-end разработка — неотъемлемый компонент для создания практически любого программного обеспечения. Независимо от того, знакомы ли вы с тонкостями разработки программного обеспечения или нет, интерфейсные технологии будут играть большую роль в продукте, который вы в конечном итоге выпустите для активной клиентской базы.

Использование правильных интерфейсных технологий определит ваше положение на рынке. Использование JavaScript, CSS и HTML является обязательным условием для интерфейсной веб-разработки, но какие еще инструменты помогут реализовать ваш проект в нужном направлении?

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

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

Front-end Developer Handbook 2019 — Изучите всю практику разработки JavaScript, CSS и HTML!

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

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

Содержание справочника отдает предпочтение веб-технологиям (HTML, CSS, DOM и JavaScript) и тем решениям, которые непосредственно построены на основе этих открытых технологий.Материалы, на которые ссылаются и обсуждаются в книге, являются либо лучшими в своем классе, либо текущим предложением проблемы.

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

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

Глава 0 дает краткий обзор года в области фронтенд-разработки и того, что может быть в будущем. Главы 1 и 2 призваны дать краткий обзор дисциплины и практики фронтенд-разработки. В главах 3 и 4 систематизируются и рекомендуются пути обучения и ресурсы. В главе 5 собраны и перечислены инструменты, используемые разработчиками интерфейса, а в главе 6 выделены информационные центры интерфейса.

Глава 1. Что такое Front-end разработчик?

В этой главе дается базовое объяснение интерфейсной разработки и дисциплины интерфейсного разработчика.

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

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

https: // en.wikipedia.org/wiki/Front-end_web_development

Источник изображения: https://www.upwork.com/hiring/development/front-end-developer/

Интерфейсный разработчик …

Интерфейсный разработчик проектирует и разрабатывает веб-сайты и веб-приложения с использованием веб-технологий (например, HTML, CSS и JavaScript), которые обычно работают на открытой веб-платформе или действуют как входные данные компиляции для сред, не относящихся к веб-платформе (например, React Родные).

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

Веб-браузеры (наиболее распространенные)

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

Наиболее распространенные веб-браузеры (сначала показаны в порядке наиболее часто используемых):

Безголовые браузеры

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

Наиболее распространенные браузеры без головы:

Веб-просмотры

Webviews используются собственной ОС в собственном приложении для запуска веб-страниц. Думайте о веб-просмотре как о iframe или отдельной вкладке веб-браузера, встроенной в собственное приложение, работающее на устройстве (например,g., iOS, android, windows).

Наиболее распространенные решения для разработки webview:

• Кордова (обычно для встроенных приложений для телефонов / планшетов)
• NW.js (обычно используется для настольных приложений)
• Electron (обычно используется для настольных приложений)

Собственный из Web Tech

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

Вот некоторые примеры таких сред:

Глава 2. Практика фронтенд-разработки: обзор

В этой главе подробно и широко описывается практика интерфейсной инженерии, начиная с «Как создаются фронтенд-разработчики».

2.1 — Как создаются фронтенд-разработчики

Как именно стать фронтенд-разработчиком? Ну это сложно. Просто рассмотрите эту дорожную карту:

Источник изображения: https://github.com/kamranahmedse/developer-roadmap

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

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

1. Узнайте примерно, как работает веб-платформа. Убедитесь, что вы знаете «что» и «где» в HTML, CSS, DOM, JavaScript, доменах, DNS, URL-адресах, HTTP, браузерах и серверах / хостингах.Пока не углубляйтесь ни в чем, просто постарайтесь понять, какие части играют и как они слабо сочетаются друг с другом. Начните с создания простых веб-страниц.
2. Изучите HTML
3. Изучите CSS
4. Изучите JavaScript
5. Узнать DOM
6. Изучите основы дизайна пользовательского интерфейса (например, шаблоны пользовательского интерфейса, дизайн взаимодействия, дизайн пользовательского интерфейса и удобство использования).
7. Узнать CLI / командную строку
8. Изучите практику разработки программного обеспечения (например, дизайн / архитектура приложений, шаблоны, Git, тестирование, мониторинг, автоматизация, качество кода, методологии разработки).
9. Будьте самоуверенными и настройте свой ящик с инструментами, используя все, что имеет смысл для вашего мозга (например, Webpack, React и Mobx).
10. Изучить Node.js

Короткий совет по обучению. Изучите фактические базовые технологии, прежде чем изучать абстракции.Не изучайте jQuery, изучите DOM. Не изучайте SASS, изучите CSS. Не учите JSX, учите HTML. Не изучайте TypeScript, изучите JavaScript. Не изучайте Handlebars, изучите шаблоны JavaScript ES6. Не просто используйте Bootstrap, изучите шаблоны пользовательского интерфейса.

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

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

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

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

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

2.2 — Заголовки внешних заданий

На протяжении нескольких лет между двумя очень разными типами так называемых интерфейсных разработчиков назревал большой разрыв в сфере интерфейсных разработчиков.С одной стороны, у вас есть программисты, ориентированные на JavaScript, которые пишут JavaScript для интерфейсной среды выполнения, которые, вероятно, обладают навыками в области компьютерных наук с историей разработки программного обеспечения. Они, скорее всего, рассматривают HTML и CSS как абстракцию (например, JSX и CSS в JS). С другой стороны, у вас, скорее всего, есть разработчики, не имеющие образования в области информатики, которые сосредоточены на HTML, CSS и JavaScript, поскольку это конкретно относится к пользовательскому интерфейсу. В 2019 году, когда вы входите или пытаетесь понять пространство фронтенд-разработчика, вы абсолютно почувствуете этот разрыв.Термин «интерфейсный разработчик» находится на грани бессмысленности без уточнения слов, касающихся того, какой тип внешнего разработчика обсуждается.

Ниже приведен список и описание различных должностей внешнего интерфейса (имейте в виду, что названия трудны). Распространенным или наиболее часто используемым (т. Е. Общим) названием для интерфейсного разработчика является «интерфейсный разработчик» или «интерфейсный разработчик». Обратите внимание, что любое задание, содержащее слова «интерфейс», «на стороне клиента», «веб-интерфейс», «HTML», «CSS» или «JavaScript», обычно подразумевает, что человек в некоторой степени владеет HTML, CSS, Ноу-хау профессионалов в области DOM и JavaScript.

Front-End Developer : общее название должности, описывающее разработчика, обладающего определенными навыками в HTML, CSS, DOM и JavaScript и использующего эти технологии на веб-платформе.

Front-End Engineer (также известный как разработчик JavaScript или Full-stack JavaScript Developer) : Должность, присваиваемая разработчику, имеющему образование в области информатики, инженерии, специальности и использующему эти навыки для работы с интерфейсными технологиями.Эта роль обычно требует знаний в области информатики и многолетнего опыта разработки программного обеспечения. Когда слово «Приложение JavaScript» включено в название должности, это означает, что разработчик должен быть продвинутым разработчиком JavaScript, обладающим передовыми навыками программирования, разработки программного обеспечения и приложений (т. Е. Имеет многолетний опыт создания интерфейсных программных приложений). .

Разработчик CSS / HTML : название должности внешнего интерфейса, описывающее разработчика, обладающего навыками работы с HTML и CSS, за исключением JavaScript и приложений, ноу-хау.

Интерфейсный веб-дизайнер : Когда слово «Дизайнер» включено в название должности, это будет означать, что дизайнер будет обладать навыками внешнего интерфейса (например, HTML и CSS), а также профессиональным дизайном (Визуальный дизайн и взаимодействие Дизайн) навыки.

UI (Пользовательский интерфейс) Разработчик / Инженер : Когда слово «Интерфейс» или «UI» включено в название должности, это будет означать, что разработчик должен обладать навыками интерактивного дизайна в дополнение к навыкам фронтенд-разработчика или фронтенду. -кончить инженерные навыки.

Mobile / Tablet Front-End Developer : когда слово «Mobile» или «Tablet» включено в название должности, это будет означать, что разработчик имеет опыт разработки внешних интерфейсов, которые работают на мобильных или планшетных устройствах (изначально или на веб-платформе, т. е. в браузере).

Front-End SEO Expert : Когда слово «SEO» включено в название должности, это означает, что разработчик имеет большой опыт создания интерфейсных технологий для стратегии SEO.

Front-End Accessibility Expert : Когда слово «Accessibility» включено в название должности, это означает, что разработчик имеет обширный опыт создания интерфейсных технологий, которые поддерживают требования и стандарты доступности.

Front-End Dev. Ops : Когда слово «DevOps» включено в название должности, это означает, что разработчик имеет обширный опыт разработки программного обеспечения, относящийся к совместной работе, интеграции, развертыванию, автоматизации и качеству.

Front-End Testing / QA : когда слово «Тестирование» или «QA» включено в название должности, это означает, что разработчик имеет обширный опыт тестирования и управления программным обеспечением, которое включает модульное тестирование, функциональное тестирование, пользовательское тестирование. , и A / B-тестирование.

Примечания:

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

2.3 — Базовые веб-технологии, используемые интерфейсными разработчиками

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

1. Язык гипертекстовой разметки (он же HTML)
2. Каскадные таблицы стилей (также известные как CSS)
3. Унифицированные указатели ресурсов (также известные как URL)
4. Протокол передачи гипертекста (он же HTTP)
5. Язык программирования JavaScript (он же ECMAScript 262)
6. Нотация объектов JavaScript (также известная как JSON)
7. Объектная модель документа (также известная как DOM)
8. Веб-API (также известные как HTML5 и его друзья или API браузера)
9. Руководство по обеспечению доступности веб-контента (также известное как WCAG) и доступное полнофункциональное Интернет-приложение (также известное как ARIA)

Полный список всех веб-спецификаций см. На платформе.html5.org или веб-API MDN.

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

Язык разметки гипертекста (он же HTML)

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

— Википедия

Наиболее важные спецификации / документация:

Каскадные таблицы стилей (также известные как CSS)

Cascading Style Sheets (CSS) — это язык таблиц стилей, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки. Хотя этот язык чаще всего используется для изменения стиля веб-страниц и пользовательских интерфейсов, написанных на HTML и XHTML, он может применяться к любому типу XML-документа, включая простой XML, SVG и XUL.Наряду с HTML и JavaScript, CSS является краеугольной технологией, используемой большинством веб-сайтов для создания визуально привлекательных веб-страниц, пользовательских интерфейсов для веб-приложений и пользовательских интерфейсов для многих мобильных приложений.

— Википедия

Наиболее важные спецификации / документация:

Протокол передачи гипертекста (он же HTTP)

Протокол передачи гипертекста (HTTP) — это прикладной протокол для распределенных совместных гипермедийных информационных систем.HTTP — это основа передачи данных во всемирной паутине.

— Википедия

Наиболее актуальные характеристики:

Унифицированные указатели ресурсов (также известные как URL)

Единый указатель ресурса (URL) (также называемый веб-адресом) — это ссылка на ресурс, которая определяет расположение ресурса в компьютерной сети и механизм его получения. URL-адрес — это особый тип универсального идентификатора ресурса (URI), хотя многие люди используют эти два термина как синонимы.URL-адрес подразумевает средства доступа к указанному ресурсу, что не относится к каждому URI. URL-адреса чаще всего используются для ссылки на веб-страницы (http), но также используются для передачи файлов (ftp), электронной почты (mailto), доступа к базе данных (JDBC) и многих других приложений.

— Википедия

Наиболее актуальные характеристики:

Объектная модель документа (также известная как DOM)

Объектная модель документа (DOM) — это кроссплатформенное и независимое от языка соглашение для представления и взаимодействия с объектами в документах HTML, XHTML и XML.Узлы каждого документа организованы в древовидную структуру, называемую деревом DOM. К объектам в дереве DOM можно обращаться и манипулировать ими с помощью методов для объектов. Открытый интерфейс модели DOM указывается в ее интерфейсе прикладного программирования (API).

— Википедия

Наиболее важные спецификации / документация:

Язык программирования JavaScript (он же ECMAScript 262)

JavaScript — это динамический, нетипизированный и интерпретируемый язык программирования высокого уровня.Он стандартизирован в спецификации языка ECMAScript. Наряду с HTML и CSS, это одна из трех основных технологий производства контента в World Wide Web; большинство веб-сайтов используют его, и он поддерживается всеми современными веб-браузерами без плагинов. JavaScript основан на прототипах с функциями первого класса, что делает его многопарадигмальным языком, поддерживающим объектно-ориентированные, императивные и функциональные стили программирования. Он имеет API для работы с текстом, массивами, датами и регулярными выражениями, но не включает в себя какие-либо средства ввода-вывода, такие как сетевые, хранилища или графические средства, которые зависят от среды хоста, в которую он встроен.

— Википедия

Наиболее важные спецификации / документация:

Веб-API (также известные как HTML5 и другие)

При написании кода для Интернета с использованием JavaScript доступно множество API. Ниже приведен список всех интерфейсов (то есть типов объектов), которые вы можете использовать при разработке своего веб-приложения или сайта.

— Mozilla

Самая важная документация:

Нотация объектов JavaScript (также известная как JSON)

Это основной формат данных, используемый для асинхронной связи между браузером и сервером (AJAJ), в значительной степени заменяющий XML (используемый AJAX).Хотя JSON изначально был заимствован из языка сценариев JavaScript, он является независимым от языка форматом данных. Код для синтаксического анализа и генерации данных JSON доступен на многих языках программирования. Формат JSON был первоначально указан Дугласом Крокфордом. В настоящее время он описывается двумя конкурирующими стандартами: RFC 7159 и ECMA-404. Стандарт ECMA минимален и описывает только разрешенный синтаксис грамматики, тогда как RFC также предоставляет некоторые соображения по семантике и безопасности. Официальный тип интернет-носителя для JSON — application / json.Расширение имени файла JSON — .json.

— Википедия

Наиболее актуальные характеристики:

Рекомендации по обеспечению доступности веб-контента (также известные как WCAG) и доступные полнофункциональные интернет-приложения (также известные как ARIA)

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

— Википедия

2.4 — Возможные навыки фронтенд-разработчика

Источник изображения: http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

Для любого типа профессиональной роли фронтенд-разработчика предполагается от базового до продвинутого понимания HTML, CSS, DOM, JavaScript, HTTP / URL и веб-браузеров.

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

• Системы управления контентом (также известные как CMS)
• Node.js
• Кроссбраузерное тестирование
• Кросс-платформенное тестирование
• Модульное тестирование
• Тестирование на разных устройствах
• Доступность / WAI-ARIA
• Поисковая оптимизация (SEO)
• Дизайн взаимодействия или пользовательского интерфейса
• Пользовательский опыт
• Удобство использования
• Системы электронной торговли
• Портальные системы
• Каркас
• Макет CSS / сетки
• DOM Manipulation (e.г., jQuery)
• Производительность мобильного Интернета
• Нагрузочные испытания
• Тестирование производительности
• Прогрессивное улучшение / постепенное ухудшение
• Контроль версий (например, GIT)
• MVC / MVVM / MV *
• Функциональное программирование
• Форматы данных (например, JSON, XML)
• API данных (например, Restful API)
• Встраивание веб-шрифтов
• Масштабируемая векторная графика (также известная как SVG)
• Регулярные выражения
• Микроданные / микроформаты
• Средство выполнения задач, инструменты сборки, инструменты автоматизации процессов
• Адаптивный веб-дизайн
• Объектно-ориентированное программирование
• Архитектура приложения
• Модули
• Менеджеры зависимостей
• Менеджеры пакетов
• Анимация JavaScript
• Анимация CSS
• Диаграммы / Графики
• Виджеты пользовательского интерфейса
Код
• Проверка качества
• Тестирование покрытия кода
• Анализ сложности кода
• Интеграционное тестирование
• Командная строка / CLI
• Шаблонные стратегии
• Шаблоны движков
• Одностраничные приложения
• Безопасность Интернета / браузера
• Инструменты разработчика браузера

2.5 — Front-End разработчики разрабатывают для …

Интерфейсный разработчик создает HTML, CSS и JS, которые обычно работают на веб-платформе (например, в веб-браузере) и поставляются из одной из следующих операционных систем (также называемых ОС):

Эти операционные системы обычно работают на одном или нескольких из следующих устройств:

• Настольный компьютер
• Ноутбук / нетбук
• Мобильный телефон
• Планшет
• телевизор
• Часы
• Вещи (т.е., все, что вы можете себе представить, машину, холодильник, фары, термостат и т. д.)

Источник изображения: https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/

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

• Веб-браузер (примеры: Chrome, IE, Safari, Firefox).
• Безголовый браузер (примеры: Headless Chromium).
• Вкладка WebView / браузера (подумайте, iframe), встроенная в собственное приложение в качестве среды выполнения с мостом к собственным API. Приложения WebView обычно содержат пользовательский интерфейс, созданный на основе веб-технологий. (то есть HTML, CSS и JS). (примеры: Apache Cordova, NW.js, Electron)
• Собственное приложение, созданное на основе веб-технологий, которое интерпретируется во время выполнения с помощью моста к собственным API.Пользовательский интерфейс будет использовать собственные части пользовательского интерфейса (например, собственные элементы управления iOS), а не веб-технологии. (примеры: NativeScript, React Native)

2.6 — Front-End в команде

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

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

• Визуальный дизайнер (например, шрифты, цвета, интервалы, эмоции, визуальные концепции и темы)
• UI / Interaction Designer / Information Architect (т. Е. Каркасы, определяющие все взаимодействия с пользователем и функциональность UI, структурирование информации)
• Front-End Developer (т.е. пишет код, который выполняется на клиенте / на устройстве)
• Back-End Developer (т. Е. Пишет код, который выполняется на сервере)

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

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

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

• SEO-стратеги
• DevOps-инженеры
• Инженеры по производительности
• Разработчики API
• Администраторы баз данных
• QA-инженеры / тестировщики

2.7 — Универсальный / Full-Stack Myth

Термин «Full-Stack» разработчик приобрел несколько значений. Так много, что при использовании этого термина не ясно ни одно значение. Просто рассмотрите результаты двух опросов, показанных ниже. Эти результаты могут заставить поверить в то, что быть разработчиком полного стека — обычное дело. Но, судя по моему почти 20-летнему опыту, это совсем не так в профессиональном контексте.

Источник изображения: https: // medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz

Источник изображения: https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

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

С прагматической точки зрения, вы должны стремиться быть или нанимать эксперта в одной из этих ролей (например, визуальный дизайн, интерактивный дизайн / IA, Front-end Dev, Back-end Dev). Исключительно редко встречаются те, кто утверждает, что работает на экспертном уровне в одной или нескольких из этих ролей.

Однако, учитывая, что JavaScript проник на все уровни технологического стека (т. Е. Node.js) поиск полнофункционального JS-разработчика, который может кодировать интерфейс и серверную часть, становится менее мифическим. Обычно эти разработчики полного стека имеют дело только с JavaScript. Разработчик, который может кодировать интерфейс, серверную часть, API и базу данных, не так абсурден, как раньше (за исключением визуального дизайна, дизайна взаимодействия и CSS). По-прежнему мифический, на мой взгляд, но не такой необычный, как когда-то. Таким образом, я бы не рекомендовал разработчику стать разработчиком полного цикла. В редких случаях может сработать.Но в качестве общей концепции построения карьеры фронтенд-разработчика я бы сосредоточился на интерфейсных технологиях.

2.8 — Front-End интервью

Подготовка:

Тесты:

Вопросы, которые могут вам задать:

Вопросы, которые вы задаете:

2.9 — Интерфейсные рабочие платы

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

2.10 — Начальная зарплата

В среднем по США для интерфейсного разработчика среднего уровня составляет от 65 до 100 тысяч долларов.

Конечно, когда вы впервые начинаете, ожидайте, что вы выйдете на поле со скоростью около 40 тысяч, в зависимости от местоположения и опыта.

Примечания:

1. Ведущий / старший интерфейсный разработчик / инженер потенциально может жить где угодно (т. Е. Работать удаленно) и зарабатывать более 150 тысяч долларов в год (посетите angel.co, зарегистрируйтесь, просмотрите внешние вакансии на сумму более 150 тысяч долларов или изучите диапазоны заработной платы на сайте Stack Overflow Jobs).

Глава 3. Изучение Front-end Dev: самостоятельные ресурсы / рекомендации

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

Определенные учебные ресурсы (статьи, книги, видео, скринкасты и т. Д..) будут включать как бесплатные, так и платные материалы. Платные материалы будут отмечены [$].

3.1. — Learn Internet / Web

Интернет — это глобальная система взаимосвязанных компьютерных сетей, которые используют набор Интернет-протоколов (TCP / IP) для соединения нескольких миллиардов устройств по всему миру. Это сеть сетей, состоящая из миллионов частных, общественных, академических, деловых и правительственных сетей от локального до глобального, связанных широким спектром электронных, беспроводных и оптических сетевых технологий.Интернет содержит широкий спектр информационных ресурсов и услуг, таких как взаимосвязанные гипертекстовые документы и приложения Всемирной паутины (WWW), электронная почта, телефония и одноранговые сети для обмена файлами.

— Википедия

Источник изображения: https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/

Источник изображения: http: // www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/

3.2. — Изучите веб-браузеры

Веб-браузер (обычно называемый браузером) — это программное приложение для поиска, представления и просмотра информационных ресурсов во всемирной паутине. Информационный ресурс идентифицируется унифицированным идентификатором ресурса (URI / URL) и может быть веб-страницей, изображением, видео или другим фрагментом контента. Гиперссылки, присутствующие в ресурсах, позволяют пользователям легко перемещаться в своих браузерах к связанным ресурсам.Хотя браузеры в первую очередь предназначены для использования Всемирной паутины, их также можно использовать для доступа к информации, предоставляемой веб-серверами в частных сетях или к файлам в файловых системах.

— Википедия

Наиболее часто используемые браузеры (на настольных компьютерах и мобильных устройствах):

1. Chrome (движок: Blink + V8)
2. Firefox (движок: Gecko + SpiderMonkey)
3. Internet Explorer (движок: Trident + Chakra)
4. Safari (движок: Webkit + SquirrelFish)

Источник изображения: http: // gs.statcounter.com/browser-market-share

Развитие браузеров и веб-технологий (т.е. API)

Наиболее часто используемые безголовые браузеры:

Как работают браузеры

Оптимизация для браузеров:

Сравнение браузеров

Хаки для браузера

Разработка для браузеров

В прошлом фронтенд-разработчики тратили много времени на то, чтобы код работал в нескольких разных браузерах.Когда-то это было более серьезной проблемой, чем сегодня. Сегодня абстракции (например, React, Webpack, Post-CSS, Babel и т. Д.) В сочетании с современными браузерами значительно упрощают разработку браузеров. Новая проблема заключается не в том, какой браузер будет использовать пользователь, а в том, на каком устройстве он будет запускать браузер.

Evergreen Browsers

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

Выбор браузера

На сегодняшний день большинство разработчиков интерфейсов используют Chrome и «Chrome Dev Tools» для разработки кода интерфейса. Однако все наиболее часто используемые современные браузеры предлагают некоторые инструменты разработчика. Выбор одного из них для разработки — это субъективный выбор. Более важный вопрос — это знать, какие браузеры и на каких устройствах нужно поддерживать, а затем провести соответствующее тестирование.

3.3 — Изучите систему доменных имен (также известную как DNS)

Система доменных имен (DNS) — это иерархическая распределенная система именования компьютеров, служб или любых ресурсов, подключенных к Интернету или частной сети. Он связывает различную информацию с доменными именами, присвоенными каждой из участвующих организаций. Наиболее заметно то, что он переводит доменные имена, которые люди могут легко запомнить, в числовые IP-адреса, необходимые для использования компьютерных служб и устройств по всему миру.Система доменных имен является важным компонентом функциональности большинства Интернет-служб, поскольку это основная служба каталогов Интернета.

— Википедия

Источник изображения: http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

3.4 — Изучение HTTP / сетей (включая CORS и WebSockets)

HTTP — Протокол передачи гипертекста (HTTP) — это прикладной протокол для распределенных, совместных, гипермедийных информационных систем.HTTP — это основа передачи данных во всемирной паутине.

— Википедия

Спецификации HTTP

HTTP-документы

HTTP-видео / статьи / учебные пособия

Коды состояния HTTP

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

— Википедия

CORS Характеристики

CORS

WebSockets — WebSocket — это протокол, обеспечивающий полнодуплексные каналы связи через одно TCP-соединение. Протокол WebSocket был стандартизирован IETF как RFC 6455 в 2011 году, а API WebSocket в Web IDL стандартизируется W3C.

— Википедия

Веб-сокеты

3.5 — Изучите веб-хостинг

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

— Википедия

Общее обучение:

Источник изображения: https: // firstsiteguide.ru / wp-content / uploads / 2016/06 / what-is-web-hosting-infographic.jpg

3.6 — Изучить общую фронтенд-разработку

3.7 — Изучение пользовательского интерфейса / дизайна взаимодействия

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

— Википедия

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

— Википедия

Дизайн взаимодействия с пользователем — Дизайн взаимодействия с пользователем (UXD, UED или XD) — это процесс повышения удовлетворенности пользователей за счет повышения удобства использования, доступности и удовольствия от взаимодействия между пользователем и продуктом. Дизайн взаимодействия с пользователем включает в себя традиционный дизайн взаимодействия человека с компьютером (HCI) и расширяет его, затрагивая все аспекты продукта или услуги, которые воспринимаются пользователями.

— Википедия

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

— Википедия

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

3.8 — Изучение HTML и CSS

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

— Википедия

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

— Википедия

Подобно строительству дома, можно рассматривать HTML как обрамление, а CSS — как украшение и отделку.

Общее обучение:

Освоение CSS:

Ссылки / Документы:

Глоссарий / Словарь:

Стандарты / спецификации:

Архитектура CSS:

Собрание авторов / архитекторов:

3.9. Изучите поисковую оптимизацию

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

— Википедия

Источник изображения: https://visual.ly/community/infographic/computers/how-does-seo-work

Общее обучение:

3.10 — Изучение JavaScript

JavaScript — это динамический, нетипизированный и интерпретируемый язык программирования высокого уровня. Он стандартизирован в спецификации языка ECMAScript. Наряду с HTML и CSS, это одна из трех основных технологий производства контента в World Wide Web; большинство веб-сайтов используют его, и он поддерживается всеми современными веб-браузерами без плагинов.JavaScript основан на прототипах с функциями первого класса, что делает его многопарадигмальным языком, поддерживающим объектно-ориентированные, императивные и функциональные стили программирования. Он имеет API для работы с текстом, массивами, датами и регулярными выражениями, но не включает в себя какие-либо средства ввода-вывода, такие как сетевые, хранилища или графические средства, которые зависят от среды хоста, в которую он встроен.

— Википедия

Начало работы:

Общее обучение:

Мастеринг:

Функциональный JavaScript:

Ссылки / Документы:

Глоссарий / Энциклопедия / Жаргон:

Стандарты / спецификации:

Стиль:

Устаревшие учебные ресурсы JS:

Обозреватели / визуализаторы JS:

3.11. Изучите DOM, BOM, CSSOM и jQuery

DOM — объектная модель документа (DOM) — это кроссплатформенное и независимое от языка соглашение для представления и взаимодействия с объектами в документах HTML, XHTML и XML. Узлы каждого документа организованы в древовидную структуру, называемую деревом DOM. К объектам в дереве DOM можно обращаться и манипулировать ими с помощью методов для объектов. Открытый интерфейс модели DOM указывается в ее интерфейсе прикладного программирования (API).

— Википедия

BOM — Объектная модель браузера (BOM) — это специфичное для браузера соглашение, относящееся ко всем объектам, предоставляемым веб-браузером. В отличие от объектной модели документа, здесь нет стандарта реализации и строгого определения, поэтому поставщики браузеров могут реализовывать спецификации любым способом.

— Википедия

jQuery — jQuery — это кроссплатформенная библиотека JavaScript, предназначенная для упрощения клиентских сценариев HTML.jQuery — самая популярная библиотека JavaScript, используемая сегодня, ее устанавливают на 65% из 10 миллионов сайтов с наибольшим посещаемостью в Интернете. jQuery — бесплатное программное обеспечение с открытым исходным кодом, распространяемое по лицензии MIT.

— Википедия

Идеальный путь, но, безусловно, самый сложный, — сначала изучить JavaScript, затем DOM, а затем jQuery. Однако делайте то, что разумно для вашего мозга. Большинство интерфейсных разработчиков изучают JavaScript, а затем DOM, сначала изучая jQuery.Какой бы путь вы ни выбрали, просто убедитесь, что JavaScript, DOM и jQuery не превратились в черный ящик.

Общее обучение:

Мастеринг:

Ссылки / Документы:

Стандарты / спецификации:

3.12 — Изучение веб-анимации

Общее обучение:

Стандарты / спецификации:

3.13 — Изучение веб-шрифтов, значков и изображений

Веб-типографика относится к использованию шрифтов во всемирной паутине.Когда HTML был впервые создан, шрифты и стили шрифтов контролировались исключительно настройками каждого веб-браузера. Механизма для управления отображением шрифтов на отдельных веб-страницах не существовало, пока в 1995 году Netscape не представила тег , который затем был стандартизирован в спецификации HTML 3.2. Однако шрифт, указанный тегом, должен был быть установлен на компьютере пользователя, иначе можно было бы использовать резервный шрифт, например шрифт без засечек или моноширинный шрифт браузера по умолчанию. Первая спецификация каскадных таблиц стилей была опубликована в 1996 году и обеспечивала те же возможности.

Спецификация CSS2 была выпущена в 1998 году и была предпринята попытка улучшить процесс выбора шрифта, добавив сопоставление шрифтов, синтез и загрузку. Эти методы не получили широкого применения и были удалены в спецификации CSS2.1. Однако Internet Explorer добавил поддержку функции загрузки шрифтов в версии 4.0, выпущенной в 1997 году. Загрузка шрифтов была позже включена в модуль шрифтов CSS3 и с тех пор реализована в Safari 3.1, Opera 10 и Mozilla Firefox 3.5. Впоследствии это повысило интерес к веб-типографике, а также к использованию загрузки шрифтов.

— Википедия

Шрифтов:

Иконки:

Изображений:

3.14 — Доступность обучения

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

Доступность можно рассматривать как «возможность доступа» и получение выгоды от некоторой системы или объекта. Концепция направлена ​​на обеспечение доступа для людей с ограниченными возможностями или особыми потребностями или обеспечение доступа с помощью вспомогательных технологий; однако исследования и разработки в области доступности приносят пользу каждому.

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

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

— Википедия

Общее обучение:

Стандарты / спецификации:

3.15. Изучите веб-интерфейсы и API-интерфейсы браузера

Источник изображения: http://www.evolutionoftheweb.com/

BOM (объектная модель браузера) и DOM (объектная модель документа) — не единственные API-интерфейсы браузера, которые доступны на веб-платформе внутри браузеров. Все, что не является конкретно DOM или BOM, но является интерфейсом для программирования браузера, можно рассматривать как веб-интерфейс или API-интерфейс браузера (к сожалению, в прошлом некоторые из этих API-интерфейсов назывались API-интерфейсами HTML5, что путает их собственные особенности / стандартизацию с фактическим HTML5. спецификацию, определяющую язык разметки HTML5).Обратите внимание, что веб-интерфейсы или API-интерфейсы браузера включают в себя API-интерфейсы устройств (например, Navigator.getBattery () ), которые доступны через браузер на планшетах и ​​телефонах.

Вы должны знать и изучать, где это уместно, веб-интерфейсы / API-интерфейсы браузера. Хороший инструмент для ознакомления со всеми этими API — это исследование результатов HTML5test.com для 5 самых современных браузеров.

MDN содержит много информации об API-интерфейсах веб / браузеров.

Имейте в виду, что не все API указаны W3C или WHATWG.

Помимо MDN, вы можете найти следующие ресурсы, полезные для изучения всех веб-интерфейсов и API-интерфейсов браузера:

3.16 — Изучение JSON (нотация объектов JavaScript)

JSON (канонически произносится как нотация объектов JavaScript) — это открытый стандартный формат, в котором используется читаемый человеком текст для передачи объектов данных, состоящих из пар атрибут-значение. Это основной формат данных, используемый для асинхронной связи между браузером и сервером (AJAJ), в значительной степени заменяющий XML (используемый AJAX).

Несмотря на то, что JSON изначально был заимствован из языка сценариев JavaScript, он не зависит от языка. Код для синтаксического анализа и генерации данных JSON доступен на многих языках программирования.

Формат JSON был первоначально указан Дугласом Крокфордом. В настоящее время он описывается двумя конкурирующими стандартами: RFC 7159 и ECMA-404. Стандарт ECMA минимален и описывает только разрешенный синтаксис грамматики, тогда как RFC также предоставляет некоторые соображения по семантике и безопасности.Официальный тип интернет-носителя для JSON — application / json. Расширение имени файла JSON — .json.

— Википедия

Общее обучение:

Ссылки / Документы:

Стандарты / спецификации:

Архитектор:

3.17 — Изучение шаблонов JS

Обычно используется шаблон JavaScript, но не всегда с решением MV * для разделения частей представления (т.е.д., пользовательский интерфейс) из логики и модели (т.е. данных или JSON).

Обратите внимание, что в JavaScript 2015 (он же ES6) добавлен собственный механизм шаблонов, называемый «Строки шаблонов». Кроме того, в последнее время шаблоны были заменены такими вещами, как JSX, элемент шаблона или строки HTML.

Если бы я не использовал React и JSX, я бы сначала обратился к JavaScript «Строки шаблонов», а когда этого не хватало, переходил на нанджаки.

3.18 — Изучение генераторов статических сайтов

Генераторы статических сайтов, обычно написанные с использованием серверного кода (т.е.e., ruby, php, python, nodeJS и т. д.), создают статические файлы HTML из статических текстов / данных + шаблонов, которые предназначены для статической отправки с сервера клиенту без динамического характера.

Общее обучение:

3.19 — Изучите информатику с помощью JS

3.20 — Изучение архитектуры внешнего приложения

Общее обучение:

Устаревшие учебные материалы:

В последнее время не так много общего контента создается по этой теме.Большая часть контента, предлагаемого для обучения созданию интерфейсных / SPA / JavaScript-приложений, предполагает, что вы выбрали такой инструмент, как Angular, Ember, React или Aurelia.

Мой совет, в 2019 изучайте React, Mobx и Apollo / graphql.

3.21 — Изучение данных (например, JSON) API Design

3.22 — Изучите React

Реакция обучения:

Реакция мастеринга:

Когда вы хорошо освоите React, переходите к изучению более надежного решения для управления состоянием, такого как MobX.Если вы опытный разработчик со знаниями функционального программирования, посмотрите Redux. Если вам нужна помощь в понимании роли управления состоянием помимо React , смотрите setState , «Расширенное управление состоянием в React (с участием Redux и MobX)».

3.23 — Изучите управление состоянием приложений

3.24 — Изучите прогрессивное веб-приложение

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

В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел ввели термин «прогрессивные веб-приложения» для описания приложений, использующих преимущества новых функций, поддерживаемых современными браузерами, включая сервис-воркеров и манифесты веб-приложений, которые позволяют пользователям обновлять веб-приложения до первоклассные приложения в своей родной ОС.

По данным Google Developers, эти характеристики составляют:

• Progressive — Работайте для каждого пользователя, независимо от выбора браузера, потому что они созданы с прогрессивным улучшением как основной принцип.
• Адаптивный — подходит для любого форм-фактора: настольный компьютер, мобильный телефон, планшет или формы, которые еще не появились.
• Независимость от подключения — сервисные работники позволяют работать в автономном режиме или в сетях низкого качества.
• App-like — Почувствуйте себя приложением для пользователя с взаимодействиями и навигацией в стиле приложения.
• Fresh — Всегда в актуальном состоянии благодаря процессу обновления сервис-воркера.
• Safe — обслуживается через HTTPS, чтобы предотвратить отслеживание и гарантировать, что контент не был подделан.
• Discoverable — идентифицируются как «приложения» благодаря манифестам W3C [6] и области регистрации сервис-воркеров, позволяющей поисковым системам находить их.
• Повторное вовлечение — упростите повторное вовлечение с помощью таких функций, как push-уведомления.
• Installable — Позволяет пользователям «сохранять» приложения, которые они считают наиболее полезными, на своем домашнем экране без хлопот, связанных с магазином приложений.
• Linkable — Легко делится через URL и не требует сложной установки.

— Википедия

3.25 — Изучите дизайн JS API

3.26 — Изучение инструментов веб-разработчика браузера

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

Инструменты веб-разработки поставляются как надстройки браузера или встроенные функции в веб-браузеры. Самые популярные сегодня веб-браузеры, такие как Google Chrome, Firefox, Opera, Internet Explorer и Safari, имеют встроенные инструменты, помогающие веб-разработчикам, а многие дополнительные надстройки можно найти в соответствующих центрах загрузки подключаемых модулей.

Инструменты веб-разработки позволяют разработчикам работать с различными веб-технологиями, включая HTML, CSS, DOM, JavaScript и другие компоненты, которые обрабатываются веб-браузером.Из-за растущего спроса со стороны веб-браузеров на более популярные веб-браузеры были включены дополнительные функции, предназначенные для разработчиков.

— Википедия

Хотя большинство браузеров оснащены инструментами веб-разработчика, инструменты разработчика Chrome в настоящее время являются наиболее обсуждаемыми и широко используемыми.

Я бы посоветовал изучить и использовать инструменты веб-разработчика Chrome просто потому, что лучшие ресурсы для изучения инструментов веб-разработчика относятся к Chrome DevTools.

Изучите инструменты веб-разработчика Chrome:

Инструменты веб-разработчика Chrome Документы:

3.27 — Изучение командной строки (она же CLI)

Интерфейс командной строки или интерпретатор командного языка (CLI), также известный как пользовательский интерфейс командной строки, консольный пользовательский интерфейс и символьный пользовательский интерфейс (CUI), представляет собой средство взаимодействия с компьютерной программой, в которой пользователь (или клиент) ) выдает команды программе в виде последовательных строк текста (командных строк).

— Википедия

Общее обучение:

Мастеринг:

3.28 — Изучить Node.js

Node.js — это кроссплатформенная среда выполнения с открытым исходным кодом для разработки серверных веб-приложений. Приложения Node.js написаны на JavaScript и могут запускаться в среде выполнения Node.js в OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z и IBM i.Его работа размещается и поддерживается фондом Node.js, совместным проектом Linux Foundation.

Node.js предоставляет архитектуру, управляемую событиями, и неблокирующий API ввода-вывода, предназначенные для оптимизации пропускной способности и масштабируемости приложения для веб-приложений в реальном времени. Он использует движок Google V8 JavaScript для выполнения кода, и большой процент базовых модулей написан на JavaScript. Node.js содержит встроенную библиотеку, позволяющую приложениям работать как веб-сервер без программного обеспечения, такого как Apache HTTP Server, Nginx или IIS.

— Википедия

Общее обучение:

3.29 — Модули обучения

Общее обучение:

Ссылки / Документы:

3.30 — Изучить загрузчики / сборщики модулей

Webpack:

Накопительный пакет:

Посылка

3.31 — Изучить диспетчер пакетов

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

— Википедия

Общее обучение:

3.32 — Изучение управления версиями

Компонент управления конфигурацией программного обеспечения, контроля версий, также известный как контроль версий или контроль версий, представляет собой управление изменениями в документах, компьютерных программах, крупных веб-сайтах и ​​других коллекциях информации.Изменения обычно обозначаются числовым или буквенным кодом, называемым «номером ревизии», «уровнем ревизии» или просто «ревизией». Например, начальный набор файлов — «версия 1». Когда сделано первое изменение, результирующим набором будет «версия 2» и так далее. Каждая ревизия связана с меткой времени и лицом, вносящим изменение. Редакции можно сравнивать, восстанавливать и объединять с файлами некоторых типов.

— Википедия

Наиболее распространенным решением, используемым сегодня для контроля версий, является Git.Узнать его!

Общее обучение:

Мастеринг:

Ссылки / Документы:

3.33 — Изучите автоматизацию сборки и задач

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

— Википедия

Общее обучение:

Ссылки / Документы:

Gulp отличный.Однако вам может потребоваться только npm run . Прежде чем переходить к дополнительным сложностям в стеке вашего приложения, спросите себя, может ли npm run выполнить эту работу. Если вам нужно больше, используйте Gulp.

Чтение:

3.34 — Изучите оптимизацию производительности сайта

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

— Википедия

Общее обучение:

3.35 — Обучение тестированию

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

— Википедия

Функциональное тестирование — Функциональное тестирование — это процесс обеспечения качества (QA) и тип тестирования «черного ящика», в котором тестовые примеры основываются на спецификациях тестируемого компонента программного обеспечения. Функции тестируются путем подачи им входных данных и изучения выходных данных, а внутренняя структура программы редко рассматривается (в отличие от тестирования методом белого ящика).Функциональное тестирование обычно описывает, что делает система.

— Википедия

Тестирование интеграции — Тестирование интеграции (иногда называемое интеграцией и тестированием, сокращенно I&T) — это этап тестирования программного обеспечения, на котором отдельные программные модули объединяются и тестируются как группа. Это происходит после модульного тестирования и перед проверочным тестированием. Интеграционное тестирование принимает в качестве входных модулей, которые прошли модульное тестирование, группирует их в более крупные агрегаты, применяет тесты, определенные в плане интеграционного тестирования, к этим агрегатам и предоставляет в качестве своих выходных данных интегрированную систему, готовую для системного тестирования.

— Википедия

Общее обучение:

3.36 — Изучите безголовые браузеры

Безголовый браузер — это веб-браузер без графического пользовательского интерфейса.

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

— Википедия

PhantomJS больше не поддерживается, вмешивается Headless Chrome.

3.37 — Обучение автономной разработке

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

Общее обучение:

3.38 — Изучите безопасность веб-сайтов / браузеров / приложений

3.39 — Изучите разработку на нескольких устройствах

Источник изображения: http://bradfrost.com/blog/post/this-is-the-web/

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

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

  No related posts.