Садржај
- Шта је компонента?
- Капсулација: преглед
- Једном када употребим џиновске роботе као техничку метафору
- Поента у свему овоме
- ИФрамес
- Прос
- Цонс
- Бешавни оквири
- Прос
- Цонс
- Веб компоненте
- Схадов ДОМ
- Прилагођени елементи и ХТМЛ предлошци
- Прос
- Цонс
- Кс-Тагови: прилагођени елементи полилиб
- Прос
- Цонс
- Закључак
- Даљи ресурси
- Свиђа вам се ово? Прочитајте ово!
Како градимо веб апликације које постају све сложеније, морамо прилагодити нашу развојну праксу тако да подноси све већи износ техничког дуга. Код који пишемо треба да буде модуларан, за вишекратну употребу и обухваћен да би спречио тесно повезане апликације. Монолити су дуготрајни и незгодни за рад било ког програмера.
Као програмери сучеља, користили смо обрасце конструктора објеката и модула како би ЈаваСцрипт код могао да буде управљив и енкапсулиран. Али било је и време да имамо неки начин да инкапсулирамо делове ДОМ-а, тако да немамо колизије именовања и нежељене интеракције.
Продавачи прегледача раде на АПИ-јевима који нам омогућавају да створимо боље инкапсулиране компоненте у прегледачу. Ако развијате апликацију са пуно функција на једној страници или апликацију која се ослања на пуно независног кода, инкапсулација не може доћи ускоро за вас.
Шта је компонента?
„Најбоље што се може рећи о софтверу је то што је премален.“ - Јамес Халлидаи, из Цоде Цоллаге на ЈСЦонфЕУ 2012
Компонента је, за наше сврхе овде, мали део софтвера који добро ради једну ствар. Компонента треба да садржи све одговарајуће делове који су јој потребни за обављање посла, ни више ни мање. Прихваћамо минимализам колико год можемо за сваку компоненту све док не жртвујемо њено основно понашање и структуру. Компонента фронтенд-а треба да садржи сав ХТМЛ, ЦСС и ЈаваСцрипт неопходне за баребонес имплементацију онога што треба да уради.
Можда се питате зашто наш тренутни приступ који користи јКуери УИ или ЕктЈС није довољан. То су библиотеке модуларних компонената које су већ решиле нашу потребу за овим блоковима за вишекратну употребу кода. Нажалост, недостаје им једна ствар која нам треба за спречавање проблема попут судара простора имена и неугодне ЦСС специфичности док уводимо све више и више сложености у нашу апликацију.
Ове методе убацују код у страницу где је то потребно, али тај код није енкапсулиран. Многе добро написане библиотеке примењене су на такав начин да то није нешто о чему сте морали да бринете. Али нису сигурни. Увођење инкапсулације у ДОМ могло би ствари учинити још бољим.
Капсулација: преглед
У погледу кода, објекат је енкапсулиран када изложи ограничени јавни интерфејс за интеракцију са другим кодом, док су његови подаци и детаљи имплементације приватни. Дозволи ми да објасним помоћу џиновских робота.
Једном када употребим џиновске роботе као техничку метафору
Да ли се неко сећа Мигхти Морпхин ’Повер Рангерс-а? Били су маскирани суперхероји који су се борили против злих сила џиновским оклопним роботима. Сваки Повер Рангер је имао свог робота са својим унутрашњим радом; сопственог пилота и сопственог унутрашњег стања за које је само он или она знао. Да би задали завршни ударац непријатељу, Повер Рангерс би спојио све роботе у много већег робота званог Мегазорд.
Када се споје, компонентни роботи би могли ефикасно да комуницирају преко својих пилота преко заједничке командне станице без излагања међусобног рада сваког робота. За сваког робота чувара могло би се рећи да је затворен; сваки је био компонента веће целине зване Мегазорд која би избацила неку озбиљну задњицу.
Поента у свему овоме
Да бисмо писали апликације које се лако одржавају, наш предњи код треба да се рашчлани на мале компоненте које заиста добро раде само једну малу функцију. Поред тога, желимо да можемо да користимо наш код на страници без ризика од судара простора имена или гажења ЦСС селектора. Да бисмо направили робусне апликације, желимо да се наше компоненте уграде у капсуле, а до сада нисмо имали много добрих начина да то урадимо са ДОМ-ом у прегледачу. Рашчланимо могућности које су нам доступне од почетка 2013. године.
ИФрамес
ифраме срц = "хттп://хелло-олд-фриенд.цом"> / ифраме>
Донедавно једини истински обухваћени елементи којима су програмери располагали били су ифраме-ови. Много је проблема са коришћењем ифрамеова за израду компонената: они се не проширују тако да одговарају садржају, визуелни украси садржаја не могу да се преклапају са оквиром - листа се може наставити. Такође, ифрамеи су спори.
Софтвер за коментаре који је написао Дискус користи ифраме-ове за приказ коментара за дати документ. Ако се пријавите на Дискус у његовом ифраме-у, надређена веб локација не може имати приступ ниједној од ваших података дневника. Ваше руковање да бисте оставили коментар односи се само на вас и Дискус и нема никакве везе са родитељском веб страницом на којој остављате коментар. Идите прегледати страницу са Дискусом и видећете.
Прос
- Погодно за ситуације у којима желите већу сигурност за своје кориснике
- Примењено у свим стабилним каналима прегледача
- Спречава ЈаваСцрипт сукобе између скрипти у вашем главном ДОМ-у и ифраме-у / компоненти
- Може да учита садржај са другог домена од оног на коме је хостована ваша апликација
Цонс
- Не ширите да бисте одговарали садржају
- Хипервезе могу да се крећу само унутар ифраме-а, а не у родитељском контексту
- Визуелна декорација елемената унутар ифраме-а не може да се преклапа са границом ифраме-а
- ИФрамеови су спори. Један на страници и добро сте, али више од тога представља проблеме
ИФрамес могу понудити одређени ниво сигурности и омогућити лако учитавање садржаја изван домена, али осим тога, ванилин ифрамес неће бити мој први избор за израду компонената.
Бешавни оквири
ифраме бешавни срц = "хттп://парент.цом"> / ифраме>
Када сам почео дубље да истражујем потенцијалне методе капсулације ДОМ-а, уверио сам се да ће новије методе превладати ифраме-ове и да ће ифрамерови на крају увенути у евентуално одбацивање и затамњење.
Затим бешавне атрибут завршио на мом радару и морао сам да преиспитам свој став. Чини се да се ифраме-ови могу држати као циљ у овом домену проблема.
Овај атрибут мења понашање ифраме-а на неколико главних начина. ЦСС правила могу каскадно да пролазе кроз ифраме, хипервезе ће се аутоматски кретати надређеним ДОМ контекстом, а ифраме ће аутоматски променити величину како би одговарао граничном пољу садржаја.
Звучи сјајно, зар не? Пошаљите га одмах у производњу! Ах, осим што је овај атрибут толико нов да га није применио ниједан стабилан канал прегледача. Међутим, ако узмете копију Цхроме Цанари-а, можете се играти с њом. Може проћи неко време пре него што видимо овај атрибут на стабилном каналу, али држите очи отворене за њега.
Прос
- Одлично ако желите да уградите неку функционалност и желите да се функције и стилови родитељског опсега премешају
- ХТМЛ везе функционишу у родитељском контексту
- Променљива величина, линија у природи чини флексибилни стил
Цонс
- Није примењено ни у једном стабилном каналу прегледача. Морате да имате Цхроме Цанари да бисте експериментисали.
- Понашање таквог понашања као што је могуће је могуће, али могло би вам требати неко време да се исправите
Веб компоненте
Иако се дешава поновно откривање ифраме-а, појавио се нови изазивач који чека пред вратима: веб компоненте. Назив звучи генерички, али у овом контексту односи се на пар В3Ц спецификација за стандардизацију понашања прегледача за инкапсулиране компоненте користећи Схадов ДОМ и Прилагођени елементи.
Схадов ДОМ
Нови Схадов ДОМ АПИ пружа програмерима могућност уметања пуноправног ДОМ-а унутар елемента хоста. У основи бисте ово требали помислити као да се унутар ХТМЛ елемента скрива мајушни ДОМ који сте ви, програмер, одлучили да га ставите. Приказивање сенке ДОМ замењује приказивање деце елемента хоста. Приказивање хоста можете у потпуности заменити, али ако има децу, можете користити посебну ХТМЛ ознаку која се зове садржај> да их убаци.
Узмите копију Цхроме Цанари-а и покушајте да се играте са следећим:
(Савет: Омогућите „Схов Схадов ДОМ“ у веб инспектору када покренете Цанари!)
див> Обична ознака, овде се нема шта видети ... / див>
скрипта>
вар инноцентХост = доцумент.куериСелецтор (’див’);
вар девиоусСхадов = инноцентХост.вебкитЦреатеСхадовРоот (); // Када се изврши ова линија и креира корен сенке, инноцентХост изгледа празан јер се његово приказивање замењује приказивањем девиоусСхадов
девиоусСхадов.иннерХТМЛ = "х1> Бу! / х1>"; // Дакле, дајемо девиоусСхадов-у неки садржај који треба приказати. Али шта ако желимо да се оригинални текстуални садржај врати?
девиоусСхадов.иннерХТМЛ = "х1> Боо! / х1> цонтент> / цонтент>"; // Користимо ознаку цонтент> да бисмо претраживачу рекли да убаци децу хостова
/ сцрипт>
Ако додате а изаберите атрибут до садржај> Ознаку можете чак и да одредите где се одређени садржај хоста приказује помоћу класа или ИД-ова деце вашег елемента хоста.
Овај специјални ДОМ је енкапсулиран из свог матичног ДОМ опсега. ЦСС и ЈаваСцрипт у родитељском опсегу не утичу на његов садржај, осим ако нисте другачије поставили заставице.
Прилагођени елементи и ХТМЛ предлошци
Прилагођени елементи користећи ново елемент> и темплате> ознаке дозволимо да компоненту тако декларишемо у сопственој ХТМЛ датотеци:
елемент наме = "мобиле-нав" ектендс = "ул">
темплате>
садржај> / садржај>
цонтент селецт = "соме-хост-цхилд"> / цонтент>
/ темплате>
/ елемент>
Затим, можемо користити прилагођени елемент тако што ћемо у наше заглавље укључити ХТМЛ шаблон и применити атрибут на хост елемент:
ул је = "мобиле-нав">
ли> Навигација 1 / ли>
ли> Навигација 2 / ли>
ли> Контактирајте нас / ли>
ли> Почетна / ли>
/ ул>
Кад год би а темплате> ознака се приказује, ствара се и убацује Схадов ДОМ тако да се унутрашњи рад прилагођеног елемента инкапсулира. Резултат је да ће корисник видети следеће приказано уместо деце оригиналног домаћина:
- Уметнуо наш шаблон!
- Кућа
- Навигација 1
- Навигација 2
- Контактирајте нас
Имајте на уму да ако прегледате ову ознаку у претходном примеру помоћу Цхроме Девелопер Тоолс у Цхроме Цанари, хоћете не видите дрво сенки, овде дајем хипотетички пример за оне који овај чланак не читају у ивицама.
Кад год би а темплате> ознака се приказује, ствара се и убацује Схадов ДОМ тако да се унутрашњи рад прилагођеног елемента инкапсулира.
Схадов ДОМ + Прилагођени елементи == Веб компоненте, сањиви АПИ прегледача који нам је потребан да бисмо остварили свој циљ инкапсулираних компоненти у прегледачу. Имајте на уму да у време писања овог текста радне групе одговорне за договарање примене ове функције тренутно расправљају о томе да ли ће прилагођени елементи користити методу атрибута (детаљно у овом ЈСЦонф ЕУ видеу) или ће програмери креирати потпуно прилагођене ознаке попут ово:
мобиле-нав> / мобиле-нав>
Постоје различите заслуге и мане код било које примене. За детаљне детаље и да бисте били у току са одлуком, следите ову карту за Бугзилла. Склонији сам синтакси и приступу прилагођених ознака из разлога које сам детаљно описао у поменутој грешци Бугзилла.
Ако желите детаљно да погледате примере веб компонената попут оних у овом одељку, погледајте овај видео.
Прос
- Капсулиране компоненте, управо оно што желимо!
- Постоји полифил, тако да можемо да се играмо са њима, али и даље нам је потребан Цхроме Цанари
- Лако је створити за фронтенд програмере
- Једноставно за дизајнере да декларативно користе ознаке у ХТМЛ-у
Цонс
- Није примењено ни у једном стабилном каналу прегледача. Експерименти раде само у Цхроме Цанари-у. Гласине су да ће Фирефок уследити убрзо након што се постигне споразум о сарадњи о његовој примени
- Учитавање више компоненти може проузроковати режијске трошкове ако користите пуно компонената, јер је свака ХТТП захтев (ХТМЛ предлошци могу да се спајају заједно да би се ублажио проблем)
Кс-Тагови: прилагођени елементи полилиб
Кс-Тагс је библиотека компонената и регистар који су саставили неки људи у Мозилли. Користи прилагођени приступ ХТМЛ ознаке преко методе атрибута која се користи као пример за увођење ДОМ сенки и веб компоненти.
Синтакса употребе прилагођене ознаке са овом библиотеком може бити једноставна као:
к-панел срц = "/ елементс / демо / панел-цонтент.хтмл"> / к-панел>
Кс-Тагс се може похвалити лепим регистром компонената које су вам већ на располагању. Мораћете да се упознате са својим врло малим АПИ-јем на к-тагс.орг да бисте регистровали своју ознаку и обрађивали догађаје с њом да бисте започели.
Ова библиотека ће се осећати слично осталим оквирним компонентама корисничког интерфејса са којима сте раније радили, осим што ово уопште није оквир: можете користити компоненте у њеном регистру на било који начин који желите без сложене хијерархије зависности; не скривају се додатне функције које вам нису потребне; нема опште намјене библиотеке јер је Кс-Тагс паметан; сама је компонента јер само једно чини врло добро; и омогућава вам израду прилагођених компоненти.
На крају изгледа да ће библиотека интегрисати ДОМ у сенци и веб компоненте док се те спецификације коначно учвршћују и пробијају у главне канале прегледача.
Евентуална инкапсулација? Надам се, јер би ово можда могло удобно да се нађе у мом ланцу алата за програмере.
Прос
- На крају ће користити веб компоненту и примене ДОМ стандардних имплементација када се коначно договоре
- Насељени, организовани еко-систем микро-модула доступан данас
- Имплементација је врло пука, тако да се можете држати ванилин ЈаваСцрипт-а
- Лако је створити за фронтенд програмере
- Једноставно за дизајнере да декларативно користе ХТМЛ
- Велики нагласак на компатибилности међу прегледачима, посебно на мобилним уређајима
Цонс
- Још увек нема праве инкапсулације. Али чини се да програмери већ примењују В3Ц спецификације и зато бисмо требали очекивати да ДОМ у сенци одговори на овај проблем у будућности
Закључак
Како се веб компоненте и боља инкапсулација налазе у нашем току рада, очекујем да ћемо видети да преференција према клијенту постаје норма. Иако је шаблонирање на страни клијента већ популаран начин за стварање апликација пуних функција, преношење више посла у прегледач може значити да имамо мање кода који долази преко мреже како бисмо постигли своје циљеве.
Ова потрага је посебно важна с обзиром на утицај преузимања преко непоузданих, а понекад и спорих мобилних веза на корисничко искуство. Нико не воли спору веб апликацију.
Надам се да ћу ускоро на располагању имати компоненту с алатима направљену са прилагођеним ознакама. Захваљујући поновној употреби и једноставној декларативној природи прилагођених елемената, дизајнери и УКС професионалци који нису упознати са програмирањем, али знају ХТМЛ, моћи ће брзо да прототипирају софистицираније случајеве употребе само помоћу прилагођених ознака које сам креирао.
Не очекујем да ће сваки генерички додатак одмах решити сваки захтев за функцијом, али ако се држимо наше минималистичке филозофије компонената, можемо почети са нечим једноставним и додати само оно што нам треба.
Ове године увежбајте писање кода на модуларнији начин и пратите напредак ових нових функција прегледача како се развијају. Касније ћете се захвалити што сте прешли криву.
Даљи ресурси
- Ту је видео мог ЈСЦонф ЕУ инспектора за разговоре Веба и мистерије сенке ДОМ за гледање
- Схадов ДОМ 101 фокусира се на кључну карактеристику ДОМ-а у сенци: могућност одвајања садржаја од презентације
- Објашњавач веб компоненти даће вам детаљније детаље о веб компонентама са најмање језгровитим језиком у поређењу са другим В3Ц документима
- ТЈ Холоваицхуцк о томе шта чини добру компоненту коју бисте требали прочитати (и потом покренуо регистар компонената које ће се користити са ЦоммонЈС-ом)
Речи: Ангелина Фаббро
Ангелина Фаббро је програмер са седиштем у Ванцоуверу у Канади, где ради у компанији Стеамцлоцк Софтваре. Ангелина има искуство у когнитивној науци, ствара паметне роботе и истражује на шта људи обраћају пажњу. Њен рекорд као веб програмера уравнотежен је са модерним иОС искуством и оштрим осећајем за дизајн. Ангелина такође предаје и менторира за поглавље Ванцоувера Ладиес Леарнинг Цоде.
Када на разним догађајима не говори о програмским темама,
Ангелина твитује као @ангелинамагнум и пише на реалитихацкинг.нет.
Свиђа вам се ово? Прочитајте ово!
- Како се прави апликација
- Бесплатан избор фонтова за графите
- Водичи за илустратор: невероватне идеје које можете испробати већ данас!
- Врхунски водич за дизајнирање најбољих логотипа
- Најбољи бесплатни веб фонтови за дизајнере
- Корисни и инспиративни предлошци летака
- Најбољи 3Д филмови 2013
- Откријте шта следи за проширену стварност
- Ево опет тог клизача од програмера Бен Винегар-а на бешавним ифраме-овима у случају да сте га пропустили
