Воспоминания
А помните ли вы те времена, когда JavaScript предназначался просто для того, чтобы добавить на страницу немного жизни, превратить сайт из безжизненного семантического скелета во что-то сложно индексируемое, но красивое?
Помните, когда в деталях вакансии и потом на собеседовании спрашивали «что такое AJAX», и каждому из нас этот вопрос казался действительно загадочным, как будто за ним кроются какие-то дебри неизученного материала.
Да и в общем-то, позиции под названием JavaScript Developer не существовало. Был Front-end. Что означали эти два слова не знал никто; для кого-то это была верстка, кто-то подразумевал написание скриптов к шаблонам, которые должны были вернуться ответом.
Вы помните то время, когда для того, чтобы превратить JavaScript из каши во что-то более или менее структурированное, мы меняли местами подключенные теги script, а после перезагружали страницу, чтобы проверить, работает ли этот вариант?
Было время. Сегодня же вопрос о необходимости JavaScript на странице даже не поднимается. Де-факто это стандарт, к которому готовы заказчики, а компании закупают фронтендеров пачками, чтобы просто лежали в закромах, потому что они все равно понадобятся уже через очень и очень короткое время. AJAX уже не вызывает вопросов; многие все так же не знают, что это такое, но только лишь потому что это само собой разумеющийся навык, с которого начинается обучение. Что такое тег script многие начинающие разработчики и не задумываются — все делается вместо них. Что такое позиция Front-end разработчика теперь стало понятно даже далекому от IT человеку. Это специалист, пишущий JavaScript (а иногда и верстающий) для проекта. Точка.
А всему виной прогресс. С появлением фреймворков и библиотек, позволяющих перенести маршрутизацию на сторону клиента, в постоянном опросе серверной части пропала всякая необходимость.
Да и сам фронтендер спокойно может обойтись без сервера с современными serverless решениями. Вот так меняется мир. Когда-то гонимые насмешками, мы превратились в самостоятельную, мощную боевую единицу. И сегодня мы рассмотрим наше оружие поближе.
По пунктам
Если вам не знакомы ностальгические воспоминания описанные выше — не беда. Поверьте, мир фронтенда развивается настолько быстро, что когда-то ваши сегодняшние заслуги будут всплывать в голове как нечто устаревшее и закостенелое.
А наша задача на сегодня — разобрать, с чем разобраться, чтобы начать нарабатывать психологические травмы (конечно же, связанные с разработкой) с пользой. Так как с началом пути мы определились и выбрали, куда именно пойдем учиться для получения базовых знаний (привет, Hillel), нам нужно понять, куда двигаться дальше, ведь в период обучения каждая крупинка крепким фундаментом будет тщательно подстраиваться под стены нашего с вами развития.
Я не буду пользоваться ресурсами сбора статистики популярности фреймворков среди разработчиков, а составлю этот ТОП по своему опыту, который состоит из постоянного получения предложений работы из разных источников.
React
Большая часть предложений все еще касается этой библиотеки. Хотя о ней уже не говорят как о самостоятельной единице, а имеют в виду комбинацию из маршрутизатора, менеджера состояния и прочих полезных фич, делающих из нее фреймворк — многие все еще поправляют других, закатывая глаза. Ну, как говорится… Так и пишется.
Плюсы
Данный инструмент зарекомендовал себя не только низким порогом входа, но и гибкостью использования, подразумевающую огромное количество библиотек, в том числе и не связанных напрямую с этим инструментом.
При использовании React вам будут доступны два подхода в разработке. Первый — использовать классы и то подобие ООП, которое доступно в языке. Второй — функциональный стиль. Сравнительно недавно стало возможным управлять состоянием нашего компонента внутри функциональных компонентов. Такой подход сразу завоевал все внимание пользователей и на сегодняшний день стал стандартом в любом новом приложении.
Минусы
Обратным является и то, что гибкость данной библиотеки является также и ее негативной стороной. Этот аргумент частенько исходит от противников React, тогда как остальными разбит в пух и прах.
Но в разрезе данного вопроса я соглашусь, что неопытный разработчик, попытавшийся построить приложение с помощью данного инструмента, скорее всего создаст чудовище Франкенштейна, которым будет сложно управлять, а расширять — тем более.
Рекомендуем курс по теме
VueJS
Фреймворк, который находится в этом топе вполне заслуженно. VueJS составил конкуренцию двум гигантам (немного терпения), ворвавшись в мир разработки на полном ходу и посеяв зерно сомнения в духе «а не попробовать ли мне написать что-то на нем?» в уме каждого разработчика. Его путь был тернист, так как на то время комьюнити не имело привычки доверять новичкам, а всецело полагалось на уже устоявшиеся стандарты. Тем не менее, свое место он завоевал.
Этот фреймворк, как и React, довольно прост в базовом освоении и позволяет начать разработку уже здесь и сейчас, так как уже включает в себя все необходимые утилиты для полноценной разработки.
Плюсы
Так как VueJS является наследником топ-1 и топ-3 в данном списке, он вобрал в себя лучшие их качества, немного переработав первый и упростив второй. Если вы имели опыт работы с одним из них, вам будет крайне просто начать писать качественный продукт на Vue. А вишенкой на торте является отличная документация с наглядными примерами даже в видео формате. Как по мне, по части простоты начала разработки — «Нажми сюда, проведи здесь и готово» — фреймворк можно смело поставить на первое место.
Кроме того, разработка все еще остается гибкой, а приложение собирается в невероятно миниатюрный бандл.
Минусы
Пожалуй, к минусам можно добавить то, что является таковым и в следующем инструменте, а именно — семантику. Так как Vue является HTML-ориентированным, вам нужно будет потратить время еще и на изучение директив, а это уже больше, чем просто JavaScript. Тем же, кто после React привык все держать под контролем, придется надеяться на теги в блоках. Свобода структуры может стать камнем преткновения у новичков.
Советы
Все так же уделите внимание структуре проекта, ведь от того, как вы построите приложение, будет зависеть не только скорость разработки, но и возможность добавления новых фич.
Изучите инфраструктуру, которой владеет Vue; возможно, то, что вам нужно, уже есть в обойме этого фреймворка, и нет необходимости скачивать отдельную бибилиотеку. Не спешите делать поспешные решения на первых порах.
Помните, что можно избежать повторения кода с помощью встроенных во фреймворк механизмов, к примеру, миксинов.
Angular
Ну и наконец мы добрались до исполина Front-end разработки. Прошу любить и жаловать первооткрывателя мира SPA.
Этот фреймворк стал глотком свежего воздуха, и его по праву можно считать отцом текущей Front-end индустрии. Завоевав рынок свежей идеей и (на свое время) прекрасным исполнением, он завоевал сердца всех разработчиков и остался в умах как эталон для всего, что появляется на поприще Front-end разработки. Современная версия этого фреймворка претерпела огромное количество переработок и исправлений, но все же сохранила за собой основную идею, которая пользуется популярностью и у других утилит (того же Vue).
Плюсы
Я очень долго оставался приверженцем Angular, прежде всего благодаря прекрасной структурируемости, прекрасному исполнению принципов SOLID со стороны разработчиков, а также использованию языка Typescript из коробки, что позволяет избежать большого количества ошибок при написании кода.
Фреймворк обладает огромным количеством утилит и будьте уверены, что любой вопрос, возникший во время разработки, уже решен и описан в собственной документации.
Прекрасно проработанная документация позволит писать хорошо структурируемые и довольно качественные приложения с самого начала использования, а довольно развитое комьюнити решить проблему при ее возникновении.
Минусы
А к минусам можно отнести то, что эти проблемы могут довольно быстро возникнуть. Сложная структура проекта и кода часто пугают новичков.
Порог входа гораздо выше, чем у React и VueJS, так как для начала работы вам нужно хоть немного разбираться в ООП и Typescript.
Советы
Наберитесь терпения. Путь становления Angular разработчика очень тернист, но если вы научитесь хорошо писать на этом фреймворке, любой другой покажется вам просто детским лепетом.
Хорошо изучите документацию и пройдите все туториалы, предоставленные разработчиками, а когда начнете разработку, просто найдите уже готовое решение, вшитое во фреймворк!
И последнее — когда встречаете незнакомый термин, не поленитесь изучить все связанные ссылки — это сильно упростит вам жизнь и ускорит дальнейшее обучение.
Помните — все уже написано до нас!
Svelte
Вы подумаете, что данный инструмент оказался здесь из-за моды, ведь во Front-end комьюнити принято выпускать по фреймворку в день, а после — хвастаться, что уже написал на нем to-do лист.
На самом деле, библиотека Svelte отличается предложенными подходами и решениями, еще на шаг продвигаясь вперед на пути к идеальному инструменту, и достойна внимания, так как, вполне возможно, обгонит всех вышеперечисленных конкурентов.
Плюсы
Библиотека унаследовала такой же низкий порог входа, как и React, с принципами отображения, являющимися смесью последнего с VueJS, так что каждый найдет для себя что-то родное. Кроме того, более конструктивный взгляд на реактивность позволяет писать гораздо меньше кода, в том формате, в котором удобнее и с более высокой производительностью.
Минусы
Пока это еще довольно молодое решение, комьюнити которого явно уступает всем вышеперечисленным, так что, возможно, у вас могут возникнуть некоторые проблемы в решение специфических проблем, связанных с разработкой, а так как этот инструмент довольно молодой, о некоторых из них мы пока еще не догадываемся.
Как по мне, ему нужно время, чтобы настояться.
Советы
Так как я не использовал Svelte в реальном проекте, совет тут только один: хорошо изучите документацию, ознакомьтесь с туториалом и напишите какой-то мини-проект для закрепления знаний. Думаю, в будущем это окупится.
Рекомендуем публикацию по теме
5-е место
На этом месте может быть любой из существующих фреймворков, так как все вышеперечисленные дополнили и улучшили все, что создало человечество за последнее время. К примеру, вы можете поместить здесь Ember или Backbone.
Несмотря на то, что CLI утилитами Ember пользуются и в разработке более современных решений, хомяк по большей части отсиживается в норке, высовывая нос в основном для того, чтобы поддержать legacy проекты, когда-то на нем написанные.
Я составил эту подборку на свое усмотрение, отсортировав инструменты по принципу «легкость плюс популярность», так как на одном интересе и энтузиазме далеко уехать не сможет никто.
Выбрав один из них и научившись им пользоваться в известной мере, вы обязательно найдете пристанище на каком-нибудь корабле, где, возможно, грести будет и несложно!
