Что такое адаптивная верстка? Преимущества мобильного адаптивного дизайна Почему адаптивный дизайн важен для бизнеса Как создать адаптивный дизайн Плавающая Сетка (Fluid Grid) Гибкий текст и изображения Медиа-запросы Пользовательское тестирование адаптивных сайтов Браузерное и устройство-зависимое тестирование на адаптивный дизайн Вдохновение от других адаптивных сайтов Будущее адаптивного дизайна для мобильных устройств Является ли ваш сайт Mobile-Friendly? Подводя итоги От редакции ITVDN Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне. Требования к адаптивной верстке включают в себя такие элементы дизайна, как: читаемый текст без необходимости его увеличения; достаточное количество места для целей касания (tap targets); отсутствие горизонтальной прокрутки. На сегодня уже почти 4 миллиарда пользователей используют смартфоны для серфинга в Интернете. Веб-сайты, не оптимизированные для всех небольших экранов смартфонов, имеют рейтинг в поисковых системах ниже тех, что выполнены адаптивно. Более 50% поисковых запросов в Интернете теперь происходит с мобильного устройства. Чтобы ваш веб-сайт мог работать с карманными устройствами (не создавая отдельное приложение), вам для начала стоит признать – адаптивная вёрстка важна для пользователей смартфонов. Давайте рассмотрим более детально, почему и как это происходит. Прежде всего ... а что такое адаптивная верстка и мобильный дизайн, и почему вы вообще должны о них заботиться?   Что такое адаптивная верстка? Адаптивный веб-дизайн (RWD - Responsive web design) создает систему, позволяющую одному сайту (с одним URL-адресом и одним источником контента) реагировать и адаптироваться к размерам устройства пользователя. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства. По-сути, благодаря адаптивной верстке, ваш веб-сайт будет отлично выглядеть и хорошо работать как на настольном компьютере (или ноутбуке), так и на планшете, и в браузере мобильного телефона. В прошлом разработчики создавали более одного сайта, для соответствия страниц экранам разных размеров. С учетом того, что на рынке сегодня представлено много типов устройств, это кажется совершенно неэффективным… верно? Сам термин «адаптивная верстка» был фактически придуман в 2010 году веб-дизайнером Итаном Маркоттом. Сегодня адаптивная верстка в веб-дизайне уже не новая тенденция, а скорее проверенный временем способ мышления, стоящий за созданием сайтов. На сегодня наличие адаптивного веб-сайта больше не является еще одной возможностью для развития вашей инфраструктуры — это уже необходимость! Преимущества мобильного адаптивного дизайна Преимущество адаптивного макета номер один— это получение гарантии того, что любой пользователь на любом устройстве будет иметь наилучшие возможности взаимодействия с контентом на вашем сайте. Адаптивная верстка веб-сайта также является отличным способом улучшить контент на вашем сайте. Вы сможете убедиться, что те, кто использует мобильное устройство, видят всю важную информацию. Благодаря особенностям алгоритма Google, адаптивный веб-дизайн повышает видимость сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах. Сайт с качественным представлением контента на мобильном устройстве будет находиться в результатах поиска выше, чем сайт, хорошо отображающий контент только на десктопах.   Почему адаптивный дизайн важен для бизнеса Расширяется охват клиентов благодаря захвату пользователей небольших устройств (планшетов и смартфонов); Постоянный опыт работы с широкой аудиторией, который может увеличить количество потенциальных клиентов, продажи и конверсии; Аналитика, отслеживание и отчетность по версиям сайтов для десктопов и мобильных устройств могут быть в одном месте; Затраты времени и стоимость управления контентом снижается; Более 60 % запросов в Google на конец первого квартала 2019 делаются с мобильных устройств. Обратите внимание, что есть еще два способа, с помощью которых можно обеспечить взаимодействие пользователя с сайтом через мобильные приложения. Первый называется динамическим показом (Dynamic Serving), в котором используется один и тот же URL-адрес, но разные коды HTML и CSS. Страницы распознают устройство, на котором они просматриваются, и предоставляют соответствующий код. Второй способ — это вообще отдельный мобильный сайт. Когда пользователи посещают сайт с мобильного устройства, они отправляются на другой - мобильный URL-адрес. Вам следует выяснить, какой вариант лучше всего подходит для вашего присутствия в Интернете, прежде чем остановиться на одном. Учтите, что на Google ежедневно приходится более 5,6 миллиардов поисковых запросов. Рекомендуемая Google конфигурация для сайтов, оптимизированных для смартфонов, - это сайты с адаптивным веб-дизайном. Google даже предлагает тест на адаптивность сайта под мобильные устройства, чтобы вы могли увидеть, насколько легко посетитель может использовать вашу страницу на мобильном устройстве. Вы просто вводите URL страницы и получаете оценку. Как создать адаптивный дизайн Как сделать адаптивную верстку? Есть несколько моментов, о которых стоит подумать при создании адаптивного макета. Это процесс, который требует определенной системы проектирования и иерархии контента среди различных устройств. Три основных компонента адаптивного веб-дизайна включают в себя: Гибкая (плавающая) сетка - fluid grid; Гибкий текст и изображения; Медиа-запросы. Рассмотрим каждый из этих элементов детальнее.   Плавающая Сетка (Fluid Grid) Сетка является ключевым элементом для создания адаптивного макета. На сегодня сетки уже не являются чем-то новым. Веб-дизайнеры использовали сетки для создания веб-сайтов с самого начала. Однако в прошлом эти сетки имели фиксированную ширину и не позволяли поддерживать плавную компоновку. Гибкая сетка, используемая для адаптивных веб-сайтов, обеспечит вам гибкость и масштабируемость дизайна. Элементы будут иметь постоянный интервал, пропорции и смогут настраиваться на определенную ширину экрана в процентах. Гибкий текст и изображения Способ отображения текста зависит от того, на каком устройстве пользователь просматривает ваш сайт. Однако текст должен оставаться читаемым, несмотря ни на что. На адаптивных веб-сайтах есть возможность увеличить размер шрифта и высоту строки (расстояние между каждой строкой текста) для удобочитаемости. Гибкий текст и изображения настраиваются в пределах ширины макета, в соответствии с иерархией содержимого, заданной с помощью CSS (таблицы стилей). Текст на сайте с адаптивной версткой теперь может быть разборчивым независимо от устройства конечного пользователя. Благодаря гибкому контейнеру (внутри сетки) текст может переноситься с увеличением размера шрифта на небольших устройствах. Гибкие изображения могут оказаться более сложными из-за времени загрузки в небольших браузерах устройств. Но эти изображения могут масштабироваться, обрезаться или исчезать в зависимости от того, какой контент необходим для мобильных устройств. Медиа-запросы Медиа-запросы - это код, который обеспечивает гибкость макета на адаптивных веб-сайтах. Медиа-запросы определяют код CSS, который будет применен соответственно, в зависимости от размеров и ориентации устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. д.). Медиа-запросы допускают существование несколько макетов дизайна, которые будут использовать одну и ту же HTML-кодированную веб-страницу. Все три указанных элемента являются основой адаптивной верстки. Однако есть и другие важные средства, которые могут помочь определить акценты и усовершенствовать адаптивный веб-дизайн ваших сайтов для мобильных устройств. Обратите внимание на: Пользовательское тестирование адаптивных сайтов Информация о том, как пользователи взаимодействуют с вашим сайтом, - бесценна и точно стоит того, чтобы заплатить за ее получение. Существует множество способов провести пользовательское тестирование, чтобы получить максимально полезную обратную связь. Такие сайты, как UserTesting.com, предоставляют пользователям тестирование за небольшую плату или бесплатно. Различные методы, такие как тестирование in-the-wild и карточная сортировка (Card Sorting), также могут помочь обнаружить неожиданные болевые точки и слабые места в использовании вашего продукта.   Браузерное и устройство-зависимое тестирование на адаптивный дизайн Убедитесь, что ваш адаптивный дизайн и верстка совместимы со всеми соответствующими браузерами и сохраняет целостность вашего пользовательского опыта и дизайна. Не полагайтесь только на изменение размеров окна браузера при тестировании адаптивного веб-дизайна для мобильных устройств. Попробуйте просмотреть сайт на как можно большем количестве физических устройств. Вы будете удивлены тем, что можно обнаружить при переходе от одной операционной системы к другой, от одного устройства – к другому.   Вдохновение от других адаптивных сайтов Точно также, как и выполняя любой другой дизайн-проект, обратитесь к опыту других людей. Найдите другие адаптивные веб-сайты, которые творчески обыгрывают концепцию адаптивного веб-дизайн. Задумайтесь над следующими вопросами: Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах? Почему вы предпочитаете один сайт другим, которые могут предоставлять аналогичные услуги? Предпочитаете ли вы использовать их на смартфоне или на настольном компьютере? Поиск ответов на эти вопросы может помочь вам найти слабые места, которые вы, возможно, никогда не замечали, во время ежедневного использования своего вебсайта. Будущее адаптивного дизайна для мобильных устройств Мы знаем, что Google требует следующих оптимизированных элементов для эффективного взаимодействия с пользователями мобильных интерфейсов, используя адаптивный веб-дизайн: Текст, с читаемым размером без необходимости его принудительного увеличения; Контент, который умещается на экране устройства, без необходимости горизонтальной прокрутки; Ссылки и кнопки, расположенные на достаточном расстоянии друг от друга, чтобы не было затруднений в работе с интерфейсом; Разумное время загрузки страниц; Не используйте Flash! Эти правила адаптивной верстки очень важно соблюдать. Рост числа мобильных устройств — это только начало перехода к более удобному использованию Интернета. Нужно быть уверенными, что пользователи могут просматривать ваш сайт в любом месте на любом устройстве, самые разнообразные мобильные носимые устройства становятся все более популярными. Важным моментом будет учитывать современные размеры гаджетов, чтобы понимать в вашей адаптивной верстке какие разрешения учитывать. К примеру, на 2019 год все еще лидирующим остается разрешение экранов - 360х640. Является ли ваш сайт Mobile-Friendly? Пройдите тест Google, чтобы узнать, насколько адаптирован ваш сайт для мобильных устройств. Ваш сайт получил зеленый свет? Отлично, значит вы прошли тест Google на адаптивность. Вы уже прочитали выше причины, почему адаптивный дизайн важен для пользователей вашего сайта. Вместо зеленого видите большие красные иксы? Значит вам следует начать предпринимать определенные шаги для оптимизации работы вашего сайта под пользователей мобильных устройств. Помните, что изменения в алгоритмах Google и требованиях к адаптивному дизайну в настоящее время мало учитывают планшеты, но, если вы сделаете ваш сайт полностью адаптивным - вы будете впереди тех конкурентов, которые этого еще не сделали!   Подводя итоги Согласно требованиям сегодняшнего времени, ваш веб-сайт должен отлично выглядеть и хорошо работать как на настольном компьютере, так и на планшете, и в браузере смартфона. Адаптивный веб-дизайн может помочь вам достичь этого. В этой статье мы ответили на общий вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: плавающая сетка, гибкий текст и изображения и медиазапросы. Помните о важности адаптивного веб-дизайна для вашего бизнеса.  Выполнение вашего сайта по всем правилам адаптивной верстки поможет вам: Увеличить охват потребителей на всех устройствах; Поддерживать постоянный качественный пользовательский опыт, который увеличивает удержание аудитории на сайте; Консолидировать данные аналитики, отслеживания и отчетности; Сократить время и стоимость управления контентом; Конкурировать в своей отрасли с другими брендами. Google привлекает к коммерческим сайтам более 85% трафика мобильного поиска и рекомендует применять на ваших сайтах адаптивный дизайн. Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает улучшить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего сайта. Увеличение трафика приводит к лучшей генерации потенциальных клиентов, дополнительным конверсиям и увеличению продаж - три основные причины, по которым вам нужен адаптивный веб-дизайн!   От редакции ITVDN Мы с вами рассмотрели необходимость адаптивной верстки для каждого современного сайта. Такой подход является конкурентным преимуществом для компании из любой сферы бизнеса. Если говорить о разработчике, то навыки создания адаптивных web-сайтов будут существенным конкурентным преимуществом при поиске работы. Специальные знания и навыки вы можете получить, обучаясь по видео курсам ITVDN. В первую очередь это курсы: HTML5&CSS3 Advanced Практический курс по верстке лендинга Создание адаптивного сайта с Bootstrap 3 Также вам могут быть интересны другие курсы и технологии, которые входят в программу обучения по специальностям Верстальщик сайтов и FrontEnd разработчик. По материалам статьи за авторством Сони Грегори.

Готовы ли вы к внедрению инноваций в ваши веб-приложения в 2019 году? Представляем вам последние тренды веб-разработки, которым, безусловно, стоит следовать! Стандарты веб-разработки часто меняются быстрее, чем их успевают внедрять. Чтобы всегда быть на шаг впереди, важно сосредоточиться на тенденциях, методах и подходах, которые только набирают популярность. Мы проанализировали тренды в разных отраслях, чтобы сформировать этот окончательный список тенденций в веб-разработке на 2019 год. В качестве бонуса, вам также представлен топ лучших стеков веб-технологий, достойных вашего внимания в следующем году. Не будем тратить время на долгие вступления. Все тренды здесь:   Голосовой поиск В настоящее время мы наблюдаем начало эры голосового поиска. Каждый смартфон уже оснащен цифровым голосовым помощником (Siri для iPhone, Google Assistant для телефонов на базе Android). Более того, набирают популярность умные колонки с искусственным интеллектом. В чем причина такого внимания к голосовым интерфейсам? Простота использования. Голосовое общение - это то, что нам не нужно изучать. Таким образом, дети и пожилые могут взаимодействовать с голосовыми интерфейсами без каких-либо сложностей в  обучении. Доступность. Цифровые голосовые помощники уже стали привычной функцией смартфона. Интеллектуальные колонки пока не так распространены, но цена от 50 долларов - отличная предпосылка для экспансии. К 2020 году ожидается, что 50% всех поисковых запросов будут осуществляться посредством голоса. Внедрение голосового поиска сейчас является одной из основных тенденций в e-commerce. Тем не менее, это также применимо к любому другому бизнесу в Интернете. Если вы хотите, чтобы ваше веб-приложение было найдено, оптимизируйте его для работы с голосовым поиском как можно скорее. Также мы рекомендуем рассмотреть возможность разработки собственного приложения для умных колонок. Это даст вам еще один канал для формирования лояльной аудитории и увеличения продаж.   WebAssembly   При создании веб-приложения производительность приложения обычно является компромиссом с кроссплатформенностью. Ограничения JavaScript делают тяжелые вычисления медленными, и это существенно влияет на производительность для пользователя. Именно поэтому большинство популярных игр и мощных приложений доступны только в качестве десктопного приложения. Формат WebAssembly может быть применен, чтобы изменить эту ситуацию. Этот новый формат ориентирован на нативную производительность среди веб-приложений. С помощью WebAssembly, код на любом языке программирования может быть скомпилирован в байт-код, который запускается в браузере. Код WebAssembly выполняется быстрее, чем код на JavaScript. В результате использования WebAssembly, вы сможете писать критически важные для приложения части на наиболее подходящем языке (C / C ++ / C # / Rust / Kotlin и т. Д.). WebAssembly сам позаботится о выполнении кода в браузере. Нативные приложения теперь можно запускать сразу в браузере. Это означает доступ к большему количеству пользователей, благодаря предложенной им сопоставимой с десктопной производительностью в сети без дополнительных затрат на разработку! Основная проблема с WebAssembly заключается в том, что еще не все браузеры поддерживают его. Однако скоро это изменится. Веб-приложения становятся более мощными с WebAssembly. Эту технологию определенно стоит попробовать. Машинное обучение в веб-разработке Технологии искусственного интеллекта, включая машинное обучение, уже давно влияют на наше поведение в Интернете, хотя, зачастую, это происходит незаметно для нас. Это основной момент применения машинного обучения – улучшение взаимодействия пользователя с приложением. Машинное обучение - это способность программного обеспечения повышать производительность без непосредственного участия разработчиков. По сути, программное обеспечение анализирует входящие данные, выявляет закономерности, принимает решения и улучшает свою работу. К примеру, компания Airbnb применила машинное обучение для настройки результатов поиска потенциальными гостями мест поселения. С помощью специфического алгоритма, компания хотела повысить вероятность того, что владелец жилья примет запрос от потенциального гостя. Алгоритмы машинного обучения должны были анализировать решения о принятии запросов каждого владельца. Пользуясь итогами такого анализа, компания смогла предоставить клиентам результаты поиска, которые стали полезными им с большей вероятностью. A / B-тестирование показало увеличение конверсии на 3,75%. В результате все запросы от пользователей Airbnb теперь обрабатываются в соответствии с этим алгоритмом, который повышает удовлетворенность клиентов и увеличивает доход. Отличный пример внедрения, не правда ли? Но это еще не всё! Применение естественного языка и распознавания изображений могут улучшить общие впечатления пользователя от использования сервиса. Машинное обучение позволяет компьютеру правильно интерпретировать данные и принимать обоснованные решения. Машинное обучение уже используется в веб-приложениях в различных отраслях, таких как здравоохранение, финансы, образование, сельское хозяйство и т. д. Эта технология предлагает существенные усовершенствования, которые было бы трудно достичь без технологий ИИ. Машинное обучение становится важной частью любого веб-сервиса. Важно, чтобы и вы попробовали найти применение для этой технологии в своих сервисах! Анализируйте поведение посетителей вашего веб-сайта и настраивайте под них отображаемый контент. Они никогда не узнают, что вы применяете к ним некий алгоритм, но их возросшая удовлетворенность контентом приведет к увеличению их вовлеченности и к увеличению конверсии! Машинное обучение может стать вашим секретным оружием, чтобы переиграть ваших конкурентов!   Безопасность данных Чем больше данных обрабатывает ваше веб-приложение, тем больше оно привлекает внимание киберпреступников. Они стремятся нарушить работу ваших сервисов и украсть данные ваших пользователей или внутреннюю информацию компании. Это может дорого обойтись и вам, и вашей репутации. Безопасность вашего веб-сервиса должна стать вашим главным приоритетом. Итак, чтобы сохранить пользовательские данные в 2019 году, следуйте этим советам: Никогда не пренебрегайте тестированием безопасности. Тестирование безопасности должно проводиться уже на этапе разработки, благодаря чему оно может предотвратить утечку данных. Каждое изменение в вашем веб-приложении должно быть явно протестировано. Используйте инструменты мониторинга сайта. Алгоритмы анализа поведенческих факторов помогут вам постоянно отслеживать все запросы, а также выявлять и квалифицировать подозрительные действия. Своевременное выявление угрозы позволит вашей команде вовремя среагировать и защитить веб-приложение от преступников. Тщательно выбирайте сторонние сервисы. Программное обеспечение SaaS (англ. software as a service — программное обеспечение как услуга, прим. переводчика) становится все более популярным, поскольку делает разработку приложений проще и быстрее. Однако вы должны убедиться, что поставщик услуг, с которым вы работаете, заслуживает доверия. Шифрование конфиденциальных данных. Даже если преступник сможет получить доступ к вашей базе данных, он не сможет извлечь какую-либо пользу из конфиденциальных данных, хранящихся там в зашифрованном виде.     Блокчейн в веб-разработке Несмотря на то, что блокчейн утратил часть доверия к себе из-за нестабильности обменных курсов криптовалют, мы должны признать - эта технология уже бесповоротно вошла в нашу жизнь. И хотя эта технология впервые была применена в сфере настольных компьютеров - блокчейн уже уверенно проникает и в WEB. Blockchain кошельки переместились с нативных настольных приложений в веб-приложения. Они идеально подходят для хранения небольших сумм криптовалют и предлагают улучшение удобства использования. Поскольку популярность веб-кошельков продолжает расти, вам следует рассмотреть и применение этой сферы технологий. Другая реализация технологии блокчейна называется dapps или децентрализованные приложения. Уникальная особенность таких приложений - хранение логики сервера и базы данных в блокчейне. В результате ни одна организация не может контролировать приложение (например, Facebook, Google и т. д.). Dapps изначально работали как настольные приложения. Но в настоящее время они тоже переходят в WEB. Во всем мире сеть стремится к децентрализации, поэтому популярность dapps, скорее всего, возрастет. Ethereum, самая популярная платформа с открытым исходным кодом для блокчейн-проектов, выпустила библиотеку JavaScript web3.js. Эта библиотека позволяет легко разрабатывать клиентов, которые взаимодействуют с блокчейном Ethereum различными способами, такими как: создание интеллектуальных контрактов, запись и чтение данных из смарт-контрактов, передача криптовалюты между двумя учетными записями и многое другое. Библиотека Web3 также доступна для других языков программирования, включая Python, Java, PHP, Swift, Scala и т. д. Таки образом создание децентрализованных приложений с удобными веб-интерфейсами становится проще. Очевидно, что пик ажиотажа вокруг технологии блокчейна уже прошел. Но это значит только, что пришло время приступить к серьезной разработке мощных решений, которые смогут использовать большинство преимуществ этой технологии. Может быть, именно ваш проект станет следующим ньюсмейкером?     Прогрессивные веб-приложения (PWA) и ускоренные мобильные страницы (AMP) Google отдает приоритет тем веб-приложениям, которые быстро загружаются на мобильных устройствах. Именно поэтому вам следует рассмотреть возможность внедрения PWA или AMP, которые являются уникальными технологиями, сокращающими время загрузки веб-страницы. Прогрессивное веб-приложение (PWA) - это веб-страница, которая воспроизводит привычный мобильный интерфейс. Это технология работает быстро, может работать как постоянно онлайн, так и с плохим подключением к интернету, и является относительно дешевой. PWA поддерживает взаимодействие, позволяя пользователям наслаждаться высококачественными возможностями приложений, даже не осознавая, что они используют их через браузер. Приложения E-commerce являются частым примером использования этой технологии. Ускоренная мобильная страница (AMP) работает только для статического контента, но загружается быстрее, чем обычный HTML. AMP пропускает все модные элементы и отображает только важную информацию - текст, изображения и т. д. Этот подход отлично подходит для блогов и новостных изданий. Нужно ли вам применять PWA или AMP, зависит от вашего конкретного случая. Тем не менее, вам следует начать рассматривать эти технологии прямо сейчас. Наряду с улучшением качества предоставляемой услуги, у вас есть шанс значительно поднять свой рейтинг в результатах поиска.     Интернет вещей Какие устройства вы в основном используете для доступа в интернет? Скорее всего, это ноутбук и смартфон. Тем не менее, сегодня подключаться к Интернету может гораздо большее количество устройств. Да, мы имеем в виду Интернет вещей или IoT, для краткости. В настоящее время многие устройства оснащаются экраном. Благодаря такой тенденции, веб-приложения, оптимизированные для отображения данных на смарт-часах, холодильниках, интеллектуальных колонках и т. д., станут более востребованными. Адаптированность к мобильным интерфейсам больше не является трендом, уже являясь обязательным элементом работы приложения. Тенденция 2019 года - адаптация веб-приложений для маленьких экранов. Motion UI Motion Design - один из главных трендов веб-дизайна будущего года. Минималистичный дизайн, в сочетании со сложными взаимодействиями, выглядит стильно и привлекает внимание пользователя. Переходы в хедере страницы, удобные подсказки, анимированные диаграммы, фоновая анимация и модульная прокрутка. Эти, и многие другие элементы, помогут вам отобразить свой уникальный стиль и завлечь пользователя, улучшая поведенческие факторы и помогая вашему веб-приложению занять более высокое место в результатах поиска.     Стэк технологий для разработки веб-приложений   Крайне важно работать с последними проверенными технологиями. Таким способом вы сможете гарантировать, что разработанное программное обеспечение соответствует требованиям рынка и остается актуальным в течение нескольких лет. А вот и самые популярные технологии 2019 года:   Технологии front-end   Ангуляр Впервые мы услышали об AngularJS в 2010 году. Уже через 6 лет, в 2016 году, фреймворк был полностью переписан и вышел под названием Angular 2. На конец 2018 года последней стабильной версией является Angular 7. Angular - это фреймворк Model-View-Controller (MVC). Три отдельных компонента позволяют писать хорошо структурированный и простой в поддержке код. Двунаправленная привязка данных удобна для простых приложений - любые изменения в модели будут немедленно внедрены в представление и наоборот. Однако если вы работаете над сложным проектом, однонаправленная привязка данных сэкономит ваше время и ресурсы. Чтобы использовать Angular максимально эффективно, вам придется использовать Typescript. Вам также следует помнить, что фреймворк работает только с обычным DOM, что создает некоторые ограничения. Стек MEAN – является одним из самых популярных. Он включает в себя: MongoDB - база данных; Express.js - веб-фреймворк; Angular – фронтэнд фреймворк; Node.js – бэкенд. Очевидным преимуществом этого стека является то, что все его компоненты используют JavaScript. В результате собрать команду разработчиков (или нанять одного разработчика full-stack JavaScript) не будет проблемой.   React.js В описанном стеке Angular часто заменяется на React - библиотеку Javascript. Стек MERN является относительно молодым, но растущая популярность React поспособствовала быстрому росту его популярности. React превосходит по своим возможностям Angular благодаря виртуальному DOM, который позволяет быстрее и проще вносить изменения. Однако, поскольку React является библиотекой, а не фреймворком, что ограничивает основные функциональные возможности, разработчикам приходится работать со сторонними сервисами. Также стоит упомянуть, что React использует JSX - модификацию JavaScript, которая обеспечивает бесшовную совместимость компонентов. Таким образом, знание JSX является предпочтительным, если вы хотите максимально использовать стек MERN и особенно React.   Vue.js Vue.js является более молодым JS фреймворком, но за последние несколько лет он продемонстрировал невероятный рост популярности. Частично это связано с тем, что это облегченное решение. По сравнению с монолитом, подобным Angular, он предлагает только базовую функциональность «из коробки». Используя сторонние сервисы, эта функциональность расширяется. В результате нет необходимости обрабатывать избыточный код, как в случае с Angular. Как вы, вероятно, догадались, Vue.js также используется вместе с MongoDB, Express.js и Node.js как часть стека MEVN.     Технологии Back-end: Как правило, сложно выбрать между пользовательской конфигурацией бэкенд разработки и backend-as-a-service. Оба варианта имеют свои плюсы и минусы, и выбор зависит от деталей проекта. Мы не будем сейчас вдаваться в подробности, так как существуют отдельные статьи, сравнивающие mBaaS и пользовательский бэкенд - ознакомьтесь с ними, чтобы узнать больше по этой теме. Здесь мы рассмотрим самые популярные решения для пользовательского бэкенда.   Node.js Node.js является важным компонентом всех вышеописанных стеков веб-разработки. Это среда выполнения приложений, которая используется для создания приложений на стороне сервера. Работа с Node.js требует знания JavaScript. По этой причине он часто используется в стеках вместе с инфраструктурой внешнего интерфейса JS.   Django Django - это веб-фреймворк Python. Он может использоваться в основном с любым фронтенд фреймворком (включая описанные выше). Он также является хорошим решением для любых типов веб-сайтов из-за множества доступных сторонних пакетов. С ростом популярности Python стоит рассмотреть Django для серверной части вашего веб-приложения.   Laravel PHP -  широко используемый язык программирования бэкенда, а Laravel - один из самых популярных PHP фреймворков. Laravel отлично работает с Vue.js. Тем не менее, Angular и React также хорошо подходят для разработки веб-приложений с Laravel.   Заключение Попытки угнаться за последними трендами могут показаться излишне сложными, так как тренды меняются очень быстро. Но почему бы не попробовать? Следуя последним тенденциям в веб-разработке, вы сможете порадовать своих пользователей контентом мирового уровня, повысить рейтинг ваших веб-приложений и открыть для своих услуг новые рынки! В течение следующих нескольких лет голосовой поиск укрепит свои позиции и заставит поставщиков услуг адаптироваться к новой реальности. Подходя к этому с умом, вы можете оказаться в числе первых компаний, которые обращаются к вашим клиентам с помощью голосового поиска. Звучит заманчиво, не правда ли? Безопасность пользовательских данных уже давно вызывает сомнения. Это проблема, которой нельзя пренебрегать, если вы хотите быть лидером рынка. Блокчейн - это технология со многими приложениями в веб-разработке, так почему бы не исследовать ее возможности на ранней стадии ее появления? Говоря в общем, каждый тренд 2019 года заслуживает вашего внимания. Некоторые из них будут актуальными в течение нескольких лет, а некоторые станут обыденностью уже через несколько месяцев. Так что не стесняйтесь начинать реализовывать их как можно скорее. Автор: София Меренич, технический и бизнес писатель. Источник

В этой статье мы расскажем о нововведениях в языке C# 7.0, которые были представлены в марте 2017 года как часть релиза Visual Studio 2017. В C# 7.0 появился целый ряд нововведений и основное внимание уделяется использованию данных, упрощению кода и улучшению производительности. Возможно, самой главной особенностью являются кортежи, которые упрощают получение различных результатов, и сопоставление с шаблоном, что упрощает код, который зависит от формы данных. Существует также множество других нововведений, как значительных, так и не очень. Надеемся, что в совокупности они сделают ваш код более эффективным и точным, а вы при этом будете работать продуктивнее и останетесь довольны результатом. Если вас интересует процесс разработки, который привел к этому набору функций, вы можете найти заметки, предложения и множество обсуждений на эту тему на сайте C# language design GitHub. Если данная информация кажется вам знакомой, это только потому, что релиз предварительной версии состоялся в августе прошлого года. В окончательной версии C# 7.0 изменились некоторые детали, некоторые из них - из-за отличных отзывов на указанную ранее статью. Получайте удовольствие от C# 7.0 и удачного хакинга! Out переменные В более ранних версиях C# использование out параметров является не таким легким, как нам хотелось бы. Прежде чем вызвать метод с out параметрами, сначала необходимо объявить переменные, чтобы перейти к нему. Поскольку вы обычно не инициализируете эти переменные (они все равно будут перезаписаны методом), вы также не можете использовать ключевое слово var, но вам нужно указать полный тип: public void PrintCoordinates(Point p) { int x, y; // have to "predeclare" p.GetCoordinates(out x, out y); WriteLine($"({x}, {y})"); } В C# 7.0 мы добавили out переменные, что позволяет объявлять переменную прямо в точке, где она передается как out аргумент: public void PrintCoordinates(Point p) { p.GetCoordinates(out int x, out int y); WriteLine($"({x}, {y})"); }  Обратите внимание, что переменные находятся в области видимости в окружающем блоке, поэтому последующая строка может их использовать. Многие виды утверждений не устанавливают свою собственную область действия, поэтому out переменные, объявленные в них, часто вводятся в область видимости. Поскольку out переменные объявляются непосредственно в качестве аргументов для out параметров, компилятор может обычно указывать, каков должен быть их тип (если только не существует конфликтующих перегрузок), поэтому вместо типа можно использовать ключевое слово var: p.GetCoordinates(out var x, out var y);  Общим использованием out параметров является шаблон Try..., где логическое возвращаемое значение указывает на успех, а out параметры переносят полученные результаты: public void PrintStars(string s) { if (int.TryParse(s, out var i)) { WriteLine(new string('*', i)); } else { WriteLine("Cloudy - no stars tonight!"); } }  Мы также допускаем «сбрасывание» в качестве out параметров в виде «_», что позволит вам проигнорировать параметры, которые вам не нужны: p.GetCoordinates(out var x, out _); // I only care about x Соответствие с шаблоном В C# 7.0 вводится понятие шаблонов, которые являются синтаксическими элементами, позволяющими проверить соответствие значения определенной «форме» и извлечь информацию из значения, если такое соответствие имеется. Примеры шаблонов в C# 7.0: • Константные шаблоны c (где c – константное выражение в C#), которые проверяют, равняется ли переменная этой константе. • Шаблоны типа T x (где T – тип и x – идентификатор), которые проверяют, имеет ли переменная тип T, и если да, то извлекают значение в новую переменную x типа T. • Var шаблоны var x (где x – идентификатор), которые всегда совпадают и просто помещают значение ввода в новую переменную x с тем же типом. Это только начало; шаблоны являются новым типом элемента языка C#, и в будущем мы обязательно добавим новые шаблоны в C#. В C# 7.0 мы улучшаем две существующие языковые конструкции с шаблонами: • is теперь может использоваться не только с типом, но и с шаблоном; • case в операторе switch теперь может использовать шаблоны, а не только константы. В будущих версиях C#, вероятно, мы добавим больше мест, где можно использовать шаблоны. Шаблоны с is Рассмотрим пример использования is с константным шаблоном и шаблоном типа: public void PrintStars(object o) { if (o is null) return; // constant pattern "null" if (!(o is int i)) return; // type pattern "int i" WriteLine(new string('*', i)); } Как видно из примера, переменные шаблона, представленные шаблоном, аналогичны out переменным, описанным ранее, поэтому могут быть объявлены в середине выражения и использоваться в ближайшей окружающей области. Также как out переменные, переменные шаблона изменяемы. Мы часто ссылаемся на out переменные и переменные шаблона совместно как «переменные выражения». Шаблоны и Try-методы часто используются вместе: if (o is int i || (o is string s && int.TryParse(s, out i)) { /* use i */ } Шаблоны с выражениями switch Мы обобщаем варианты использования switch: • Вы можете использовать любой тип (не только простые типы). • Шаблоны могут использоваться в выражениях case. • Вы можете добавлять дополнительные условия к выражениям case. Вот простой пример: switch(shape) { case Circle c: WriteLine($"circle with radius {c.Radius}"); break; case Rectangle s when (s.Length == s.Height): WriteLine($"{s.Length} x {s.Height} square"); break; case Rectangle r: WriteLine($"{r.Length} x {r.Height} rectangle"); break; default: WriteLine(""); break; case null: throw new ArgumentNullException(nameof(shape)); } Существует несколько особенностей, которые следует отметить в этом новом расширенном выражении switch: • Порядок выражений case теперь имеет значение: как и в случае с выражениями catch, у выражений case выбирается первое по порядку выражение, удовлетворяющее условию. Поэтому важно, чтобы условие квадрата было перед условием прямоугольника. Кроме того, как и в случае с выражениями catch, компилятор поможет вам пометить явные недостижимые условия. До этого вы не могли определить порядок выполнения, так что это не является нарушением существующего поведения. • Условие по умолчанию (default) всегда вычисляется последним: несмотря на то, что после него идет условие null, условие default будет проверено после него. Это сделано для совместимости с существующей семантикой. Однако, как правило, вы помещаете условие default  в конце. • Условие null в конце достижимо, потому что шаблоны типов следуют примеру текущего is  и не срабатывают для null. Это гарантирует, что null значения не будут случайно сопоставлены с первым шаблоном типа; вы должны явно указать, как им управлять (или оставить логику для условия default). Переменные шаблона, объявленные ключевым словом case..., находятся в области видимости только в соответствующем разделе switch. Кортежи Обычно хочется вернуть несколько значений из метода. Все доступные варианты в существующих версиях C# являются менее оптимальными: • Out параметры: использование является неэффективным (даже при использовании рассмотренных нововведений) и они не работают с асинхронными методами. • System.Tuple <...>: выглядит многословным для использования и требует выделения кортежного объекта. • Специальный вид переноса для каждого метода: слишком много кода для типа, единственной целью которого служит временная группировка нескольких значений. • Анонимные типы, возвращаемые через тип возврата dynamic: потери в производительности и отсутствие проверки статического типа. Для упрощения этой задачи в C# 7.0 были добавлены кортежи и литералы кортежей: (string, string, string) LookupName(long id) // tuple return type { ... // retrieve first, middle and last from data storage return (first, middle, last); // tuple literal }  Теперь метод эффективно возвращает три строки, объединенные как элементы кортежа. Вызывающий код метода получит кортеж и может индивидуально иметь доступ к элементам: var names = LookupName(id); WriteLine($"found {names.Item1} {names.Item3}."); Имена полей Item1 и т. д. являются именами по умолчанию для элементов кортежа и могут использоваться всегда. Но они не очень наглядны, поэтому вы можете добавить лучшие имена: (string first, string middle, string last) LookupName(long id) // tuple elements have names Теперь получатель этого кортежа имеет более описательные имена для дальнейшей работы: var names = LookupName(id); WriteLine($"found {names.first} {names.last}."); Вы также можете указать имена элементов непосредственно в литералах кортежей: return (first: first, middle: middle, last: last); // named tuple elements in a literal Как правило, вы можете назначать типы кортежей друг для друга, независимо от их имен: при условии, что отдельные элементы будут присваиваемыми, типы кортежей могут свободно преобразовываться в другие типы кортежей. Кортежи – это типы значений, а их элементы – общедоступные изменяемые поля. Они имеют значение равенства, а это значит, что два кортежа являются равными (и имеют одинаковый хэш-код), если все их элементы попарно равны (и имеют одинаковый хэш-код). Это делает кортежи полезными для различных ситуаций, а не только для возвращения нескольких значений из метода. Например, если вам нужен словарь с составным ключом, используйте кортеж в качестве ключа, и все будет работать правильно. Если вам нужен список с несколькими значениями в каждой позиции, также используйте кортеж для корректной работы. Кортежи полагаются на базовые структурные типы, которые называются ValueTuple <...>. Если вы выявите модель, что еще не включает эти типы, вы можете вместо этого выбрать их с помощью NuGet: • Щелкните правой кнопкой мыши проект в обозревателе решений и выберите «Manage NuGet Packages…». • Выберите вкладку «Browse» и выберите «nuget.org» в качестве «Package source». • Найдите «System.ValueTuple» и установите его. Распаковка кортежей Еще один способ использования кортежа – это его распаковка. Объявление распаковки является синтаксисом для разделения кортежа (или другого значения) на его части и назначения этих частей по отдельности новым переменным: (string first, string middle, string last) = LookupName(id1); // deconstructing declaration WriteLine($"found {first} {last}."); В объявлении распаковки можно использовать ключевое слово var для отдельных переменных: (var first, var middle, var last) = LookupName(id1); // var inside Или даже поместить var перед скобками как аббревиатуру: var (first, middle, last) = LookupName(id1); // var outside Вы также можете распаковать в уже существующие переменные с помощью присвоения распаковки: (first, middle, last) = LookupName(id2); // deconstructing assignment Распаковка выполняется не только для кортежей. Любой тип может быть распакован, если у него есть метод распаковки (образец или расширение): public void Deconstruct(out T1 x1, ..., out Tn xn) { ... } Out параметры соответствуют значениям, которые будут присвоены в результате распаковки. (Почему используются out параметры, а не кортежи? Чтобы можно было иметь несколько перегрузок метода с разным количеством параметров). class Point { public int X { get; } public int Y { get; } public Point(int x, int y) { X = x; Y = y; } public void Deconstruct(out int x, out int y) { x = X; y = Y; } } (var myX, var myY) = GetPoint(); // calls Deconstruct(out myX, out myY); Это будет обычный шаблон для создания «симметричных» конструкторов и методов распаковки таким способом. Так же, как и для out переменных, мы разрешаем «сбрасывать» в распаковке параметры, которые вам не нужны: (var myX, _) = GetPoint(); // I only care about myX Локальные функции Иногда вспомогательная функция имеет смысл только внутри одного метода, в котором вызывается. Теперь вы можете объявить такие функции внутри других функций как локальную функцию: public int Fibonacci(int x) { if (x < 0) throw new ArgumentException("Less negativity please!", nameof(x)); return Fib(x).current; (int current, int previous) Fib(int i) { if (i == 0) return (1, 0); var (p, pp) = Fib(i - 1); return (p + pp, p); } } Параметры и локальные переменные из области видимости доступны для локальной функции так же, как и для лямбда-выражений. В качестве примера рассмотрим методы, реализованные как итераторы, что обычно нуждаются в неитераторном методе-оболочке для точной проверки аргументов в момент их вызова (так как сам итератор не запускается, пока не будет вызван MoveNext). Локальные функции идеально подходят для этого сценария: public IEnumerable Filter(IEnumerable source, Func filter) { if (source == null) throw new ArgumentNullException(nameof(source)); if (filter == null) throw new ArgumentNullException(nameof(filter)); return Iterator(); IEnumerable Iterator() { foreach (var element in source) { if (filter(element)) { yield return element; } } } } Если бы Iterator был приватным методом рядом с Filter, то мог быть доступен для других членов в использовании напрямую (без проверки аргументов). Кроме того, необходимо было бы передавать все те же аргументы, что и Filter, вместо того, чтобы иметь их только в области видимости. Улучшения литералов В C# 7.0 появилась возможность добавлять «_» в качестве разделителя в числовые литералы: var d = 123_456; var x = 0xAB_CD_EF;  Вы можете поместить разделитель в любом месте между цифрами, чтобы улучшить читабельность. Они не влияют на значение. Кроме того, C# 7.0 представляет бинарные литералы, так что вы можете указывать битовые шаблоны непосредственно вместо того, чтобы знать шестнадцатеричную систему наизусть. var b = 0b1010_1011_1100_1101_1110_1111;  Локальные переменные и возвращаемые значения по ссылке Теперь можно не только передать параметры в метод по ссылке в  С# (с помощью ключевого слова ref), но и возвратить данные из метода по ссылке, а также сохранить в локальной переменной тоже по ссылке. public ref int Find(int number, int[] numbers) { for (int i = 0; i < numbers.Length; i++) { if (numbers[i] == number) { return ref numbers[i]; // return the storage location, not the value } } throw new IndexOutOfRangeException($"{nameof(number)} not found"); } int[] array = { 1, 15, -39, 0, 7, 14, -12 }; ref int place = ref Find(7, array); // aliases 7's place in the array place = 9; // replaces 7 with 9 in the array WriteLine(array[4]); // prints 9 Очень удобно передавать ссылки на определенные места в больших структурах данных. Например, в игре информация содержится в большом заранее выделенном массиве структур (во избежание пауз на сбор мусора). Теперь методы могут вернуть ссылку непосредственно на одну из таких структур, с помощью которой вызывающий код может читать и изменять эту структуру. Существуют некоторые ограничения для обеспечения безопасности: • Можно возвращать только ссылки, которые возвращать безопасно: ссылки, переданные в метод и ссылки на поля объектов. • Локальные переменные инициализируются определенной ячейкой памяти и в будущем не меняются. Обобщенные типы асинхронных возвратов До сегодняшнего дня асинхронные методы могли возвращать только void, Task или Task. В C# 7.0 позволяется создавать типы, которые также могут быть возвращены асинхронным методом. Например, можно создать структуру ValueTask, которая поможет избежать создания объекта Task в случае, когда результат асинхронной операции уже доступен в ожидаемое время. Для многих асинхронных сценариев, например, где используется буферизация, такой подход может значительно уменьшить число выделений памяти и таким образом значительно повысить производительность. Конечно, можно придумать и другие ситуации, в которых task-подобные объекты будут полезны. Правильное создание таких типов не будет простой задачей, поэтому мы не ожидаем, что большое количество разработчиков будут создавать их. Однако мы полагаем, что они будут появляться в различных моделях и прикладных интерфейсах, и вызывающий код сможет просто использовать await, как сейчас для Task. Больше членов в виде выражений Методы и свойства в виде выражений используются в C# 6.0, но не все типы членов можно было так объявлять. В C# 7.0 к списку членов в виде выражений добавилась поддержка аксессоров, конструкторов и финализаторов: class Person { private static ConcurrentDictionary names = new ConcurrentDictionary(); private int id = GetId(); public Person(string name) => names.TryAdd(id, name); // constructors ~Person() => names.TryRemove(id, out _); // finalizers public string Name { get => names[id]; // getters set => names[id] = value; // setters } } Это пример функции, которая была предоставлена сообществом, а не командой компилятора Microsoft C#. Ура, открытый код! Throw выражения Выбросить исключение в середине выражения очень легко: достаточно вызвать метод, который это сделает! Но в C# 7 теперь можно использовать throw как часть выражения в определенном месте: class Person { public string Name { get; } public Person(string name) => Name = name ?? throw new ArgumentNullException(nameof(name)); public string GetFirstName() { var parts = Name.Split(" "); return (parts.Length > 0) ? parts[0] : throw new InvalidOperationException("No name!"); } public string GetLastName() => throw new NotImplementedException(); } Источник

Хто такий Embedded-розробник? Сфери застосування Embedded-розробки. Що має знати Embedded-розробник. Як стати Embedded-розробником. Де отримати знання. М’які навички. Ключові тренди в Embedded. Кар’єрні перспективи та заробітна плата Embedded Engineer. Кількість вакансій. Конкуренція. Заробітна плата. Кар’єрні можливості. Висновки. Переважна більшість новачків в Україні обирає тестування або розробку із залученням C#./NET, Java, Python, JavaScript (фронтенд та Node.js). Ці напрямки мають найбільшу кількість вакансій в ІТ, низькі вимоги до вищої освіти, потужну розпіареність майже в усіх навчальних центрах, а також відносно простий перехід в ІТ з будь-якої не айтішної професії. Спеціальність, яку ми сьогодні розглядатимемо, не є настільки популярною, трендовою. Однак вона є не менш важливою за інші ІТ-напрямки. Герой нашої статті займається розробленням вбудованих (embedded) систем, і його іменують Embedded-розробник. Що це за спеціальність, наскільки вона важлива і де використовується, що потрібно вчити для її опанування, як виглядає день Embedded-ера, які кар’єрні перспективи та зарплати у фахівців цього напрямку – розбір цих та інших інтригуючих питань читайте нижче. Хто такий Embedded-розробник? Почнемо з поняття “Embedded система”. Трактування в різних джерелах відрізняється, але якщо звести все під один знаменник – це комп’ютеризована система, яка вбудована у механічну або електронну систему і виконує певну функціональність. Тобто, це система, в якій комп’ютер (як правило мікроконтролер або мікропроцесор) є невід’ємною частиною іншої системи. Як приклад: мікроконтролер у вашій кавовій машині, мікрохвильовці або пральній машинці; пристрій, який забезпечує спрацювання подушок безпеки в автомобілі, контролер у літаку, який збирає певні дані про політ – навіть Bluetooth-навушники містять свою власну вбудовану систему. Відповідно, Embedded-розробник – це спеціаліст, який займається розробкою подібних вбудованих систем, використовуючи програмування (software) та навички роботи із “залізом” (hardware). Життєвий цикл продукту дуже тісно зав’язаний на розробнику вбудованих систем. Обов’язки Embedded-розробника можуть різнитися в залежності від мікроконтролерів / мікросхем / пристроїв тощо, з якими він працює, але основні фази, де відчутна роль цього спеціаліста, наступні: Аналіз вимог. Комунікація з клієнтами, дизайнерами та інженерними командами для визначення функціональних і технічних вимог до вбудованої системи. Проєктування системи. Розроблення архітектури та дизайну вбудованої системи, вибір апаратних та програмних компонентів. Перевірка базової працездатності. Перед початком роботи Embedded розробник повинен перевірити функціонування плати, оновити драйвери за потреби і переконатися, що “залізо” справне. Програмування. Написання програмного коду, вбудованих програм і системних протоколів. Тестування та налагодження. Проведення тестів для перевірки працездатності embedded-системи. Інтеграція. Забезпечення взаємодії вбудованої системи з апаратурою, зовнішніми пристроями та іншими складовими системи. Оптимізація продуктивності. Вдосконалення ефективності та продуктивності вбудованої системи, враховуючи обмежені ресурси. Документація. Формування діагностичних звітів, технічних інструкцій та документації щодо розроблення ПЗ. Також читання форумів, статей та інструкцій до плат та компонентів, з якими ведеться робота. Співпраця з іншими командами. Взаємодія з hardware та software розробниками, участь в різних мітингах, обговореннях, комунікація з замовником тощо. Безпека та надійність. Забезпечення високого рівня безпеки, надійності та працездатності вбудованої системи. Типовий робочий день Embedded-розробника складається з усього потроху: написання та налагодження коду, пошук багів; робота з апаратною начинкою – інколи доводиться і паяльником почаклувати, і щось мультиметром виміряти, і осцилограф застосувати тощо; читання документації, пошук інформації на форумах; тестування вбудованих систем та їхніх складових; код-рев’ю; рефакторинг; взаємодія з командою, керівництвом: мітинги, ділова переписка, зідзвони з певних питань (або живе спілкування) і т. д. Сфери застосування Embedded-розробки Embedded у XXI столітті має гарний приріст затребуваності у зв’язку з розвитком ІТ-індустрії, в особливості – мережевих технологій, операційних систем, мов програмування та внаслідок модернізації “заліза”. Наразі сфера застосування вбудованих систем досить об’ємна: Побутова електроніка. Вбудовані системи є невід’ємними атрибутами затишного житла: це смарт-телевізори, холодильники, мультиварки та інша кухонна електроніка, пристрої безпеки, смарт-девайси для будинку. Машинобудівна промисловість. Embedded технології є ключовими для сучасних транспортних засобів, починаючи від цивільного автопрому і закінчуючи потужними будівельними гуліверами. Вони входять до складу двигунів, навігаційних систем, клімат-контролю, розважальних блоків тощо. Медицина. Сучасна медицина неможлива без комплексного цифрового обладнання, включаючи пристрої моніторингу пацієнтів, системи візуалізації, діагностичні інструменти тощо. Промислова автоматизація. Вбудовані системи використовуються в промислових системах керування, програмованих логічних контролерах (PLC) і робототехніці для автоматизації та керування процесами. Телекомунікації. Вбудовані системи – невід’ємна частина мережевого обладнання, маршрутизаторів, комутаторів і комунікаційних пристроїв для ефективної передачі даних. Аерокосмічна промисловість. Сучасна авіоніка використовує ембедед для керування функціями літака, системами навігації та зв’язку. Якщо хтось хоче тераформувати Марс – без Embedded-у буде дуже важко. Військова галузь. Вбудовані системи відіграють вирішальну роль у оборонних програмах як у мирний час (спостереження, аналіз, прогнозування, наведення тощо), так і під час війни (згадайте ті ж джавеліни, дрони, хаймарси, петріоти і т. д. – там дуже багато електроніки). Розумні мережі. Розвиток розумних мереж (smart grid) підвищує ефективність і надійність розподілу електроенергії. IoT (Інтернет речей). Пристрої IoT значною мірою залежать від вбудованих систем для збору, обробки та передачі даних для різних програм. Приклади: розумний будинок, автоматизовані системи поливу, розумні міста тощо. Що має знати Embedded-розробник В Embedded-і ціла палітра спеціальностей. Наприклад, приставки “Software”, “Firmware” вказують на фокус саме на створенні ПЗ, а "Hardware" та "Hardware Design" – на апаратній частині. Тайтл на кшталт "Embedded Systems Engineer" говорить про необхідність мати однаково гарні hardware та software знання. Також треба розуміти, що в різних компаніях один і той же тайтл може мати під капотом зовсім різні технології в залежності від апаратної начинки, різновиду вбудованої системи абощо. Наш опис необхідних технологій буде охоплювати і апаратне, і програмне крило вимог, що робить його ближчим до тайтлу "Embedded Systems Engineer". Якщо ви хочете більше в software, вивчайте глибше технології, спрямовані на розроблення софту; якщо ж у hardware – більше уваги приділяйте апаратним навичкам. Отже, ми проаналізували тематичні статті, думки популяризаторів ембедеду та вакансії українського ринку, і на виході отримали наступний технологічний стек Embedded девелопера. Математика, фізика, електроніка Найперше ембедед-розробники повинні гарно знати математику та фізику – особливо теми, пов’язані з електротехнічним напрямком, аби гарно розуміти принципи функціонування hardware: розбиратися в начинці плат, вміти  правильно розводити всі сигнали на платі, правильно рахувати всі доріжки, перекриття сигналів, їхню цілісність тощо. Ці знання важливі як під час розроблення, так і на моменті проєктування, тестування, комунікування з іншими колегами і не тільки. Які розділи потрібно знати: базова математика та обчислення; дискретна математика; електричні кола; основи електроніки; цифрова та аналогова мікросхемотехніка; цифрові та логічні схеми; комп’ютерна архітектура. Тестове обладнання Перераховане нижче обладнання ви будете широко використовувати для перевірки працездатності мікросхем, пошуку несправностей тощо. Вам знадобляться наступні інструменти: мультиметр; логічний аналізатор; осцилограф. Мультиметр є досить відомим приладом серед “електротехнарів” – ним вимірюють низку фізичних величин, як-от сила струму, опір, напруга та інші. Логічний аналізатор використовується для роботи з цифровими сигналами в електронних системах, а осцилограф – для візуалізації та дослідження електричних сигналів, а також відображення їхніх параметрів в режимі реального часу. Мікроконтролери Одні з головних об’єктів зацікавленості Embedded-розробників. Під них і пишеться код мовами C/C++ і не тільки. МК являє собою невеликий електронний пристрій з великою кількістю “ніжок”, якими відправляються/приймаються відповідні електричні сигнали. Що важливо знати з цієї теми: GPIO ADC DAC Таймери PWM Переривання Сторожовий таймер (watchdog) Керування тактовою системою (clock management) Кожна модель МК має свої особливості, з якими вам треба буде знайомитися через відповідну документацію. Також вам треба знати периферію обраного вами мікроконтролеру і бібліотеки для керування нею. Найпопулярнішим сімейством МК наразі є STM32. Досвід роботи з Arduino також вітається. RTOS Real Time OS – операційна система реального часу. Надає середовище виконання для програм, які мають строгий графік виконання завдань. Embedded-розробники використовують RTOS для обробки завдань з високою точністю і низькими затримками. Linux Якщо ви плануєте працювати з вбудованими пристроями на базі Linux (а їх зараз дуже багато), вам слід гарно знати і цю операційну систему. Вона має відкритий вихідний код і є безкоштовною. Говорячи про приклади проєктів, лінукс використовує велика кількість систем IoT, промисловий, мережевий, автомобільний, медичний Embedded тощо. Паяльник Так, в даній професії необхідно інколи й паяльником попрацювати. Якісь компоненти можуть потребувати пайки – десь щось вилучити/додати/замінити, поекспериментувати з макетом, зібрати проєкт тощо. Може виникнути будь-яка ситуація на “залізі”, і ембедед-фахівець має бути готовим до цього. Основи програмування Фундамент, який зробить ваш процес програмування продуктивним. Сюди віднесемо наступні теми: алгоритми та структури даних – ембедерам потрібні сильні знання з алгоритміки; шаблони проєктування – так, в ембедеді є свої патерни, які полегшують життя девелоперам, наприклад Opaque Pointer pattern; UML (діаграма стану, state machine) – для моделювання та аналізу поведінки системи. Програмування на C/C++ C/C++ – це потужні мастодонти у світі програмування. В порівнянні з іншими мовами є складнішими у вивченні, натомість дають можливість писати низькорівневий код з високим ступенем контролю “заліза”. Також C/C++ дозволяють напряму керувати пам’яттю (а це дуже важливо при роботі з hard-елементами, які мають досить обмежений ресурс), контролювати велику кількість low-level процесів, а також підходять для програмування широкого спектру “заліза”. Обов’язковий інструмент в скарбничці Embedded-девелопера – можна вивчити або C, або C++, або обидві мови. Інтерфейси та протоколи Обмін інформацією між Embedded-елементами та їхніми складовими здійснюється через спеціальні інтерфейси та протоколи: UART, I2C, SPI – базові, їх треба знати обов’язково; Ethernet, USB – для роботи на високих швидкостях; Bluetooth – дуже відома безпровідна технологія; TCP/IP, UDP – для роботи з мережею; CAN – система, яка використовується в транспортних засобах; Modbus – для роботи на промислових об’єктах. Git Git – система керування версіями проєкту, дуже популярний інструмент під час написання будь-якого коду, оскільки дозволяє відслідковувати зміни в коді, створювати гілки для роботи над різними функціями, ділитися своїм кодом з іншими колегами і навпаки тощо. Agile/Scrum Agile – це сімейство гнучких (agile) методологій розроблення ПЗ, яке сприяє випуску продукту порціями, крок за кроком розширюючи та покращуючи його. Як результат – команда здійснює розроблення відносно невеликими інтервалами, сам продукт постійно покращується, якість коду – підвищується. Познайомитися з Agile вам допоможе відповідний маніфест з детальним описом основних принципів. Scrum є однією з найпопулярніших реалізацій даного підходу, яка часто використовується в багатьох ІТ-командах, в тому числі і під час роботи з вбудованими пристроями. Англійська мова English на рівні вільного читання документації має бути у кожного Embedder-а, оскільки левова частка роботи припадає саме на вичитування матеріалів до тих чи інших мікроконтролерів та супутніх пристроїв. Якщо ж ви будете працювати в команді з іноземцями, то треба підтягнути ще й розмовну англійську. Як стати Embedded-розробником Де отримати знання Є декілька опцій для вивчення розробки вбудованих пристроїв: Можна вчитися самостійно за допомогою безкоштовних ресурсів у вільному доступі: YouTube, roadmap-и з посиланнями на GitHub-і, статті, тематичні форуми, безкоштовні курси та матеріали (MIT OpenCourseWare, embedded.com) тощо. На плати Arduino, паяльник, мультиметр і т. д., звісно, таки доведеться розщедритися. Проходження відео курсів (платно) на Udemy, Coursera, edX, Pluralsight та інших платформах, придбання спеціалізованих книг. Менторинг з боку діючого розробника – найефективніший спосіб навчання, оскільки у вас завжди буде допомога, наставництво, поради, чіткий напрямок руху та необхідні навчальні матеріали. Проходження онлайн/офлайн навчання при компаніях. Такий формат пропонують, наприклад, GlobalLogic, Ajax Systems тощо. Мінуси: потрібна певна база знань перед стартом навчання, а головний плюс – можливість стажування і повноцінного працевлаштування в компанії. Вища освіта в цій спеціальності не завадить, хоч і не є обов’язковою. Потрібну базу ви можете отримати у школі та вищих навчальних закладах на відповідних технічних спеціальностях – там же є і можливість потрапити на стажування, якщо кафедра таке практикує або має відповідні зв’язки з компаніями. Soft skills Вимоги до Embedded-розробників можуть різнитися в плані стеку, але що 100% знадобиться кожному, це наступні “м’які” навички: критичне, алгоритмічне, аналітичне мислення; навички problem-solving; комунікативність, вміння працювати в команді; організованість, зібраність, вміння ефективно розпоряджатися часом; самомотивація; увага до деталей; терпіння та адаптивність; пристрасть до Embedded; бажання постійно розвиватися та вдосконалюватися. Останні три пункти дуже важливі в професії, оскільки ембедед – це непроста галузь, і за 3-6 місяців “увійти в ІТ” не вийде. Потрібно більше зусиль, часу та витримки. Ключові тренди в Embedded ІТ-індустрія рухається вперед, і ембедед не відстає. Проаналізувавши низку ресурсів, ми визначили наступні тренди: Інтеграція штучного інтелекту та машинного навчання в Embedded-системах стає все більш привабливою, що сприяє використанню вбудованими системами інтелектуальних алгоритмів та ML. Ця синергія дозволяє системам адаптуватися до змін в реальному часі, підвищуючи їхню ефективність. Розвиток безпровідних технологій відкриває нові перспективи для вбудованих систем, особливо в областях Інтернету речей (IoT) та безпілотних систем, які керуються віддалено або за допомогою AI. System-on-chip рішення. Інтеграція всіх ключових компонентів системи на одному чіпі (SoC) продовжує набирати оберти та використовуватися різними бізнесами. Їхня компактність в сукупності з високою продуктивністю, дешевизною, енергоефективністю та інтегральними мікросхемами спеціального призначення (ASIC), наприклад, вже успішно застосовується в гаджетах, які збирають та аналізують різні параметри здоров’я. Більше уваги безпеці. Зростання кількості вбудованих систем, які мають вихід в Інтернет, призводить до збільшення кількості кіберзагроз, що підкреслює важливість удосконалення заходів безпеки для ембедед-пристроїв. Оптимізація споживання енергії embedded-системами стає актуальною – на це впливають ідеї сталого розвитку, що сприяє поширенню більш енергоефективних рішень. Розвиток AR та VR (доповнена та віртуальна реальності). Інтеграція вбудованих систем у AR та VR відкриває нові горизонти для інтерактивних інтерфейсів та розважальних застосунків. Embedded-розробники активно працюють над цими технологіями для створення вражаючого досвіду та візуальних ефектів. Окремо зазначимо і розвиток вбудованих пристроїв у військовій сфері. Наразі зростає попит на ембеддерів, які здатні працювати з дронами (повітряними та морськими), БПЛА тощо. Сьогодні саме ці роботизовані системи дозволяють ефективно виявляти та ліквідовувати ворога, здійснювати розвідку, наводити та корегувати вогонь і – що найважливіше – берегти життя та здоров’я особового складу. Сьогодні це один з трендових напрямків конкретно в нашій державі. Кар’єрні можливості в ІТ та заробітна плата Embedded Engineer Кількість вакансій Для визначення цього параметру використаємо дані з найвідоміших українських ресурсів для пошуку роботи в ІТ – DOU та Djinni – і порівняємо результати з найпопулярнішими спеціальностями. Почнемо з DOU: Embedded – 44 вакансії; QA – 167; FrontEnd – 160; DevOps – 158; PHP – 140; Python – 138; Java – 108; .NET – 104; Node.js – 101. На Djinni пошук роботи кандидатами здійснюється анонімно. Кількість вакансій наступна: C / C++ / Embedded – 170 вакансій; JavaScript / FrontEnd – 354; PHP – 295; DevOps – 273; Python – 208; Node.js – 191; C#/.NET – 166; Java – 161; QA Automation – 139; QA Manual – 128. Конкуренція Для визначення конкуренції ембедерів на нашому ринку ІТ скористаємося співвідношенням кількості відгуків до кількості вакансій на DOU за листопад 2023 року (беремо найбільш відомі спеціальності). Ось що маємо: Конкуренція у ембеддерів (від новачків до професіоналів) дуже низька: на 1 вакансію припадає приблизно 5 претендентів, що є дуже гарним результатом під час нинішньої ситуації на ринку ІТ. Справжні “голодні ігри” традиційно у QA та FrontEnd: за 1 вакансією полюють в середньому 120.9 та 100.5 кандидатів відповідно. Відповідно до ринкової статистики Djinni, для новачків конкуренція посилюється: Зазначимо, що тут демонструється кількість кандидатів на вакансію, котрі зараз перебувають в “онлайні”. На Джині так позначаються ті кандидати, які знаходяться в активному пошуку роботи. Бачимо, що в категорії “C / C++ / Embedded” без досвіду 27.75 шукачів на вакансію (окремої категорії для Embedded немає). Багатенько, але подивіться на аналогічну ситуацію в більш популярних напрямках: JavaScript / FrontEnd – 426.55 C#/.NET – 200.5 Python – 185.6 Manual QA – 132.83 Node.js – 98 DevOps та FullStack – 83.5 Заробітна плата Спершу розглянемо зарплатну статистику на Djinni для “C / C++ / Embedded” (за останні 6 місяців). Картина наступна: Зарплатні вилки досить високі – 2300-4700 USD. При цьому зарплатні очікування кандидатів скромніші – від 700 USD до 4500 USD. А скільки отримують Embedded за межами України? Звернімося до аналітики Stack Overflow Developer Survey 2023 (більше 90 000 респондентів із США, Індії, Німеччини, Сполученого Королівства, Канади тощо). Деякі несуттєві для нашої статті спеціальності були прибрані з діаграми задля більшої компактності зображення. Отже, медіанна зарплата Embedded-спеціалістів з різних країн складає 77 104 USD на рік, а це приблизно 6425 USD на місяць. Що цікаво, розробники вебу (FrontEnd, BackEnd, FullStack), ігор, мобільних та десктопних застосунків отримують меншу ЗП, хоча ці спеціальності більш поширені, а веб взагалі є найпопулярнішим в ІТ.  Вищу винагороду отримують ті, хто спеціалізується на базах даних, DevOps-процесах, великих даних, апаратній частині, блокчейні, безпеці тощо. Кар’єрні перспективи Embedded розробник – поняття досить розмите і обширне, оскільки фахівець цієї спеціалізації може працювати над: створенням робототехнічних систем; медичною апаратурою; автомобільними системами; аерокосмічними апаратами; IoT-екосистемою; AR та VR індустрією; мережевими системами; гаджетами для цивільних потреб; безпекою embedded-пристроїв; промисловими системами; військовими розробками; тощо. В кожній із цих сфер будуть свої технологічні стеки, мікроконтролери, плати, інтерфейси, протоколи і т. д. Ще не забувайте про ембедерський “фронтенд”, “бекенд” і “фулстек” – в кожній галузі ви можете концентруватися більше на програмній частині, апаратній, або ж на обох одразу. Звісно, кожен напрямок може мати власну “кухню”, і щоб “скуштувати страву” в кожному із цих “ресторанів” цілого життя може не вистачити, але погодьтеся – список для самореалізації скромним не назвати. Також ви можете в будь-який момент заглибитися в Software розробку і займатися написанням програмного коду (найпопулярніші стеки в Embedded-і – C/C++, Java, Python, Go), а можете піти у Hardware і більше уваги приділяти “залізу”. Якщо трохи підкачати знання, то можна перекваліфікуватися і в тестувальники, і в спеціаліста з безпеки, мережевого спеціаліста тощо. Можливості дуже широкі та дуже різноманітні. Якщо ж говорити про вертикальний потенціал професії, розробник вбудованих систем стартує зі стандартної Intern/Trainee/Junior позиції. Далі – зі збільшенням досвіду, навичок та знань – отримує підвищення до Middle та Senior, а вище – керівні позиції на кшталт Team/Tech Lead, архітектор і т. д. Висновки Embedded – дуже цікава, незвична та багатогранна ІТ спеціалізація. Вона дозволяє відчути себе Архітектором, котрий вдихає життя в пристрої, дає їм все необхідне для їхнього руху, думок, аналізу навколишнього середовища, спілкування один з одним тощо. Так, для цього потрібно мати багато знань, але хто сказав, що бути Творцем – це так просто?) Цей напрямок дає дуже важливий фундамент для інших ІТ-галузей, які сьогодні в зеніті популярності. Завдяки вбудованим системам ми можемо насолоджуватися безліччю автоматизованих процесів, починаючи ранковою свіжомеленою кавою та оглядом нашого сну у health-трекері, і закінчуючи автомобільною та медичною апаратурою. Ембедед створений для справжніх любителів “заліза” та його програмування. При цьому він має багато нішевих розгалужень і щороку зростаючий попит. Сьогодні в Україні розробники вбудованих пристроїв мають великі можливості для реалізації, а в решті світу – тим більше. Професія непроста, але вона щедро винагороджує сміливих, терплячих та цілеспрямованих, котрі не бояться складнощів та перешкод і готові на все, аби досягнути бажаного. Бажаємо успіхів та натхнення всім, хто прагне розвиватися в напрямку Embedded!

Операционная система Android Языки программирования Java и Kotlin. Принципы ООП Среда Android Studio и набор инструментов Android SDK Формат обмена данными JSON Архитектура REST API Реактивное программирование Библиотека Retrofit 2 Фреймворк Dagger 2 Данные и СУБД SQLite UI/UX дизайн Шаблоны проектирования Алгоритмы и структуры данных Unit тестирование Архитектурные шаблоны Git & GitHub Google Play Английский язык Как стать Android разработчиком? Итоги   Всем привет! С каждым годом смартфоны, планшеты и другие гаджеты приобретают все большую популярность. Нам уже трудно представить хотя бы один день без них. Каким образом мы так сильно приявязались к ним? Все дело в программном обеспечении, которое находит ключ к каждому из нас: общение (телефонная связь, видеозвонки, социальные сети), просмотр мультимедийного контента, прослушивание музыки, фото- и видеосъемка, игры на любой вкус и цвет, обучающие приложения и т. д. За всем этим стоят девелоперы, разрабатывающие программы, от которых тяжело оторваться. Каждое мобильное устройство работает с использованием одной из мобильных операционных систем. Cамыми популярными из них являются Android и iOS. В контексте данной статьи нас интересует именно первая ОС. Мы расскажем вам, какие инструменты используют разработчики в создании таких увлекательных приложений на Android и как стать специалистом в этой сфере. Но прежде хотим познакомить вас поближе с данной операционной системой. Уверены, что практически каждый ее использовал (а может, и сейчас ею пользуется), однако сейчас вы узнаете некоторые интересные факты об Android: Изначально Android разрабатывалась как ОС для фотоаппаратов. ОС Android основана на ядре Linux. Компания Samsung имела возможность приобрести стартап-компанию Android Inc. в 2004-м году, однако корейцы поставили под сомнение выгодность этого предложения. Через год корпорация Google купила Android Inc. не менее чем за $50 миллионов и смогла направить полученный потенциал в нужное русло. Число активированных устройств, использующих Android, более 2 миллиардов. Первая версия Android, как и первый пакет разработчика (SDK 1.0), вышла осенью 2008 года. Тогда эту ОС многие критиковали и не верили в успешность проекта. Google Карты вычисляют дорожные пробки на основе концентрации и скорости перемещения Android устройств. Android используется не только в смартфонах и планшетах, но также и в электронных книгах, наручных часах, фитнес-браслетах, игровых приставках, ноутбуках, нетбуках, смартбуках, очках Google Glass, телевизорах, бытовых роботах, научных аппаратах, компонентах исследовательских систем на базе гаджетов, компонентах IoT (Internet of Things — “интернет вещей”) и других устройствах.     Теперь перейдем ближе к сути. Андроид разработчик — это IT-специалист, который создает, поддерживает и совершенствует программное обеспечение для мобильных устройств, использующих популярную ОС Android. Вместе с этим он задействован в процессах поддержки, улучшения и обновления разрабатываемых продуктов. Если посмотреть на количество устройств, которые используют данную ОС, можно прийти к выводу, что разработчик под платформу Андроид — очень востребован в IT, а также имеет высокие доходы. Какие технологии использует в своей работе этот специалист?     Какие языки программирования и технологии используют Android разработчики Android Каждый Android девелопер обязан знать операционную систему, под которую разрабатывает софт, а также понимать назначение и жизненный цикл Android-компонентов. Чтобы создавать эффективные мобильные приложения, вы должны понимать все аспекты устройства и работы данной ОС. Java + ООП Java — это объектно-ориентированный язык программирования со строгой типизацией. Безусловно, в создании приложений под Андроид можно использовать другие языки (C#, C/C++, Python и прочие), однако, именно Java считается флагманским в Android разработке. Поэтому в данной статье мы будем делать уклон в Java-стек. Что являет собою этот язык? Не будем углубляться в его устройство, а скажем лишь, что все Java-приложения транслируются в специальный байт-код, выполняемый виртуальной машиной JVM (Java Virtual Machine), которая может быть установлена практически на любое устройство. Это делает программы, разработанные на Java, кроссплатформенными. Какими знаниями необходимо обладать? Прежде всего необходимо знать Java и владеть методологией объектно-ориентированного программирования (ООП). Если конкретизировать: Машинная математика, переменные и типы данных, условные конструкции, логические операции, циклические конструкции, методы, рекурсия, массивы, списки, обработка исключений, суперкласс Object, обобщения (Generics, дженерики), работа с памятью. Понимание и применение пакетов (Packages) в Java; ООП, понятия объектов и классов; Механизмы наследования, умение работать с интерфейсами; Коллекции и работа с ними; Параллелизм. Помимо теоретических знаний, новичок должен сформировать необходимые навыки написания кода. Для этого мы советуем вам как можно чаще практиковаться и решать прикладные задачки из интернета либо составленные самолично. Также, советуем использовать онлайн-тренажеры, например, интерактивный тренажер от ITVDN. С его помощью вы сможете потренироваться в кодинге на Java и проверить свои знания. Kotlin Молодой и перспективный язык программирования, который поддерживает как объектно-ориентированное, так и процедурное программирование. Отличается своей простотой, гибкостью, лаконичностью, и являет собой следующий этап развития Java. Kotlin-приложения компилируются в уже упомянутый JVM байт-код, что делает этот язык полностью совместимым с Java.  На конференции для разработчиков I/O 2017 компания Google расставила акценты в Android разработке, заявив, что язык программирования Kotlin отныне позиционируется как приоритетный язык для разработчиков приложений под ОС Android. Подкреплено это было тем, что теперь новые API и библиотеки будут выпускаться сперва под Котлин. Несмотря на возрастающую популярность данного языка и поддержку со стороны Google, Java не собирается уходить из мобильной разработки, удерживая там уверенные позиции и по сей день. Так что знание обоих языков будет предпочтительным для всех, кто собирается заниматься Андроид разработкой. В любом случае, зная Java, вы безпроблемно освоите и Kotlin. Все-таки классику надо знать и уважать. Среда Android Studio и набор инструментов Android SDK Android Studio — это интегрированная среда разработки (IDE) приложений под Android. В ней вы будете создавать проекты и работать над ними. В свою очередь, студия вам предоставит всевозможные удобности для облегчения разработки софта. Android Software Development Kit — кроссплатформенный комплект средств Android разработки, включающий в себя: отладчик, набор библиотек, телефонный эмулятор, набор документации по работе в данной среде и примеры приложений. Особенно интересен в этом перечне эмулятор — программа, которая создает виртуальный мобильный девайс, где можно тестировать написанные приложения и смотреть, как они будут выглядеть на том или ином Андроид-устройстве. JSON JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий Java, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. REST API REST — популярный архитектурный стиль, содержащий определенные принципы организации взаимодействия приложения либо сайта с сервером через протокол HTTP. API — это прикладной программный интерфейс. С его помощью происходит определение, каким образом следует обращаться к программе и какие ответы она обязана предоставлять пользователям. К примеру, оплачиваете футболку в интернет-магазине или покупаете билет в кино — как только вы нажимаете соответствующую кнопку, подтверждающую ваши намерения на оплату, сайт соединяет вас с платежной системой с использованием API этой системы. Но даже если система не имеет никакой интеграции с другими, API все равно используется — для общения внутри системы.  RxJava Библиотека, которая позволяет реализовать принципы реактивного программирования для JVM. Используется для оперирования событиями и потоками данных, комбинируя лучшие идеи шаблонов проектирования Observer (Наблюдатель), Iterator (Итератор) и функционального программирования. В реальной жизни влияние реактивного подхода мы ощущаем, когда на нашем смартфоне высвечивается сообщение о новом посте человека, которого мы фолловим в социальных сетях или когда нам приходит уведомление о новом сообщении из мессенджера. То есть, вместо того, чтобы каждые 10 секунд лично перезагружать страничку объекта фолловинга или свой мессенджер, мы просто ожидаем уведомления о новом посте, занимаясь своими делами. Это очень полезная опция, позволяющая не только экономить наше время, но и упрощающая нагрузку на сервер. Куда без RxJava в мобильную разработку на Java? Retrofit 2 Популярная библиотека для сетевого взаимодействия — типобезопасный HTTP-клиент для Android и Java. Позволяет легко получить и загрузить JSON (либо иные структурированные данные) через веб-сервис на основе REST. Для работы с HTTP-запросами в Retrofit используется библиотека OkHTTP. Dagger 2 Фреймворк для работы с зависимостями в Java и Android. Позволяет уменьшить количество шаблонного кода, структурировать зависимости, упрощает работу при большом количестве зависимостей, а также позволяет делать код более читабельным. SQLite Structured Query Language (SQL) — декларативный язык структурированных запросов, разработанный для взаимодействия с базами данных. Особенностью SQL является то, что он лишь описывает необходимые компоненты и желаемые результаты, не указывая, как именно эти результаты должны быть получены. Любое ПО подразумевает работу с данными, будь то обыкновенная процедура приема данных от сервера (например, скачивание файлов) либо внесение в БД информации о новом пользователе, который только зарегистрировался — умение работать с данными одинаково важно во всех сферах разработки. Исключением является только FrontEnd. Также, изучите одну из систем управления базами данных (СУБД). В Андроид разработке по умолчанию используется SQLite. Благодаря своей компактности, легкости и надежности, эта СУБД идеально подходит для разработки в электронных устройствах и программах, где стратегическое значение имеет оперативная память. XML Extensible Markup Language - расширяемый язык разметки, с помощью которого можно структурировать и хранить данные для удобства их дальнейшей обработки. XML хорошо масштабируем, сочетает в себе простой и удобный синтаксис, а также базируется на кодировках Юникод для представления содержания документов. Также, в Андроид разработке XML используется для создания интерфейса посредством объявления элементов пользовательского интерфейса и задания их расположения. UI/UX дизайн UI/UX (User Interface — “интерфейс пользователя”, User eXperience — “опыт пользователя”) дизайн — это проектирование различных пользовательских интерфейсов, в которых удобство использования (UX) настолько же важно, как и внешний вид (UI). Android девелопер в ходе создания приложений также занимается и разработкой внешнего вида приложения, а потому, должен знать, как реализовывать интерфейс, который принесет юзеру максимальный комфорт во всех аспектах использования. Обычно в UI/UX разработке под Андроид используют Material Design — стиль графического дизайна интерфейсов программного обеспечения и приложений, разработанный компанией Google, делающий уклон на естественность графической составляющей. Для работы необходимо использовать инструменты Material Components for Android.  Шаблоны проектирования Паттерны (они же шаблоны) являют собой архитектурные конструкции, описывающие общепринятые способы решения задач, которые часто возникают в ходе проектирования программного обеспечения. Всего существует более двух десятков шаблонов, однако разработчику нет необходимости владеть ими всеми. Достаточно изучить самые популярные. Алгоритмы и структуры данных Понимание алгоритмов и структур данных — обязательное требование, которому должен соответствовать каждый программист. Это необходимый фундамент, который учит разработчика писать хороший исходный код через подбор оптимальных формы представления информации и последовательности действий. Изучив структуры данных, вы будете уметь управлять уровнем сложности своих программ, делая их более доступными для понимания, а также разрабатывать приложения с высокой производительностью, которые будут рациональнее взаимодействовать с памятью. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач на Java и Kotlin. Unit тестирование Вид тестирования, который берет на себя программист, а не тестировщик. Его основная идея заключена в написании тестов под каждую нетривиальную функцию либо метод. Цель Unit (модульного) тестирования — изоляция отдельных частей программы, чтобы продемонстрировать, что по отдельности они являются работоспособными. Таким образом происходит проверка кода на регрессию, а вместе с этим — соответствующее обнаружение ошибок. Архитектурные шаблоны В зависимости от предпочтений работодателя, от вас могут потребовать знание одного или нескольких архитектурных паттернов. Это шаблоны наивысшего уровня, которые определяют архитектуру всей программной системы. Самыми популярными являются MVC (Model-View-Controller), MVVM (Model-View-ViewModel), MVP (Model-View-Presenter), Clean Architecture. Git & GitHub Git — это популярная система контроля версий, позволяющая вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Одним из самых известных антагонистов Git является SVN — централизованная система, в отличие от децентрализованной Git. Также, в работе вам пригодится и сервис онлайн-хостинга проектов, использующий систему контроля версий. В данном случае это GitHub. В паре с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы. Google Play Магазин приложений, в котором можно размещать и скачивать приложения под Андроид. Умение его использовать — обязательно. Google Play имеет очень строгий набор политик, которым должно соответствовать ваше приложение. К слову, за аккаунт Android разработчика необходимо один раз раскошелиться на $25. Зато это дешевле, чем за аккаунт iOS девелопера — там с вас будут брать дань каждый год денежную сумму в размере $99.  Английский язык Наверное, единственный язык, которым обязаны владеть все разработчики без исключения. Его вы будете использовать во время поиска ответов как во время учебы, так и во время работы, ведь большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.   Как стать Android разработчиком   Как вы заметили, Android девелоперы должны знать множество различных технологий. Сейчас очень много разработчиков данного направления, но действительно хороших очень мало. Поэтому и требования к кандидатам высоки. Если вы пройдетесь по ресурсам поиска работы, то наверняка отметите, что вакансий Android Developer уровня Junior не так много, как хотелось бы, а потому за место под солнцем придется побороться. Давайте перейдем к советам касательно того, как сделать старт в Андроид разработке и начать “набирать массу”. В университетах никто не обучит вас искусству разработки на Android, поэтому вы можете: Учиться самостоятельно — по книгам или видео курсам. Записаться на соответствующие курсы для максимально эффективного обучения специальности. Второй вариант является лучшим, поскольку предусматривает более высокий уровень дисциплинированности на всем пути обучения, а также структурированную подачу необходимой информации, которой удобно пользоваться и которая отвечает современным требованиям рынка. Если вы выбираете обучение по видео курсам, то прежде всего определите подходящую для вас образовательную онлайн-платформу. Мы рекомендуем сделать выбор в пользу ITVDN. Почему именно эта платформа? Давайте мы познакомим вас с преимуществами обучения на ITVDN. ITVDN — образовательная онлайн-платформа, содержащая полноценные программы обучения по 12 самым популярным специальностям. В каталоге ITVDN свыше 180 видео курсов по различным языкам программирования и информационным технологиям. Учебная программа каждой специальности содержит:  тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности Android Developer, в частности, с одноименного вебинара Евгения Мыцы Как стать Android разработчиком, в котором отражены все самые актуальные тренды и требования. Если вы заинтересованы в изучении специальности Android Developer на ITVDN, у нас есть отличное предложение для вас. Наш образовательный портал содержит полноценную программу обучения Android разработке. Переходите по ссылке и делайте шаг навстречу желаемой профессии!  Какой бы способ обучения вы не выбрали — вначале нужно изучить язык программирования Java и довести владение им до высокого уровня. После каждой пройденной темы нужно решать практические задачи, чтобы закрепить полученные знания. В этом вам может помочь интерактивный тренажер от ITVDN, с помощью которого вы сможете проверить ваше владение навыками написания кода на Java. Продолжайте обучение и изучайте те технологии, которые мы перечислили в данной статье. Очень желательно, чтобы у вас был наставник, который мог бы следить за вашим прогрессом, отвечать на возникающие вопросы, давать полезные советы. Это может быть как преподаватель на ITVDN, так и один из ваших знакомых, который занимается Андроид разработкой и готов взять под свое крыло юного протеже. Знание английского на уровне не ниже Intermediate обязательно. Оно вам понадобится для комфортного поиска информации по Java, Kotlin и другим технологиям в интернете. Если ваши знания английского недостаточны как минимум для чтения технической литературы — обязательно подтяните их при помощи различных курсов либо интернет-материалов свободного пользования. Изучите Git, начните делать свой небольшой проект и опубликуйте его на GitHub — это даст вам ценный опыт работы с распределенной системой управления версиями и позволит проверить свои навыки в решении реальной задачи. Несколько хороших проектов, и полноценное портфолио готово. Не забывайте о Google Play, ведь именно сюда Android разработчики выкладывают готовый к использованию продукт. Актуальную информацию касательно языков и технологий, которыми необходимо владеть Android разработчику, вы можете узнать из нашего вебинара “Как стать Android разработчиком”, перейдя по ссылке. Резюмируя Android разработчик — специалист, который занимается созданием ПО под различные устройства — смартфоны, планшеты, ноутбуки, нетбуки и прочие девайсы, в основе которых лежит ОС Android. Востребованность этого разработчика очень высока, а на настоящих профессионалов то и дело ведут охоту HR-ы и рекрутеры. Изучайте все необходимые языки и технологии, практикуйтесь, а также всегда подпитывайте интерес к вашей будущей профессиональной деятельности. Не забывайте следить за новостями в мире Android. Просматривайте в YouTube видео, посвященные данной сфере разработки и впитывайте новую информацию. Для дополнительных очков мотивации подпишитесь на известных Андроид девелоперов. Пробуйте посещать различные мероприятия, посвященные разработке под Андроид, находите единомышленников и поддерживайте активность в их среде. Главное — быть целеустремленным и иметь желание развиваться в IT-сфере. Не останавливайтесь ни перед чем и тогда вас обязательно настигнет успех! Желаем вам побед в обучении! Обогащайтесь новыми знаниями и скиллами на ITVDN!

Основні технології. Фреймворки та допоміжні інструменти. Необов’язкові технології. Зарплати FrontEnd розробників. DOU. Djinni. Stack Overflow Developer Survey 2023. Чому так багато технологій? Поради новачкам FrontEnd. Підсумки.   FrontEnd – один із найлегших розробницьких напрямків в ІТ. Він вигідно вирізняється тим, що поєднує в собі програмування та творчість, оскільки девелопер працює над оживленням дизайнерського макету та створенням відповідної користувацької логіки. Також перевагою фронтенду є те, що побачити результат своєї роботи можна майже одразу – в будь-якому браузері. Відносна легкість фронтенду породжує велику популярність серед бажаючих потрапити в ІТ, а враховуючи наслідки відкритої агресії по відношенню до України – особливо велику популярність, адже це можливість працювати віддалено (на ІТ-компанію або на фрилансі) і отримувати гарну зарплату. Відповідно, конкуренція серед Trainee/Junior FrontEnd розробників шалена, а тому роботодавці вимушені закручувати гайки і підвищувати вимоги до кандидатів, аби відібрати найкращих.  Тож як стати фронтенд розробником? Якими технологіями необхідно володіти, аби стати Intern/Junior FrontEnd розробником у 2024 році? Проаналізувавши вакансії на українському ринку IT, ми склали список актуальних інструментів, які зазвичай вимагають роботодавці від кандидатів. Їхній перелік – нижче у статті. Frontend developer roadmap. Основні технології HTML5 & CSS3 HTML5 і CSS3 – це фундаментальні технології, без знання яких не обійтися жодному веброзробнику. За допомогою мови гіпертекстової розмітки HTML створюється розмітка (каркас) кожної вебсторінки. Потім мова стилів CSS збагачує візуальне оформлення сайту і надає йому привабливого та ефектного зовнішнього вигляду. Крім цього, необхідно володіти: кросбраузерним адаптивним верстанням, щоб вміти створювати сайти під мобільні пристрої, планшети і широкоформатні екрани та для різних браузерів; семантичним верстанням для підвищення якості розмітки та покращення пошукової індексації сайту; валідним верстанням, яке передбачає повну відповідність коду розробника всім стандартам W3C – організації, яка створює та впроваджує технологічні стандарти для World Wide Web. Приділіть особливу увагу верстанню під мобільні пристрої, тому що сучасний вебспоживач дуже багато часу проводить у смартфоні. Існує навіть спеціальний підхід, при якому спочатку верстається вебсайт під мобільні пристрої, а потім під десктопи – називається Mobile First. Це загальні вимоги щодо верстання. Тепер розглянемо більш детально вимоги безпосередньо щодо мови стилів – CSS. Тут ви повинні знати основні властивості CSS3: фони, градієнти, тіні, анімації, трансформації, переходи, а також технології Flex та Grid, про які ми ще поговоримо. Гарне володіння HTML та CSS вже дозволяє займатися верстанням сайтів та заробляти гроші. Саме з цих двох базових технологій починається шлях до професії FrontEnd розробника. Якісно вивчити HTML та CSS ви зможете за допомогою наступних наших курсів: HTML5 & CSS3 Стартовий; HTML5 & CSS3 Базовий; HTML5 & CSS3 Поглиблений. Flex та Grid CSS Технології верстання надійних адаптивних вебсторінок, які дозволяють легше створювати динамічні сайти та зручніше структурувати їх вміст. На нашому ресурсі є українськомовні відео курси, які гарно пояснюють теми Flex та Grid верстання: CSS Flexbox та Верстання на Grid. CSS-препроцесори CSS-препроцесор — це програма, яка має власний синтаксис, але може згенерувати з нього CSS-код. Найчастіше у вакансіях зустрічаються SASS, SCSS, Stylus, LESS. Препроцесори призначені для: прискорення процесу написання коду; спрощення читання коду та його подальшої підтримки; мінімізації рутинної роботи під час написання коду. Для підвищення ефективності написання CSS-коду достатнім буде вивчення лише одного препроцесора, але у вакансіях часто зустрічаються одразу декілька. Git & GitHub Git – найбільш популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Крім того, варто вміти працювати з сервісом онлайн-хостингу проєктів, який використовує систему контролю версій. У даному випадку це GitHub. У тандемі з Git він дозволяє розробникам зберігати свій код онлайн у хмарному сховищі, а потім взаємодіяти з іншими розробниками у різних проєктах. Дані системи дозволяють команді програмістів працювати над одним проєктом одночасно, зберігаючи внесені зміни, і навіть відслідковувати виконання завдань кожним членом групи. Git & GitHub — дуже важливі інструменти для будь-якого IT-розробника, вивченням яких слід зайнятися якомога раніше. Ми рекомендуємо вивчати Git на ITVDN за допомогою курсу «Основи роботи з Git». Знання про вебтехнології та мережу інтернет Щоб якісно виконувати свою роботу, фронтенд розробник повинен розбиратися у вебі і розуміти принципи його функціонування. Таким чином, необхідно знати: як працює інтернет; протоколи HTTP/HTTPS, вебсокети; як працюють браузери; що таке DNS та як він працює; що таке доменне ім'я; що таке хостинг. Також буде непогано, якщо ви спробуєте налаштувати сайт на якомусь безкоштовному хостингу, прив'яжете домен до цього хостингу. JavaScript Мова програмування, яка використовується як при розробленні клієнтської сторони веб-застосунку, так і серверної. За допомогою JavaScript (скорочено JS) можна писати навіть настільні та мобільні додатки, використовуючи певні програмні платформи та бібліотеки. Ця мова дозволяє: динамічно змінювати HTML-розмітку; здійснювати інтерактивну взаємодію з користувачем; анімувати зображення; здійснювати валідацію форм; керувати мультимедіа тощо. Іншими словами, JavaScript "оживлює" сторінку та додає їй функціональності. Гарне володіння цією мовою програмування є обов'язковим пунктом для кожного FrontEnd розробника. JavaScript використовує офіційний стандарт ECMAScript (скорочено - ES), який має на увазі певний формальний опис синтаксису, базових об'єктів та алгоритмів. На даний момент існує багато різних версій ES. Роботодавці найчастіше вимагають знання ES6+. Однак спочатку необхідно вивчити чистий JavaScript (vanilla JavaScript) і лише потім вникати в нові стандарти. Як не крути, а класику треба знати. Завдяки гарному володінню JS можна швидко розібратися в будь-якій версії ES, а потім опанувати будь-який фреймворк або бібліотеку. ITVDN надає можливість вивчити JavaScript з нуля до поглибленого рівня за допомогою курсів: JavaScript Стартовий; JavaScript Базовий. JavaScript Core (DOM, AJAX, JSON) DOM (Document Object Model) – об'єктне представлення вихідного HTML-документу. Ключовим є поняття DOM-дерева, яке описує структуру сторінки. За допомогою об'єктної моделі JavaScript отримує повну владу над HTML-документом: можливість редагувати, видаляти та додавати елементи і атрибути HTML, змінювати CSS-код тощо. AJAX (Asynchronous JavaScript And XML) – це синтез технологій JavaScript і XML, який фактично являє собою комбінацію: вбудованого в браузер XMLHttpRequest-об'єкту (щоб запитувати дані з вебсервера); JavaScript та HTML DOM (щоб відображати або використовувати дані). AJAX дозволяє вебсторінкам здійснювати асинхронне оновлення, обмінюючись даними з вебсервером. Завдяки цій технології сторінка не потребує перезавантаження – оновлюється лише конкретна її частина (згадайте стрічку новин у соціальних мережах). JSON (JavaScript Object Notation) – це загальний формат обміну даними. Дозволяє здійснювати обмін інформацією між програмними продуктами, котрі написані різними мовами. Таким чином, клієнт, який використовує JavaScript, може легко передавати дані на сервер, реалізований за допомогою Ruby/Java/PHP. Всі три технології мають особливу цінність для кожного веброзробника та розкривають організацію роботи інтернет-застосунку. REST API API – Application Programming Interface – це набір правил, при дотриманні яких програми можуть між собою взаємодіяти. Розробник створює API на сервері та дозволяє клієнтам звертатися до нього. Красномовним прикладом буде API від Google Maps, котрий дозволяє веброзробнику вказати на гугл мапі розташування певної будівлі (точку видачі інтернет-замовлень, офіс компанії абощо) на своєму сайті. Таким чином програміст позбавляє себе необхідності самому розробляти власну мапу і користується вже готовим рішенням від Google, використовуючи набір правил від API. REST – Representational State Transfer – це архітектурний підхід, котрий регламентує, як саме API мають виглядати. Цьому набору правил має слідувати девелопер під час створення власного застосунку. Простими словами, REST – це звичайний запит виду «клієнт-сервер» з використанням HTTP-протоколу. Фронтенд розробнику необхідно розбиратися у REST API, оскільки ця технологія використовується усюди, де є необхідність працювати з даними від сервера. Алгоритми та структури даних Розуміння алгоритмів та структур даних (ADS, від Algorithms and Data Structures) – обов'язок будь-якого грамотного програміста. До структур даних відносяться: стеки, черги, зв'язані списки, графи тощо. Вивчивши їх, ви зможете керувати складністю своїх програм, роблячи їх більш доступними для розуміння, а також розробляти високопродуктивні програми, які ефективно працюватимуть з пам'яттю. Знання алгоритмів дозволить вам створювати складні конструкції для ефективного розв'язання широкого спектра завдань. Коли говорять про алгоритми, зазвичай мають на увазі алгоритми сортування та пошуку: сортування прямим включенням, прямим вибором, злиттям, пірамідальне, прямий пошук, бінарний, індексно-послідовний та інші. Важливо розумітися і на нотації Big O, яка описує складність кожного алгоритму. Даний механізм допомагає визначити, за яких умов вигідніше використовувати той чи інший алгоритм. Зазначимо, що як новачкові, вам не треба пірнати вглиб цих тем. Буде достатньо: теоретичного володіння ADS; розуміння, де яку структуру даних слід використати; уміння оцінити складність алгоритму (Time Complexity та Space Complexity); уміння написати декілька алгоритмів (найпопулярніші алгоритми сортування та пошуку). Володіння ADS допоможе вам створювати більш якісний та оптимізований код. Крім того, це посилить ваші позиції серед інших кандидатів. Webpack Потужний збирач модулів (bundler), який дозволяє скомпілювати в один файл кілька різних компонентів: від .js та .css файлів до картинок, шрифтів тощо. Використовується для роботи над об'ємними проєктами і досить часто зустрічається у вакансіях. Воно і не дивно – це найпопулярніший збирач, як-не-як. npm Node Package Manager – пакетний менеджер, який є найбільшим у світі реєстром програмного забезпечення (відповідно до витягу з офіційного сайту). Використовує платформу Node.js і дозволяє розробникам з усього світу користуватися вже готовими програмними рішеннями та поширювати власні на основі Node.js. npm використовують для керування залежностями, себто для встановлення, оновлення та видалення тих пакетів (бібліотек та інструментів), які використовуються у вашому проєкті. Незамінна річ для FrontEnd розробників, якою ви обов’язково користуватиметеся. Основи Figma Figma – це популярний дизайнерський інструмент для створення інтерактивних прототипів застосунків або веб-сайтів. З його допомогою дизайнер створює дизайн, який фронтенд-розробник потім верстає за допомогою HTML/CSS і додає інтерактивність при участі JavaScript. Знання основ фігми дозволяє девелоперу зручно взаємодіяти з дизайнерським прототипом: швидко дізнаватися необхідні розміри тих чи інших елементів, робити експорт картинок та іконок тощо. Додатковий плюс – можливість використання браузерної версії Figma. Англійська мова План навчання Front-end повинен обов'язково включати підтягування English. Знання англійської є однією з основних вимог до фронтенд-розробника, оскільки велика кількість корисної інформації знаходиться саме на англомовних сайтах. Рівень читання технічної документації буде достатньо для комфортного користування іноземними ресурсами (Intermediate). Однак чим вищий рівень вашої англійської, тим більші шанси отримати job-офер. Інгліш використовується не тільки при роботі з документацією, а і при комунікації з командою та клієнтами. Серед програмістів побутує вислів: «Яку мову слід вчити першою? Вчи англійську!». Тому не пошкодуйте ваш час і гарненько підтягніть англійську – цілком можливо, що саме гарне володіння нею стане вирішальним при розгляді вашої кандидатури. Підтягнути English ви можете завдяки наступним безкоштовним відео курсам на ютуб-каналі CodeUA: Business English – ви опануєте базову ділову лексику для активної участі у перемовинах англійською, а також ведення ключової документації цією мовою. IT English – акцент на прокачці ділової лексики, граматики, усталених конструкцій та виразів з ІТ-сфери. Фреймворки та допоміжні інструменти Основні фреймворки JavaScript Це інструменти, за допомогою яких створюються динамічні веб/мобільні/десктопні застосунки мовою JavaScript. Вони прискорюють розроблення вебзастосунків та передбачають чітко структуровану організацію коду, підвищуючи його якість та чистоту. Найпопулярнішими high-level інструментами для фронтенд розроблення можна назвати фреймворки Vue.js, Angular та бібліотеку React. Кожен із них призначений для вирішення свого спектру завдань і має різний ступінь складності: Vue.js – найлегший (але й з найменшою спільнотою), React – середньої складності, Angular – високої складності. Варто сконцентруватися на глибокому вивченні одного фреймворку, але в той же час дуже рекомендується знати особливості та сферу застосування всіх перерахованих вище технологій. Який фреймворк все ж обрати? Думки щодо цього розходяться. Інструментарій вибирається індивідуально під проєкт та важко передбачити, які задачі вам потрібно буде вирішувати. На даний момент найбільшою популярністю користується React, оскільки вона збалансована як з точки зору складності, так і з точки зору багатства функціоналу. До того ж найбільша кількість вакансій припадає саме на цю бібліотеку, а значить, що вона цікава не тільки розробникам, а й бізнесу. Кожен із цих трьох інструментів доступний для вивчення на платформі ITVDN. Українськомовні курси за напрямком Angular: Angular Базовий. Тестування Angular-застосунків. За напрямком React: React Базовий. За напрямком Vue.js: Vue.js Стартовий. Допоміжні фреймворки JavaScript Наряду з традиційною трійкою – Vue.js, React та Angular – у вакансіях часто зустрічаються інші фреймворки, створені на їхній базі, наприклад Next.js та Nuxt. Next.js базується на популярному React і дозволяє збільшити ефективність та масштабувати процес створення реакт-застосунків. Він додає шар абстракції над реактом, а одними з найголовніших його нововведень є рендеринг на серверній стороні та генерація статичних вебсайтів. Дуже багато React-вакансій для джунів мають серед вимог та побажань Next.js – якщо ви орієнтуєтеся на реакт, рекомендуємо ознайомитися з даним фреймворком. Nuxt – високорівневий фреймворк на базі Vue.js для масштабованого та інтуїтивно зрозумілого створення FullStack-вебзастосунків та вебсайтів. Зустрічається не часто у вимогах, але його вивчення може вигідно підсвітити вашу кандидатуру. Angular Material Технологія, на яку слід звернути увагу тим, хто планує розвиватися в напрямку Angular. Це бібліотека UI компонентів, яка дає доступ до готових візуальних рішень задля пришвидшення процесу верстання на Ангулярі. Бібліотека сповідує принципи Material Design, запроваджені компанією Google у 2014 році, які передбачають привабливий та інтуїтивно зрозумілий UI дизайн, котрий однаково гарно виглядатиме на різних пристроях. Необов’язкова для вивчення бібліотека, але часто зустрічається у вакансіях – її знання допоможе вам як мінімум виділитися серед інших Angular-кандидатів. TypeScript Кросплатформна строготипізована мова, яка є розширенням JavaScript. Строга типізація дозволяє зменшити кількість потенційних помилок у вихідному коді, написаному на TypeScript. Також ця мова реалізує концепції, які близькі до об'єктно-орієнтованих мов, таких як C#, Java та подібних. TypeScript підвищує швидкість та зручність написання комплексних програм, внаслідок чого їх стає легше підтримувати, масштабувати та тестувати. Відповідно до зарплатної аналітики від DOU (зима 2024), TypeScript обігнав JavaScript за популярністю і посідає перше місце серед українських розробників в категорії “Основна мова програмування”. У вакансіях ця мова зустрічається досить часто незалежно від цільового фреймворку. При цьому для Angular розробників знання TypeScript є обов'язковим. Радимо вивчити дану мову, а зробити це ви можете за допомогою нашого українськомовного курсу “TypeScript”. Інструменти керування станом програми (State Management) Великі вебзастосунки постійно зростають у складності, а тому зберігати дані, які можуть використовуватися в різних місцях, стає все складніше. Для вирішення цієї проблеми були вигадані окремі бібліотеки, що йдуть паралельно з фреймворками — вони служать для управління глобальним сховищем даних усього веб-застосунку і називаються менеджерами станів. Їх застосування вже стало стандартом у FrontEnd розробленні. Для девелоперів, які використовують Vue.js, це VueX, для React-розробників – Redux і MobX, для Angular-девів – RxJS, NgRx. Необов’язкові технології (але дуже корисні)   Патерни проєктування JavaScript Це найкращі практики, які описують типові способи вирішення поширених завдань, що виникають під час проєктування програмного забезпечення. Знання шаблонів проєктування дозволяє писати більш чистий, зрозумілий і читабельний код, а також уникати "винайдення велосипеда". Більше того, володіння патернами показує вашу грамотність як розробника і підвищує вашу цінність в очах роботодавця, що допоможе виділитися на тлі конкурентів. CSS-фреймворки Інколи у вакансіях для FrontEnd-початківців можна зустріти вимоги до володіння CSS-фреймворками. Найпопулярнішими є Bootstrap і Tailwind. Вони допомагають суттєво прискорити створення верстання за рахунок низки вбудованих можливостей. Bootstrap – результат старань команди з Twitter, який вийшов у світ в далекому 2011. Є повністю безкоштовним, має відкритий вихідний код і дозволяє створювати гнучкі, адаптивні вебінтерфейси під різні пристрої, використовуючи вже готові шаблони кнопок, форм, таблиць тощо. Tailwind більш сучасний та трендовий – 2017 року випуску, і при цьому відомий своїм високим ступенем кастомізації (на відміну від Bootstrap). Він не дає набору готових шаблонів (доступно тільки в платному Tailwind UI), проте дозволяє швидко створювати власні рішення за рахунок особливого синтаксису. В будь-якому випадку, рекомендуємо спробувати обидва інструменти, аби відчути їхню потужність, переваги та недоліки. GraphQL GraphQL є моделлю даних, яка часто використовується для побудови API для застосунку. Головна перевага перед REST API – наявність лише однієї точки входу, що дозволяє більш динамічно та гнучко визначати взаємодію з даними. Також GraphQL має такий синтаксис, який дозволяє працювати з будь-якою мовою програмування як на клієнті, так і на сервері – лишається тільки підключити необхідну бібліотеку до вашого проєкту для інтеграції GraphQL. На момент написання статті кожна шоста вакансія на Djinni у розділі “JavaScript / FrontEnd” з досвідом від 0 до 1 року мала серед обов’язкових або бажаних технологій GraphQL. jQuery Невелика, швидка та багатофункціональна JavaScript-бібліотека, для роботи з якою необхідно володіти HTML, CSS та JavaScript на базовому рівні. Вона покликана спростити програмування мовою JS. Дана бібліотека представляє об'ємні рішення поширених завдань у вигляді методів, що викликаються одним рядком коду. Незважаючи на те, що jQuery вже давно покинула зеніт популярності, поступаючись місцем фреймворкам JS, велика кількість сайтів все ще використовує цю бібліотеку, а деякі роботодавці вказують її серед вимог для Junior, особливо для джунів-верстальників. Лінтери Інструменти, які дозволяють аналізувати якість JavaScript-коду відповідно до стандарту ES. Вони вбудовуються в середовище розроблення і вказують на наявність невідповідностей стандарту коду, якщо такі є. Даний механізм корисний як для одноосібного розроблення (для самоконтролю), так і для командного, коли кожен розробник повинен слідувати тим самим мовним конструкціям, аби на виході отримати єдиний, цілісний проєкт. Один із найвідоміших лінтерів – ESLint. Це необов’язковий інструмент для роботодавця, але він дуже корисний для веброзробників у силу його можливостей з контролю якості коду. Тестування Jest та Cypress – головні інструменти модульного тестування, яке покладається на плечі розробника. Але що це таке? Unit тестування (воно ж – модульне тестування) – процес, який полягає у створенні тестів для перевірки працездатності окремих ділянок написаного програмістом коду. Виконується безпосередньо автором коду. Яку користь приносить Unit тестування: суттєве скорочення багів у коді; спрощення рефакторингу коду; забезпечення якісного відокремлення інтерфейсу від реалізації; краще розуміння написаного коду; можливість протестувати найдрібніші ділянки коду. Усі інструменти вчити не треба — достатньо навчитися працювати лише з одним із них. Gulp / Grunt Системи збирання, які автоматизують рутинні завдання розробників: мініфікацію коду, оптимізацію зображень, тестування, аналіз якості коду та інше. Підходять для розроблення невеликих проєктів. SVG Мова розмітки масштабованої векторної графіки. Зображення на сторінці, зроблені за допомогою SVG, коректно відображаються на екранах з різною роздільною здатністю, не втрачаючи при цьому своєї якості, на відміну від традиційних растрових .jpeg, .png та інших. SOLID принципи SOLID – це принципи, які є своєрідним ременем безпеки для тих, хто працює відповідно до парадигм об'єктно-орієнтованого програмування. Вони були створені з метою убезпечити ООП-орієнтованого розробника від незрозумілого, заплутаного спагеті-коду, який також ще й дуже важко підтримувати. SOLID – це акронім, який складається з п'яти букв, що кодують п'ять основних принципів: S - Single Responsibility Principle (принцип єдиної відповідальності) O - Open-Closed Principle (принцип відкритості-закритості) L - Liskov Substitution Principle (принцип підстановки Барбари Лісков) I - Interface Segregation Principle (принцип розділення інтерфейсу) D - Dependency Inversion Principle (принцип інверсії залежностей) Володіння цими принципами дозволяє грамотно проєктувати та розробляти такі програмні системи, які з великою ймовірністю зможуть тривалий час розвиватися, розширюватися та підтримуватися. Хоча SOLID принципи написані переважно для ООП, їхні ідеї цілком застосовні і до сучасного JavaScript розроблення, що допоможе фронтенд розробникам створювати більш чистий та лаконічний код. Зарплати FrontEnd розробників DOU Звернемося до вже згаданої зарплатної аналітики від української IT-спільноти DOU за зиму 2024 року. Медіанна зарплата всіх українських розробників, які взяли участь в опитуванні (а їх 5959), наступна: Intern Software Engineer – 350 USD; Junior Software Engineer – 950 USD; Middle Software Engineer – 2500 USD; Senior Software Engineer – 4738 USD. Тепер поглянемо на медіанну ЗП FrontEnd розробників: Junior – 900 USD; Middle – 2400 USD; Senior – 4600 USD. На всіх позиціях зменшення винагороди у порівнянні з аналітикою півроку тому. Виходить, медіана фронтендників майже на всіх тайтлах трохи менша, ніж загальна медіана, проте розрив досить невеликий. Djinni Тепер перейдемо до зарплатної аналітики українського сервісу Djinni і оберемо розділ “JavaScript / FrontEnd” та розглянемо попит за останні 6 місяців. Маємо 17818 кандидатів, зарплатні очікування яких становлять від 600 USD до 3000 USD при зарплатних вилках вакансій 2000-3300 USD. На 1 вакансію в середньому припадає 114.4 відгуки, а кількість пропозицій на кандидата – 0.2. Stack Overflow Developer Survey 2023 Погляньмо, скільки заробляє цей фахівець за межами України. У цьому нам допоможуть результати опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів із США, Індії, Німеччини, Канади, Великої Британії та інших країн). Ця цифра – 59 970 USD на рік (приблизно 5000 USD на місяць). При цьому буде важливо сказати, що фронтендники з даного опитування мають у середньому 8 років професійного кодингу – і це один із найнижчих показників. Нижче за них розташовуються лише Data Scientist / ML Specialist – 7.9 років досвіду, а також студенти, які мають трохи більше 2.8 років досвіду у професійному створенні коду. Чому так багато технологій? Поради новачкам FrontEnd Український ринок FrontEnd дуже сильно перегрітий кандидатами. Роботодавці, звісно, користуються цією ситуацією: виставляють більше вимог до кандидатів і паралельно знижують рівень ЗП. Таким чином вони хочуть відфільтрувати слабких кандидатів і отримати якомога скіловішого фахівця за якомога нижчою ціною, оскільки в Junior-девелопера треба вкласти значну кількість часу та грошей, доки він вийде на таку продуктивність, яка приносить хоч якісь прибутки.  Наша стаття враховує ці нюанси, а тому ми відобразили максимальну кількість технологій, які ви з великою ймовірністю зустрінете у більшості вакансій. Не всі інструменти потрібно знати та вчити, але чим багатший ваш інструментарій, тим більші шанси на працевлаштування. Декілька порад для початківців, які вирішили підкорити FrontEnd: Робіть пет-проєкти і публікуйте їх на GitHub. Створюйте застосунки, які вирішуватимуть ваші повсякденні задачі, і намагайтеся застосувати в них якомога більше вивчених вами технологій. Це дозволяє підтвердити ваші знання на практиці та демонструє потенційному працедавцеві ваші навички кодингу. Використовуйте ШІ. Штучний інтелект буде корисний в низці задач: прискорення розроблення; генерування ідей для пет-проєктів; пояснення складних тем; асистенція при написанні коду тощо. Розвивайте власний бренд. Чим більша ваша популярність в ІТ-спільноті, тим більші шанси запрошення на співбесіду. Для цього найкраще підходить LinkedIn – соціальна мережа для встановлення робочих контактів, але також можна підключити Instagram, YouTube тощо. Публікуйте пости з корисною інформацією, діліться вашими досягненнями, дієвими порадами та особистими враженнями щодо вивчення FrontEnd, і т. д. За вами стануть спостерігати багато ІТ-фахівців, які можуть самі завітати до вас із пропозицією роботи або порекомендувати вас комусь. Не нехтуйте вивченням англійської мови. English є супер важливим в умовах перегрітого ринку джунів – треба обов’язково мати B1. Якщо є декілька сильних кандидатів, які приблизно однакові за soft & hard скілами, роботодавець обере того, хто краще знає англійську. Також згадана аналітика DOU доводить – чим краще знаєш англійську, тим на більшу ЗП можеш претендувати. Менторинг. Максимально вдале рішення – знайти собі ментора. Він буде наглядати за вашим навчанням та прогресом, підкидати задачі/проєкти, давати корисні поради, відповідати на питання тощо. А наприкінці вашого навчання навіть може запропонувати вільне місце в компанії або ж порекомендувати знайомим айтівцям. Відточуйте навички програмування у Codewars або LeetCode. Це спеціальні сервіси для програмування, де ви обираєте собі задачу (є різні рівні складності) та виконуєте її, розвиваючи навички кодингу необхідними мовами. Дуже зручно і корисно, враховуючи, що на співбесіді можуть бути схожі live-coding завдання, а також, що LeetCode використовують девелопери, які готуються до інтерв'ю в топових ІТ-компаніях (Facebook, Google, Amazon тощо). Також на ITVDN є спеціальний інтерактивний практикум, де ви можете “набити руку”. Колаборація з розробниками-початківцями. Долучайтеся до команд однодумців, де ви працюватимете спільно над проєктом, аби отримати навички роботи в команді. Звісно, це не дорівнює комерційному досвіду, який прагнуть побачити у вас роботодавці, але дозволяє попрацювати в умовах, що максимально наближені до реальних. Відвідуйте тематичні ІТ-події в офлайн форматі. Там ви зможете поспілкуватися з іншими девелоперами, показати себе і розширити свою мережу корисних знайомств. Контактувати з ІТ-фахівцями на таких івентах обов’язково! Інакше ви просто дарма витратите час та гроші. Пройдіть пробне інтерв’ю за донат. Ви можете місяцями не отримувати запрошення на співбесіду, через що страждатиме ваша мотивація та впевненість. Аби не падати духом і дати собі об’єктивну оцінку, домовтеся про інтерв’ю з якимось FrontEnd спеціалістом, який проведе вам технічну співбесіду за донат і надасть свої поради щодо подальшого кар’єрного шляху – наразі це популярна тема. Пробне інтерв’ю з рекрутером. Можливо, проблема відсутності запрошень криється у вашому CV або погано оформленому LinkedIn-акаунті? Із цим допоможе розібратися рекрутер або кар’єрний консультант, який надасть свої послуги за гроші або відповідний донат на збройні сили. Стосовно двох останніх пунктів – на ITVDN всі студенти, котрі навчаються у форматі онлайн занять із тренером у групі (Live Online), безкоштовно отримують персональну допомогу щодо подальшого працевлаштування, а саме: індивідуальну консультацію задля визначення персональних цілей; допомогу в складанні CV (резюме) та Cover Letter (супровідного листа); допомогу з оформленням LinkedIn-акаунту; проведення тестового інтерв’ю з розгорнутим фідбеком; формування стратегії пошуку роботи; надання додаткових корисних матеріалів. Підсумки FrontEnd розробник – досить універсальний боєць у світі веброзроблення. Він повинен вміти і верстати, і створювати логіку роботи клієнтської частини, і розуміти роботу серверної частини вебзастосунку. Для опанування такого великого інструментарію варто запастися часом, терпінням та завзятістю. Зазначені у статті засоби розроблення сайтів також мають аналоги, оскільки для вирішення різних завдань підходять різні вебінструменти. Однак ми вибрали найпопулярніші та найефективніші з них. Якщо у вас є бажання опановувати цю професію і ви хочете самостійно “помацати”, чим займається фронтенд розробник, на ITVDN створено комплексну програму навчання у форматі відео навчання, яка включає 51 відео курс. Якщо ж вам більше до вподоби живе онлайн навчання з тренером та у групі з іншими учнями, пропонуємо формат Live Online для вивчення спеціальності FrontEnd (Angular або React напрямки). Бажаємо вам успіхів у досягненні ваших цілей! Залишайтеся з ITVDN!