12.10.2019

Nuxt.js — гэта фреймворк для стварэння універсальных прыкладанняў на Vue.js Дазваляе рэндэру карыстацкі інтэрфейс, статычна генераваць прыкладання, хутка ствараць одностраничные сайты.

Кіраўнік аддзела frontend распрацоўкі Мікалай пра тое, чаму сайты на фреймворке Nuxt лепш, а распрацоўваць іх прасцей

Чаму NUXT?

У iMedia Solutions пачалі працаваць з Nuxt паўтара-два гады таму. Nuxt прызначаны для спрашчэння працы на фреймворке Vue, а нашы кліенты часам прасілі распрацоўваць сайт менавіта на ім. Я быў знаёмы з Vue даволі даўно, таму авалодаць Nuxt не склала адмысловай працы — ўсяго пару дзён на чытанне дакументацыі і можна прыступаць да працы. Праўда, калі распрацоўшчык не знаёмы з Vue, то працэс навучання працы на Nuxt можа заняць даўжэй часу.



Як Nuxt палягчае жыццё вэб-распрацоўшчыка

Аўтаматычная генерацыя старонак. Nuxt выконвае шмат працы за распрацоўніка. Фреймворк робіць так, што JavaScript «отрабатывает» на сэрвэры і збірае для браўзэра гатовыя HTML-старонкі. Распрацоўшчыку ня трэба самому прапісваць і наладжваць кожную старонку сайта. Аўтаматычная генерацыя не толькі паляпшае індэксацыю пошукавікамі, але і значна павялічвае хуткасць загрузкі старонкі. Гэта добра для бізнесу — сайт загружаецца ў два разы хутчэй, чым пры звычайнай зборцы.

Статыстычныя файлы. У Nuxt прапісаны налады для статыстычных файлаў — напрыклад, для малюнкаў. Без фреймворка распрацоўніку прыйшлося б прапісваць налады ўручную і ўсталёўваць убудовы для апрацоўкі малюнкаў.

Камфортная праца з метададзенымі. Такая інфармацыя, як назвы, апісання тавараў, open graph-тэгі (ўсплывальныя подпіс і малюнак сайта пры адпраўцы спасылкі на яго ў мессенджер), пры звычайнай працы запаўняецца ўручную ў шапцы сайта. Nuxt дазваляе ўпісаць метададзеныя ў адзін файл. Гэта зручна.

Выкарыстанне звыклых інструментаў. Распрацоўшчыкі прывыклі выкарыстоўваць CSS для паскарэння. У Nuxt выкарыстанне СSS прапісана першапачаткова — «из коробки». Часам зручней стандартны JavaScript пісаць на больш дэталізаванай TypeScript. Nuxt кампілюе яго ў звычайны JavaScript. Без гэтай функцыі прыйшлося б круціць налады і ўсталёўваць асобныя ўбудовы. На такія падрыхтоўчыя працы сыходзіць шмат часу.

Шматлікае і актыўнае кам'юніці. Вялікая перавага Nuxt як open-source праекта — гэта наяўнасць вялікай супольнасці (амаль 24 тыс карыстальнікаў на GitHub). Заўсёды можна атрымаць хуткі савет у любой праблемнай сітуацыі. Даволі частая сітуацыя — памылкі ў працы фреймворка пры ўсталёўцы іншых убудоў. Члены супольнасці літаральна на працягу паўгадзіны раскажуць, як выправіць памылку. Акрамя таго кам'юніці ўласнымі сіламі стварае для Nuxt мноства гатовых рашэнняў.

Чым распрацоўка на Nuxt добрая для заказчыка сайта?

CEO аптымізацыя сайта. Калі сайт зроблены на фреймворке як одностраничный, а астатнія старонкі прапісвае распрацоўшчык, то пошукавікі (Google або Яндэкс) не счытваюць усе дадзеныя карэктна. Аўтаматычная генерацыя старонак з дапамогай Nuxt значна паляпшае індэксацыю сайта пошукавікамі. Гэта значыць сайт з большай верагоднасцю патрапіць на высокія месцы ў пошуку па ключавых запытах.

Маштабаванасць. Часта кліент замаўляе распрацоўку сайта з абмежаваным функцыяналам і аддае перавагу паляпшаць яго паступова. З Nuxt пашырэнне функцый сайта рабіць прасцей і ў разы хутчэй.

Аптымізацыя і хуткасць. Пры абнаўленні старонак фреймворк ня загружае аднолькавыя кампаненты, што значна павялічвае хуткасць працы сайта — часам у некалькі разоў у параўнанні з вэб-дадаткам не на базе Nuxt.

Для якіх праектаў Nuxt падыходзіць лепш за ўсё?

Фреймворк можна выкарыстоўваць для любых сайтаў, нават для звычайных блогаў.

Асабліва эфектыўна Nuxt працуе з вэб-прыкладаннямі з вялікай колькасцю дынамічных дадзеных. Гэта могуць быць сайты з зменлівай графікай або паведамленнямі ў рэальным часе, а таксама інтэрнэт-крамы з апісаннямі тавараў, асабістымі кабінетамі і кошыкамі з пакупкамі. Мы выкарыстоўваем Nuxt для распрацоўкі амаль усіх такіх праектаў з нуля. У некаторых выпадках, калі ва ўжо існуючы сайт трэба дадаць які-небудзь дынамічны элемент (напрыклад, калькулятар цэн), то можна гэта зрабіць без Nuxt — пры дапамозе аднаго фреймворка Vue.

Nuxt дазваляе генераваць статычныя сайты. Гэта вельмі зручна: па адной камандзе «Cгенерировать» фреймворк стварае ўжо гатовыя HTML-старонкі. Такім чынам ствараюцца, напрыклад, многостраничные блогі. Згенераваныя HTML-старонкі можна захоўваць на GitHub Pages і звяртацца да іх па меры неабходнасці.

У фреймворке Nuxt ёсць шмат гатовых кампанентаў, а гэта дае магчымасць хутка сабраць прататып сайта і паказаць кліенту. Гэта дапаможа лепш зразумець, якім бачыцца будучы праект заказчыку.

Якія праекты ў iMedia ўжо былі створаны з дапамогай Nuxt?

Іх шмат. Напрыклад, партал для грузаперавозак. Гэта як раз прыклад сайта з вялікім аб'ёмам дынамічных дадзеных. На ім размешчаны заяўкі на грузаперавозкі, апрацоўваюцца плацяжы, карыстальнікі абменьваюцца паведамленнямі. Акрамя інтэрнэт-крамаў на Nuxt зручна распрацоўваць турыстычныя сайты. Такі досвед у iMedia Solutions таксама ёсць. Турыстычныя парталы — гэта складаныя прыкладання з вялікай колькасцю дадзеных, асабістымі кабінетамі, онлайн-заяўкамі ад кліентаў.

Аб росце папулярнасці Nuxt сярод беларускіх распрацоўшчыкаў

За апошнія пару гадоў фреймворк Vue стаў вельмі папулярны, і яго актыўна выкарыстоўваюць. Хто выкарыстоўвае Vue, той рана ці позна звяртаецца і да Nuxt. Таму апошні таксама павялічвае сваю папулярнасць.

Ведаю, што ў некалькіх беларускіх вэб-студыях яго ўжо актыўна выкарыстоўваюць. Усё часцей і ў апісаннях вакансій вэб-распрацоўшчыкаў з'яўляецца патрабаванне — «знание фреймворка Nuxt».

Іншыя артыкулы па тэме:
Артыкул
Налада рэкламы ў Google Adwords

Google Ads – сістэма налады рэкламы для паказаў у выдачы пошуку Google і на старонках сайтаў-партнёраў пошукавіка, якія ўваходзяць у Кантэкстна-медыйную сетку (КМС).

Артыкул
Налада рэкламы ў Яндэкс.Дырэкт

Яндэкс Дырэкт – магутны інструмент прасоўвання бізнесу. Яго функцыянал – паказы рэкламы зацікаўленым карыстальнікам.