Що таке React Хто такий React розробник Що має знати React розробник Основні технології Технології з екосистеми реакту Додаткові технології Як вивчити Реакт з нуля Загальний Roadmap Три способи вивчення реакту Поради Висновки   Вітаємо! В даній статті ми поговоримо про одну з найпопулярніших спеціальностей на світовому ринку ІТ-розроблення – React Developer. Ви дізнаєтеся, в чому заключається робота даного спеціаліста, переваги його основного інструменту створення ПЗ, який ще арсенал він тримає при собі, а також як стати реакт розробником і максимізувати шанси на успішне працевлаштування. Що таке React React (інколи React.js, ReactJS) – це JavaScript-бібліотека для створення гнучких та сучасних користувацьких інтерфейсів (UI) для вебзастосунків. Вона дозволяє розробити все те, з чим користувач вебресурсу може взаємодіяти напряму: привабливе оформлення сайту, ефектні анімації, адаптивний дизайн, який підлаштовується під різні девайси тощо. Додатково реакт дозволяє створювати не тільки UI, а й клієнтську логіку: авторизація на сайті, чати для спілкування з менеджерами та інша взаємодія. Зазвичай вона виноситься в окремі модулі, а також застосовуються так звані хуки (hooks). Відповідно до опитування Stack Overflow Developer Survey 2023 (90+ тисяч респондентів з усього світу), бібліотека React є найпопулярнішим інструментом для веброзробки на FrontEnd стороні. Це ж підтверджують дані від Statista – глобальної платформи даних та бізнес-аналітики. Підтримують та розвивають бібліотеку реакт девелопери з Meta (Facebook). Вона має відкритий вихідний код, а її рішеннями послуговуються такі відомі компанії, як Airbnb, Netflix, Yahoo, Atlassian, Sony, Instagram, Reddit та багато інших. Сильні сторони реакту ми висвітили в наступній таблиці: Переваги React Короткий опис Легкість Реакт проста, швидка та зручна як у вивченні, так і в роботі (легша, ніж Angular, але дещо складніша за Vue.js) Компонентна архітектура Сприяє зручному перевикористанню компонентів у різних ділянках проєкту Віртуальна DOM (Document Object Model) Дозволяє оновлювати та рендерити лише ті компоненти, які зазнали змін – це підвищує швидкодію застосунків Проста інтеграція з BackEnd Бібліотека легко інтегрується з BackEnd-інструментами на базі мови JavaScript, яку також використовує React Об’ємна екосистема Існує велика кількість додаткових інструментів та бібліотек, які спрощують і пришвидшують розроблення Дружність по відношенню до SEO Легкість оптимізації вебінтерфейсів під SEO-вимоги для кращої індексації в пошукових системах Потужна спільнота Ком’юніті реакт розробників багаточисельне та є рушієм постійного вдосконалення, а також швидкого вирішення проблем під час розроблення Для чого використовують React? Дана бібліотека гарно підходить для побудови користувацьких вебінтерфейсів, які відзначаються високими показниками динамічності та продуктивності. Компонентна архітектура дозволяє створювати такі компоненти інтерфейсу, котрі можна з легкістю використовувати повторно. Віртуальна DOM підвищує продуктивність, мінімізуючи ресурсозатратні прямі маніпуляції з реальною DOM, що робить реакт ідеальною для застосунків з високою частотою оновлень та високим ступенем інтерактивності. Хто такий React розробник React розробник – це ІТ-спеціаліст, який створює клієнтську сторону вебзастосунків за допомогою бібліотеки React. Він є фахівцем напрямку FrontEnd, і серед його основних задач – реалізація зовнішнього вигляду вебсервісів, а також створення відповідної користувацької логіки. Що робить реакт розробник? Його типові задачі: верстання клієнтської сторони вебсервісу згідно з дизайнерськими макетами; створення ефективних компонентів застосунку, які є головними будівельними блоками в реакті; написання FrontEnd-логіки; реалізація прийому-передачі даних з BackEnd-стороною та сторонніми API; створення unit-тестів для забезпечення коректної роботи кожної ділянки коду; підтримка та оновлення існуючого коду для забезпечення сумісності з новими версіями ReactJS та інших технологій; створення та підтримка проєктної документації; участь у код-рев’ю; рефакторинг написаного коду; взаємодія з іншими членами команди: FrontEnd та BackEnd розробники, Project Manager (або замовник), UX/UI дизайнери тощо. Що має знати React розробник З кожним роком очікування працедавця від Junior React Developer зростають. Це природний процес, на який впливає збільшення кількості розробницьких інструментів. Також прохідну планку підвищують нещодавня пандемія коронавірусу й повномасштабне вторгнення. Основні технології Якими технологіями необхідно володіти сьогодні, аби отримати першу роботу як реакт розробник? Головні інструменти: HTML & CSS – це основні структурні блоки вебресурсу, які відображають інформацію користувачеві. HTML як мова розмітки формує каркас і дає текст, а CSS – оформлення, стилізацію, прості анімації. Також буде важливим опанувати семантичне верстання та верстання під мобільні пристрої.   Flexbox, Grid – технології гнучкого верстання, що дозволяють створювати адаптивні вебінтерфейси, пристосовані до різних екранів: варіації моніторів, смартфони, планшети тощо.   JavaScript – ключова мова програмування, яка тримає фронтенд. Важливо володіти нею на високому рівні, адже реакт за замовчуванням використовує саме джаваскрипт. Все більшої популярності набирає TypeScript в комбінації з React JS, але про нього поговоримо згодом.   Git – інструмент керування версіями, обов’язковий для вивчення багатьом розробникам різних напрямків. Переходьте до нього якомога раніше, в ідеалі – одразу після опанування основ HTML & CSS.   GitHub / GitLab – вебсервіси для розміщення ваших проєктів з метою ведення командного розроблення та формування вашого портфоліо. Можете обирати той, який вам до вподоби: GitHub найпопулярніший у світі, а GitLab створений українцями)   REST API – архітектурний стиль для реалізації взаємодії між вебзастосунками. Маст-хев для всіх розробників, дотичних до вебу.   React – головна бібліотека героя цієї статті. Часто використовується для створення складних, інтерактивних вебзастосунків, й особливо добре підходить для односторінкових вебдодатків (SPA). Також додамо до списку володіння принципами написання чистого коду (SOLID, KISS, DRY), вміння проводити рефакторинг свого коду, а також англійську мову на рівні мінімум B1 (для зручного читання технічної документації). Але чим краще ви знаєте інгліш, тим більше шансів ви матимете на працевлаштування та більш високу ЗП. Технології з екосистеми React Окрім класичних реактівських тем, як-от віртуальний DOM, стани, хуки, запити до сервера, оптимізація пам’яті тощо, треба опанувати низку додаткових інструментів з її екосистеми, а саме: Redux / Redux Toolkit – бібліотека для управління станами на клієнті.   React Router – допомагає в реалізації клієнтської маршрутизації, що дозволяє легко керувати навігацією на стороні FrontEnd.   React Hook Form – бібліотека для ефективної та простої роботи з користувацькими даними у формах.   React Testing Library або Jest – інструменти для unit-тестування коду. Додаткові технології Інструменти вище являють мінімум, необхідний для успішного працевлаштування. Однак реалії поточного ринку ІТ такі, що аби зафіксувати увагу працедавця на собі, треба знати й уміти більше. Розглянемо найпоширеніші додаткові технології, які часто зустрічаються у вакансіях на Djinni, DOU.ua, у телеграм-пабліках, LinkedIn тощо. Інструменти стилізації. Сюди відносяться бібліотеки та фреймворки, які впливають на продуктивність верстання, наприклад Tailwind CSS, Material UI, Chakra UI, Bootstrap тощо. Також популярні CSS-препроцесори, як-от SASS, SCSS, Stylus, LESS. Все вчити необов’язково, просто оберіть із першого та другого переліку найбільш популярні інструменти й зверстайте ними декілька проєктів.   Алгоритми та структури даних (ADS) – тема, через яку має пройти кожен програміст. Як початківцю React JS, немає потреби глибоко закопуватися в ADS, але треба обов’язково знати теорію, мати розуміння щодо застосування тієї чи іншої структури даних, здатність оцінити складність алгоритму та вміти реалізовувати популярні алгоритми сортування та пошуку.   Патерни проєктування – загальноприйняті принципи вирішення популярних задач у програмуванні. Допомагають підтримувати зрозумілість, чистоту, масштабованість і читабельність коду.   Webpack – збирач модулів, котрий дозволяє скомпілювати в один файл різні складові проєкту і таким чином полегшити розроблення.   TypeScript – мова програмування, котра являє собою синтаксичний цукор для JavaScript. Все частіше у вакансіях з’являються вимоги до знання TS, особливо цю тенденцію підкреслює лютневий рейтинг мов програмування від DOU.   Figma – дизайнерський інструмент для створення UI вебсервісів. Володіння основами фігми є важливим для React FrontEnd розробників – дозволяє оперативно верстати вебсторінки з дизайнерського Figma-макету.   Next.js є фреймворком, що дозволяє вебзастосункам на базі реакт використовувати технології рендерингу на серверній стороні (SSR) та статичного генерування сайту (SSG), що позитивно впливає на продуктивність і SEO-параметри. Гарний вибір для розробників, які створюють FrontEnd, але прагнуть мати доступ до певних BackEnd-можливостей.   React Native – фреймворк з екосистеми реакту, який дозволяє створювати мобільні застосунки під iOS та Android, а також десктопні рішення. Досить часто з’являється у вакансіях, тому знання React Native може стати вашою ключовою перевагою.   Node.js – платформа для серверного розроблення, яка дозволяє створювати BackEnd-частину вебзастосунку тією ж JavaScript і таким чином перейти у FullStack. Все частіше розробники додатково вчать ноду, аби збільшити свою привабливість для роботодавця. Як вивчити React з нуля Процес вивчення Реакт технологій може бути досить заплутаним для новачків. Нижче ми розрубуємо цей гордіїв вузол. Загальний Roadmap Отже, з чого почати опанування професії Trainee / Junior React Developer та як рухатися: Знайомство з вебом. Як майбутній розробник, який створює FrontEnd-сторону для вебзастосунків, ви маєте розуміти дану предметну область: що таке інтернет і як він функціонує, як працює браузер, що таке протоколи HTTP/HTTPS, DNS, доменне ім’я, хостинг тощо.   Вивчення верстання – HTML & CSS. База, фундамент, ґрунт фронтенду. Обов’язково підкріплюйте знання верстанням вебсторінок – в інтернеті багато сервісів із безкоштовними макетами.   Поглиблені техніки: адаптивне, семантичне верстання. Реакт розробник повинен підлаштовувати свої вебрішення під екрани різних розмірів, а також враховувати вимоги сучасних пошуковиків до HTML-семантики. Курси “CSS Flexbox” та “Верстка на Grid” швидко і легко навчать вас створювати адаптивні рішення.   Вивчення Git & GitHub. Після опанування основ верстання можете переходити до Git і GitHub / GitLab. Зверстайте декілька вебсайтів і опублікуйте на віддаленому репозиторії для практики.   JavaScript. Головна мова програмування для реакт розробника. Паралельно з її вивченням регулярно практикуйтеся на Codewars та LeetCode, в ідеалі – щодня.   React. Гарний фундамент у JS відкриває двері до вирішення питання як вивчити реакт з нуля. А найкраще це робити за допомогою курсів “React Базовий” та “React Поглиблений”, котрі розкривають усі необхідні теми. Вивчайте екосистему реакту, створюйте реакт-проєкти і публікуйте їх на GitHub / GitLab. З одного боку, ви відточуватимете свої навички, а з іншого – будете формувати своє портфоліо. З огляду на стрімкий ріст популярності TypeScript, радимо вивчити й цю мову. Якщо ви знаєте JS, багато часу тайпскрипт у вас не забере. Найголовнішу, чітку та структуровану інформацію ви знайдете у нашому однойменному курсі. Три способи вивчення React Існує три головні підходи до вивчення ІТ-спеціальностей – реакту в тому числі: самостійне вивчення за безкоштовними ресурсами; навчання за платними відео курсами; навчання у форматі живих уроків онлайн або офлайн. Самостійне навчання дозволяє зекономити кошти, натомість ви самостійно шукатимете всю інформацію: навчальні ресурси, матеріали, приклади коду, поради тощо. Цей варіант підходить невеликому відсотку людей, які мають гарну самодисципліну, незмінно високу мотивацію та справжній вогонь в очах. Це дійсно самурайський шлях React розробника – не кожен зможе витримати даний темп і осилити всю дорогу. Навчання за платними відео курсами – це золота середина між вашим темпом життя та опануванням сучасної ІТ-професії. Ви одразу отримуєте структуровані та актуальні навчальні матеріали, конспекти, приклади коду, можливість консультації і т. д. Вам не потрібно шукати це все в інтернеті. При цьому ви зберігаєте гнучкість у навчанні – займайтеся вивченням спеціальності тоді, коли вам зручно. З мінусів – немає чіткого важіля впливу на вашу мотивацію та дисципліну. Ви можете тиждень позайматися й закинути відео курси на місяць, і всі ваші досягнення будуть марними. Навчання у форматі живих онлайн або офлайн занять – найефективніша форма опанування спеціальності, зокрема напрямку React Developer. Ви займаєтеся в групі (а це підтримує мотивацію та здорову конкуренцію), отримуєте інформацію в режимі реального часу від досвідченого ментора, який дає вам найважливіші знання та відповіді на всі ваші питання. Регулярні д/з з перевірками та фідбеком, курсові роботи і тестування, відповідальність перед ментором та групою – таке середовище максимально сприяє вашій концентрації на навчанні. Це найдорожчий формат навчання, але результати того варті. Поради, які працюють Які поради з вивчення реакту будуть ефективними?   Використовуйте ШІ для навчання. Штучний інтелект не повинен писати за вас код, однак його доцільно використовувати для пояснення теми, частини коду, консультації щодо покращення коду або наштовхування вас на правильне рішення задачі тощо.   Практикуйтеся якомога частіше. Стати гарним програмістом можна виключно шляхом регулярного кодингу, оскільки цей напрям дуже зав’язаний на практиці. В ідеалі писати код щодня по декілька годин (мінімум 2).   Покращуйте володіння англійською мовою. Український ринок ІТ дуже перегрітий новачками, тому вимоги до англійської зростають все більше – компанії прагнуть відібрати найкращих кандидатів. Також гарний English дозволяє претендувати на вищі ЗП, відповідно до зарплатного опитування DOU (січень 2024).   Знайдіть собі ментора. Ідеальний варіант для вивчення React напрямку – наставництво досвідченого спеціаліста. Ментор надасть вам корисні лайфхаки зі спеціальності, прискорить ваш прогрес, підтримуватиме мотивацію, а також – є певна ймовірність – може забрати до себе в компанію (або порекомендує комусь). Найкращі майданчики пошуку менторів – LinkedIn, університетські спільноти технічних ВНЗ тощо.   Долучайтеся до спільнот однодумців. Рухатися у вивченні чогось нового завжди легше, коли робиш це разом із іншими. Вже згаданий LinkedIn та Telegram мають велику кількість спільнот за інтересами. Повноцінну збірку українських ІТ-спільнот ви можете знайти на сайті Ukrainian IT Communities.   Відвідуйте онлайн та офлайн події. Це можливість знайти корисні знайомства, які можуть призвести до менторингу, працевлаштування та іншим вигодам.   Пробне інтерв’ю з розробником. Не запрошують на співбесіди? Не біда! Ви можете пройти пробне інтерв’ю зі справжнім розробником за донат. Таким чином ви отримаєте корисний зворотний зв’язок і зрозумієте свої слабкі сторони, визначите напрямок подальшого розвитку в напрямку Реакт.   Пробне інтерв’ю з рекрутером. Якщо співбесіда з розробником більше сфокусована на перевірці ваших hard навичок, то рекрутер дозволяє проаналізувати soft скіли, ваше резюме та робочі акаунти, вміння правильно підсвітити свої переваги.  Зважаючи на велику конкуренцію на ринку праці, радимо не зупинятися на Реакті. Чим більше знань та навичок у вас є, тим привабливіші ви для працедавця. Як тільки надійно опануєте даний FrontEnd-напрямок, потроху рухайтеся до BackEnd або Mobile розроблення. Для створення серверної частини вивчайте Node.js і відповідну інфраструктуру, а якщо вас більше цікавить ПЗ під гаджети – React Native. Ми якраз маємо новий курс із нейтіву українською. І новий відео курс із Node.js також!   Якщо ви зацікавлені в якомога швидшому працевлаштуванні після вивчення ІТ-спеціальності, зверніть увагу на Live Online навчання в групі з ментором на ITVDN – він має низку вагомих переваг. Кожному, хто навчається в даному форматі, з першого дня і до моменту отримання job-оферу доступна безкоштовна допомога від нашого HR-спеціаліста: визначення ваших цілей на персональній консультації; асистенція під час складання резюме (CV) та супровідного листа (Cover Letter); асистенція з оформлення LinkedIn-акаунту; тестове інтерв’ю з нашим спеціалістом + визначення ваших сильних та слабких сторін; розроблення job-search стратегії; надання додаткових корисних матеріалів. Висновки В поточних реаліях стати реакт розробником складно, але можливо. Ринок ІТ переповнений джунами, які хочуть “увійти в ІТ” швидко й без клопоту. Аби відсіяти таких кандидатів і зібрати найкращих, компанії виставляють все більше вимог. Саме тому до навчання, портфоліо, резюме та інших елементів потрібно ставитися з особливою відповідальністю. Якщо вас цікавить навчання за відео курсами, переходьте за посиланням на сторінку спеціальності React Developer. Там ви знайдете цілу збірку відео курсів, яка допоможе вам опанувати найважливіші аспекти спеціальності. Якщо ж ви надаєте перевагу максимально ефективній формі навчання, пропонуємо розглянути можливість навчання у форматі Live Online з ментором у групі за спеціальністю FrontEnd Developer на ITVDN. Успіхів у вашому вивченні react js! Залишайтеся з ITVDN!

Кто такой верстальщик? Языки верстки HTML & CSS Техники верстки Препроцессоры Графический редактор и векторная графика Инструмент упрощения верстки Bootstrap 4 Язык программирования JavaScript Библиотека jQuery Методология БЭМ Вспомогательные инструменты Система управления версиями Git Английский язык Итоги   Всем привет! Вы когда-либо задумывались о том, как происходит полный цикл разработки современного веб-сайта? С чего все начинается и как мы приходим к такому сервису, который имеет привлекательный и гармоничный внешний вид, а также богатый функционал? Давайте разберемся с этим вопросом, а заодно поближе познакомимся с героем данной статьи. Прежде всего стоит знать, что сегодня человек-оркестр, который мог бы осуществить полный цикл создания веб-сайта — очень редкое явление. Процесс реализации одной только клиентской стороны уже является трудом целой команды специалистов. Если говорить о профессиональной веб-студии, то разработка несложного корпоративного веб-сайта осуществляется следующим образом. Вначале за заказчика сайта берется менеджер по продажам. Он общается с клиентом через телефон, электронную почту, при личной встрече. Обсуждает все детали возможного сотрудничества. Задача менеджера по продажам — решить все финансовые и юридические нюансы, связанные с созданием сайта. После заключения договора и оплаты услуг наступает звездный час PM`а (менеджер проекта), который и управляет проектом. Он ответственен за координацию действий команды разработчиков: проектирование и расстановка приоритетов, планирование выполнения задач, контроль, своевременное решение проблем, согласование промежуточных и конечных этапов создания и продвижения сайта. PM является связующим звеном между заказчиком и разработчиками: он плотно сотрудничает с клиентом, выясняет его требования, желания, предпочтения, затем конвертирует всю информацию в понятный команде девелоперов вид. После определения требований за работу берется веб-дизайнер. Данный специалист занимается графической и художественной составляющими сайта. В этой секции веб-кухни происходит создание красивого и приятного интерфейса с удобным размещением кнопок, меню и других элементов веб-сайта. На выходе получаются макеты, которые учитывают различные платформы потенциальных посетителей (стандартные и широкоформатные экраны ПК, планшеты, мобильные устройства и т. д.). Результат работы веб-дизайнера — графическая схема с указанием оттенков, отступов и других параметров веб-сайта в статическом виде, которая максимально точно отображает внешний вид будущего сайта. Фактически, это точный рисунок сайта. Готовый макет передается в руки верстальщика. Теперь при помощи различных элементов языка разметки веб-страницы графические элементы дизайна (рисунки, шрифты, таблицы и т. д.) будут переведены в понятный для браузера формат. Можно сказать, что он создает текстовый макет того, что придумал дизайнер. После того, как страница сверстана и проверена в различных браузерах на правильность отображения, она передается в работу специалисту, который подключает необходимый клиентский функционал, используя JavaScript-фреймворки, библиотеки и сопутствующие технологии. Как правило это FrontEnd разработчик. Затем начинается работа BackEnd разработчика, который занимается реализацией серверной стороны веб-сайта (базы данных, серверная архитектура, программная логика). Обработка пользовательских запросов, хранение и оперирование пользовательскими данными, аутентификация, оптимизация функциональных возможностей сайта и многое другое — обязанности бэкендщика. С уже готовым сайтом работают те специалисты, которые ответственны за его наполнение и продвижение в поисковых системах: контент-менеджер, специалист по контекстной рекламе, SEO-специалист, копирайтер и другие. Сегодня же нас интересует именно тот, кто превращает графику в узнаваемый браузером формат — верстальщик. Разберемся в специфике его работы и навыках, которыми должен обладать потенциальный кандидат на данную должность.   Кто такой верстальщик? Сразу дадим определение терминам, которые важны для составления целостной картины. Верстальщик — это специалист, который занимается версткой интернет-страниц. Верстка — процесс создания визуальной составляющей сайта. Структура самого сайта задается языком гипертекстовой разметки HTML, а каскадная таблица стилей CSS описывает его внешний вид. Проще говоря, HTML задает каркас страницы, а CSS занимается его облагораживанием (цвет, шрифты, стили, расположение, отображение блоков и т. д.). Если говорить о профессиональной верстке, то она происходит согласно заранее разработанному макету, который обычно создает веб-дизайнер, знающий тонкости своего ремесла. После получения графического документа от дизайнера верстальщик использует Photoshop или другие аналоги для извлечения необходимой информации (Illustrator, Sketch, Figma и другие): используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Только после такой подготовительной работы герой нашей статьи может открыть среду написания кода и приступить к верстке. Давайте узнаем, каков арсенал инструментов использует верстальщик в своей работе.   Какие языки / технологии / инструменты применяет верстальщик?   HTML & CSS Языки верстки, которые мы уже упоминали. Являются главными инструментами верстальщика. Без них не обходится создание ни одного веб-сайта. HTML определяет его структуру (костяк), а CSS — внешний вид (вся остальная надстройка).   Техники верстки Для создания качественных веб-сайтов необходимо использовать специальные техники, которые упрощают верстку, делая код понятным и легко масштабируемым. Таким образом, выделяют три вида верстки:   фиксированная; резиновая; адаптивная. Фиксированную верстку применяли еще при создании самых первых сайтов. Тогда они были простые, не требовали какой-либо оптимизации и кроссбраузерности, а потому не было потребности в разработке новых сайтостроительных техник. При фиксированной верстке ширина сайта всегда одинаковая вне зависимости от разрешения экрана. Это самый простой подход к реализации верстки, но при этом самый непопулярный, поскольку сегодня пользователи используют множество моделей компьютеров, ноутбуков, телефонов и планшетов для выхода в сеть. В связи с этим, разрешение экранов варьируется от 200 до 3000 пикселей. Резиновая верстка способна менять размеры сайта в зависимости от размерности экрана. Таким образом, проблемы фиксированного вида решаются, однако сама процедура набора страницы усложняется. Верстальщику приходится думать о том, как растянуть картинки, чтобы они не потеряли в качестве и корректно отображались на всевозможных девайсах. Ну и о производительности не забывать. Кому нужен сайт, который будет прогружаться вечность? Адаптивная верстка является самой сложной. Сайт помимо размеров меняет свой внешний вид в зависимости от размеров устройства, на котором воспроизводится. Ориентирована в первую очередь на мобильные устройства, оттого и имеет сегодня большой спрос. Также, качественная верстка должна обладать следующими свойствами: семантичность; кроссбраузерность; валидность. Семантика в верстке означает соответствие тегов информации, которая находится внутри них. С ее использованием код становится чище, читабельнее и лаконичнее. Более того, поисковые системы начинают лучше воспринимать такие сайты, повышая их позиции при ранжировке.    Кроссбраузерность означает, что разработанный сайт должен качественно отображаться во всех популярных браузерах (Mozilla Firefox, Opera, Google Chrome, Safari, IE). Почему она так важна? Все дело в том, что один и тот же сайт может по-разному отображаться в разных браузерах. Не будем заглядывать за кулисы этого явления — просто подчеркнем, что современные сайты обязаны отвечать требованию кроссбраузерности. Валидность веб-сайта означает соответствие его HTML-кода стандартам W3C (Консорциум Всемирной паутины). Валидация предусматривает соблюдение корректности кода страниц, отсутствие синтаксических ошибок, наличие вложенности тегов и т. д. Проверка HTML-кода выполняется при помощи специальной программы — валидатора кода. Она находит и фиксирует все несоответствия со стандартом, указывая на их местонахождение и формулируя, где проблемный участок и почему он должен быть исправлен. Естественно, важным является и тот нюанс, что ваш код должен быть минимален, а интернет-страница, созданная с его помощью, должна быстро прогружаться. Ниже мы также рассмотрим вспомогательные инструменты, которые обеспечивают выполнение этих условий.   Sass/SCSS Препроцессор, который является расширением CSS. Если современный CSS сам по себе простой и мощный инструмент, то в комбинации с препроцессором это вовсе боевая машина для качественного оформления контента на интернет-страницах. Польза Sass/SCSS особенно отчетливо ощущается в больших проектах, когда количество строчек кода кажется бесконечным. Препроцессор позволяет использовать функции, недоступные в самом CSS. Например, переменные, вложенности, миксины, наследование и другие вещи, которые упрощают и делают удобным написание CSS-кода.   Photoshop / Illustrator / Sketch / Figma / Avocode Графический редактор, как мы уже упоминали, необходим верстальщику для извлечения необходимой информации из предварительно подготовленного макета: используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Какой редактор был использован для создания макета, такой следует использовать и для изъятия необходимых данных.   SVG Вдогонку за графическими редакторами упомянем об SVG. Это язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других. Верстальщик должен уметь работать с SVG, поскольку он важен для оптимизации и быстродействия сайта, а также используется для реализации анимации векторных изображений, разработки прелоадеров и других интерактивностей.   Bootstrap 4 Это HTML, CSS, JS фреймворк для разработки кроссбраузерных веб ориентированных интерфейсов. Bootstrap являет собой набор инструментов от Twitter, созданный для облегчения разработки веб-приложений и сайтов. Он использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, упрощающие работу веб-разработчика. Данные свойства позволяют коду, написанному с применением Bootstrap, быть переиспользуемым, понятным и компактным. Основные преимущества фреймворка: высокая скорость верстки; кроссбраузерность и кроссплатформенность; наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов; низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).    JavaScript Язык программирования, который повсеместно используется в создании сайтов, даже в реализации их серверной стороны. Становиться ниндзя JavaScript верстальщику не нужно — это задача FrontEnd разработчика, который прорабатывает логику клиентской стороны веб-приложений. Герою статьи JS необходим для реализации различных динамических элементов на странице: анимации, слайдеры, калькуляторы и т. д. Также, этот язык применяется для подключения различных библиотек и определенных взаимодействий с ними. Знание базы JavaScript необходимо для комфортного использования библиотеки jQuery, подробнее о которой пойдет далее речь.     jQuery Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она упрощает процесс программирования на JS и представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода. Этой особенностью jQuery приносит ощутимую пользу верстальщикам. Вместо углубления в JavaScript и написания тонны кода, можно просто использовать уже готовые решения в различных задачах.   Методология БЭМ “Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.). Таким образом обеспечивается расширяемость и повторная используемость компонентов интерфейса. Соблюдение принципов БЭМ повышает качество, читаемость кода, увеличивает производительность и упрощает командную работу.   CMS (Wordpress / Opencart / Joomla / Bitrix) Content Management System — система управления контентом, являющая собой движок для обеспечения и организации процесса создания, редактирования и управления контентом. В случае отсутствия CMS разработчики были бы обязаны реализовывать дополнительную функциональность для каждой новой страницы, вносить новый контент самостоятельно программным путем и т. д. Ниже приведем пример для наглядности. Допустим, вы ведете собственный блог на специализированной платформе и у вас появилась необходимость сделать новую рубрику. Вы же не будете просить целую команду разработчиков создать новую интернет-страницу с нуля со всей функциональностью либо дорабатывать уже существующую под каждый новый пост? А в случае с интернет-магазином вы были бы вынуждены проделывать такие манипуляции для каждого нового товара. Вот для этого и существуют CMS. Они предоставляют удобную администраторскую панель вашему сайту, с которой в дальнейшем работает контент-менеджер. В профессиональной среде процесс настройки взаимодействия движка и готового шаблона сайта называется “натяжкой” шаблона на CMS. Основные функции CMS: предоставление инструментария для работы над контентом; управление контентом — хранение, управление потоком документов, соблюдение режима доступа, контроль версий; публикация контента; представление необходимой информации в удобном для навигации и поиска виде.        Gulp / Webpack Gulp — система сборки, которая автоматизирует рутинные задачи верстальщика. В число ее обязанностей входят: минимизация кода, оптимизация изображений, тестирование, анализ качества кода и прочее. Другими словами, она используется для сбора верстки. Webpack по сравнению с Gulp обладает более широкими настройками и функционалом. Предназначенный для удобной разработки одностраничных веб-приложений с использованием JavaScript.   Git Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок. Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.   Английский язык Знание английского языка является одним из основных требований к верстальщику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.    Итоги Верстальщик — это специалист по верстке веб-страниц. Несмотря на довольно лаконичное определение, список требуемых от него знаний и навыков гораздо красноречивее. Верстальщик в 2020-м году должен владеть неплохим стеком технологий. Более того, мы привели лишь общий список инструментов. В реальности он может немного отличаться согласно направлению деятельности компании/веб-студии. Если к перечисленному добавить углубленные познания JavaScript и хорошее владение одним из фреймворков (Angular, Vue.js, React) + парочка смежных технологий, получится полноценный FrontEnd разработчик.  Отдельно отметим портфолио верстальщика. Оно должно быть в наличии у данного специалиста в обязательном порядке, иначе шансы получить job-оффер ничтожно малы (не забывайте и о конкуренции). В портфолио вам необходимо продемонстрировать все свои навыки и умения. Это может быть десяток проектов с использованием по крупице различных технологий в каждом, либо пара-тройка, но с концентрированием всех ваших умений и познаний в верстке. В этом случае пригодятся специальные ресурсы с опубликованными бесплатными макетами, которые можно брать и верстать, набивая руку и набираясь опыта. Также, если вы заинтересованы в изучении ремесла верстальщика, ITVDN имеет для вас хорошие новости. На нашем образовательном ресурсе вы сможете освоить данную специальность за 4 месяца. Учебная программа каждой специальности, в том числе и верстальщика, содержит: тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности верстальщик, в частности, с вебинара Елены Хижняк “Как стать верстальщиком?”, в котором отражены все самые актуальные тренды и требования. Возможно, нас читают практикующие верстальщики? С удовольствием прочтем вашу точку зрения на позиции, изложенные в данной статье. Также, будем рады любым вопросам и замечаниям от всех читателей! Ну а тем, кто решил выбрать профессию верстальщик мы желаем быть упрямыми, оптимистичными и с неугасаемым огоньком жажды знаний в глазах.Успехов и вдохновения на вашем пути!

Вітаємо! Друзі, цього разу ми підготували для вас підбірку найкращих вебінарів від ITVDN за напрямком Python. До рейтингу увійшли як пізнавальні вебінари з актуальною інформацією, так і вебінари, орієнтовані на прокачування ваших навичок створення коду. Давайте приступимо до їх розгляду.     Пишемо API додаток на Python за допомогою FastAPI та Docker   Автор – Антон Козаченко, Python Back-end Developer з Латвії   На вебінарі автор розбирає приклад написання API додатку на Python за допомогою фреймворку FastAPI та інструменту Docker. Розглядається фреймворк FastAPI, також створюється декілька методів API. Автор розглядає Docker, пише свою конфігурацію та запускає контейнери. Додатково відбувається покриття API додатку тестами.   План вебінару:   Ознайомлення із фреймворком FastAPI. Написання кількох endpoint-ів API. Написання тестів для цих endpoint-ів. Написання конфігурації для Docker. Запуск додатку в Docker containers. Запуск тестів.     2. Підготовка до технічної співбесіди з Python ➤ Як пройти співбесіду на Junior Python?   Авторка – Людмила Міщенко, Python розробниця   Вебінар присвячений ключовим моментам технічної співбесіди на позицію Junior Python Developer. Розглядаються найчастіші питання, логічні та технічні завдання. Ви дізнаєтесь, як правильно готуватися до співбесіди. Приділено увагу тому, як отримати користь від проходження технічного інтерв'ю та як залишити приємне враження про себе у спеціалістів компанії. Також автор порушує теми важливості роботи над помилками та аналізу співбесіди.   План вебінару:   Як готуватися до технічної співбесіди? На які запитання має знати відповідь Junior Python Developer? На що у відповідях кандидатів найбільше звертають увагу? Чи потрібні (і яку роль грають) pet-projects для фахівця-початківця? Як не розгубитися під час кодингу на співбесіді? (+ поради та лайфхаки) Робота над помилками та аналіз фідбеку після співбесіди.     3. Що краще: Django, Flask чи FastAPI? Огляд фреймворків для веб-розроблення на Python.   Автор – Максим Кузнєцов, Senior Python Developer   В даному вебінарі розглядаються декілька популярних веб-фреймворків на Python (Django, Flask, FastAPI). Автор порівнює їхню продуктивність і пояснює, для яких цілей який фреймворк більше підійде.   План вебінару:   Огляд Django та його фічі. Огляд Flask та його фічі. Огляд FastAPI та його фічі. Порівняння продуктивності. Коли який фреймворк вигідно застосовувати. Відповіді на питання.   Даний вебінар буде цікавий Python розробникам-початківцям, і тим, хто збирається перейти на Python і хоче спланувати своє навчання з урахуванням особливостей різних інструментів.     4. Створення гри BlackJack на Python з нуля (Частина 1 та Частина 2)   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   "Створення гри BlackJack на Python" – це дводенний інтенсивний тренінг зі створення відомої карткової гри. Вебінар покликаний у захоплюючій формі познайомити новачків з Python та попрактикуватися у написанні коду цією мовою. Мінімум теорії та максимум практики – що ще потрібно для швидкого старту в програмуванні?   Чому можна навчитися, вивчивши відео матеріали тренінгу та випробувавши отримані знання на практиці:   Писати просту програму мовою Python Розбивати завдання на дрібні підзадачі та успішно їх вирішувати Проєктувати архітектуру програм Писати програми на рівні класів Розв'язувати алгоритмічні задачі Розуміти призначення патернів проєктування   План першого відео (першої частини):   Знайомство із середовищем розроблення PyCharm та мовою програмування Python. Розбір основних елементів мови. Створення архітектури програми на рівні класів. Поліпшення архітектури з використанням патернів. Створення перших об'єктів.   План другого відео (другої частини):   Створення структури проєкту. Наслідування та композиція. Створення спеціальних типів даних. Зв'язок компонентів між собою. Тестування. Підбиття підсумків.     5. Об'єктно-орієнтоване програмування в Python ➤ Що таке ООП та як воно працює.   Автор – Бондаренко Кирило, Data Scientist / Python Developer, "CreatorIQ"   Об'єктно-орієнтоване програмування (ООП) – дуже важлива парадигма у сучасному програмуванні. Цей вебінар розкриває основні принципи ООП і показує, як вони реалізовані у мові Python.   Наскільки важливим є знання ООП для Python розробника? Як часто доводиться використовувати ООП у роботі? У яких проєктах, у яких завданнях? Чи візьмуть вас працювати без знання ООП? Ці та інші питання будуть поставлені в даному вебінарі.   Теми, що розкриваються:   Що таке ООП і як це працює у Python. Приклади розв'язання задач через ООП. Підбиття підсумків. Відповіді на питання.     6. Створення чат-бота "прогноз погоди" на Python   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   Якщо ви хочете випробувати свої сили в програмуванні на Python і створити власного Telegram-бота, який сповіщатиме вас про актуальну погоду, цей відеоролик буде дуже доречним.   Підійде як новачкам, які ніколи не програмували, так і розробникам-початківцям, які бажають поглибити і застосувати на практиці свої знання Python.   План:   Рівні моделі мережі Інтернет. Що таке бібліотеки на Python. Що таке API. Telegram API. Бібліотеки для Telegram API. Робота з чистим API.   Чого ви навчитеся:   Реалізовувати нескладну програму мовою Python, яка прогнозуватиме погоду. Основам базового синтаксису мови Python. Теоретичним основам API – зрозумієте, як він працює. Працювати із запитами. Створювати роботів для месенджеру Telegram. Використовувати існуючі сервіси для прив'язки до вашої програми.     Автоматизація парсингу сайтів на Python   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   В епоху машинного навчання інформація стає нафтою XXI століття. Проєкти, пов'язані зі збором та аналізом даних, виходять на перші позиції у глобальних компаніях та в стартапах.   Як збирати та обробляти інформацію? Залежно від цілей проєкту, дані можуть збиратися абсолютно різні. На вебінарі ми розглянемо один із найпоширеніших підходів – парсинг сайтів.   Ми візьмемо один із популярних сайтів з робочими вакансіями та на його прикладі розберемо бібліотеки для парсингу веб-сайтів, бібліотеки для роботи із запитами. Розберемо види популярних баз даних і зрозуміємо, де і яку потрібно використовувати.   План вебінару:   Що таке парсинг веб-сайтів? Бібліотеки для парсингу веб-сайтів. Бібліотеки для роботи із мережею. Написання коду парсерів. SQL та NoSQL – за яких завдань який тип використовується. Написання коду менеджерів баз даних.     8. Створення простої казуальної гри на Python   Авторка – Людмила Міщенко, Python розробниця   На вебінарі буде розглянуто реалізацію простої гри на Python. Суть гри полягає у навчанні людей, особливо дітей, вести еко-дружній спосіб життя – правильно сортувати сміття. Тобто, користь буде не тільки для вас у отриманні нових знань у програмуванні, а й у спробі виявити більше турботи про нашу планету.   План вебінару:   1. Постановка задачі.   а) Мета вебінару – створити свою гру на Python, яка вчить сортувати сміття; б) правила гри – обирати правильний кошик для різного типу сміття; закінчення гри за таймером; наприкінці гри користувач отримує суму зароблених балів за правильно обрані кошики.   2. Реалізація програми:   а) встановлення модулів; б) завантаження потрібних зображень; в) написання логіки влучення сміття в кошик (поведінка кошика); г) оголошення та опис елементів сміття (органіка, пластик, папір) – клас поведінки сміття; д) виклик написаних класів та запуск гри.   3. Отримання результатів:   а) запуск та тестування коду; б) проходження гри; в) аналіз виконаної роботи – додавання та зміна умов гри, оптимізація коду, майбутні доопрацювання.       9. Структури даних у Python. Рівень Advanced   Автор – Бондаренко Кирило, Data Scientist / Python Developer, "CreatorIQ"   Якщо ви маєте труднощі з розумінням документованих структур мови Python, таких як list, tuple, dict, set, цей вебінар для вас. Ми розбиратимемося з тим, як написати такі структури даних, як черги (queues), дерева (trees), розглянемо роботу зі вкладеними словниками (nested dicts), а також застосування ООП для розширення можливостей існуючих структур даних.   Матеріал цієї зустрічі буде корисний Python розробникам із різних областей, зокрема Data Science спеціалістам та web-розробникам.   План вебінару:   Робота з розширенням структур даних мови через наслідування та ООП. Робота з комбінованими структурами, такими як nested dict, defaultdict, named tuple і т. д. Написання незадокументованих структур даних, таких як дерева, черги, зв'язані списки та інші.   Цей вебінар буде цікавий розробникам, які добре знайомі з Python, знають про імпорт бібліотек і хочуть заглибитися в роботу зі структурами даних для більшої ефективності роботи з ними.     10. Як стати Python розробником у 2021 році?   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   В останні роки мова програмування Python стрімко набирає популярність. За даними Stack Overflow Developer Survey 2019, в якому взяли участь понад 87 тисяч IT-фахівців з різних країн, Python випередила навіть таких постійних та безперечних лідерів, як Java, С# та С++.   Зараз вона широко використовується в Data Science (машинне навчання, аналіз даних, візуалізація), розробленні вбудованого програмного забезпечення та реалізації серверної частини веб-додатків. Також за допомогою Python можна створювати ігри, десктопні та мобільні програми, писати тести для ПЗ та спрощувати адміністрування ОС.   Програма зустрічі:   Хто такий Python розробник і що він робить? Які знання, вміння та навички потрібні Python розробнику? Вимоги до розробників рівня Junior. З чого розпочати вивчення мови Python? Складання плану навчання. Рекомендована література. Відповіді на питання.   Вивчайте Python розроблення на ITVDN!

Вітаємо! Друзі, сьогодні ми підготували для вас вибірку найкращих вебінарів від ITVDN за напрямком FrontEnd. До рейтингу були включені як пізнавальні вебінари з актуальною інформацією, так і вебінари прикладного характеру, які мають на меті вдосконалення ваших навичок написання коду. Давайте приступимо до їх розгляду. Як стати FrontEnd розробником? Покрокова інструкція для початківців Автор – Тисячний Влад, Middle React.js / React Native Developer. FrontEnd Developer – це розробник, який створює клієнтську сторону веб-сайтів. Ваші улюблені сервіси – соціальні мережі, відеохостинги, інтернет-магазини, – будь-який інтернет-продукт необхідно піднести користувачеві в привабливому та зручному для нього вигляді. В такій задачі не обійтися без фронтенд спеціаліста. Які вимоги висувають роботодавці до FrontEnd-розробника? Що потрібно знати та вміти, з чого почати та як краще спланувати навчання? На вебінарі ви отримаєте відповіді на всі питання, що вас цікавлять, і складете цілісне уявлення щодо професії FrontEnd розробника. Адаптивне верстання на FlexBox та Grid Авторка – Ткаченко Анастасія, FrontEnd Developer. Flexbox та Grid – технології, які широко використовуються у верстанні сайтів та суттєво спрощують реалізацію їх адаптивності. Що вони являють собою? CSS Flexbox (Flexible Box Layout Module) – модель макету гнучкого контейнера – є способом компонування елементів, в основі лежить ідея осі. Flexbox складається з гнучкого контейнера (flex container) та гнучких елементів (flex items). Гнучкі елементи можуть вишиковуватися в рядок або стовпчик, а вільний простір, що залишився, розподіляється між ними різними способами. CSS Grid Layout – система двомірного макету, оптимізованого для дизайну користувацького інтерфейсу. Головна ідея, що лежить в основі макету сітки, полягає у розподілі веб-сторінки на стовпці та рядки. У області сітки, що утворилася, можна поміщати елементи сітки, а керувати їх розмірами і розташуванням можна за допомогою спеціальних властивостей модуля. У ході вебінару були продемонстровані можливості цих технологій та переваги їхньої комбінації на практиці (у якому разі яку технологію варто використовувати) для створення адаптивних сторінок. Створення гри Тетріс на JavaScript | Частина 1, 2, 3 Автор – Ростислав Силівейстр, FrontEnd Developer. Чудовий вебінар, який підійде навіть тим, хто має нульовий рівень знання JavaScript. Навчання програмуванню шляхом реалізації культової гри Тетріс – це той самий випадок, коли ви поєднуєте приємне з корисним, а результати можуть бути гордо представлені своїм знайомим, друзям і родичам. Кожна частина вебінару зачіпає визначені автором теми: Перша частина включає постановку завдання, ознайомлення з правилами гри, реалізацію поля, падіння і переміщення фігур в сторони. Друга частина спрямована на реалізацію обертання фігур, прискорення їх падіння, зникнення заповнених рядів, нарахування очок, переходу до наступного рівня, і навіть базові ігрові опції (старт, пауза, почати заново, game over). Третя частина є останньою — відбувається тестування та виправлення недоліків, оптимізація коду та підбиття підсумків. Після старанного вивчення всіх трьох частин вебінару та завзятої практики ви навчитеся: розбиратися у структурах, типах даних, функціях JavaScript; роботі з DOM у JavaScript; роботі із засобами HTML/CSS для розміщення елементів на сторінці; систематичному підходу до вирішення завдань, тримаючи в увазі всі деталі; розумінню логіки створення ігор; розумінню основ алгоритмів. Memory Game на JavaScript за 2 години Автор – Ярослав Вовченко, FrontEnd Developer. Щоб почати писати мовою JavaScript, не обов'язково одразу заглиблюватися у вивчення документації. На прикладі написання простої Memory Game ви дізнаєтеся, як обирати елементи в DOM, проходити по спискам та масивам, додавати, прибирати елементи та “слухачі дій”. На вебінарі ви разом з автором поринете у практичне розроблення на JavaScript. Для цього необхідно мати базові знання HTML, CSS та JavaScript. Вебінар організований наступним чином: Створення структури проєкту, написання перших файлів. Розмітка та стилізація ігрового поля за допомогою HTML та CSS. Основи роботи з перспективою у CSS. Збереження та порівняння обраних карток. Написання додаткового функціоналу. Підсумки, запитання та відповіді. Цей вебінар буде цікавий тим, хто хоче вивчити основи JavaScript у легкій та доступній формі без багатогодинного читання документації. Об'єктно-орієнтоване програмування JavaScript | ООП у JavaScript Автор – Георгій Клюковкін, Lead Software Engineer. Це відео допоможе вам зрозуміти, у чому відмінність ООП підходу до розробки в мультипарадигменній мові JavaScript від ООП підходу в класичних об'єктно-орієнтованих мовах, як, наприклад, Java. Ви дізнаєтеся, які плюси та мінуси має ООП в JavaScript, а також, які правила ООП ми можемо в ньому застосовувати. Автор торкається наступних тем: Основні принципи ООП. Наслідування vs Композиція. Об'єктно-прототипне наслідування у JS. Функції-конструктори та класи. Single responsibility principle. Вебінар буде корисний розробникам-початківцям JavaScript, або тим, хто працює в іншому напрямку і при цьому бажає розібратися в особливостях ООП на JavaScript. П'ять обов'язкових алгоритмів JavaScript розробника. Автор – Тисячний Влад, Middle React.js / React Native Developer. Якщо Ви розробник-початківець і хочете розібратися в тому, наскільки глибоко потрібно вникати у вивчення алгоритмів і структур даних, як часто і які алгоритми потрібно буде використовувати в роботі, хочете зрозуміти, як від правильного вибору алгоритму залежить швидкість роботи сайту, а також дізнатися, як оптимальність алгоритму впливає на швидкість завантаження інформації на сайті — тоді цей вебінар для Вас. У ньому розглядаються такі теми: Що таке алгоритми та структури даних. Як правильно рахувати складність алгоритму. Чи потрібно знати всі алгоритми і як це впливає на ваш гаманець (приклади реального життя). 5 найважливіших алгоритмів. Практика написання алгоритмів сортування. Відповіді на питання.   Підготовка до співбесіди з JavaScript у 2021 році. Автор – Дмитро Мойсеєв, Software Engineer at EPAM Systems. У вебінарі порушуються основні питання на співбесіді з JavaScript, які викликають найбільше нерозуміння, особливо у тих, хто перейшов з іншої мови програмування, а також у тих, хто не знайомий з його складними частинами, такими як замикання, прототипне наслідування та особливості асинхронного виконання коду. Автор торкається наступних тем: Типи даних та їх перетворення. Області видимості та замикання. Прототипне наслідування. Асинхронне виконання коду. Відповіді на запитання учасників вебінару. Даний вебінар буде цікавий тим, хто планує проходити співбесіду на позицію FrontEnd розробника на рівень Junior або Middle Developer. Початківцям він не підійде, тому що в вебінарі не розглядатимуться основи мови, а лише її “гострі кути”. 8. React та Redux на прикладі реального додатку. Автор – Олександр Краковський, Software Engineer at EPAM. Даний вебінар допоможе вам на реальному прикладі розібрати, як взаємодіють та працюють сучасні інструменти розробки – React та Redux. Ви зможете написати свій додаток, який буде працювати з реальним API. У ході реалізації програми будуть виконані наступні пункти: Встановлення залежностей, налаштування проєкту. Створення базових компонентів та підключення Redux. Налаштування залежностей для роботи із запитами до сервера. Створення запитів та оброблення даних через Redux. Запуск програми, виправлення помилок. Аналіз виконаної роботи. 9. Створення першого проєкту на Angular Автор – Генріх Коваленко, FrontEnd Developer. У цьому вебінарі ви познайомитеся зі структурою та компонентами фреймворку Angular, а також створите перший проєкт із використанням Angular CLI. На вебінарі розглядаються наступні теми: Що таке Angular і в чому його відмінність від інших популярних фреймворків та бібліотек. Angular CLI, його встановлення та використання у створенні першого проєкту. У чому призначення компонентів та як їх застосувати для зручності підтримки коду надалі. Обслуговування Angular. Модулі. Пайпи та їх застосування, створення своїх пайпів. Директиви *ngFor та *ngIf. Підсумки. Запитання, відповіді. Даний вебінар буде цікавий тим, хто володіє мовою JavaScript на базовому рівні і хоче познайомитися з Angular для подальшої роботи з даним фреймворком. 10. Як стати React розробником Автор – Олег Мельничук, Full Stack JS Developer. React — бібліотека JavaScript, яка впевнено тримає позиції у світі веб-розроблення поруч із найпопулярнішими фреймворками. На вебінарі піднімається історія виникнення React.js, після чого йде порівняння з іншими популярними веб-технологіями. Автор розповідає, чому React – це гарний вибір для входу до FrontEnd. Ви дізнаєтесь, наскільки потрібний чистий JS і чи можна відразу вивчати React. Буде детально розібраний Roadmap React розробника: що можна пропустити на перших етапах, що краще вивчити детально, а на що не варто витрачати сили. Також, автор надає перелік знань та навичок, з якими можна знайти першу роботу у якості React Developer`a. Буде порушено питання подальшого розвитку – як із Frontend розробника на React можна стати Full Stack або Mobile розробником. Цей вебінар буде цікавий Frontend розробникам-початківцям, а також веб-розробникам, які планують перейти на React або вивчити його як додаткову технологію. Вивчайте FrontEnd розробку на ITVDN!

10 полезных фич в Angular, о которых вы могли не знать Angular - это объемный фреймворк, и наверняка большинство из нас использует лишь небольшую его часть. Но за этим мы можем упускать некоторые весьма полезные его возможности, которые сделали бы нашу жизнь значительно проще. В этой статье я собираюсь разобрать около 12 полезных фич в Angular, о которых вы могли и не слышать. Одна из вещей, о которой часто забывают, но которая таит в себе множество полезностей, является Pipe. Итак, давайте поговорим о них. KeyValuePipe Это одна из ключевых особенностей Angular 6.1. До этого все, что позволяла директива *ngFor, так это проитерировать массив или другую счисляемую конструкцию. Что же в случае со свойствами объектов или элементов Map - перебрать их было задачей отнюдь нетривиальной. Это как раз тот случай, когда может пригодиться директива KeyValuePipe! Мы просто ставим pipe по отношению к объекту, который желаем проитерировать, и все остальное за нас совершает ngFor. К примеру:   Slice Pipe Отображение списка предметов и манипуляция большим объемом DOM-элементов - задача достаточно затратная, потому порой могут возникать ситуации, когда мы захотим уменьшить количество отображаемых элементов. Выполнить это можно многими способами, но Angular обладает прекрасным SlicePipe, который позволяет нам выполнить все это всего лишь как часть нашего ngFor - выражения. К примеру, давайте представим, что мы хотим отобразить только первые 10 элементов массива:   Decimal Pipe Этот pipe предназначен для форматирования чисел. Он может быть весьма полезен, когда мы желаем ограничить число цифр, которые будут показаны после точки. Впрочем, он также может быть использован, когда мы просто желаем представить определенное число в более "презентабельном" виде, с запятыми после каждой тысячи. Так, 1000 у нас станет 1,000. Кроме того, стоит также упомянуть еще об одной полезной фиче здесь. А именно, функции formatNumber, которая является частью @angular/common, что позволяет применять то же самое форматирование на программном уровне.   JSON Pipe Крайне полезный инструмент, особенно при отладке. Позволяет вам отобразить объект в виде строки в представлении. Подобный подход может стать неплохой альтернативой точкам остановки и командам отладчика в некоторых случаях. Просто добавьте JSON pipe объекту, который вы желаете отобразить:   Заголовок и мета-сервисы Становятся особенно полезными, когда мы работаем с поисковиками или соц. сетями (по типу Google, Twitter, Facebook и т.д.). Эти платформы для формирования контента, названия, его описания используют теги <meta>. К примеру, в нашем блоге для каждой статьи существуют свои заголовки, описания, картинки и так далее. Дабы убедиться в достоверности предоставляемой информации, мы можем поместить все необходимое в специальные мета-теги, как показано на примере ниже: Плюс у нас есть сервис Title, который, как вы понимаете, обновляет заголовок, отображаемый в окне браузера. Достичь этого можно просто и незамысловато: просто добавить значение тегу <title> в заголовке документа. Впрочем, здесь, увы, мы не сможем использовать стандартную Angular-привязку: <title>{{ myTitle }}</title>, так как <head> не находится внутри Angular-компонента. Поэтому здесь мы должны использовать сервис Title. Использовать его очень просто: Дабы позволить социальным сетям обнаружить эти мета-теги, они должны быть представлены на странице в момент ее загрузки (без использования JavaScript).   ng-container Пытались ли вы когда-либо поместить две структурные команды на один и тот же элемент, впоследствии обнаружив, что вы не можете это сделать? Или, возможно, вы применяете при этом ngTemplateOutlet, отмечая, что сие не позволяет в качестве дочернего, а лишь как родственный? Согласны, это может быть весьма утомительно, особенно если единственный способ решить сей ребус - добавить обертку в виде <div>, что, безусловно, может "замусорить" существующую DOM-структуру. К счастью, существует ng-container, что позволит вам избежать подобных проблем. Этот элемент, доступный при разработке, на самом деле не создает никаких новых элементов в структуре DOM-дерева и может быть прекрасным решением для обеих вышеназванных ошибок и даже более! К примеру, дабы использовать несколько структурных деректив, мы может просто сделать следующее: После чего просто применить существующий темплейт в качестве дочернего: Это лишь малая часть возможных применений сего инструмента, уверяю вас, при желании ng-container можно использовать и для более широкого круга задач. Декоратор атрибутов Все мы знаем, что свойства-декораторы @Input и @Output используются для привязки и порождения событий. Впрочем, существует другой, менее известный декоратор, @Attribute. Этот декоратор чем-то похож на @Input-декоратор, так как он может быть использован для передачи значения компоненту. Привязка атрибута чем-то похожа на scope-привязку AngularJS: Для начала, давайте изучим ограничения декоратора!             - Любые значения должны быть представлены строковым типом данных             - Значения статические и не изменяются, в отличие от привязок             - Мы не можем использовать синтаксис привязки [attribute] В то время, как существуют определенные незначительные ограничения, выигрыш от повышенной производительности будет более значимым. Они могут быть использованы точно так же, как и @Input-декоратор:   Мониторинг изменений профиля Я уверен, все мы знаем о функции enableProdMode, что будет вызвана в main.ts-файле любого проекта Angular CLI. Впрочем, здесь также существует функция enableDebugMode. Конечно, мы можем думать, что, мол, если я не работаю в прод-режиме, значит, я работаю в режиме отладки, но, кхм, все не совсем так. Вызывая эту функцию, мы получаем дополнительный инструмент - window.ng объект, что называют профилировщиком. Профилировщик имеет в своем арсенале функцию timeChangeDetection, при вызове которой выводится консольная информация о том, сколько произошло change-detection - циклов (а также о том, сколько времени они заняли). Может быть очень полезно при профилировании приложений с низкой производительностью. Для вызова функции добавьте следующее в коде bootstrap: Для запуска профилирования, введите в DevConsole следующее:   NgPlural Во многих приложениях бывают случаи, когда необходимо описать определенное число элементов, и в рамках нашего приложения нам нужно предусматривать различные ситуации. К примеру, рассмотрим следующие варианты:             - Предметов нет вообще             - Есть только один предмет             - Есть только два предмета Директива же ngPlural очень проста в использовании, и предназначена она для обработки подобных случаев:   ngPreserverWhitespaces & NgNonBindable Я решил сгруппировать две эти директивы, так как используются они в принципе в схожих условиях. В Angular 5 существовала опция preserveWhitespaces, добавленная в angularCompilerOptions. Если бы ее значение было равно false, оно бы позволило компилятору избавиться от пробелов, которые не считались существенными. Конечно, читабельность могла бы пострадать, но, с другой стороны, это позволило бы уменьшить размер пакета. Впрочем, бывают случаи, когда мы желаем сохранить пробелы. Если мы хотим оставить целый компонент нетронутым, нам необходимо просто использовать опцию в декораторе компонента: Впрочем, мы также можем желать оставить нетронутым пробел в определенном DOM-элементе. В таком случае мы можем использовать директиву ngPreserveWhitespaces. Также мы можем использовать {{ }} в нашем документе, впрочем, в любом случае Angular сочтет это за использование интерполяции и попытается оценить, что находится внутри ее. В таком случае нам придется кстати ngNonBindable.   Ну, вот и все! Здесь были описаны 10 вещей, которые вы могли не знать об Angular. Надеюсь, вы найдете их полезными! Автор перевода: Евгений Лукашук Источник

Каков Ваш код на... запах? Как люди мы имеем огромное количество различных желез на теле. Как у программистов у нас есть множество строчек кода в проектах. Как у людей некоторые наши железы выделяют запах - хороший или не очень. Как у программистов некоторые наши строчки кода также могут иметь своеобразный "запашок". В мире программирования "запашок" недопустим. Подобно тому, как неприятный запах может свидетельствовать о различных медицинских проблемах организма, плохо организованный код также может быть симптомом плохо построенной архитектуры приложения. Итак, должны ли мы беспокоиться при наличии "запаха" у нашего кода? "Запах" кода - это не то же самое, что и баг. Если коротко, "запах" кода - это та ситуация, когда вроде бы нам не очень нравится код, который мы написали, но не так, чтобы его исправлять или переписывать... Это как раз таки фатальная ошибка. Рост кода подобен по своей природе росту дерева. Отсекание некошерных веток важно, чтобы дерево оставалось в добром здравии. Если этого не делать, ветки становятся все длиннее и длиннее - и, как следствие, процесс сбора плодов также становится затруднительным. Без рефакторинга поддержка кода может стать затратным вложением. Дурной запах кода усложняет поддержку, так как любой код требует поддержки. Вообще, "запах" кода был классифицирован в зависимости от сценария, который он представляет. Эта статья - краткий взгляд на различные виды несовершенств кода, чтобы мы могли понять, на что стоит обратить внимание в разрабатываемых продуктах. И давайте быть честными по отношению хотя бы к самим себе: если не сейчас, то никогда. Что же, начнем! "Дух" плохих методов Первое, на что стоит обратить свое пристальное внимание, - это название метода. Также не стоит забывать и о названиях и общей длине параметров. Вот типичный "идеальный" метод: Название четкое и ясное Не длиннее 30 строчек и принимает не более 5 параметров Реализация - простейшая из возможных, нет "мертвого" кода Здесь представлен список возможных несовершенств:   Название Описание 1 Мертвый код метод не используется. 2 Ленивый объект метод делает очень мало работы. 3 Посредник все, что делает этот метод, - это вызывает другой метод. 4 Божественный метод метод исполняет слишком много обязанностей. 5 Длинный список параметров не забываем про рекомендацию в 5 параметров. 6 Перекрученная сложность слишком сложная реализация простых операций. 7 Цикличный ад злоупотребление циклами и условными конструкциями. 8 Излишняя близость метод очень сильно зависит от особенностей реализации другого метода. 9 Завистливый объект метод полагается на данные другого объекта больше, чем на свои. 10 Черная овечка метод сильно отличается от других методов класса. "Запашок" класса Проверяйте название класса и то, насколько реализуемый классом контракт отвечает его сути. Как правило, идеальный класс прекрасно отображает назначение различных сущностей на уровне бизнес-логики и реализует ее в рамках архитектуры, выбранной для самой бизнес-логики. Вот список возможных несовершенств, связанных с классом:   Название Описание 1 Ленивый объект класс выполняет слишком мало работы. 2 Посредник класс ничего не делает, просто вызывает объекты другого класса. 3 Божественный объект класс слишком много о себе возомнил. Реализует слишком много операций. 4 Узколобое мышление слишком примитивная реализация типов с особым назначением. 5 Шпион на допросе реализуемый классом интерфейс не сообщает достаточное количество информации, чтобы понять назначение объекта. 6 Эксгибиционист необязательное раскрытие внутренних деталей реализации. 7 Излишняя близость класс слишком сильно зависит от реализации объектов, на которые он ссылается. 8 Жадинка класс наследует поведения объекта, тогда как на самом деле классу нужны лишь некоторые его фрагменты. 9 Неопределенность разработка класса становится слишком сложной из-за вороха фич, которые "когда-то" будут доведены до ума. 10 Непостоянство класс содержит член данных, не характерный для всего времени жизни объекта. Общее впечатление о коде Рассматривая более высокий уровень абстракции, стоит также упомянуть несколько немаловажных аспектов:   Название Описание 1 ​Утраченный смысл код не совсем точно реализует требуемую от него задачу. 2 Выбирай, что хочешь та же самая проблема уже решена - причем несколькими способами. 3 Комбинаторный взрыв различные участки кода делают одно и то же, но с разным набором параметров. 4 Не копируй себя много идентичного кода. 5 Сложность слишком сложная реализация простых вещей. 6 Размазня нет единого глобального класса. Ответственность размазана по целому вороху промежуточных классов. 7 Подводный айсберг изменения внешне не связанных компонентов затрагивают слишком много вещей.  8 Спагетти-код изменение одного компонента требует множество мелких изменений в других местах. 9 Пиар-комментарии классные комментарии в плохом коде. 10 ​Информационный комок группа переменных почти всегда передается вместе. Стоит также уделить минутку своего внимания комментариям в коде. В то время, как комментирование назначения метода будет полезным для всех, кто читает его, комментирование реализации метода - достаточно спорное решение. Риск состоит в том, что по неосторожности можно использовать упомянутые "пиар-комментарии" к тем строчкам, которые этого отнюдь не заслуживают. Отличный код таков, что нуждается в малом количестве комментариев, так как его реализация становится понятной интуитивно. Комментарии стоит использовать, когда мы комментируем особенности технических решений, вещи, оставленные для рассуждения или будущие этапы разработки. Как бы это странно ни прозвучало, но комментарии никогда не должны рассматриваться в качестве обязательных для написания. Также не стоит забывать о различных тестах (в особенности о тех, которые не пишутся просто для повышения процента покрытия кода). Стереотипы Конечно же, куда без них. Кто-то может утверждать, что подобные тонкости коддинга начали выделять с прогрессом информационной индустрии. Мол, "запашок" кода очень часто является следствием "плохих привычек" написания или же в силу определенных обстоятельств. Подобные оправдания звучат несколько неубедительно и говорят о тараканах в голове разработчика: каждый уважающий себя программист должен стараться писать хороший код абсолютно всегда. По умолчанию! Другой стереотип, о котором также стоило бы упомянуть, - это избыточная вера в рефакторинг. Что же, рефакторинг как процедура переписывания кода также может быть выполнен из рук вон плохо. Излишняя цикличность, слишком сложные решения и прочее-прочее запросто может быть добавлено в проект из лучших побуждений - особенно в том случае, если по принципу организации исходный код не сильно отличается от здорового клубка спагетти. В итоге все разработчики могут "запачкать" свой код. Что хуже, часто это бывает под давлением внешних обстоятельств, особенно у "временных" разработчиков для хотфиксов. Проверки качества кода должны происходить всегда сразу после быстрых релизов. И в заключение Большинство из тех проблем, с которыми мы сталкиваемся, часто связаны с логическим промежутком, пропастью между уровнем абстракции выбранного языка программирования и языком бизнеса. Чем больше нам удается отстранится от "самовыражения" посредством языка программирования к бизнес-целесообразности, тем более читабельным и поддерживаемым будет наш код. Гранулярность, модульность, разделение задач и все те прекрасные теоретические концепции, о которых мы могли слышать до этого, становятся конкретными и вещественными, когда мы загораемся желанием следовать концепции делового прагматизма и утилитарности. Источник Переводчик: Евгений Лукашук

Что нового в Angular 4? Наконец, когда обновленная технология предстала перед нами, мы можем приступить к ее изучению! То, что новый представитель семейства Angular приобрел новый номер, свидетельствует об инновационных изменениях. Но все же встает вопрос: почему Angular 4, а не 3? Все достаточно просто: так как пакет маршрутизатора был уже представлен в версии 3.x, вместо того, чтобы вносить все нововведения в версию 3.0, а маршрутизатор перенести в 4.0, разработчик решил объединить все в версии 4.0. Не стоит волноваться касательно обновления Ваших приложений к новой версии Angular: так как тех самых инновационных изменений в принципе оказалось не слишком много, процесс установки не занял больше нескольких минут. Ничего особо страшного. Среди дополнительных требований стоит упомянуть версию TypeScript 2.1 или выше (раньше требовалась только 1.8+). К тому же некоторые элементы интерфейса были изменены или вовсе упрощены (редко используемые OpaqueTolen или SimpleChange). Плюс, TypeScript 2.1 и 2.2 приобрел целый ряд прекрасных особенностей, которые теперь поддерживаются в Angular 4. К примеру, в скором времени Вы сможете использовать TypeScript-опцию stringNullChecks. Итак, что именно позволяет нам новая версия Angular? Давайте углубимся!   Ahead of Time (AoT) компиляция: обновленный движок представлений Пожалуй, это наиболее значимое изменение, пусть даже Вы, как разработчик, не ощутите разницы. Как Вы, наверно, знаете, в режиме AoT Angular компилирует Ваши шаблоны во время сборки, после чего генерирует JavaScript код (в отличие от режима Just in Time, когда компиляция происходит во время выполнения приложения). Режим AoT обладает целым рядом преимуществ, например, в случае неправильного построения шаблона ошибка возникнет во время сборки, а не во время работы приложения, как раньше. Эта методика позволяет ускорить запуск приложения, так как генерация JS-кода уже произведена. Также Вам не нужно отправлять Angular-компиляторы пользователям, что в теории должно уменьшить размер пакетов. Почему в теории? Потому что, как правило, обратная сторона медали в том, что сгенерированный JavaScript-код обычно больше, чем нескомпилированные HTML-шаблоны. Таким образом, в большинстве приложений с использованием AoT размер пакета де-факто увеличивается. Разработчики Angular хорошо поработали над новым движком представлений, что позволило производить меньше кода при использовании Ahead of Time компиляции. Эффект на больших приложениях не заставил себя ждать. Без падений производительности. Ежели говорить в цифрах, размер пакета стал: С 499 КБ до 187 КБ (или с 68 КБ до 34 КБ после gzip) С 192 КБ до 82 КБ (или с 27 КБ до 16 КБ после gzip) Достаточно большая разница! Интересно отметить, что в своих дизайн-документах команда Angular сравнивает производительность (как в контексте времени выполнения, так и в контексте нагрузки на память) с базовой имплементацией (лучшим «дефолтным» кодом JS, который они только могут написать) Angular 2.x и InfernoJS (быстрая React-подобная имплементация). Универсальность Масса работы была проделана над универсальным проектом, позволяющим производить серверный рендеринг. Когда раньше этот тип проекта поддерживался в основном силами сообщества, теперь, начиная с Angular 4, поддержка приобрела официальный характер. Анимации Анимации теперь обзавелись собственным пакетом @angular/platform-browser/animations (одна из вещей, которая может быть изменена в процессе обновления). Что это значит? Это значит, что Вам больше не нужно нагружать пакеты ненужным кодом, если вы не используете анимации. Шаблоны ng-template вместо template Тэг template устарел. Вместо него используйте ng-template. Хотя и первый вариант все еще работает. Вообще, было немного странно использовать template, так как это реально существующий HTML-тэг. Теперь же Angular обзавелась собственным ng-template. В случае, если вы используете устаревший template, будет выдано соответствующее предупреждение: это в значительной мере упростит обнаружение подобного кода в проектах. Else С новой версией Angular 4 появилась возможность использовать оператор else: <div *ngIf="races.length > 0; else empty"><h2>Races</h2></div> <ng-template #empty><h2>No races.</h2></ng-template> As Еще одно синтаксическое нововведение. Ключевое слово as позволяет упростить синтаксис let. As позволяет хранить результат переменной шаблона для дальнейшего использование в элементе. К примеру, сия особенность может быть достаточно полезной для хранения коллекции: <div *ngFor="let pony of ponies | slice:0:2 as total; index as i">   {{i+1}}/{{total.length}}: {{pony.name}} </div> Или даже более полезной, если один раз использовать pipe с async. Вместо плохого и некрасивого: <div>   <h2>{{ (race | async)?.name }}</h2>   <small>{{ (race | async)?.date }}</small> </div> Вы можете использовать: <div *ngIf="race | async as raceModel">   <h2>{{ raceModel.name }}</h2>   <small>{{ raceModel.date }}</small> </div> Различные виды pipe Titlecase Angular 4 презентует новый pipe: titlecase. Он позволяет переводить первую букву каждого слова в верхний регистр: <p>{{ 'ninja squad' | titlecase }}</p> <!-- will display 'Ninja Squad' --> Http Задание параметров поиска Http-запроса было упрощено: http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } }); Раньше вам необходимо было произвести следующее: const params= new URLSearchParams(); params.append('sort', 'ascending'); http.get(`${baseUrl}/api/races`, { search: params }); Test Переопределение шаблона во время теста также было упрощено: TestBed.overrideTemplate(RaceComponent, '<h2>{{race.name}}</h2>'); До этого мы обычно писали так: TestBed.overrideComponent(RaceComponent, {   set: { template: '<h2>{{race.name}}</h2>' } }); Сервисы Meta Для получения содержимого или обновления meta-тэгов был введен новый сервис: @Component({   selector: 'ponyracer-app',   template: `<h1>PonyRacer</h1>` }) export class PonyRacerAppComponent { constructor(meta: Meta) {     meta.addTag({ name: 'author', content: 'Ninja Squad' });   } } Формы Валидаторы Новый валидатор позволит объединить существующие required, minLength, maxLength, и pattern. email позволит провести валидацию e-mail адреса (если Вы планируете просто обойтись подходящими регулярными выражениями – удачи в поисках). Сравнение выбранных опций Для сравнения выбранных опций была добавлена новая директива: compareWith: <select [compareWith]="byId" [(ngModel)]="selectedPony">    <option *ngFor="let pony of race.ponies" [ngValue]="pony">{{pony.name}}</option> </select> byId(p1: PonyModel, p2: PonyModel) {    return p1.id === p2.id; } Маршрутизатор ParamMap Для представления параметров URL был введен новый интерфейс: ParamMap. Вместо использования params или queryParams, отныне Вам стоит использовать paramMap или queryParamMap, так как они позволяют выбрать между get() для получения значения или getAll() для получения всех значений (так как параметры запросов могут иметь несколько значений, к примеру). const id = this.route.snapshot.paramMap.get('ponyId'); this.ponyService.get(id).subscribe(pony => this.pony = pony); Или как здесь:   .map((params: ParamMap) => params.get('ponyId'))   .switchMap(id => this.ponyService.get(id))   .subscribe(pony => this.pony = pony); CanDeactivate Интерфейс CanDeactivate теперь обзавелся дополнительным опциональным параметром, содержащим следующее состояние (то, куда Вы собираетесь перейти). Теперь можно реализовать «умную логику», когда пользователь может покинуть текущий компонент в зависимости от того, куда он или она направляется. I18n Интернационализация также медленно, но верно улучшается. К примеру, ngPlural теперь упрощен: <div [ngPlural]="value">   <ng-template ngPluralCase="0">there is nothing</ng-template>   <ng-template ngPluralCase="1">there is one</ng-template> </div> А теперь давайте сравним с тем, что было раньше: <div [ngPlural]="value">   <ng-template ngPluralCase="=0">there is nothing</ng-template>   <ng-template ngPluralCase="=1">there is one</ng-template> </div> Только что мы добавили целую главу к нашей электронной книге, включая несколько юз-кейсов и прочее! Подведем итоги Релиз Angular 4 привносит множество улучшений и действительно востребованных инноваций в сферы размера генерируемого кода, сохраняя в целом концепцию предыдущей версии Angular. Благодаря этому обновление технологии не должно вызвать затруднений. Автор перевода: Евгений Лукашук Оригинал статьи

Введение Устройства, которые можно одевать, сейчас очень распространены. Они уникальные, модные, продуктивные и позволяют оставаться на связи в нашем цифровом образе жизни. Однако, надеваемые гаджеты также могут быть подрывными в мобильном пространстве. Пока разработчики увлечены переходом на кросс-платформенную разработку родных или гибридных мобильных приложений, прибывают носимые устройства от Apple, Microsoft и Google, каждая из которых обслуживает свою соответствующую платформу и прокладывает собственный путь развития как дополнение к уникальным принципам UX. Если Вы  поклонник Microsoft Band, то у Вас есть основания для радости. И не только потому, что Band – одно из немногих носимых устройств, которые работают кросс-платформенно с любым Вашим телефоном. Также очень просто добавлять пользовательские данные на запястье в качестве Band-приложения. Все, что для этого потребуется – стандартный терминал данных и немного веб-навыков.  В этой статье мы покажем, как добавлять веб-данные в Ваше устройство Band с помощью Web Tiles. Перспектива Поскольку потребителям нравятся такие устройства, возникает новая экосистема, которую разработчикам надо поддерживать. Конечно, носимые устройства забавные, очень личные и предоставляют возможности для завлечения пользовательского опыта, но разработчикам теперь приходится работать с исключительно маленькими экранами, пересматривать содержание приложений и пользовательский интерфейс, чтобы оставаться в первых рядах, учитывая переход мобильных приложений на кросс-платформу. Еще одна сложность при разработке носимых устройств исходит из того, что такие устройства неразрывно связаны с соответствующей принимающей мобильной операционной системой. В конце концов, такая разработка часто представляет собой разработку нативного приложения, и разработчик должен знать родной SDK, паттерны программирования и цель, чтобы получить нужный опыт взаимодействия(User eXperience, UX). Мы можем наблюдать, как Apple сейчас пытается дистанциировать Apple Watch от родительского iPhone в следующем выпуске Watch OS 2. Пока что нам все еще приходится обращаться к родительской системе, но обнадеживает, что у носимых гаджетов есть собственная операционная система и приложения могут быть самодостаточными, а не пребывать в зависимости от соответствующей мобильной платформы. MICROSOFT BAND Microsoft Band представляет собой нечто среднее между фитнес-устройством и умными часами. Устройство Band заполнено датчиками -  оптическим датчиком сердечного ритма, акселерометром, GPS, датчиком освещенности, температуры, ультрафиолетовым сенсором, сенсором емкости, микрофоном и гальваническим датчиком отклика на касание. Однако, несмотря на преимущества, которыми располагают все эти сенсоры, строительство приложений сильно усложняется. Разработчик SDK для Microsoft Band очень мощный, предоставляет разработчикам полный доступ к API canvas, чтобы делать убедительные приложения для Band. SDK можно применять для создания персонализированных, интерактивных фрагментов, используя пользовательские макеты, что вмещают текст, иконки, кнопки и штрих-коды. Тем не менее, Вам надо построить собственные мобильные приложения для каждой платформы, чтобы в дальнейшем построить сопутствующее устройство Band. Несмотря на то, что существует фреймворк Xamarin, позволяющий разрабатывать кросс-платформенные приложения, это далеко непросто для разработчиков. Последние обновления Все изменилось с последними обновлениями для Microsoft Band  и платформы разработки Health. Самой интересной особенностью является новая поддержка для Web Tiles. Вам больше не нужны нативные мобильные приложения, можно просто повторно использовать веб-данные. Каждый пользователь Band непременно использует приложение Microsoft Health – что изначально есть на каждой мобильной платформе. Тогда почему бы не усилить повсеместность приложения Health и интернет-подключения Band, чтобы принести в устройство облачные данные?  Web Tiles делают доставку информации к пользователям Band максимально просто и практически из любого интернет-источника. Также новым есть предварительный просмотр облачного Microsoft Health API, который предлагает RESTful API для повышения использования приложения в режиме реального времени, для фитнес-пользователей и отслеживания здоровья. Автоматизация Web Tiles Подача данных Предусматривая веб-фрагменты для Band, в первую очередь, Вам надо решить, какие данные надо выводить. Соответственно, это должны быть короткие порции информации для Ваших Band-пользователей. Вы должны выбрать правильный контент – действительно значимую информацию для беглого просмотра на пользовательском запястье. Web Tiles могут получить доступ практически к любому интернет-источнику данных , пока данные поступают через конечные точки RESTful и доступны в стандартных форматах как ATOM/JSON. Пока нет нехватки в таких конечных точках. Сейчас в свободном доступе находятся данные из Telerik Developer Network (TDN). Если Вы находитесь на сайте TDN, можете просто нажать на ссылку RSS или просто перейти к http://developer.telerik.com/feed/. Строка новостей RSS вмещает в себя статьи из TDN. Давайте рассмотрим, как создать список этих последних статей на Band-устройстве, используя Web Tiles. Инструмент разработки Самый простой способ построить Web Tiles - это использовать инструмент разработки Microsoft Band Web Tile, просто нажмите большую кнопку Get Started. Это простой 5-шаговый инструмент разработки с веб-интерфейсом. На самом деле, Вам даже не нужно быть разработчиком, чтобы им пользоваться. Мастер проведет Вас через все этапы, необходимые для создания Band Web Tile. Ниже представим разработку Web Tile для статей TDN. 1. Выберите из представленного набора стандартных макетов для отображения данных, каким образом пользователь будет запускать свой Tile. 2. Укажите инструмент разработки Web Tile на свое устройство подачи данных. Обратите внимание на использование RSS, как показано ниже. 3. Дальше мы преобразим некоторые данные, в основном, через перетягивание. В соответствии с выбранным макетом Вы получите несколько заполнителей для отображения данных. Инструмент будет влиять на подачу данных, которые Вы указали. Это для того, чтобы дать нам представление о данных, которые будут отстранены от облачного источника данных. Вам всего-то нужно переместить повторяющиеся элементы данных в динамические заполнители с помощью цветового кодирования – и все подключено. Также от устройства подачи можно задавать статический контент поверх динамического, если Вам захочется. 4. Затем, настройте цветовую схему для Web Tile и обеспечьте некоторую идентифицирующую информацию для пользователя. Обратите внимание на примерный показ того, как будут выглядеть ваши данные в Band. Здесь же Вы получите нужную иконку для представления вашего Web Tile – она должна иметь прозрачный фон, соответствовать расширению 46x46px и рекомендациям пользовательского интерфейса UI для Band. 5. Последний шаг мастера настроек позволяет скачать предварительную версию Web Tile на компьютер. В итоге, Вы получите файл с расширением .webtile  – просто архивированный файл со всеми заданными Вами конфигурациями. Источник: http://developer.telerik.com/featured/create-a-microsoft-band-app-with-web-tiles/

Хто такий 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!

Суперечки навколо Full-stack Різновиди Full-stack розробників. Стек мов та технологій для кожного Плюси професії Full-stack Developer Мінуси професії Full-stack Developer Як стати Full-stack розробником? Зарплати Full-stack розробників Підсумки Оновлено 9 червня 2023 року Привіт, друзі! Full-stack розробник (вимовляється "фул стек") – це якийсь майстер на всі руки у світі веб-розробки. Йому під силу реалізувати як клієнтську, так і серверну сторону додатку, якими, зазвичай, займаються FrontEnd і BackEnd розробники окремо один від одного. Таким чином, Full-stack спеціаліст здатний одноосібно вести проєкт від початку до кінця. Ще в далеких нульових і раніше не існувало такого розподілу обов'язків між розробниками. Відносна простота ПЗ, що розроблялося, так само як і технології того часу дозволяли тримати процеси, які зараз виконують різні люди, в одних руках. Наприклад, у ті часи IT-фахівець, який називається веб-майстром, і зовнішній вигляд сайту створював, і серверну частину реалізовував, і розміщував сайт на хостингу. Тобто, Full-stack розробники існували і раніше, просто ніхто їх так не називав. Однак IT-сектор не стояв на місці. Вимоги до програмних продуктів зростали, з'являлися нові мови та технології, змінювалися підходи до розробки. Дерево IT почало ставати все більш гіллястим, породжуючи нові спеціальності. Разом із цим професія універсального бійця розбилася на два окремі напрямки, а потім знову відродилася з гордою назвою "Full-stack Developer". Суперечки навколо Full-stack Не все так гладко, як здається на перший погляд. Багато досвідчених програмістів та IT-фахівців вищої ланки не визнають цю посаду за визначенням. "Чому?" — спитаєте ви. Адже раніше були ті самі веб-спеціалісти, які успішно поєднували обов'язки сучасних напрямків — фронту та беку. Чому сьогодні поняття Full-stack викликає суперечки? Поширеною є думка, що Full-stack розробників не існує, а ті, хто такими називаються, насправді не відповідають вимогам цієї спеціальності. Наприклад, Сергій Немчинський — програміст з 20-річним стажем, керівник та власник навчально-виробничої компанії FoxmindEd — в опублікованому відео на YouTube відгукується про Web Full-stack розробників наступним чином (посилання): “В принципі, в ідеалі, Full-stack розробник – це класно та чудово. Проблема в тому, що... Таких немає. Фактично все, що ми маємо на ринку з тих людей, які називають себе Full-stack девелоперами – це приблизно 50% BackEnd девелоперів, які трошки вивчили FrontEnd і вже можуть Angular або React скомпілювати і, відповідно, зібрати-підключити, плюс трошки розуміють у верстанні – навіть не на рівні Junior верстальника. Вони у більшості випадків зробити добре, красиво не можуть ніяк. Максимум, що можуть – зробити так, щоб кнопка натискалася. Або ж Full-stack девелопери – це решта 50% FrontEnd розробників, які трошки вивчили BackEnd; в більшості випадків – якийсь Node.js. Можливо, PHP. Такий розробник мінімально вміє щось підрихтувати, але, знову-таки, говорити про те, що він сяде і напише вам нормальний Full-stack додаток – ні, ні і ще раз ні. (…) Чесно скажу, мені ідея з об'єднанням у Full-stack девелоперів здається, з одного боку, не дуже вдалою, тому що фактично ми отримуємо "ні риба, ні м'ясо". З іншого боку, ринок вимагає – отже, треба. Тому затребуваність у Full-stack девелоперів, за великим рахунком, трохи більша, ніж у чистих BackEnd або FrontEnd розробників. Однак ринок вже усвідомив, що вони (Full-stack розробники) у своїй більшості "ні риба, ні м'ясо", і тому термін "Full-stack" починає пропадати. Тепер просто вважається, що це BackEnd розробник з невеликим знанням фронту і, навпаки, FrontEnd розробник з невеликим знанням однієї з BackEnd мов. Мені здається, що так набагато правильніше”. Інші розробники схиляються більше до того, що Full-stack розробка – це ні що інше, як хитрощі бізнесу. Роботодавець не бажає переплачувати за двох різних фахівців, віддаючи перевагу більш дешевому аналогу, котрий вміє все те саме. По суті, вся суперечка щодо Full-stack розробника зав'язана на скептицизмі. Прихильники міфологічності цієї професії не вірять у існування розробника, здатного добре реалізувати як FrontEnd, так і BackEnd частини, оскільки за обома ховається безліч технологій і мов, а вивчити все і працювати не гірше за фронтендерів і бекендників — практично неможливо. Ті ж, хто займаються Full-stack девелопментом, парирують, вказуючи на велику кількість часу, проведеного за розробкою, в ході чого так чи інакше доводиться заглядати по інший бік барикад і розбиратися в усіх процесах, що супроводжують розробку всього проєкту від і до. Ну а далі справа техніки — вивчаєш необхідні інструменти, практикуєшся і можеш самостійно працювати над цілим проєктом. Звичайно, пізнання у всіх використовуваних мовах і технологіях у Full-stack спеціаліста будуть не такі глибокі, як у вузькоспеціалізованих побратимів по цеху, але зробити повноцінний робочий проєкт з нуля, реалізувавши як BackEnd, так і FrontEnd, йому буде під силу. Різновиди Full-stack розробників Варіацій Full-stack розробників насправді безліч: PHP Full-stack Developer, Node.js Full-stack Developer, Java Full-stack Developer і так далі. Назва, яка стоїть на початку спеціальності, говорить про те, яка мова/платформа береться за основу під час реалізації BackEnd частини. Стек технологій FrontEnd практично завжди однаковий і відрізняється лише використовуваними JavaScript-фреймворками / бібліотеками: Angular, React або Vue.js. А ось бекенд надає набагато більше можливостей для реалізації своїх амбіцій. Ще раз проговоримо, що Full-stack Developer – це розробник, який бере безпосередню участь у всіх етапах розробки веб-додатків: від створення клієнтської частини (візуальна частина + логіка користувача) до реалізації серверної (бази даних, серверна архітектура, програмна логіка). Який стек технологій та мов знаходиться у розпорядженні цього фахівця? Якщо говорити про FrontEnd складову (клієнтська сторона), то вона у всіх приблизно однакова: мова верстання HTML та мова стилів CSS; мови програмування JavaScript та TypeScript; препроцесори SASS та LESS; фреймворк Angular/Vue.js або бібліотека React; технології DOM, AJAX, REST API, знання про інтернет та веб-технології в цілому тощо; навички адаптивного та кросбраузерного верстання. А що потрібно знати full stack розробнику із серверного набору? Тепер розберемося з відгалуженнями в бекенді, які вказують на популярні мови та технології, що використовуються під час реалізації серверної сторони веб-додатків, котрі розробляються. Node.js Full-stack Developer BackEnd складова (серверна сторона) може мати різну начинку, на відміну від FrontEnd. Якщо говорити про Node.js Full-stack розробника, то в якості основної мови виступає JavaScript, а сам стек наступний: платформа Node.js; фреймворки Express.js, Nest.js; пакетний менеджер npm; Web Sockets; розуміння REST API; інші спеціалізовані технології. Java Full-stack Developer Головний акцент робиться на мову програмування Java та пов'язані з нею технології. BackEnd-стек у такого розробника має бути наступним: мова Java + Java Core; веб-сервер Apache; інструменти для комфортної взаємодії з БД – JDBC, Hibernate; веб-сервіси; фреймворк Spring та його популярні модулі (Spring MVC, Spring Boot, Spring REST, Spring Web тощо); ASP.NET Full-stack Developer .NET розробники мають широкий інструментарій для самореалізації у вебі. Як основну мову програмування вони використовують C#. Скарбничка знань BackEnd частини у ASP.NET Full-stack Developer-а повинна містити: мову C#; знання інфраструктури .NET. платформу ASP.NET MVC/ASP.NET Core (Web API); Entity Framework (Core); хмарний сервіс Azure; мову T-SQL; розуміння RESTful API. PHP Full-stack Developer PHP – класична мова веб-розробки. Типовий BackEnd-стек даного розробника відрізняється від інших своєю компактністю. РНР у вебі вже досить давно, а тому йому багато не потрібно; достатньо лише: власне, сама мова PHP; фреймворк Yii2/Symfony/Laravel. Python Full-stack Developer Універсальність Python не знає меж! Не стала винятком сфера веб-розробки. BackEnd-стек Python Full-stack спеціаліста наступний: мова Python; фреймворк Django/Flask; REST API; Web Sockets; навички роботи з ОС Linux та веб-сервером Nginx/Apache (можливо); досвід роботи із хмарними сервісами. Також окрім спеціалізованих технологій, усім Full-stack розробникам необхідно: знати систему керування версіями Git + сервіс для хостингу IT-проєктів GitHub; знати реляційні (SQL) та нереляційні (NoSQL) бази даних, вміти їх проєктувати; розумітися на протоколах HTTP, HTTPS та роботі FrontEnd + BackEnd загалом; вміти оперувати мовою запитів SQL та однією із СУБД – MySQL / PostgreSQL / SQLlite, або однією з NoSQL СУБД (MongoDB, Redis, Cassandra, наприклад); вміти проводити тестування додатків; здійснювати Code Review; використовувати Docker; володіти англійською мовою на рівні Intermediate та вище; знати популярні патерни програмування та вміти їх реалізовувати; мати гарне знання алгоритмів та структур даних. Також від Full-stack спеціаліста можуть вимагати навички мобільної розробки, якщо роботодавець має намір портувати веб-додаток на відповідні платформи. Як бачите, список необхідних мов і технологій для створення гарної серверної складової веб-додатків є досить значним. У наступному розділі ми розберемося, які переваги та недоліки чатують на тих, хто таки має намір пов'язати свою професійну діяльність з Full-stack розробкою. Плюси професії Full-stack Developer Можливість самостійно вести цілий проєкт Очевидна перевага розробника даної спрямованості полягає в об'єднанні двох течій – FrontEnd та BackEnd – в одному фахівці. Крім того, що такий професіонал здатний реалізувати обидві частини веб-додатку, він може безпроблемно налаштувати їхній взаємозв'язок, що є частим каменем спотикання між фронтендниками та бекендниками. Тим самим усуваються непорозуміння і протиріччя, які неминуче виникли б між декількома розробниками, які працюють над одним і тим самим продуктом. В'ячеслав Лобода, Senior Full-stack PHP Developer, про свою професію відгукується наступним чином: “Часто при вирішенні завдань веб-розробки виникає необхідність вносити редагування одночасно і до FrontEnd, і до BackEnd. Для цього можна найняти двох різних спеціалістів чи одного Full-stack розробника. Останній варіант дозволяє заощадити час на комунікацію” Даний відгук і всі наступні взяті зі статті на dou.ua "Кар'єра в IT: посада Full-stack розробник". Висока швидкість розробки, можливість приймати власні рішення, мінімальні витрати часу на зайву комунікацію Full-stack розробник – це вже фахівець досить високого рівня, який здатний приймати певні самостійні рішення, не витрачаючи час на зайві обговорення та узгодження з іншими розробниками, адже проєкт цілком перебуває під його крилом. “Подобається, що можу створювати веб-додатки одноосібно, менше затримок під час роботи. Наприклад, коли працюєш як FrontEnd і потрібно, щоб BackEnd віддавав нові дані, ти просиш колегу внести зміни, чекаєш. Full-stack розробнику чекати ні на кого не потрібно. Взяв і зробив як слід” – Геннадій Догаєв, Web Full-stack Developer Легкість пошуку роботи на фрілансі На біржах фрілансу замовники найчастіше шукають такого веб-спеціаліста, який зробить всю роботу самостійно без залучення додаткових розробників. Хто, як не Full-stack девелопер найкраще підійде на цю роль, маючи таку перевагу перед вузькоспеціалізованими побратимами? Отже, обравши цей шлях, ви не залишитеся без роботи і зможете користуватися всіма благами, які дарує фрілансерство. Великі кар'єрні можливості Широкоформатність професії Full-stack розробника дозволяє реалізувати себе в будь-якій сфері веб-девелопменту. Ви можете в будь-який момент перейти на більш вузький профіль – чисту FrontEnd або чисту BackEnd розробку (горизонтальний розвиток, поглиблення в конкретну сферу діяльності), а можете стати сильним тімлідом або архітектором, який чудово розуміється на всіх процесах створення веб-додатків і має багатий досвід за плечима (вертикальний розвиток, просування кар'єрними сходами). Також Full-stack розробник може знайти успішне застосування своїм здібностям у стартапах. Стартап-команди, як правило, мають дуже малий бюджет і їм набагато вигідніше мати тих, хто може взяти на себе обов'язки декількох людей. Таким чином ви і новий досвід отримаєте, і зможете попрацювати над чимось свіжим, цікавим, раніше не баченим. Ну а щодо потреб ринку в Full-stack розробниках навіть згадувати не варто – безліч компаній хоче отримати спеціаліста широкого профілю в свій штат. Кількість вакансій для них менша, ніж для фронтендників та бекендників, однак і конкуренції теж не так багато. Мало рутини та вигорянь Багата на різноманітність діяльність Full-stack розробників знижує ризики загрузнути в одноманітній роботі. Ви володієте великим арсеналом знань, що дозволяє вам періодично перемикатися між проєктами і менше втомлюватися від застосування одних і тих самих технологій. Легкість у розвитку свого продукту Ви маєте достатньо знань та вмінь, щоб самостійно створити власний проєкт. У майбутньому ви зможете організувати свою команду для вдосконалення та подальшого розвитку програмного продукту, проте вже на старті ви маєте все необхідне для того, аби реалізувати ваші ідеї. Мінуси професії Full-stack Developer Програш вузькоспеціалізованому розробнику на його полі бою Full-stack девелопер володіє багатьма інструментами, але не може знати кожен настільки ж добре, наскільки окремо взятий фахівець. Ця професія передбачає подібне розпилення і унеможливлює поглиблення в будь-яку мову або технологію. Виходить, ви вмієте все, але гірше за розробника конкретного напряму. Багато часу на навчання Технологій, які має опанувати Full-stack спеціаліст, багато. Під час вивчення, наприклад, бекенду легко забути те, що ти вчив по фронтенду. Щоб усі знання та вміння утримувати на гарному рівні, необхідно витрачати багато зусиль. Впоратися з цим можна наступним чином: вивчаєте одну спеціальність, влаштовуєтеся на роботу, а потім вивчаєте другий напрямок. Виходить, ви не тільки поточні знання зберігаєте, але й примножуєте їх, рухаючись до фул-стек розробки. “Нарощуйте компетенцію поступово, з невеликих завдань. Пройдіть курс із напрямку, якого вам бракує, щоб вникнути в базові принципи. А далі опановуйте знання на практиці за правилом Learning by doing” – Олексій Голубєв, Team Lead Full-stack Developer в GlobalLogic. Важко стежити за новими тенденціями Світ IT дуже гнучкий і мінливий. Наче імперії – виникають і руйнуються нові мови, технології, підходи в розробці ПЗ, техніки написання та ревізії коду. Вам, як фахівцю широкого профілю, необхідно знати всі новинки, адже, зрештою, цього і вимагатимуть від вас роботодавці — використання сучасних інструментів та підходів. Занадто багато обов'язків Роботодавці іноді починають висувати велику кількість вимог до фул-стек фахівця. Раніше згадуваний Full-stack розробник Геннадій Догаєв має таку думку щодо цього: “Замовники хочуть звалити на одну людину надто багато. Наприклад, вже зустрічаються оголошення Node.js+React.js+React Native, тобто до веб-стеку додається ще й мобільна розробка. Це впливає на якість знань та кінцевого продукту: чим більше технологій потрібно охопити, тим більш поверхнево знаєш кожну з них. Крім того, людині не можуть подобатися всі напрямки одночасно. Мені з цього набору не дуже цікава мобільна розробка”. Вами хочуть залатати дуже багато дірок Фул-стек розробнику можуть часто делегувати різноманітні завдання на робочому місці. Дописати за кимось код, щось переглянути, пофіксити, доробити. Працювати замість FrontEnd/BackEnd розробника, який пішов у відпустку, – мила справа. А якщо вас найняли як альтернативу 5-ти розробникам, то й взагалі будуть тримати як раба. Складні завдання Ви знаєте більше інших, а значить, вам під силу розібратися з тою чи іншою важкою задачею. Принаймні так думає той, хто вам їх роздаватиме. Велика завантаженість Як ви вже помітили за попередніми пунктами, Full-stack розробнику не дадуть відпочити. Справ по вуха – це точний опис його стану на кожний робочий день. Складнощі у заміні Цей пункт одночасно є і перевагою, і недоліком. З одного боку, вам важко знайти заміну і, відповідно, вас цінуватимуть. З іншого боку, вам буде проблемно піти у відпустку, адже де взяти заміну? Тут і почнуться дзвінки у будь-який час доби, неможливість перекладання деяких завдань на інших розробників та інше. Як стати розробником Full-stack? Відповідь проста – оберіть найбільш близький до вас варіант професії та вивчіть необхідні технології за допомогою різних ресурсів, або підіть на курси full stack розробників. Радимо зробити свій вибір на користь освітньої IT-платформи ITVDN – тут ви зможете знайти 90% усіх потрібних вам відео курсів за будь-яким із обраних напрямків. Наприкінці статті ми залишимо корисні посилання на всі спеціальності, які допоможуть вам у вивченні ремесла Full-stack. Наприклад, вам сподобався BackEnd-стек Python розробника – тоді вам підійдуть 2 курси за наступними спеціальностями: FrontEnd Developer. Python Developer. З кожною програмою навчання ви зможете ознайомитися докладніше, перейшовши за залишеними посиланнями. Зарплати Full-stack розробників Відповідно до липневої зарплатної аналітики від DOU.ua (опитано 6605 українських розробників), медіанна зарплата FullStack розробників наступна: Junior – 980 USD; Middle – 2475 USD; Senior – 4750 USD. При цьому ЗП у колег по цеху – FrontEnd та Mobile розробників – приблизно такі ж. Єдині, хто помітно виділяються – BackEnd девелопери рівня Middle та Senior. Їхня медіанна оплата праці становить 2800 USD і 5000 USD відповідно, що на кілька сотень доларів перевищує зарплату фулстеккерів. Якщо звернутися до міжнародного веб-сайту з пошуку роботи Jooble (має українське коріння), то станом на липень середня пропозиція щодо зарплати для FullStack Developer у Києві становить 114 183 грн (приблизно 3100 USD). Відповідно до міжнародного опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів з усього світу), річна медіанна ЗП FullStack фахівця складає 71 140 USD (приблизно 5930 USD на місяць). Підсумки Full-stack Developer — універсальний веб-розробник, який поєднує у собі силу FrontEnd та BackEnd напрямків. Так, спеціалізовані девелопери зроблять всю роботу краще, ніж фул-стек фахівець, проте головний коник героя цієї статті – можливість розробляти повноцінні веб-додатки самостійно, доводячи їх до повністю готового стану. Як і будь-яке інше, Full-stack ремесло має свої переваги та недоліки. Шлях, яким повинен пройти full stack розробник з нуля досить тернистий і насичений. Проте недаремно казали класики — терпіння та праця все перетруть. Так що все у ваших руках! Можливо, нас читають розробники Full-stack? Із задоволенням прочитаємо вашу точку зору на позиції, викладені в цій статті. Також будемо раді будь-яким питанням та зауваженням від усіх читачів! Ну а тим, хто вирішив обрати професію Full-stack Developer, ми бажаємо бути впертими, оптимістичними і з незагасаючим вогником спраги знань в очах. Успіхів та кодерського натхнення на вашому шляху!   Корисні посилання Весь каталог спеціальностей: ІТ-спеціальності на ITVDN. FrontEnd складова: відео курс за спеціальністю FrontEnd Developer. BackEnd складова: Python Developer PHP Developer ASP.NET MVC Developer ASP.NET Core Developer Java Developer Онлайн навчання в групі з тренером за спеціальністю FullStack Node.js Developer.