Компензације ЦСС-а у ЈС-у

Фото Артем Бали

Недавно сам написао преглед вишег нивоа ЦСС-а у ЈС-у, углавном говорећи о проблемима које овај приступ покушава да реши. Аутори библиотеке ретко улажу време за описивање компромиса свог решења. Понекад је то зато што су превише пристрани, а понекад једноставно не знају како корисници користе алат. Ово је покушај да се опишу досадашњи компромиси. Мислим да је важно напоменути да сам аутор ЈСС-а, па би ме требало сматрати пристрасним.

Социјални утицај

Постоји слој људи који раде на веб платформи и не познају ниједан ЈаваСцрипт. Тим људима се плаћа да пишу ХТМЛ и ЦСС. ЦСС-ин-ЈС је извршио огроман утицај на ток рада програмера. Истински трансформативна промјена се никад не може урадити без тога да неки људи остану за собом. Не знам да ли ЦСС-у-ЈС мора бити једини начин, али масовно усвајање је јасан знак проблема са коришћењем ЦСС-а у савременим апликацијама.

Велики део проблема је наша неспособност да тачно комуницирамо о случајевима када ЦСС-ин-ЈС светли и како га правилно користити за задатак. Многи љубитељи ЦСС-а у ЈС-у били су успешни у промоцији технологије, али није много критичара говорило о компромисима на конструктиван начин, а да нису полагали јефтине промене на алатима. Као резултат тога, многе компромисе смо оставили скривене и нисмо се потрудили да пружимо објашњење и решења.

ЦСС-ин-ЈС је покушај да се сложени случајеви употребе лакше обрађују, тако да га не гурајте тамо где није потребно!

Трошак рада

Када се ЦСС генерише из ЈаваСцрипта током извођења, у прегледачу постоји својствени режијски трошак. Руковање радним временима варира од библиотеке до библиотеке. Ово је добро генеричко мјерило, али обавезно направите властите тестове. Главне разлике током извођења појављују се овисно о потреби потпуног рашчлањивања низова предложака, количине оптимизација, детаља имплементације динамичких стилова, трошкова алгоритма распршивања и трошкова интеграције оквира. *

Поред потенцијалног временског трајања, потребно је размотрити и 4 различите стратегије спајања, јер неке ЦСС-у-ЈС библиотеке подржавају више стратегија и на кориснику је да их примени. *

Стратегија 1: Само генерација рунтиме-а

Рунтиме ЦСС генерација је техника која генерише ЦСС низ у ЈаваСцрипт-у, а затим убризгава тај низ помоћу ознаке стила у документ. Ова техника производи табелу стилова, а не инлине стилове.

Компанија рунтиме генерације је немогућност пружања стилизованог садржаја у раној фази, јер се документ почиње учитавати. Овај приступ обично одговара апликацијама без садржаја који би могли бити корисни одмах. Обично такве апликације захтевају интеракцију корисника пре него што заиста могу да постану корисне кориснику. Често такве апликације раде са садржајем који је толико динамичан да застарева чим га учитате, тако да морате рано успоставити цјевовод за ажурирање, на примјер, Твиттер. Поред тога, када се корисник пријави, нема потребе да дајете ХТМЛ за СЕО.

Ако интеракција захтева ЈаваСцрипт, пакет се мора учитати пре него што је апликација спремна. На пример, можете да покажете садржај заданог канала приликом учитавања Слацк у документу, али вероватно је да ће корисник желети да промени канал одмах након тога. Дакле, ако сте учитали почетне садржаје само да бисте их одмах бацили.

Уочене перформансе таквих апликација могу се побољшати помоћу места и других трикова како би се апликација осетила тренутачније него што заправо јесте. Такве апликације су ионако обично тешке, тако да неће бити корисне брзо као чланак.

Стратегија 2: Генерација рунтимеа са критичним ЦСС-ом

Критични ЦСС је минимална количина ЦСС-а која је потребна да би се страница стилизовала у почетном стању. Приказује се помоћу ознаке стила у глави документа. Ова техника се широко користи са и без ЦСС-а у ЈС-у. У оба случаја вероватно ћете дупло учитати ЦСС правила, једном као део критичког ЦСС-а и једном као део пакета ЈаваСцрипт или ЦСС. Величина критичког ЦСС-а може бити прилично велика у зависности од количине садржаја. Документ обично неће бити кеширан.

Без критичног ЦСС-а, статична апликација са једном страницом која садржи велику количину садржаја са рунтиме-ом ЦСС-у-ЈС мораће да приказује места уместо садржаја. Ово је лоше јер би кориснику могло бити корисно много раније, побољшавајући доступност на нискобуџетним уређајима и за везе мале опсега.

Са критичним ЦСС-ом, генерисање ЦСС-а током извођења може се обавити у каснијој фази, без блокирања корисничког сучеља у почетној фази. Међутим, будите упозорени да на мобилним уређајима ниже класе, стари отприлике 5+ година, ЦСС генерација из ЈаваСцрипт-а може негативно утицати на перформансе. То снажно зависи од количине ЦСС-а који се генерише и коришћене библиотеке, тако да се не може генерализовати.

Замјена ове стратегије је трошак вађења критичног ЦСС-а и трошак израде ЦСС-а током рујна.

Стратегија 3: Само издвајање времена за изградњу

Ова стратегија је подразумевана стратегија на вебу без ЦСС-а у ЈС-у. Неке ЦСС-у-ЈС библиотеке омогућавају вам да извучете статички ЦСС у време израде. * У овом случају, није потребно прекорачење времена извршавања, ЦСС се приказује на страници помоћу ознаке везе. Трошкови ЦСС генерације плаћају се једном пре времена.

Овде су 2 главна компромиса:

  1. Не можете да користите неке динамичке АПИ-је које нуди ЦСС-у-ЈС током извођења, јер немате приступ држави. Често још увек не можете да користите ЦСС прилагођене особине, јер оне нису подржане у сваком прегледачу и не могу бити полијепљене по природи током израде. У овом случају, мораћете да решите решења за динамичко тематизирање и обликовање засновано на држави. *
  2. Без критичног ЦСС-а и с празном кеш меморијом блокират ћете прву боју док се ваш ЦСС пакет не учита. Елемент везе у глави документа блокира приказивање ХТМЛ-а.
  3. Неодређена специфичност са дељењем пакета заснованог на страници у апликацијама за једну страницу. *

Стратегија 4: Извлачење из радног времена помоћу критичног ЦСС-а

Ова стратегија такође није јединствена за ЦСС-у-ЈС. Потпуна статичка екстракција са критичним ЦСС-ом пружа најбоље перформансе у раду са статичнијом апликацијом. Овај приступ и даље има горе поменуте компромисе статичког ЦСС-а, осим што се ознака блокаде везе може преместити на дно документа.

Постоје 4 главне стратегије приказивања ЦСС-а. Само 2 од њих су специфична за ЦСС-ин-ЈС и ниједан се не односи на све библиотеке.

Приступачност

ЦСС-ин-ЈС може смањити приступачност ако се користи на погрешан начин. То ће се догодити када се веб локација са статичким садржајем имплементира без Цритицал ЦСС екстракције, тако да ХТМЛ не може бити обојен пре учитавања и процене ЈаваСцрипт пакета. То се такође може догодити када се огромна ЦСС датотека приказује уз помоћ ознаке за блокирање везе у глави документа, што је најпопуларнији тренутни проблем код традиционалног уграђивања и није специфичан за ЦСС у ЈС.

Програмери морају преузети одговорност за приступачност. Још увијек постоји снажна погрешна идеја да је нестабилна интернетска веза проблем економски слабих земаља. Склони смо заборавити да имамо проблема са повезивањем сваког дана када улазимо у подземни железнички систем или велику зграду. Стабилна мобилна веза без кабла је мит. Чак није лако имати стабилну ВиФи везу, на пример, 2,4 ГХз ВИ-ФИ мрежа може добити сметње у микроталасној рерни!

Трошак критичног ЦСС-а са приказом на страни сервера

Да бисмо добили критичну ЦСС екстракцију за ЦСС-у-ЈС, потребан нам је ССР. ССР је процес генерисања финалног ХТМЛ-а за дано стање апликације на серверу. У ствари, то може бити прилично сложен и скуп процес. Захтијева одређену количину ЦПУ циклуса на серверу за сваки ХТТП захтјев.

ЦСС-ин-ЈС обично користи чињеницу да је закачен у цјевовод за рендерирање ХТМЛ-а. * Зна се шта је ХТМЛ направио и који ЦСС је потребан тако да може да произведе апсолутну минималну количину. Критични ЦСС додаје додатну режију ХТМЛ приказивању на серверу јер ЦСС такође треба да се компилира у коначни ЦСС низ. У неким је ситуацијама тешко или чак немогуће кеширати на серверу.

Црни оквир је достављао

Морате бити свјесни како ЦСС-ин-ЈС библиотека коју користите приказује ваш ЦСС. На пример, људи често нису свесни како Стилед Цомпонентс и Емотион имплементирају динамичке стилове. Динамички стилови су синтакса која омогућава употребу ЈаваСцрипт функција унутар ваше декларације стилова. Те функције прихватају реквизите и враћају ЦСС блок.

Како би се одржала досљедна специфичност редослиједа извора, обје наведене библиотеке генеришу ново ЦСС правило ако садржи динамичку декларацију и надоградњу компоненте новим реквизитима. Да демонстрирам на шта мислим, створио сам ову песку. У ЈСС-у смо одлучили да применимо другачији компромис, који нам омогућава да ажурирамо динамичка својства без генерисања нових ЦСС правила. *

Стрма крива учења

За људе који су упознати са ЦСС-ом, али су нови у ЈаваСцрипт-у, почетна количина посла да се убрза са ЦСС-ом у ЈС-у може бити прилично велика.

Не морате бити професионални ЈаваСцрипт програмер да бисте писали ЦСС-у-ЈС, све до тренутка када се сложена логика укључује. Не можемо генерализовати сложеност стилирања, јер то заиста зависи од случаја употребе. У случајевима када ЦСС-у-ЈС постане комплексан, вероватно је да би примена ЦСС-а са ванилијом била још сложенија.

За основни ЦСС-у-ЈС стил, треба знати како декларисати променљиве, како користити низове шаблона и интерполирати ЈаваСцрипт вредности. Ако се користи нотација објеката, треба знати како радити са ЈаваСцрипт објектима и синтаксом заснованом на библиотеци. Ако је укључен динамички стил, треба знати како се користе ЈаваСцрипт функције и услови.

Све у свему, постоји крива учења, не можемо је порећи. Ова кривуља учења ипак није много већа од учења Сасс-а. У ствари, креирао сам овај курс за јајашце да бих то демонстрирао.

Нема интероперабилности

Већина ЦСС у ЈС либсу није интероперабилна. То значи да стилови написани помоћу једне библиотеке не могу да се приказују употребом друге библиотеке. То практично значи да не можете лако пребацити целокупну апликацију из једне у другу имплементацију. То такође значи да не можете лако делити свој интерфејс на НПМ-у без уношења своје ЦСС-у-ЈС библиотеке по избору у потрошачки пакет, осим ако немате статичку екстракцију за ЦСС у уграђеном времену.

Почели смо да радимо на ИСТФ формату који би требало да реши овај проблем, али нажалост још нисмо имали времена да га доведемо до стања спремног за производњу. *

Мислим да је дијељење оквира агностичких компоненти корисничког корисничког сучеља за вишекратну употребу у јавном домену и даље углавном тешко решив проблем.

Безбедносни ризици

Могуће је увести пропусте за безбедност са ЦСС-ом у ЈС-у. Као и код било које апликације на страни клијента, и прије него што је покренете, морате побјећи од корисничког уноса.

Овај ће вам чланак пружити више увида и неколико примјера пркоса.

Нечитљива имена класе

Неки још увијек мисле да је важно да на вебу задржимо смислена читљива имена класа. Тренутно многе ЦСС-у-ЈС библиотеке дају смислена имена класе на основу имена декларације или имена компоненте у развојном моду. Неки од њих чак омогућавају прилагођавање функције генератора назива класе.

Међутим, у начину производње већина их генерира краћа имена за мањи корисни терет. Ово је компромис који корисник библиотеке мора да направи и прилагоди библиотеци ако је потребно.

Закључак

Компромити постоје и вероватно их нисам ни споменуо. Али већина њих се не односи на све ЦСС-у-ЈС. Они овисе о томе коју библиотеку користите и како је користите.

* Биће потребан чланак који ће објаснити ову реченицу. Јавите ми на Твиттеру (@ олег008) о којем желите да прочитате више.