В сравнение с разработката на back-end, на разработката на front-end не винаги е било отделяно необходимото внимание.
По-рано JavaScript беше презиран от много технолози. Времената обаче се промениха. Въвеждането на технологии с отворен код ускори растежа на уеб приложенията.
В резултат на този напредък почти всеки софтуерен бизнес вече използва най-новия JavaScript и инструменти като Eslint, Babel и Webpack вместо jQuery.
В днешно време front-end се движи с главоломно темпо, което е трудно да се поддържа.
Тази статия е за това да сте в крак с тенденциите за развитие в тази област през 2022 г. Може би ще откриете нещо полезно в тези моди.
Svelte става все по-популярен.
Svelte е много нова технология, която по принцип се появи твърде късно, за да се конкурира с React, Vue и Angular. Въпреки това популярността му нараства с безпрецедентна скорост.
Той беше обявен за най-популярната front-end рамка от потребителите на StackOverflow през 2021 г.
Svelte, от друга страна, е повече от това. Това е компилатор, който създава front-end, който е оптимизиран.
Svelte, за разлика от други популярни рамки, не се импортира в приложението. Svelte кодът, от друга страна, е компилиран в чист JavaScript. Това позволява на Svelte да превъзхожда рамките като React и Vue по отношение на скоростта.
Рамката Svelte е лесна за използване. Ето пример за това как могат да се използват състоянията и формулярите:
Формулярите се обработват по прост, красив начин, подобно на това, което са били преди появата на SPA рамки. Подпорите OnChange не е необходимо да бъдат прикачени към входовете.
Маркирането и логиката съществуват съвместно, като капсулират логиката и осигуряват визуален слой.
Не е изненада, че рамката набира популярност в общността. Ще бъде само въпрос на време, докато Svelte види създаването на нови популярни платформи.
React, Vue и Angular не отиват никъде.
Започнах пътуването си към front-end точно преди пускането на Angular 2 преди около шест години. Не мога да ви кажа колко пъти съм чел оттогава, че Vue, React или Angular са мъртви.
Реалността обаче се оказа доста по-различна. След въвеждането им, всяка от тези три рамки става все по-известна.
Струва си да се отбележи, че популярността на Angular се е увеличила с коефициент 10. React и Vue нараснаха още по-бързо. Случаите на използване, поддържани и от трите рамки, са почти идентични.
Това означава, която и да е от трите рамки да изберете, ще бъде използвана и поддържана в продължение на много години напред.
Струва си да се отбележи, че нямаше съществени модификации на React през 2021 г. Въпреки това скоростта, с която се адаптира, е невероятна. Най-вероятно е заради екологията на технологията. Повечето библиотеки и придружаващи рамки са налични за React.
Next и Gatsby са два отлични примера. Последният е част от нарушителите на следващата тенденция.
Както статичните, така и динамичните страници трябва да се поддържат от рамки.
Нека дефинираме статичните и динамичните страници от гледна точка на практиката.
Когато потребителят отвори динамична страница, той извлича и обработва съдържанието. По време на процеса на изграждане статичните страници са предварително дефинирани. Те са създадени като независими файлове на компактдиска. Те може да изглеждат динамични, но изискват по-малко усилия от браузъра на потребителя.
Може да имате една динамична продуктова страница или стотици статични продуктови страници, по една за всеки продукт, ако имате магазин.
Статичните страници са по-ефективни за потребителите, но създаването им отнема много време.
Популярността на рамки за едностранно приложение (SPA) като React и Vue доведе до изоставянето на статичните страници. Те също ги върнаха в полза.
Динамичният материал, генериран от SPA, често е значително по-бавен от готовото за показване HTML съдържание. Когато страницата изтегля данни от сървъра, разликата е по-осезаема. Такива данни обикновено трябва да се изтеглят и обработват от динамична страница.
В резултат на това се раждат статичните страници в SPA. Gatsby разреши този проблем, като създаде React рамка и инфраструктура за статични страници.
Статичен уебсайт, като блог, портфолио или дори платформа за курсове freeCodeCamp, ще бъде значително по-бърз. Дори изобразяването от страна на сървъра, както е обичайно за Next.js, не гарантира по-бърза производителност (Източник: Сидни Алкантара).
В други рамки, като Vue или Svelte, фокусът върху времето за първо боядисване на съдържание води до широк набор от методи за създаване на статични страници.
Статичните страници, от друга страна, трудно се разрастват до милиони страници. Обикновено трябва да използвате динамични страници, ако създавате приложение с много променливи материали, като потребителски профили. И двата подхода към управлението на съдържанието са тук, за да останат.
Платформите превръщат отделните програмисти в големи ИТ организации.
Платформите, които ускоряват разработката на front-end, наводниха пазара през последните години. Това е важно, защото позволява на малките групи да се движат бързо.
С помощта на Twilio или Agora.io можете бързо да интегрирате видео. Използвайки Firebase, Amazon Cognito или Okta, можете бързо да интегрирате удостоверяване (Okta също придоби Auth0).
Особено важно е да обсъдите как да внедрите front-end код автоматично и глобално. Vercel, Gatsby Cloud и Netlify са трите най-популярни опции. За 5 минути те могат да трансформират един-единствен front-end инженер с акаунт в GitHub в пълния DevOps отдел.
Gatsby Cloud е изключително за React, но прави справянето с голям брой статични страници почти елементарно. Може би това е най-добрият ви залог, ако правите приложение на Gatsby.
Vercel поддържа всички основни рамки, включително рамки от страна на сървъра като Next.js, който е създаден от основателите на компанията. Vercel ще направи живота ви много по-опростен, ако работите върху програма, изобразена от страна на сървъра.
Netlify е рамка от страна на клиента, която се фокусира върху чистите React и Vue. Той има редица удобни функции, включително предварително изградени формуляри, удостоверяване и услуги без сървър. За типичните приложения от страна на клиента смятам, че това е най-добрият вариант.
Shuffle.dev е аутсайдер, който си струва да се подчертае. За секунди може да генерира произволно професионално оформление на уебсайт. Той предлага голям брой теми и CSS рамки, а нови функции и материали се добавят на седмична база. Ние го използваме много в CodeAlly.io, за да ускорим прототипирането.
Оптимизирането на front-end е от решаващо значение.
През последните години front-end завърши пълен кръг. Олекотените уебсайтове се превръщат в мощни платформи с продължително време за изобразяване. Някои може да си спомнят кога Slack е използвал версията за разработка на React (Източник: Robert Pankowecki). Тенденцията да се правят SPA по-бързи е от години, но продължава да набира сила.
Библиотеките, които имат пагубно влияние върху скоростта, като Moment.js, се заменят с по-леки, по-бързи алтернативи, като Day.js. Други се преработват, за да се сведе до минимум размерът на пакета. Материален потребителски интерфейс и Lodash са два примера.
Sentry, лидерът в индустрията в регистрирането на грешки, съвсем наскоро започна да се фокусира върху минимизирането на размера на пакета. В екосистемата на front-end има все по-голям фокус върху използването на мързеливо зареждане, изобразяване на front-end на сървъра или използване на CSS файлове вместо стилизиране на приложението с помощта на JavaScript, какъвто беше случаят със стилизираните компоненти, например.
Tailwind напоследък придоби много сцепление и несъмнено ще продължи да го прави през 2022 г. Той върши по-добра работа от почти всеки друг CSS инструмент за намаляване на времето за зареждане на приложения.
Той обаче има тежка крива на обучение. Известно е, че кодът на Tailwind е труден за дешифриране.
Линария е друго нещо, което силно препоръчвам. Linaria обединява предимствата на стилизираните компоненти с производителността на статичните CSS файлове.
В резултат на това получавате страхотно изживяване при разработка, както и светкавично бърз front-end.
Заключение
Нещата се раздвижиха значително по-бавно, когато за първи път започнах. Има много иновации, а front-end се променя с бързи темпове.
Новите програмисти с малък или никакъв опит могат също да използват вградените предизвикателства за кодиране на VSCode и Docker, за да демонстрират своите способности.
