Если вы еще не подписались на них, подумайте о том, чтобы начать прямо сейчас

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

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

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

Лучшие практики при структурировании внешнего интерфейса

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

Структурирование кода стиля

Внутри папки стилей создайте отдельные папки для конфигураций, базы, макета, компонентов и страниц в зависимости от вашего веб-приложения. Используйте отдельный файл типографики, чтобы определить размеры и цвета для всех текстовых тегов HTML (таких как h1, h2,…), используемых в веб-приложении. Цвета должны быть определены в файле переменных и назначать цвета переменным с подходящими именами и использовать эти переменные, когда цвета необходимо применить по всему веб-сайту. Включите эти файлы стилей в папки, созданные аналогично изображению ниже.

Затем вы можете импортировать эти файлы в основной файл стиля. Если вы используете scss в своем веб-приложении, то файл main.scss будет похож на приведенный ниже код.

Структурирование кода JS

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

Лучшие практики при написании кода переднего плана

Используйте препроцессор CSS

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

Не оставляйте пустые SRC или HREF

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

Избегайте использования выражений CSS

Выражения CSS, такие как функция calc(), часто оцениваются, что может снизить производительность страницы. Вместо этого при необходимости используйте такие атрибуты, как box-sizing.

Используйте собственный родительский класс для ваших пользовательских стилей

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

Используйте только глобально созданные стили адаптивной типографики

Определите адаптивные текстовые теги в глобальной типографике и всегда используйте эти определенные теги в своем HTML-коде. Для отдельных компонентов и страниц не пишите нестандартные размеры шрифта. Разработчики должны поддерживать согласованность веб-приложения.

Избегайте использования глобальных переменных JavaScript

По возможности избегайте использования глобальных переменных в коде JS, поскольку их использование может вызвать конфликты. Объявляйте собственные локальные переменные области видимости, когда они вам нужны.

Добавьте содержательные комментарии для описания вашего кода

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

Рекомендации при подготовке к развертыванию

Минимизировать JS и CSS

Чтобы уменьшить его размер, Minification удаляет ненужные символы из файла, тем самым сокращая время загрузки. Комментарии и ненужные пробелы удаляются при уменьшении файла. Убедитесь, что веб-приложение загружает миниатюрные файлы JS и CSS, а не исходные файлы.

Удалите повторяющиеся JavaScript и CSS

Большая проблема, которая может возникнуть в крупномасштабном проекте веб-приложения, - это дублирование JS и CSS. Следуя правильной файловой структуре, это можно свести к минимуму, потому что будет легко просматривать файлы кода и управлять ими. Удаление повторяющегося кода повысит скорость работы приложения.

Реорганизуйте код

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

Последние мысли

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

Это все для этой статьи. Надеюсь, вы узнали что-то новое.

Спасибо за чтение и удачного кодирования!