Kilka miesięcy temu, Zacząłem pracować nad rocznym projektem tworzenia aplikacji internetowych i zdałem sobie sprawę, jak wielu programistów nie jest do końca świadomych najlepszych praktyk przemysłowych w zakresie front-endu aplikacji internetowych. Nawet ja sam nie byłem świadomy niektórych praktyk. Postanowiłem więc napisać ten artykuł, aby podzielić się tym, co wiem i czego się nauczyłem o najlepszych praktykach do naśladowania podczas tworzenia aplikacji internetowej.

Ten artykuł będzie koncentrować się na najlepszych praktykach w rozwoju front-end, ponieważ jakość kodu front-end jest najbardziej decydującym czynnikiem wielkiej aplikacji internetowej w moim doświadczeniu, ale większość programistów nie przestrzegać tych praktyk i rozwijać swoje indywidualne komponenty. Jeśli programiści nie przestrzegają tych praktyk, zarządzanie kodem będzie naprawdę trudne, nie będzie spójności w całym projekcie, a prędkość aplikacji internetowej będzie miała również negatywny wpływ. Przestrzeganie tych praktyk sprawi, że kod będzie bardziej czysty i łatwy w zarządzaniu, a także zwiększy produktywność wszystkich programistów.

W tym artykule zamierzam omówić najlepsze praktyki, których należy przestrzegać podczas tworzenia architektury front-end projektu, pisania kodu front-end i przygotowania do wdrożenia. Więc zaczynajmy.

Gdy zaczniesz pracę nad projektem, pierwszą rzeczą jest właściwe ustrukturyzowanie architektury kodu front-end. A to są najlepsze praktyki, których każdy front-end developer projektu musi przestrzegać.

Strukturyzacja kodu stylów

Wewnątrz folderu styles, utwórz oddzielne foldery dla konfiguracji, bazy, układu, komponentów i stron w zależności od twojej aplikacji internetowej. Użyj osobnego pliku typografii, aby zdefiniować rozmiary i kolory dla wszystkich znaczników tekstowych HTML (takich jak h1,h2,…) używanych w aplikacji internetowej. Kolory powinny być zdefiniowane w pliku zmiennych i przypisać kolory do zmiennych z odpowiednimi nazwami i używać tych zmiennych, gdy kolory muszą być stosowane w całej witrynie. Dołącz te pliki stylów wewnątrz folderów utworzonych podobnie do poniższego obrazu.