Советы сеньоров для начинающих Front-end программистов

Источник: https://dou.ua/lenta/articles/senior-frontend-tips/

Михаил Стадник, Senior JavaScript Engineer, 16 лет опыта во Front-end/JS:

Первое и самое важное — быть фанатом своего дела. Если этого нет, зачем себя обманывать, займитесь тем, что вам по душе. На самом деле зарабатывать можно не меньше (а может и больше) и в других сферах. Работа разработчика — это постоянное обучение. Ежедневное. И это должен быть осознанный выбор. Со временем вы обнаружите, что знания, которые были актуальны 15 лет назад, вдруг оказались устаревшими и никому не нужными. Действительно, кому какое дело в 2017 году, какие особенности были у рендеринга таблиц в IE6? А ведь когда-то об этом могли и на собеседовании спросить...

Поэтому всегда проявляйте любознательность. И главное — не бойтесь программировать и совершать ошибки.

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

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

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

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

Поэтому изучайте шаблоны проектирования. Все наши любимые фреймворки, в большинстве своем — это набор реализаций тех или иных шаблонов. Например, для ООП-парадигмы много шаблонов описал и систематизировал Мартин Фаулер. Тем не менее JavaScript мультипарадигмальный язык, поэтому не зацикливайтесь на ООП, изучите принципы функционального, императивного/декларативногои основанного на прототипах программирования. Изучайте, что такое неблокируемый ввод-вывод и асинхронность, событийно-ориентированное, аспектно-ориентированное программирование и так далее (информацию, благо, сейчас найти не составляет труда). Особое внимание уделите пониманию базовых принципов функционирования языка, с которым вы работаете. Протоколы и стандарты, которые связаны с ним и со средой окружения, в которой выполняется ваша программа. Разберитесь, что такое многопоточность и однопоточность, чем потоки отличаются от процессов. В конце концов, опуститесь до низких уровней и разберитесь, как работает эта чертова железяка, которая стоит перед вами на столе и которую называют компьютером. Попробуйте, например, достоверно разобраться, что физически происходит в машине, когда вы объявляете в коде переменную и присваиваете ей какое-то значение. Через сколько и какие программные и аппаратные слои пройдет этот процесс? И помните: «There is no silver bullet».

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

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

Также мы часто пользуемся такими ресурсами, как Stack Overflow и Google, чтобы найти решение той или иной проблемы. Это нормально, так как экономит наше время. Но не стоит слепо копировать решения. Каждый раз, когда вы прибегаете к этому, пытайтесь разобраться в сути найденного решения, разберитесь, как оно работает. Найдите второе похожее, сравните оба, попытайтесь понять, чем одно лучше другого. Может быть вы сможете в результате придумать какое-то своё, которое будет ещё лучше. Если возникают вопросы или непонимание — обсудите с коллегами. Вы — Junior, у вас есть для этого время, от вас никто не требует феноменальной скорости. Но все ждут, что ваш профессионализм со временем будет расти.

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

Сергей Россоха, Software Architect, 11 лет опыта во Front-end/JS:

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

Руководствуясь принципом: «полезность книги обратно пропорциональна её толщине», я не буду рекомендовать труды Д. Кнута, вместо этого быстрее и полезнее начать со статьи «10-ть структур данных, о которых стоит знать программисту». Здесь описаны основные структуры данных и алгоритмы работы с ними. Для тех из вас, кто хочет более детально ознакомиться с алгоритмами и структурами данных, я рекомендую книгу Н. Вирт «Алгоритмы и структуры данных», ее достаточно легко найти в Google или купить в книжном магазине. Я бы рекомендовал реализовывать в коде каждый алгоритм из этой книги, это поможет набить руку в написании кода, а заодно поможет лучше запомнить особенности реализации алгоритмов на JS. Как вариант, можно написать собственную библиотеку с реализацией алгоритмов, описанных в книге.

JS экосистема развивается очень динамично. Новые библиотеки и фреймворки появляются чуть ли не каждые полгода. И перед начинающими JS-разработчиками стоит нелегкий выбор, какой из них стоит учить. Мой ответ достаточно прост — учите JavaScript. В этом вам поможет серия книг YDKJ, тем более она доступна на GitHub. Для любителей настоящих книг доступна также и бумажная версия. Не стоит забывать и о всеми любимом Mozilla Development Network (MDN) — это отличный справочник, в который можно подсмотреть, если что-то забыли 😉

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

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

Александр Смолянинов, Front-end Tech Lead, более 10-ти лет опыта во Front-end/JS:

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

Поэтому в первых двух советах хотелось бы поговорить о верстке и JS.

Не отодвигайте верстку на второй план

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

Не забывайте о нативном JS

Если раньше мы сталкивались с поколением «jQuery-программистов», не умеющих обращаться с ванильным JavaScript, то сейчас все чаще встречаются молодые разработчики, взращенные на модном JS-фреймворке и не способные написать простейший алгоритм на чистом JS, иногда практически не владеющие версткой. Не надо так. Хорошие знания языка позволят намного быстрее понять любой новый фреймворк на нем. И да, штудируя проверенные временем книги по JS, не забывайте о ES2015.

Одновременно и простой, и сложный вопрос, где же этой базой овладевать. Кому-то проще штудировать книги, кому-то ходить на офлайн-курсы, кому-то заниматься онлайн. Несмотря на то, что курсы фронтенда — одни из самых популярных среди всех айтишных, там не всегда высокий уровень преподавания из-за низкого порога вхождения. Лично мне видится идеальным сочетанием — проверенные онлайн-курсы + ментор, к которому всегда можно обратиться с вопросом. Если проблемы с английским языком, то можно попробовать свои силы на ITVDN, Loftschool, HTML Academy или Hexlet. Среди англоязычных неплохо себя показали freeCodeCamp, udemy, Code School и codecademy. Ментора же лучше искать по рекомендациям, личному отношению и в офлайн-доступности. Однако слишком увлекаться курсами тоже не стоит, чем раньше вы перейдете к реальным задачам, тем лучше.

Старайтесь всегда быть в теме

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

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

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

Каналов для мониторинга на сегодняшний день более чем достаточно: это и вышеупомянутый дайджест, и RSS/Twitter лента с подпиской на тематические (микро)блоги, и периодические почтовые рассылки, и агрегаторы ссылок типа echojs.com, frontendfront.com или heydesigner.com. Для любителей соцсетей есть reddit.com/r/Frontend, hashnode.com и medium.com (с фильтрацией по нужному тегу), паблики и каналы в slack или telegram. Также нельзя забывать о подкастах, которые последнее время растут как грибы — Веб-стандарты, Frontend Weekend, Пятиминутка React, Пятиминутка Angular, Фронтёрки, devschacht и многие другие.

Проактивность

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

Сделали сайт с перспективой будущей поддержки или в процессе работы над крупным проектом? Добавьте стайлгайд и облегчите жизнь всем разработчикам на проекте. Закончили верстку быстрее, чем планировали? Добавьте хотя бы базовую поддержку accessibility, проверьте стили для печати и убедитесь, что анимация работает со скоростью 60 FPS. Осваивайте и предлагайте добавить поддержку offline, оцените возможность создания PWA и поборитесь за 100 баллов в google page speed.

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

Ответственность

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

Роман Савицький, Team Lead, Senior Software Engineer, 6 років досвіду у Front-end/JS:
Напевно, я не буду розпочинати з того, як «увійти в ІТ», адже занадто багато статей на цю тему. В ІТ увійти можливо, головне розуміти, що таке ІТ. Я працюю зі студентами і випускниками ВНЗ, і деякі з найбільш активних отримують роботу у свої 18. З чого ж почати у фронтенді?

Основи

Розпочинати потрібно з основ програмування і мови, якою ви хочете займатись. Фронтенд розробку я пропоную вивчати з основ HTML5, а саме семантики. Насправді, у мене погані новини тим, хто починає з ToDo List React і вважає, що семантика відійшла в минуле, і все, що зверстано div елементами, — це чудово. Розуміння різниці між b та strong залишиться на все життя, і саме цією базою ви будете користуватись щодня.

Також вивчайте CSS, до того ж послідовно. Починати з bootstrap не раджу, краще чистий CSS. Завжди вважав помилкою, коли розробники не розуміють одиниць вимірювання, підбирають все навмання. Розповім про цікавий випадок на співбесіді одного новачка на вакансію трейні. Розпочали ми, як завжди, із запитань невеликої складності для розуміння рівня. Усе наче добре, і дійшли до CSS. Отримали позитивні відповіді на рахунок flex, box моделі й інші. Коли ж запитали на рахунок одиниць вимірювань, отримали відповідь: «Є пікселі, навіщо ще щось». В очах виник подив і сумнів на рахунок знань. Цікавим відкриттям співбесіди стало те, що, чим простіше було запитання, тим гірша була відповідь.

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

Вивчайте спочатку основи, а далі набирайте оберти і додавайте технології.

Найкращою мовою програмування на фронті був і залишається JavaScript. Розпочинайте з нього, а далі можна CoffeeScript, TypeScript й інші. Але головне, розпочинайте з останнього стандарту, не намагайтесь вивчити старий стандарт, якому 10 років, і думати, що, можливо, знадобиться на старих проектах. У такому разі будете завжди доганяти поїзд.

Ментор

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

Курси

Ну якщо ж ви не знайшли ментора і немає змоги стати трейні в одній з компаній, тоді віддайте перевагу курсам. Якщо мову вести про офлайн, то віддавайте перевагу тренінгам при компаніях: саме їм цікаво якісно навчити вас і запросити на роботу. Це те, що потрібно молодому спеціалісту. Платні офлайн-курси, які побудовані на комерційній основі, я не раджу, тому що зацікавленості у менторів немає (тільки грошова), і вона не залежить від ваших результатів. Добре, якщо ви дістанете хоч якусь інформацію, а здебільшого youtube канал допоможе більше.

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

Англійська

Тут все просто: не володієте англійською, навряд чи зможеш програмувати. Уся актуальна інформація англійською, ресурси українською та іншими мовами перекладають із запізненням, якщо взагалі перекладають. Та й мови програмування, у цілому, «англомовні».

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

Практика

Напевно, буду я не першим і не останнім, хто скаже, що інформація, яку прослухав, прочитав з будь-якого джерела, не збережеться в пам’яті і не допоможе вам, якщо ви не спробували її на практиці.

Вивчаєте створення макетів і HTML, обов’язково скачайте макет і зверстайте його. Без практики неможливо увійти в ІТ. Будете проходити 100-500 курсів — і розвитку ніякого не буде.

Коли на практиці виконаєте декілька завдань, тоді спробуйте визначити напрямок фронтенду, у якому хочете розвиватись, — і вперед.

Ресурси

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

По-перше, рекомендую ресурси в стилі готових рішень CodePen. Тут можна і попрактикувати технології, вивчити і зрозуміти, як це виконують інші, і знайти різні завдання.

Далі, напевно, W3Schools, MDN web docs, HTML5 Rocks — це набір довідників, які оновлюються гарно і де завжди можна знайти актуальну інформацію.

На рахунок онлайн-відеоконтенту, тут раджу ютуб з різноманітними каналами, cousera, udemy, codeschool.

Наостанок додам, що головне мати бажання, вибрати напрямок і активно розвиватись в ньому, завжди виконуйте роботу, яку пропонують, практика допоможе вам — і з часом отримаєте все кращі і кращі задачі. Не хвилюйтеся, коли робите помилки, наступного разу вийде краще. Який критерій того, що ви можете працювати і боротись за позицію junior для мене? Коли декілька рандомних практичних задач ви можете виконати різними способами і розумієте різницю між ними, переваги кожного. Це перша ознака готовності до роботи у фронтенді.

Тимофей Лавренюк, Full Stack Engineer, 6 лет опыта во Front-end/JS:

Front-end сегодня развивается очень быстро. 10 лет назад для создания Front-end хватало знания верстки и jQuery. Но сейчас совсем другое время — количество фреймворков, библиотек, языков и прочих фишек во Front-end просто зашкаливает. И тут у новичка может появиться вопрос: как разобраться в огромном количестве фреймворков и библиотек и что и в какой последовательности изучать, чтобы стать Front-end разработчиком в 2017 году? Придется много учиться, если хочется быть хорошим разработчиком и решать сложные задачи. Но если такой задачи нет, то список можно сократить вдвое.

0. English

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

0. Computer Science

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

Если хочется быть хорошим разработчиком и не зацикливаться в будущем только на Front-end, то нужно понимать:

• как работает ЭВМ;
• как работает Сеть и Интернет;
• базовые алгоритмы и структуры данных;
• устройство браузера.

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

1. Верстка

Конечно, сейчас хочется выучить React или Angular, взять Bootstrap и сразу делать веб-приложения. Но нужно помнить, что веб начинался не с них. В первую очередь желательно выучить HTML и CSS и сверстать пару десятков сайтов. Нужна практика, чтобы понять, как работает верстка блоками, flex-aми или даже таблицами, и где какой layout нужно применять. Постепенно можно освоить сетки, верстку под различные экраны и препроцессоры.

2. JavaScript

Если CS для вас немаловажно, то лучше сначала изучить язык С, а после него взяться за изучения основного языка для Front-end разработки. А именно JavaScript-a по спецификации ES5. Надо понять, что умеет этот язык, как реализовать на нем базовые алгоритмы и паттерны, и потом уже есть смысл посмотреть на его эволюцию в виде ES2015 или TypeScript. Для изучения базового JavaScript я бы посоветовал серию уроков JavaScript Road Trip на CodeSchool. Это может показаться скучно и бессмысленно поначалу. Поэтому нужно не затягивать и браться за следующий пункт. Но не стоит забывать, что нужно стремиться учить JavaScript всегда, постепенно познавая тонкости языка и его Best Practices. В этом может помочь ресурс learn.javascript.ru

3. Frameworks

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

Однако с фреймворками также можно и переусердствовать. Не редко встречал случаи у новичков, когда небольшие сайты делали на React или Angular, потому что они были популярны, хотя можно было обойтись Bootstrap и jQuery. Со временем получится научиться использовать технологию там, где она лучше всего подходит под задачи.

4. Работа

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

Поэтому если хочется расти не только в $ плане, я бы рекомендовал не останавливаться учиться. А чтобы изучать глубже верстку, JavaScript, фреймворки и различные новые технологии — можно параллельно создавать свои pet-проекты. Решение реальных проблем, которые действительно что-то значат для тебя — это лучший путь к становлению хорошего разработчика. А если получится выпустить свой проект в production и поддерживать его, то это 2x boost опыта. Проверено на личном опыте и проекте.

Я надеюсь эти советы помогут стать хорошим разработчиком, но они не решают всех проблем. Front-end разработка постоянно меняется. И обучение никогда не закончится. Это значит, что сколько бы книг ты ни прочел, сколько бы митапов ты ни посетил или сделал проектов, обучение должно продолжаться, если ты хочешь оставаться в теме.

Влад Лукьянов, Senior Software Engineer, 5 лет опыта во Front-end/JS:

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

Что касается технических навыков, сейчас ценится знание ReactJS и Redux, но важно понимать, что это самый сложный стек за всю историю Front-end разработки, поэтому если у вас что-то не будет получаться либо что-то непонятно, не стоит расстраиваться. Я бы не стал смотреть в какой-то большой проект, где используется React, Redux, Immutable, RxJS и еще много чего, а учить все поэтапно. Конечно же, нужно начинать с самых основ, понимание цикла жизни компонентов (например, в чем отличие componentDidMount от componentWillMount), что такое state, props, какое между ними отличие и когда нужно использовать одно либо другое, как работают events в React. Есть замечательная библиотека, которая позволяет сразу писать React код без каких-либо настроек npm, webpack, babel и прочего, — это create-react-app, однозначно это сэкономит массу времени.

Будучи джуниором, я бы поставил первоочередную задачу для себя — это, конечно же, поиск работы, где можно будет учиться у своих более опытных коллег и работать на реальных проектах. В Киеве можно рассчитывать на зарплату $600-800/mo, от вас в основном будут требовать знание HTML/CSS/LESS/SASS, JavaScript (события, замыкания, функции для работы со строками, числами, прототипы, промисы, ES6/7), знание одного из популярных фреймворков (Angular, React, Vue.JS) на уровне «я могу создать страницу, прикрутить к ней API, вывести данные на страницу и обработать actions от юзера», а также знание Git. Могут поставить задачи на знание Core JavaScript, например, как создать такую функцию:

Ресурсы, на которые обязательно стоит взглянуть:
learn.javascript.ru
developer.mozilla.org
datasift.github.io/...​w/IntroducingGitFlow.html

Задачи по html/css