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

Основа: HTML, CSS и Javascript

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

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

Pug

Pug — это шаблонизатор и HTML-препроцессор, написанный на JavaScript для NodeJS.

Официальный сайт — pugjs.org

CSS Препроцессоры

Вы можете использовать CSS препроцессоры такие как: SASS/SCSS, STYLUS, LESS. Самый популярный на сегодняшний день SASS.

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

Официальный сайт — sass-lang.com

ES6

ECMAScript 6 — новая спецификация JavaScript со множеством новых возможностей.

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

Сборщики JavaScript

На данный момент существует 2 сборщика: Gulp и Grunt. Самый популярный — Gulp.

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

Официальный сайт — gulpjs.com

Безусловно, вместе с этим Вам необходимо знать основы Node.js и использовать менеджер пакетов, например, npm или Yarn.

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

JS фреймворки

На данный момент популярны 3 фреймворка: Angular, React и Vue.js. Изучать все фреймворки сразу не нужно, вполне возможно, если Вы уже работаете на определенную компанию, то там используется определенный стек технологий. Зная это, Вам будет легче определиться с чего начать. Однако, если Вы работаете на фриланс биржах или удаленно, то Вы можете начать изучать любой JS фреймворк, в любом случае Вы найдете заказчиков. Но, у этих фреймворков есть некоторые особенности, о которых хотелось бы поговорить более детально.

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

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

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

Что можно в целом сказать про эти 3 JS фреймворка?

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

Webpack

Webpack позволяет избавиться от таких инструментов, как Bower, Gulp или Grunt сборщик.

Webpack — это модуль с открытым исходным кодом для JavaScript-модулей.

Официальный сайт — webpack.js.org

Flexbox и Grid CSS

Если снова вернуться к теме CSS, то здесь стоит отметить, что актуальнее всего использовать технологии Flexbox и Grid.
Игра Flexbox Froggy — flexboxfroggy.com
Игра Grid Garden — cssgridgarden.com

SVG

Также, стоит по максимуму использовать SVG изображения на сайтах, вместо привычных растровых форматов, таких как png и jpeg. Изображения сделанные при помощи SVG (в основном это иконки или мелкие элементы) корректно отображаются на любых мониторах, в том числе ретина.

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

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Смотреть видео: