Когато се присъедините към света на Front End или имате много години от тази страна, се появяват някои въпроси, например: Кой е най-добрият начин за изграждане на front end? Как мога да поддържам предния край чист и организиран? Трябва ли да добавя модулно тестване? Трудно е да се отговори, но мисля, че мога да споделя някои добри съвети и статии за предната страна, така че да тръгваме!!
Всяка сграда се нуждае от солидна основа, четири стени и покрив. Те не подлежат на обсъждане, така че поради тази причина решихме да базираме нашата предна разработка в четири ключа за създаване на по-добри продукти:
- Код
- Процес
- Единични тестове
- Документация
Тези четири групи от теми, технологии и практики са в основата на една мащабируема и устойчива система за проектиране отпред.
Код
Трябва да се съсредоточим върху това как да подходим към HTML, CSS, JavaScript/typescript на система за проектиране, поради тази причина в нашите проекти трябва да създаваме съдържание, което да споделяме, свързано с:
- Указания за писане на преден код в различни рамки
- Най-добри практики и принципи.
- Конвенции или методологии за писане на HTML и CSS.
- Инструменти и редактор за подобряване на кода
Процес
Той е създаден, за да дефинира стъпките, необходими за получаване на код от мозъка на разработчика до браузъра на потребителя. С други думи, трябва да се съсредоточим върху работния процес на предния край на разработката на софтуер, валидиран дизайн и внедряване на код, за да напишем възможно най-ефективната, безгрешна, мащабируема и устойчива система за проектиране.
- Настройте среди за разработка, където можете правилно да тествате промените в кода
- Създавайте процеси за изграждане, които компилират, валидират и тестват код.
- Изпратете ангажирания код в централно хранилище на кодове.
- Непрекъсната интеграция
Тестване
Новият код може да въведе грешки или регресии по много различни начини, някои регресии ще повлияят на резултата от системното изчисление, например в резултат на неправилни цени на продуктите, плащане в количка за пазаруване или някои визуални промени и генериране на непоследователност в потребителските интерфейси, всеки от тях има много подобно решение: Тестване!
Трябва да разгледаме 4 различни метода за тестване на нашите сайтове. Понякога, в зависимост от размера на екипа, тези тестове ще бъдат разделени между преден край, бек-енд и операции, но доброто разбиране на всеки от тях ще бъде ценно, когато комуникирате с тези други екипи.
- Интеграционни тестове
- Единично тестване
- Тестване на производителността
- Визуално регресионно тестване
- Автоматизация с JS (за оценка)
Документация
Кодът на предния край става все по-сложен с всеки проект, който стартираме, така че не е лошо, просто този бърз темп на растеж идва със собствен набор от проблеми на растежа. Трябва да разгледаме тези различни видове документация, които вашият екип може да трябва да напише, инструментите, използвани за улесняване на публикуването, и типовете крайни потребители, които ще поемат съдържанието.
- Статична документация (Ръководство за стил)
- Документация, управлявана от код (библиотека с шаблони)
- Инструменти за документиране на преден код
Първо, нека изясним дефинициите, за да можем да научим как някои концепции са свързани и как могат да бъдат използвани за създаване на по-добри продукти и документация.
- Система за проектиране — пълният набор от стандарти за проектиране, документация и принципи заедно с набора от инструменти (модели на потребителския интерфейс и компоненти на кода) за постигане на тези стандарти. Това е кой, какво, къде, кога, защо и как за даден продукт.
- Библиотека с шаблони — Подклас в системата за проектиране, това е набор от шаблони за проектиране за използване в една компания, това е кой, какво.
- Ръководство за стил — Друг подклас в системата за проектиране, тази статична документация описва самата система за проектиране: как трябва да изглеждат и се чувстват продуктите, случаи на използване на модели на потребителския интерфейс, правилни типографски мащаби и т.н. Това е как, къде и кога.
