Работата като преден разработчик ви позволява да правите различни неща. Това включва различни професии и таланти. Освен това трябва да останем фокусирани върху основната цел на това, което създаваме: уебсайт, който подкрепя хората с ежедневни задължения.
В това есе ще разгледам многобройните аспекти и функции, които всеки уеб разработчик трябва да вземе предвид. Ако съществуват, ще ви дам някои съвети и примери как да ги използвате и да успеете.
Дизайн На Потребителски Интерфейс
Оформление
Създаването на ангажиращо и подходящо оформление, което ще убеди клиентите да прекарват значително време във вашия уебсайт, е първата стъпка в разработването на уеб приложение.
Налични са няколко CSS рамки и можете да изберете една, която отговаря на вашите изисквания. Най-известният е Bootstrap, който можете бързо да промените благодарение на допълнителните функции на CSS препроцесорите. Те препоръчват множество компоненти и контроли, които ще придадат на сайта ви последователен вид.
С Bootstrap, най-популярната в света предна рамка с отворен код, можете бързо да разработите и конфигурирате адаптивни уеб страници, насочени към мобилни устройства. Досега Bootstrap пусна само алфа версия на петото си издание.
Ако решите да създадете своя собствена CSS рамка (т.е. аспект на компонентите, интервали, контейнери и т.н.), Flexbox е фантастичен избор за управление на гъвкави блокове съдържание. CSS Grid използва различна техника, разделяйки съдържанието на мрежи.
Отзивчивост
Способността на уебсайта да променя предоставянето на своята информация до устройството на четеца е известна като „отзивчивост“. Например, няма да видите тази публикация по същия начин, независимо дали я четете на вашия смартфон или лаптоп.
Отзивчивостта на уеб приложението помага за точното показване на материала и повишава четливостта и потребителското изживяване.
Според онлайн инструкциите на MDN „Медийните заявки са удобни, когато искате да коригирате вашия сайт или приложение въз основа на цялостния вид на устройството (като печат спрямо екрана) или конкретни атрибути и параметри (като разделителна способност на екрана или ширина на изгледа на браузъра) „
CSS медийните заявки са мощна техника за управление на отзивчивостта.
Както беше посочено по-горе, те могат да се използват във връзка с Flexbox или CSS Grid. Отзивчивостта обикновено се грижи за вас, ако използвате CSS рамка. Всичко, което трябва да направите сега, е да добавите няколко CSS класа.
Използването на srcset за снимки може да бъде фантастична алтернатива, за да направите вашите изображения отзивчиви. Тя ви позволява да показвате една и съща картина с различен начален размер в зависимост от размера на устройството, като същевременно поддържате съотношението на страните и намалявате теглото на пакета.
Хомогенни контроли и компоненти
За хората ще бъде по-лесно да видят дали компонентите и контролите са еднакви. Той функционира като ръководство, пътека за потребителите и идентичност на марката за вашия бизнес.
Ето някои добре познати библиотеки на JS рамки, които да използвате, ако искате да използвате съществуваща рамка:
Angular Material: Angular Material е алтернатива на Angular, включваща здрави компоненти и изчерпателен CDK.
React: Material UI е приложение за материален дизайн на уеб компоненти.
Vue.js: В крайна сметка общността на Vue.js създаде собствена реализация на материални стандарти: Vuetify.
Грешки и валидиране
Когато се занимавате с въвеждане на потребителя, валидирането е от решаващо значение. Независимо дали проблемите са причинени от мрежови затруднения, грешки в сървъра или неправилно въвеждане на потребителя, важно е да се справите с валидирането и грешките във вашата програма.
Angular: Включва API за валидиране на формуляри като част от цялостната си архитектура.
React: React Hook Form е най-често използваният плъгин за обработка на валидиране на формуляри в React приложение.
Vue.js: Хумористична игра на думи за тази версия на Vue.js: vuelidate
Взаимодействие с потребителя
Като се има предвид асинхронността
Може да отнеме няколко минути, няколко секунди или дори минути, за да получите или запазите данни. В резултат на това добавянето на зареждане или чакащи съобщения сигнализира, че нещо се случва.
Асинхронните повиквания могат да се обработват с помощта на Promise на Javascript или Fetch API на браузъра.
Съвместимост с браузъри (полифили)
Светът на предния край, подобно на браузърите, се променя бързо. Въпреки това, поради ретро-съвместимостта, една част от кода няма да осигури същия резултат във всички браузъри и версии. По-стара версия на Internet Explorer не поддържа толкова много JS възможности или CSS правила, колкото най-новата версия на Google Chrome.
Полифилите са направени, за да се избегнат проблеми от възникване по време на изпълнение в по-старите версии. „Polyfill, или polyfiller, е част от код (или плъгин), която доставя технологията, която вие, разработчикът, очаквате браузърът да предостави изначално“, пише Реми Шарп в публикацията си.
Отметнете „Мога ли да използвам…“, за да видите дали CSS правило или JS функция се поддържат от дадена версия на браузъра.
Angular: Ръководството за Angular включва раздел за поддръжка на браузъра.
React: Създайте приложение React, подобно на ReactDOM, поддържа Internet Explorer 9+ с полифили.
Vue.js: Поддръжката на браузъра му е описана в документацията на CLI.
L10n (локализация) и i18n (интернационализация)
Потребители от цял свят могат да посетят вашия уебсайт. Интернационализацията на вашето уеб приложение ще улесни разбирането му за всички ваши потребители.
L10n (10 букви между L и n) или локализация се отнася до процеса на разпознаване на местната нация (или район) на потребителя и приспособяване на вашия уебсайт към неговото местоположение.
Интернационализацията, често известна като i18n (18 букви между I и n), е процесът на работа с много езици и регионални настройки в уеб проект. Той включва не само текст, разбира се, но форматиране на дата, цифрово форматиране и понякога посока на писане (ltr или rtl).
И двата принципа са преплетени и могат да се прилагат по различни начини:
- Използване на падащо меню с всички налични езици
- Достъп до местоположението на потребителя (с помощта на API на браузъра за геолокация) и персонализиране на уеб страницата
- Добавянето на езиков URL параметър създава различен тип URL адрес, напр. example.com?lang=en, example.com/en или дори en.example.com са всички валидни URL адреси.
Angular: Още веднъж, Angular предоставя готово решение като пълна рамка.
React: Плъгинът react-i18next е добре познат в общността на React.
Vue.js: Плъгинът vue-i18n е наистина мощен.
a11y (достъпност)
Капацитетът на уебсайта да се адаптира към потребители с визуални, двигателни или други ограничения е известен като a11y (11 букви между a и y) или достъпност.
Често пренебрегван, той изисква нов поглед върху потребителското изживяване и, в някои случаи, значителни промени в проекта. Въпреки това е изключително важно да включите този сегмент от населението, особено след като дори малки модификации във вашия код могат значително да повлияят на потребителското им изживяване.
Има няколко опции, включително:
- Използване на свойството alt за снимки
- Добавяне на свойства на ARIA за обяснение на съдържанието
- Персонализиране на размера на текста
- Наличен режим с висок контраст
- Използване на TAB или клавишни комбинации за навигация по клавиатурата
Проектът a11y има за цел да стандартизира това понятие и е похвално усилие на общността. Основните JavaScript рамки също са напреднали:
Angular: Има специален раздел в Angular документите и Angular CDK започва да се справя с достъпността.
React: React предоставя пакет, наречен react-a11y, който говори за a11y в своите документи. (Бъдете внимателни, тъй като скоро вече няма да се поддържа и ще бъде заменен от react-axe).
Vue.js: Плъгинът vue-a11y поддържа достъпност и vuetify се фокусира върху него.
Известия
API на браузъра за push известия уведомява потребителите, когато е налично ново съдържание, което ви позволява да поддържате връзка с вашите читатели.
Интерфейсът за уведомяване на API за известия се използва за персонализиране и показване на известия на работния плот на потребителя.
Дизайнът и полезността на тези сигнали варират в зависимост от платформата, но като цяло те предлагат механизъм за изпращане на информация до потребителя асинхронно.
Данни и приложение
Един източник на истина (SSOT)
Решенията за управление на състоянието на приложенията, които са популярни от 2015 г., станаха неизбежни. Въпреки че тяхната полезност е спорна, те са прост и ефективен начин за консолидиране на данни във вашата програма. Всички те използват модела Flux.
Всеки има своя собствена конвенция за именуване: селекторите от NgRx или Redux са аналогични на получателите от Vuex. Редукторите на Angular са същите като мутациите на Vue.
Angular: „Реактивно състояние за Angular“: NgRx.
React: Очевидно Redux.
Vue.js: Инструментът за управление на състоянието на приложението Vue.js: Vuex.
Получаване на информация
Данните могат да бъдат извлечени от интернет по различни начини. Най-честият метод е да се заявяват уеб API чрез HTTP заявки. API за извличане се предоставя от API на браузъра, но всяка основна JS рамка има своя собствена реализация.
Angular: Въз основа на дизайна на Observer, Angular предлага използването на rxjs (използвайки Observable или Subject обекти).
React: Документацията все още препоръчва използването на API за извличане.
Vue.js: Общността на Vue.js предпочита Axios. Това е реализация, базирана на обещания.
Забележително споменаване: GraphQL
В областта на програмирането от предния край, GraphQL революционизира начина, по който се извличат данни. Неговата предпоставка е, че „клиентът определя какво изисква чрез използването на език за заявки“. В резултат получаваме точно това, което поискахме.
Angular: apollo-angular
React: react-apollo
Vue.js: vue-apollo
Местна постоянство
Данните могат да бъдат записани на компютъра на потребителя, като се използва локална постоянство. Бисквитките, localStorage и sessionStorage могат да се използват за съхраняване на данни.
Window.localStorage
Функцията localStorage само за четене на интерфейса на прозореца ви позволява да получите достъп до обект за съхранение за произхода на документа; съхранените данни се запазват по време на сесиите на браузъра.
Използват се HTTP бисквитки.
HTTP бисквитката (известна още като уеб бисквитка или бисквитка на браузъра) е малка част от данни, изпратена от сървър до уеб браузъра на потребителя.
Използване на уеб работници
Web Workers са лесен начин за уеб съдържание да изпълнява скриптове във фонови нишки. Работната нишка е в състояние да изпълнява задачи, без да се намесва в потребителския интерфейс.
Web Workers is a brand-new API for browsers. It’s a JavaScript script that runs in the background and has no effect on the page’s performance.
Angular: В своята документация Angular включва специален раздел.
React: Направена е React кука.
Vue.js: vue-worker е реализация на уеб работник във Vue.js.
Мрежа и производителност
Размер на пакета
Възходът на индустрията за смартфони доведе до фундаментална промяна в уеб разработката. Сега трябва да разгледаме мобилните устройства, така че устройствата да изтеглят минималното количество материал. Както показва тази графика, използването на мобилен интернет е надминало това на сърфирането на настолни компютри.
Това означава, че размерът на пакета е критичен. За да спестите данни, размерът на изтеглените файлове трябва да бъде възможно най-малък. За щастие, когато основните JS рамки пускат нови версии на своите библиотеки, те работят върху това. Намаленият размер на опаковката също гарантира по-добра производителност.
Angular: webpack-bundle-analyzer опростява проверката на пакета. Освен това командата stats-json в Angular CLI ви позволява да създадете отчетен файл, когато процесът на изграждане е завършен.
React: Създаване на React App има страница, посветена на анализ на размера на пакета.
Vue.js: Vue CLI, подобно на Angular, има опция за команда за отчет за получаване на файл с отчет. Повече информация можете да намерите тук.
Работници в сферата на услугите и прогресивните уеб приложения
Сервизният работник е скрипт, който контролира кеширането на приложение, което се изпълнява в уеб браузъра. Това е една от фазите в процеса на преобразуване на уеб приложение в PWA (прогресивно уеб приложение). PWA може да бъде достъпен като всеки друг уебсайт, използвайки защитен URL, но той осигурява потребителско изживяване, сравнимо с това на мобилно приложение, без ограничения (напр. изпращане на магазини за приложения или интензивно използване на паметта на устройството).
Angular: Цялата рамка предлага и техника за управление на обслужващи работници.
React: Създайте PWA на приложението React
Vue.js: Vue CLI идва с PWA функционалност.
Изобразяване от страна на сървъра (SSR)
За приложенията Angular, React и Vue.js, изобразяването от страна на сървъра или SSR е промяна в играта. На сървъра той преобразува компонентите в HTML низове и ги предава направо в браузъра. И накрая, той превръща статичното маркиране в напълно интерактивно приложение за клиента. Той постига множество цели:
- Подобрете вашето SEO (оптимизация за търсачки)
- Съдържанието се представя по-бързо.
Следват решенията, предоставени от всяка JS Framework:
Angular: Angular Universal е характеристика на Angular рамката.
React: Next.js е популярна рамка за проекти на React.
Vue.js: Nuxt е SSR Vue.js рамка (документация на Vue).
Генератор на статичен сайт (SSG)
Static site generators, or SSGs, are becoming increasingly inevitable as the Jamstack grows. Jamstack is a kind of web application that does not require the use of a web server. Here are some of the benefits of utilizing SSG:
Скорост: Вместо да генерират страниците на вашия сайт в реално време, статичните генератори на сайтове го правят по време на изграждане.
Сигурност: няма повече CMS (системи за управление на съдържанието), които често са насочени от хакери
По-лесно мащабиране: Разгръщането се намира в стек от файлове, които могат да бъдат доставени навсякъде, така че е изключително лесно да съхранявате уебсайт в мрежа за доставка на съдържание (CDN) (CDN). Следователно файловете могат да се възпроизвеждат по цялата планета за оптимална скорост.
Работен процес за разработка: Разработчикът вече не трябва да създава и работи с беден сървър или да поддържа база данни.
Най-разпространените SSG са:
Ъглов: Скъли
React: Gatsby (React + GraphQL), Next.js
Vue.js: Gridsome, Nuxt
Други езици за програмиране: 11ty, Hugo, Jekyll и др.
Анализ
A/B тестване и проследяване
Проследяването не се изисква при проектирането на уебсайт, но значително помага за подобряването му. Когато потребителите преглеждат приложението ви, проследяването включва колекция от технологии, които наблюдават кликванията и активността на потребителите. Помага ви да останете по-близо до изискванията на потребителя и поради A/B тестване да изберете най-подходящата опция по отношение на функции, поведение и дизайн.
Ето някои примери за решения за проследяване и A/B тестване:
Google Analytics: Урок за Angular, урок за React, урок за Vue.js
Kameleoon: персонализация, управлявана от AI и рамка за A/B тестване
Изпълнение На Уебсайта
Трудно е да се създаде високоефективно уеб приложение на едно заседание. Потребителите ще харесат опита им при сърфиране в приложението ви, ако се зарежда бързо. Съществуват различни уебсайтове с информация за приложения за оценка на ефективността, като например PageSpeed Insights на Google:
Lighthouse, полезна функция в конзолата на Google Chrome, вече е налична. Той оценява вашия уебсайт по пет различни критерия (производителност, прогресивно уеб приложение, най-добри практики, достъпност и SEO) и присвоява оценка от 100 на всеки от тях. След анализа се дават предложения за подобряване на оценките.
Покритието е друга функция на конзолата на Google Chrome.
Той помага при проследяването на ненужния Javascript и CSS код, за да се сведе до минимум размерът на пакета, което намалява времето за зареждане и използването на данни на мобилни устройства.
Оптимизация За Търсачки (SEO)
SEO означава оптимизация за търсачки и това е, което трябва да направите, за да повишите класирането си в търсачки като Google, Bing, DuckDuckGo и други. Повишава видимостта ви в мрежата. Има дори заглавие на длъжността за него: SEO консултант. Съществуват много книги, статии и курсове, за да създадете репутацията на вашия уебсайт.
Angular: Увлекателно есе за SEO в Angular и Angular Universal приложения.
React 2: статии относно React и SEO, включително една за честите SEO предизвикателства в React проекти и друга за SEO инструменти за React приложения.
Vue.js: Изчерпателно есе за контролиране на SEO в приложение Vue.js
Последни Мисли
Съгласен съм, че има много експертен опит и фактори, които трябва да се вземат предвид. В действителност спазването на всички тях е доста трудно и отнема много време. Всеки проект има свои собствени изисквания и приоритети. Ето защо важните трябва да бъдат определени в началото на проекта. В резултат на това ще сте готови да тръгнете, когато му дойде времето, и ще можете да промените архитектурата си, за да постигнете тези цели.
