Сейчас мы находимся в 2019 году. С 2012 года и выхода первого выпуска библиотек Angular и Sass веб-технологии развиваются хорошо. Так появилось множество библиотек / фреймворков, таких как React, Angular2 или Vue. С ними также были обновлены настройки фронтенд-разработчика. Теперь у вас есть множество инструментов, которые помогут разработчикам отлаживать, приукрашивать и оптимизировать свой код. Постепенно выпущенные, многие из них довольно хорошо продвинулись в течение 2017 и 2018 годов и теперь стабильны, и, оглядываясь назад, я могу сказать, что они сэкономят вам много времени.

Сейчас 2019 год. Пора играть в высшей лиге.

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

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

Ecmascript 7

Язык Javascript развивается очень быстро, и каждая новая версия языка исправляет некоторые проблемы предыдущих версий и оптимизирует способ написания кода. Нормы Ecmascript 6 и, в меньшей степени, Ecmascript 7 вывели язык на следующий уровень. До такой степени, что вы можете не понимать код, написанный на ES7, начиная с ES5 или ранее.

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

Конечно, все браузеры не поддерживают последние версии Javascript, поэтому вам может потребоваться скомпилировать код, например, с помощью Babel. В версии 7 Babel вам необходимо использовать предустановку @ babel / preset-env, чтобы убедиться, что у вас установлены последние версии Ecmascript.

Sass

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

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

Я часто вижу, как у людей возникают конфликты между правилами CSS их различных компонентов. Если вы используете сборщик модулей, например webpack, я предлагаю вам ограничить область имен ваших классов стилей только соответствующим компонентом, чтобы избежать этих конфликтов. Для css-loader webpack это, например, вариант модули. Он заменит имена классов случайными строками.

Раньше я использовал МЕНЬШЕ, но, оглядываясь назад, можно сказать, что SASS намного мощнее, в частности, для итераций и наследования.

ЛИНТЕР

Все мы знаем, что Javascript - очень либеральный язык. У вас ОБЯЗАТЕЛЬНО должен быть линтер, чтобы ваши опечатки отображались в реальном времени в вашем любимом редакторе.

Линтер полезен для обеспечения ожидаемого стиля кодирования, а также для предотвращения распространенных ошибок, таких как неопределенная переменная, или даже для запрета опасных выражений, таких как ==.

При использовании линтера вы обязаны содержать свой код в чистоте. Более того, легче изучать новые версии javascript или библиотек, поскольку ваш редактор обнаруживает ошибки за вас. Кроме того, удобнее, когда у вас есть стажеры или младшие разработчики: они просто не могут выбросить ваш код.

В заключение, линтер очень полезен, когда вы пишете код в одиночку, но он абсолютно НЕОБХОДИМ, когда вы работаете в команде.

Мои любимые линтеры - это eslint для javascript, потому что это линтер, совместимый с множеством библиотек, и stylelint для CSS / SASS. Я предлагаю вам установить плагины для ваших редакторов, чтобы получать предупреждения в режиме реального времени и интегрировать линтер в вашу систему непрерывной интеграции, чтобы избежать попадания неверно отформатированного кода в репозиторий.

Для линтера я предлагаю вам использовать очень строгие правила стиля кодирования, такие как стиль кодирования Airbnb, и настраивать правила, чтобы «создать» свой собственный язык.

Красивее

Еще один очень полезный инструмент - Prettier, который автоматически на лету исправляет все мелкие ошибки. Он также может оптимизировать ваш код при обнаружении определенных шаблонов.

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

Что касается меня, я использую prettier-eslint и prettier-stylelint, которые напрямую используют правила линтера, чтобы избежать конфликтов с линтером.

Горячая перезагрузка

Возможно, у вас уже есть автоматическая перезагрузка, которая автоматически перезагружает вашу страницу, когда вы меняете код во время разработки.

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

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

Конечно, горячая перезагрузка доступна только для компонентных библиотек. Для React вам нужно активировать опцию hot for webpack. Затем вам нужно установить плагин babel и обернуть ваш App.jsx этим горячим перезагрузчиком. Для vue.js он часто устанавливается по умолчанию.

Ленивая загрузка

Когда вы используете сборщик модулей, весь ваш код объединяется в один скомпилированный файл. Но когда ваше приложение становится больше, размер скомпилированного файла может превышать 200 МБ, что является рекомендуемым пределом по соображениям производительности. Если ваш файл слишком большой, это может замедлить загрузку ресурсов и, в конце концов, инициализацию вашей страницы. Чтобы избежать этой проблемы, вам необходимо разделить пакет на несколько частей.

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

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

Webpack 4 изначально интегрирует эту функцию. Вам нужно только добавить плагин в babel и использовать импорт, как обещано.

Эта технология может оказаться не очень полезной, если ваши пользователи согласны подождать 5–10 секунд для инициализации. В противном случае, поскольку ее очень легко применить, я предлагаю вам интегрировать эту технологию в вашу установку.

Серверный рендеринг

Фреймворки / библиотеки, такие как React или Vue.js, очень удобны для веб-разработки. Однако у них были ограничения, когда вы хотели опубликовать веб-сайт, на который ссылается поисковая система Google. У роботов поисковых систем есть проблемы со сканированием страниц, построенных с помощью внешнего интерфейса javascript.

Сейчас Google вроде бы управляет веб-приложениями, но не очень уверен, так как алгоритмы Google довольно неясны. К тому же он не готов к Qwant, Bing или Duckduckgo. Если для вас важна SEO, не следует полагаться на возможности поисковых систем и использовать рендеринг на стороне сервера.

Рендеринг на стороне сервера (называемый SSR) - это технология, которая позволяет вашему внутреннему серверу отображать страницу и отправлять ее в браузер как статическую страницу. В большинстве продвинутых фреймворков SSR интерфейс javascript возвращает управление после первого отображения, в частности, для маршрутизации, если в браузере включен javascript. Таким образом, пользователь не видит разницы с веб-приложением без SSR. Кроме того, эта технология повышает производительность, поскольку ваш сервер может кэшировать страницы, и вашему браузеру не нужно интерпретировать первую страницу.

Обратите внимание, что в отличие от других технологий, описанных выше, эта технология более навязчива. Для использования вы должны использовать фреймворк вроде Gatsby или Next.js для React или Nuxt.js для Vue.js. Так что используйте его более конкретно, если SEO важно для вас.

Заключение

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

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

Для разработчиков, отвечающих за реакцию, последняя версия create-react-app включает в себя большую часть описанного выше материала.

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

Если эта статья вам помогла, не забудьте нажать на хлопок.