Tua 15 mlynedd yn ôl, roeddwn yn gweithio mewn cwmni lle gwnaethom adeiladu apiau ar gyfer asiantaethau teithio, gweithwyr maes awyr, a chwmnïau hedfan. Fe wnaethom hefyd adeiladu ein fframwaith mewnol ein hunain ar gyfer cydrannau UI a galluoedd ap un dudalen. Roedd gennym ni gydrannau ar gyfer popeth: meysydd, botymau, tabiau, amrediadau, tablau data, dewislenni, codwyr dyddiad, dewis ac amlddewis. Roedd gennym hyd yn oed elfen div. Roedd ein cydran div yn wych gyda llaw, roedd yn caniatáu inni wneud corneli crwn ar bob porwr, nad oedd, credwch neu beidio, yn beth hawdd i'w wneud ar y pryd.

Digwyddodd ein gwaith ar adeg yn ein hanes pan ystyriwyd JS, Ajax, a HTML deinamig fel chwyldro a ddaeth â ni i'r dyfodol. Yn sydyn, gallem ddiweddaru tudalen yn ddeinamig, cael data gan weinydd, ac osgoi gorfod llywio i dudalennau eraill, a oedd yn cael ei ystyried yn araf ac yn fflachio petryal gwyn mawr ar y sgrin rhwng y ddwy dudalen. Roedd yna ymadrodd, a wnaed yn boblogaidd gan Jeff Atwood (sefydlydd StackOverflow), a oedd yn darllen: “Bydd unrhyw gais y gellir ei ysgrifennu yn JavaScript yn cael ei ysgrifennu yn JavaScript yn y pen draw.” - Jeff Atwood

I ni ar y pryd, roedd hyn yn teimlo fel meiddio mynd i greu'r apiau hynny. Roedd yn teimlo fel cymeradwyaeth gyffredinol i wneud popeth gyda JS. Felly fe wnaethon ni bopeth gyda JS, a wnaethon ni ddim cymryd yr amser i ymchwilio i ffyrdd eraill o wneud pethau. Nid oeddem mewn gwirionedd yn teimlo'r cymhelliant i ddysgu'n iawn beth allai HTML a CSS ei wneud. Nid oeddem mewn gwirionedd yn gweld y we fel platfform ap esblygol yn ei gyfanrwydd. Roeddem yn ei weld yn bennaf fel rhywbeth yr oedd angen i ni weithio o'i gwmpas, yn enwedig o ran cefnogaeth porwr. Gallem daflu mwy o JS ato i gyflawni pethau. A fyddai cymryd yr amser i ddysgu mwy am sut roedd y we yn gweithio a beth oedd ar gael ar y platfform wedi fy helpu? Yn sicr, mae'n debyg y gallwn fod wedi eillio criw o god nad oedd ei angen mewn gwirionedd. Ond, ar y pryd, efallai ddim cymaint â hynny. Rydych chi'n gweld, roedd gwahaniaethau porwr yn eithaf arwyddocaol bryd hynny. Roedd hwn yn amser pan oedd Internet Explorer yn dal i fod y porwr amlycaf, gyda Firefox yn ail agos, ond yn dechrau colli cyfran o'r farchnad oherwydd bod Chrome yn dod yn boblogaidd yn gyflym. Er bod Chrome a Firefox yn eithaf da am gytuno ar safonau gwe, roedd yr amgylcheddau yr oedd ein apps yn rhedeg ynddynt yn golygu bod yn rhaid i ni gefnogi IE6 am amser hir. Hyd yn oed pan oeddem yn cael cefnogi IE8, roedd yn rhaid i ni ddelio â llawer o wahaniaethau rhwng porwyr o hyd. Nid yn unig hynny, ond nid oedd gan we'r oes gymaint o alluoedd wedi'u cynnwys yn y platfform.

Yn gyflym ymlaen at heddiw. Mae pethau wedi newid yn aruthrol. Nid yn unig y mae gennym fwy o'r galluoedd hyn nag erioed o'r blaen, ond mae'r gyfradd y maent ar gael wedi cynyddu hefyd. Gadewch imi ofyn y cwestiwn eto, felly: A fyddai cymryd yr amser i ddysgu mwy am sut mae'r we yn gweithio a'r hyn sydd ar gael ar y platfform yn eich helpu heddiw? Yn hollol ie. Mae dysgu deall a defnyddio'r llwyfan gwe heddiw yn rhoi mantais enfawr i chi dros ddatblygwyr eraill. P'un a ydych chi'n gweithio ar berfformiad, hygyrchedd, ymatebolrwydd, pob un ohonynt gyda'i gilydd, neu ddim ond yn cludo nodweddion UI, os ydych chi am ei wneud fel peiriannydd cyfrifol, mae gwybod yr offer sydd ar gael i chi yn eich helpu i gyrraedd eich nodau yn gyflymach ac yn well. Rhai Pethau na Fod Angen Llyfrgell Ar Gyfer Mwy O Na Chi Gan wybod beth mae porwyr yn ei gefnogi heddiw, y cwestiwn, felly, yw: Beth allwn ni ei ddileu? A oes angen cydran div i wneud corneli crwn yn 2025? Wrth gwrs, dydyn ni ddim. Mae'r eiddo radiws ffin wedi'i gefnogi gan yr holl borwyr a ddefnyddir ar hyn o bryd am fwy na 15 mlynedd ar hyn o bryd. Ac mae siâp cornel hefyd yn dod yn fuan, ar gyfer corneli hyd yn oed mwy ffansi. Gadewch i ni edrych ar nodweddion cymharol ddiweddar sydd bellach ar gael ym mhob porwr mawr, ac y gallwch eu defnyddio i ddisodli'r dibyniaethau presennol yn eich sylfaen cod. Nid y pwynt yw rhoi'r gorau i'ch holl lyfrgelloedd annwyl ar unwaith ac ailysgrifennu'ch cronfa godau. O ran popeth arall, bydd angen i chi ystyried cefnogaeth porwr yn gyntaf a phenderfynu yn seiliedig ar ffactorau eraill sy'n benodol i'ch prosiect. Mae'r nodweddion canlynol yn cael eu gweithredu yn y tri phrif beiriant porwr (Chromium, WebKit, a Gecko), ond efallai y bydd gennych wahanol ofynion cymorth porwr sy'n eich atal rhag eu defnyddio ar unwaith. Ond mae nawr yn amser da i ddysgu am y nodweddion hyn, ac efallai cynllunio i'w defnyddio rywbryd. Popovers A Dialogs Gall API Popover, yr elfen HTML , a'r elfen ffug-gefndirol :: eich helpu i gael gwared ar ddibyniaethau ar ffenestri naid,cyngor offer, a llyfrgelloedd deialog, fel UI floating, Tippy.js, Tether, neu React Tooltip. Maent yn ymdrin â hygyrchedd a rheoli ffocws i chi, allan o'r bocs, yn hynod addasadwy trwy ddefnyddio CSS, a gellir eu hanimeiddio'n hawdd. Acordion Mae'r elfen , ei briodwedd enw ar gyfer elfennau sy'n annibynnol ar ei gilydd, a'r ffug-elfen ::manylion-cynnwys yn dileu'r angen am gydrannau acordion fel y Bootstrap Acordion neu'r gydran React Accordion. Mae defnyddio'r platfform yma yn golygu ei bod hi'n haws i bobl sy'n gwybod HTML / CSS ddeall eich cod heb orfod dysgu defnyddio llyfrgell benodol yn gyntaf. Mae hefyd yn golygu eich bod yn imiwn i newidiadau sy'n torri yn y llyfrgell neu i'r llyfrgell honno ddod i ben. Ac, wrth gwrs, mae'n golygu llai o god i'w lawrlwytho a'i redeg. Nid oes angen i JS agor, cau nac animeiddio elfennau manylion cydgynhwysol. CSS Cystrawen Mae haenau rhaeadru, ar gyfer cronfa godau CSS mwy trefnus, nythu CSS, CSS mwy cryno, swyddogaethau lliw newydd, lliwiau cymharol, a chymysgedd lliwiau, swyddogaethau Mathemateg newydd fel abs(), sign(), pow() ac eraill yn helpu i leihau dibyniaeth ar rag-broseswyr CSS, llyfrgelloedd cyfleustodau fel Bootstrap a Tailwind, neu hyd yn oed llyfrgelloedd CSS-in-JS amser rhedeg. Mae'r newidiwr gêm :has (), un o'r nodweddion y gofynnwyd amdano fwyaf ers amser maith, yn dileu'r angen am atebion mwy cymhleth yn seiliedig ar JS. Cyfleustodau JS Gall dulliau Array Modern fel findLast(), neu at(), yn ogystal â dulliau Set fel gwahaniaeth(), croestoriad(), undeb() ac eraill leihau dibyniaethau ar lyfrgelloedd fel Lodash. Ymholiadau Cynhwysydd Mae ymholiadau cynhwysydd yn gwneud i gydrannau UI ymateb i bethau heblaw maint y porth gwylio, ac felly'n eu gwneud yn haws eu hailddefnyddio ar draws gwahanol gyd-destunau. Nid oes angen defnyddio llyfrgell UI trwm JS ar gyfer hyn bellach, ac nid oes angen defnyddio polyfill chwaith. Gosodiad Mae grid, subgrid, flexbox, neu aml-golofn wedi bod o gwmpas ers amser maith bellach, ond o edrych ar ganlyniadau arolygon Cyflwr CSS, mae'n amlwg bod datblygwyr yn tueddu i fod yn ofalus iawn wrth fabwysiadu pethau newydd, ac aros am amser hir iawn cyn iddynt wneud hynny. Mae'r nodweddion hyn wedi bod yn Sylfaenol ers amser maith a gallech eu defnyddio i gael gwared ar ddibyniaethau ar bethau fel system grid Bootstrap, cyfleustodau blwch fflecs y Fframwaith Sylfaen, grid sefydlog Bulma, grid Materialize, neu golofnau Tailwind. Dydw i ddim yn dweud y dylech chi ollwng eich fframwaith. Mabwysiadodd eich tîm ef am reswm, a gallai cael gwared arno fod yn brosiect mawr. Ond mae edrych ar yr hyn y gall y platfform gwe ei gynnig heb ddeunydd lapio trydydd parti ar ei ben yn dod â llawer o fanteision. Pethau Efallai na Fyddech eu Hangen Mwyach Yn Y Dyfodol Agos Nawr, gadewch i ni edrych yn gyflym ar rai o'r pethau na fydd angen llyfrgell arnoch chi yn y dyfodol agos. Hynny yw, nid yw'r pethau isod yn hollol barod i'w mabwysiadu ar raddfa fawr, ond gall bod yn ymwybodol ohonynt a chynllunio ar gyfer defnydd hwyrach o bosibl fod yn ddefnyddiol. Lleoli Angor Mae lleoli angor CSS yn ymdrin â lleoli popovers a chynghorion offer mewn perthynas ag elfennau eraill, ac yn gofalu eu cadw mewn golwg, hyd yn oed wrth symud, sgrolio, neu newid maint y dudalen. Mae hwn yn gyflenwad gwych i'r API Popover y soniwyd amdano o'r blaen, a fydd yn ei gwneud hi'n haws fyth symud i ffwrdd o atebion JS mwy perfformiad-ddwys. Navigation API Gellir defnyddio'r API Navigation i drin llywio mewn apiau un dudalen a gallai fod yn gyflenwad gwych, neu hyd yn oed yn ei le, i React Router, llwybro Next.js, neu dasgau llwybro Angular. Gweld Transitions API Gall yr API View Transitions animeiddio rhwng gwahanol gyflyrau tudalen. Ar raglen un dudalen, mae hyn yn gwneud trawsnewidiadau llyfn rhwng taleithiau yn hawdd iawn, a gall eich helpu i gael gwared ar lyfrgelloedd animeiddio fel Anime.js, GSAP, neu Motion.dev. Hyd yn oed yn well, gellir defnyddio'r API hefyd gyda chymwysiadau aml-dudalen. Cofiwch yn gynharach, pan ddywedais mai'r rheswm pam y gwnaethom adeiladu apiau un dudalen yn y cwmni lle roeddwn i'n gweithio 15 mlynedd yn ôl oedd er mwyn osgoi'r fflach gwyn o ail-lwytho tudalennau wrth lywio? Pe bai’r API hwnnw wedi bod ar gael ar y pryd, byddem wedi gallu cyflawni effeithiau pontio tudalen hardd heb fframwaith un dudalen a heb lawrlwytho’r ap cyfan yn gychwynnol. Animeiddiadau a yrrir gan sgrolio Mae animeiddiadau sy'n cael eu gyrru gan sgrolio yn rhedeg ar safle sgrolio'r defnyddiwr, yn hytrach na thros amser, gan eu gwneud yn ddatrysiad gwych ar gyfer adrodd straeon a theithiau cynnyrch. Mae rhai pobl wedi mynd ychydig dros ben llestri ag ef, ond pan gaiff ei ddefnyddio'n dda, gall hwn fod yn offeryn dylunio effeithiol iawn, a gall helpu i gael gwared ar lyfrgelloedd fel: ScrollReveal, GSAP Scroll, neuWOW.js. Dewisiadau y gellir eu Customizable Mae dewis y gellir ei addasu yn elfen

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free