Sa gen 15 ane, mwen t ap travay nan yon konpayi kote nou te konstwi aplikasyon pou ajan vwayaj, travayè ayewopò yo ak konpayi avyon yo. Nou menm tou nou bati pwòp kad andedan kay nou an pou konpozan UI ak kapasite aplikasyon pou yon sèl paj. Nou te gen konpozan pou tout bagay: jaden, bouton, onglè, ranje, datatables, meni, datepickers, seleksyone, ak seleksyon milti. Nou menm te gen yon eleman div. Eleman div nou an te gwo nan chemen an, li te pèmèt nou fè kwen awondi sou tout navigatè, ki, kwè li oswa ou pa, pa t 'yon bagay fasil fè nan moman an.
Travay nou an te fèt nan yon pwen nan istwa nou an lè JS, Ajax, ak HTML dinamik yo te wè kòm yon revolisyon ki mennen nou nan tan kap vini an. Toudenkou, nou te kapab mete ajou yon paj dinamik, jwenn done ki sòti nan yon sèvè, epi evite gen pou navige nan lòt paj, ki te wè sa tankou ralanti ak klere yon gwo rektang blan sou ekran an ant de paj yo. Te gen yon fraz, ki te fè popilè pa Jeff Atwood (fondatè StackOverflow), ki li: "Nenpòt aplikasyon ki ka ekri nan JavaScript pral evantyèlman ekri nan JavaScript." - Jeff Atwood
Pou nou nan moman sa a, sa a te santi tankou yon odas aktyèlman ale ak kreye aplikasyon sa yo. Li te santi tankou yon apwobasyon dra pou fè tout bagay ak JS. Se konsa, nou te fè tout bagay ak JS, epi nou pa t reyèlman pran tan nan rechèch sou lòt fason pou fè bagay sa yo. Nou pa t reyèlman santi ankourajman pou byen aprann sa HTML ak CSS te kapab fè. Nou pa t 'reyèlman wè entènèt la kòm yon platfòm app evolye nan antye li yo. Nou sitou te wè li kòm yon bagay nou bezwen travay alantou, espesyalman lè li te rive nan sipò navigatè. Nou ta ka jis voye plis JS sou li pou fè bagay yo. Èske w ta pran tan pou m aprann plis sou fason entènèt la te travay ak sa ki disponib sou platfòm la te ede m? Asire w, mwen te kapab pwobableman te kale yon pakèt moun sou kòd ki pa t vrèman nesesè. Men, nan moman an, petèt pa sa anpil. Ou wè, diferans navigatè yo te trè enpòtan nan lè sa a. Sa a te yon tan lè Internet Explorer te toujou navigatè a dominan, ak Firefox ki te fèmen nan dezyèm, men kòmanse pèdi pati nan mache akòz Chrome rapidman pran popilarite. Malgre ke Chrome ak Firefox te byen bon nan dakò sou estanda entènèt, anviwònman yo nan ki aplikasyon nou yo te kouri vle di ke nou te sipòte IE6 pou yon tan long. Menm lè nou te pèmèt yo sipòte IE8, nou toujou te gen fè fas ak yon anpil nan diferans ki genyen ant navigatè. Se pa sèlman sa, men entènèt la nan tan an jis pa t 'gen anpil kapasite bati dwa nan platfòm la.
Vit pou pi devan jodi a. Bagay yo chanje anpil. Non sèlman nou gen plis nan kapasite sa yo pase tout tan anvan, men pousantaj nan ki yo vin disponib te ogmante tou. Kite m poze kesyon an ankò, lè sa a: Èske w ta pran tan pou w aprann plis sou fason entènèt la fonksyone ak sa ki disponib sou platfòm la ede w jodi a? Absoliman wi. Aprann konprann epi sèvi ak platfòm entènèt la jodi a mete ou nan yon gwo avantaj sou lòt devlopè. Kit ou travay sou pèfòmans, aksè, repons, yo tout ansanm, oswa jis anbake karakteristik UI, si ou vle fè li kòm yon enjenyè responsab, konnen zouti ki disponib pou ou ede ou atenn objektif ou pi vit ak pi byen. Kèk Bagay Ou Ka Pa Bezwen Yon Bibliyotèk Ankò Lè nou konnen ki navigatè yo sipòte jodi a, kesyon an se: Kisa nou ka abandone? Èske nou bezwen yon eleman div pou fè kwen awondi nan 2025? Natirèlman, nou pa fè sa. Pwopriyete fwontyè-reyon an te sipòte pa tout navigatè yo itilize kounye a pou plis pase 15 ane nan pwen sa a. Ak kwen-fòm tou ap vini byento, pou menm kwen fancier. Ann pran yon gade nan karakteristik relativman resan ki disponib kounye a nan tout navigatè prensipal yo, epi ki ou ka itilize pou ranplase depandans ki egziste deja nan kodbaz ou a. Pwen an se pa imedyatman jete tout bibliyotèk ou renmen anpil yo epi reekri kodbaz ou a. Kòm pou tout lòt bagay, ou pral bezwen pran sipò navigatè an kont an premye epi deside ki baze sou lòt faktè espesifik nan pwojè ou a. Karakteristik sa yo aplike nan twa motè navigatè prensipal yo (Chromium, WebKit, ak Gecko), men ou ta ka gen diferan kondisyon sipò navigatè ki anpeche ou itilize yo touswit. Koulye a, se toujou yon bon moman yo aprann sou karakteristik sa yo, menm si, e petèt planifye yo sèvi ak yo nan kèk pwen. Popovers ak dyalòg Popover API a,
Asire w, vitès koneksyon entènèt ou a pwobableman ogmante, men sa a pa ka a pou tout moun. Epi se pa tout moun ki gen menm kapasite aparèy tou. Rale nan kòd twazyèm pati pou bagay ou ka fè ak platfòm la, olye de sa, pi pwobableman vle di ou bato plis kòd, ak Se poutèt sa rive jwenn mwens kliyan pase ou nòmalman ta. Sou entènèt la, move pèfòmans chaje mennen nan gwo pousantaj abandon ak fè mal repitasyon mak. Kouri Mwens Kòd Sou Aparèy Anplis de sa, kòd ou voye sou aparèy kliyan ou yo gen anpil chans kouri pi vit si li itilize mwens abstraksyon JavaScript sou tèt platfòm la. Li la tou pwobableman plis reponn ak plis aksesib pa default. Tout bagay sa yo mennen nan plis ak pi kontan kliyan. Tcheke blog kolèg mwen an Alex Russell nan pèfòmans inegalite chak ane, ki montre ke aparèy prim yo lajman absan nan mache ak dè milya de itilizatè akòz inegalite richès. Ak diferans sa a sèlman ap grandi sou tan.
Layout masonry entegre Yon karakteristik platfòm entènèt ki ap vini byento e ke mwen trè eksite sou se CSS Masonry.
Kite m kòmanse pa eksplike kisa Masonry ye. Ki sa ki masonry Masonry se yon kalite layout ki te fè popilè pa Pinterest ane de sa. Li kreye tras endepandan nan kontni kote atik yo pake tèt yo osi pre kòmansman tras la ke yo kapab.
Anpil moun wè Masonry kòm yon gwo opsyon pou pòtfolyo ak galri foto, ki li sètènman ka fè. Men, Masonry se pi fleksib pase sa ou wè sou Pinterest, epi li pa limite a jis layout kaskad tankou. Nan yon layout masonry:
Tracks yo ka kolòn oswa ranje:
Tracks nan kontni pa tout dwe gen menm gwosè a:
Atik yo ka kouvri plizyè tras:
Atik yo ka mete sou tren espesifik; yo pa oblije toujou swiv algorithm plasman otomatik la:
Demo Men kèk demonstrasyon senp mwen te fè lè m sèvi ak aplikasyon k ap vini CSS Masonry nan Chromium. Yon demonstrasyon galri foto, ki montre kouman atik (tit la nan ka sa a) ka kouvri plizyè tracks:
Yon lòt galri foto ki montre tras diferan gwosè:
Yon layout sit nouvèl ak kèk tras ki pi laj pase lòt, ak kèk atik ki kouvri tout lajè layout la:
Yon tablo kanban ki montre ke atik yo ka mete sou tren espesifik:
Nòt: laDemonstrasyon anvan yo te fèt ak yon vèsyon Chromium ki poko disponib pou pifò itilizatè entènèt, paske CSS Masonry fèk kòmanse aplike nan navigatè yo. Sepandan, devlopè entènèt yo te san pwoblèm mwen tap itilize bibliyotèk yo kreye layouts masonry pou ane deja. Sit ki itilize masonry jodi a Vreman vre, masonry se trè komen sou entènèt la jodi a. Men kèk egzanp mwen jwenn san konte Pinterest:
Ak kèk lòt egzanp, mwens evidan:
Se konsa, ki jan yo te kreye layouts sa yo? Solijans Youn nan Trick ke mwen te wè itilize se lè l sèvi avèk yon layout Flexbox olye de sa, chanje direksyon li nan kolòn, epi mete li nan vlope. Nan fason sa a, ou ka mete atik ki gen diferan wotè nan plizyè kolòn endepandan, ki bay enpresyon yon layout masonry:
Sepandan, gen de limit ak solisyon sa a:
Lòd la nan atik yo diferan de sa li ta dwe ak yon Layout masonry reyèl. Avèk Flexbox, atik ranpli premye kolòn nan an premye epi, lè li plen, Lè sa a, ale nan kolòn nan pwochen. Avèk masonry, atik yo ta pile nan kèlkeswa tras (oswa kolòn nan ka sa a) gen plis espas ki disponib. Men tou, e petèt pi enpòtan, solisyon sa a mande pou ou mete yon wotè fiks nan veso Flexbox la; otreman, pa gen okenn vlope ta rive.
Bibliyotèk Masonry twazyèm pati Pou ka ki pi avanse, devlopè yo te itilize bibliyotèk. Bibliyotèk ki pi koni ak popilè pou sa a tou senpleman rele Masonry, epi li vin telechaje apeprè 200,000 fwa pa semèn dapre NPM. Squarespace bay tou yon eleman layout ki rann yon layout masonry, pou yon altènatif san kòd, ak anpil sit itilize li. Tou de opsyon sa yo sèvi ak kòd JavaScript pou mete atik nan Layout la. Bati-an masonry Mwen vrèman eksite ke Masonry ap kòmanse parèt kounye a nan navigatè kòm yon karakteristik CSS entegre. Apre yon tan, ou pral kapab sèvi ak Masonry menm jan ou fè Grid oswa Flexbox, se sa ki, san yo pa bezwen okenn solisyon kontouraj oswa kòd twazyèm pati. Ekip mwen an nan Microsoft te aplike sipò masonry entegre nan pwojè sous louvri Chromium, ki baze sou Edge, Chrome ak anpil lòt navigatè. Mozilla te aktyèlman premye machann navigatè a ki te pwopoze yon aplikasyon eksperimantal nan Masonry tounen nan 2020. Ak Apple te tou te trè enterese nan fè sa a nouvo layout web primitif rive. Travay pou estandadize karakteristik nan ap avanse tou, ak yon akò nan gwoup travay CSS la sou direksyon jeneral la e menm yon nouvo ekspozisyon kalite ekspozisyon: grid-lanes. Si ou vle aprann plis sou Masonry epi swiv pwogrè, tcheke paj resous CSS Masonry mwen an. Nan tan, lè Masonry vin tounen yon karakteristik debaz, menm jan ak Grid oswa Flexbox, nou pral kapab tou senpleman itilize li epi benefisye de:
Pi bon pèfòmans, Pi bon repons, Fasilite pou itilize ak kòd ki pi senp.
Ann pran yon gade pi pre nan sa yo. Pi bon pèfòmans Fè pwòp sistèm layout masonry ou, oswa itilize yon bibliyotèk twazyèm pati olye, vle di ou pral oblije kouri kòd JavaScript pou mete atik sou ekran an. Sa vle di tou ke kòd sa a pral rann bloke. Vreman vre, swa pa gen anyen ap parèt, oswa bagay sa yo pa pral nan bon kote oswa nan gwosè yo dwa, jiskaske kòd JavaScript sa a te kouri. Layout masonry souvan itilize pou pati prensipal yon paj entènèt, ki vle di kòd la ta pral fè kontni prensipal ou parèt pi ta pase sa li ta ka genyen, degrade LCP ou, oswa pi gwo metrik Contentful Paint, ki jwe yon gwo wòl nan pèfòmans pèrsu ak optimize motè rechèch la. Mwen teste bibliyotèk Masonry JS la ak yon Layout ki senp epi simule yon koneksyon 4G dousman nan DevTools. Bibliyotèk la pa gwo anpil (24KB, 7.8KB gzipped), men li te pran 600ms pou chaje anba kondisyon tès mwen an. Isit la se yon anrejistreman pèfòmans ki montre ke tan chaj long 600ms pou bibliyotèk la Masonry, e ke pa gen okenn lòt aktivite rann ki te rive pandan sa t ap pase:
Anplis de sa, apre tan inisyal chaj la, script telechaje a te bezwen analize, konpile, epi kouri. Tout sa, jan mansyone anvan, te bloke rann paj la. Avèk yon aplikasyon Masonry entegre nan navigatè a, nou p ap gen yon script pou chaje ak kouri. Motè navigatè a pral jis fè bagay li pandan premye etap rann paj la. Pi bon repons Menm jan ak lè yon paj premye chaje, redimensionnement fenèt navigatè a mennen nan rann layout nan paj sa a ankò. Nan pwen sa a, sepandan, si paj la ap itilize bibliyotèk Masonry JS la, pa gen okenn bezwen chaje script la ankò, paske li deja.isit la. Sepandan, kòd ki deplase atik yo nan bon kote yo bezwen kouri. Koulye a, bibliyotèk patikilye sa a sanble trè vit nan fè sa lè paj la chaje. Sepandan, li anime atik yo lè yo bezwen pou yo avanse pou yon lòt kote sou fenèt redimensionnement, e sa fè yon gwo diferans. Natirèlman, itilizatè yo pa pase tan redimensionnement fenèt navigatè yo otan ke nou devlopè fè. Men, eksperyans anime redimensionnement sa a kapab trè jayi e li ajoute nan tan ke li pran pou paj la adapte ak nouvo gwosè li. Fasilite pou itilize ak Kòd ki pi senp Ki jan li fasil pou itilize yon karakteristik entènèt ak ki jan senp kòd la sanble se faktè enpòtan ki ka fè yon gwo diferans pou ekip ou a. Yo pa janm ka enpòtan menm jan ak eksperyans itilizatè final la, nan kou, men eksperyans pwomotè enpak antretyen. Sèvi ak yon karakteristik entènèt entegre vini ak benefis enpòtan sou devan sa a:
Devlopè ki deja konnen HTML, CSS, ak JS pral gen plis chans kapab sèvi ak karakteristik sa a fasil paske li te fèt yo entegre byen epi yo dwe konsistan avèk rès la nan platfòm entènèt la. Pa gen okenn risk pou yo kraze chanjman yo te prezante nan fason yo itilize karakteristik la. Gen prèske zewo risk pou karakteristik sa a vin obsolete oswa san antretyen.
Nan ka bati-an masonry, paske li se yon layout primitif, ou sèvi ak li nan CSS, jis tankou Grid oswa Flexbox, pa gen okenn JS ki enplike. Epitou, lòt pwopriyete CSS ki gen rapò ak layout, tankou gap, travay jan ou ta atann yo. Pa gen okenn ke trik nouvèl oswa solisyon pou w konnen, epi bagay ou aprann yo dokimante sou MDN. Pou lib Masonry JS la, inisyalizasyon se yon ti jan konplèks: li mande pou yon atribi done ak yon sentaks espesifik, ansanm ak kache eleman HTML yo mete kolòn ak gwosè espas. Anplis de sa, si ou vle span kolòn, ou bezwen enkli gwosè espas sa a tèt ou pou evite pwoblèm:
Ann konpare sa a ak sa yon aplikasyon masonry entegre ta sanble:
Kòd ki pi senp, ki pi kontra enfòmèl ant ki ka jis itilize bagay tankou gap ak kote spanning tracks fèt ak span 2, jis tankou nan kadriyaj, epi li pa mande pou ou kalkile bon lajè ki gen ladan gwosè a espas. Ki jan yo konnen ki sa ki disponib ak ki lè li disponib? An jeneral, kesyon an se pa reyèlman si ou ta dwe itilize bati-an masonry sou yon bibliyotèk JS, men pito ki lè. Bibliyotèk Masonry JS la se etonan e li te ranpli yon espas nan platfòm entènèt la pou plizyè ane, ak pou anpil devlopè kontan ak itilizatè. Li gen kèk dezavantaj si ou konpare li ak yon aplikasyon masonry entegre, nan kou, men sa yo pa enpòtan si aplikasyon sa a pa pare. Li fasil pou mwen fè lis karakteristik nouvo platfòm entènèt sa yo paske mwen travay nan yon machann navigatè, e se poutèt sa mwen gen tandans konnen sa k ap vini. Men, devlopè yo souvan pataje, sondaj apre sondaj, ke kenbe tras nan nouvo bagay difisil. Rete enfòme se difisil, ak konpayi yo pa toujou priyorite aprantisaj de tout fason. Pou ede ak sa, men kèk resous ki bay mizajou nan fason senp ak kontra enfòmèl ant pou ou ka jwenn enfòmasyon ou bezwen an byen vit:
Platfòm entènèt la gen sit eksploratè: Ou ta ka enterese nan paj nòt lage li yo. Epi, si ou renmen RSS, tcheke fil nòt lage yo, osi byen ke Flux debaz ki fèk disponib ak lajman ki disponib.
Entènèt laDach estati platfòm: Ou ta ka renmen plizyè paj ane debaz li yo.
Paj plan wout Chrome Platform Status.
Si ou gen yon ti kras plis tan, ou ta ka enterese tou nan nòt lage fournisseurs navigatè yo:
Chrome Edge Firefox Safari
Pou plis resous, tcheke cheatsheet mwen an Navigasyon platfòm entènèt la. Bagay mwen an poko aplike Sa se lòt bò pwoblèm nan. Menm si ou jwenn tan, enèji, ak fason pou kenbe tras, toujou gen fristrasyon pou fè tande vwa ou ak karakteristik pi renmen ou yo aplike. Petèt ou te ap tann pou ane pou yon ensèk espesifik yo dwe rezoud, oswa yon karakteristik espesifik bato nan yon navigatè kote li toujou manke. Sa mwen pral di se fournisseurs navigatè yo koute. Mwen fè pati plizyè ekip kwa-òganizasyon kote nou diskite sou siyal pwomotè ak fidbak tout tan. Nou gade anpil sous diferan nan fidbak, tou de entèn nan chak machann navigatè ak ekstèn / piblik sou fowòm, pwojè sous louvri, blogs, ak sondaj. Epi, nou toujou ap eseye kreye pi bon fason pou devlopè yo pataje bezwen espesifik yo ak ka itilize yo. Donk, si ou kapab, tanpri mande plis nan men fournisseurs navigatè yo epi fè presyon sou nou pou aplike karakteristik ou bezwen yo. Mwen jwenn ke li pran tan, epi li kapab tou entimidasyon (nou pa mansyone yon gwo baryè nan antre), men li travay tou. Men kèk fason ou ka fè tande vwa w (oswa konpayi w la): Pran sondaj chak ane sou Eta JS, Eta CSS, ak Eta HTML. Yo jwe yon gwo wòl nan fason fournisseurs navigatè yo priyorite travay yo. Si w bezwen yon API espesifik ki baze sou estanda yo dwe aplike nan tout navigatè yo, konsidere soumèt yon pwopozisyon nan pwochen iterasyon pwojè Interop la. Li mande plis tan, men konsidere kijan Shopify ak RUMvision pataje lis volonte yo pou Interop 2026. Enfòmasyon detaye tankou sa a ka trè itil pou fournisseurs navigatè yo bay priyorite. Pou plis lyen itil pou enfliyanse fournisseurs navigatè yo, tcheke Cheatsheet Navigating the Web Platform Cheatsheet mwen an. Konklizyon Pou fèmen, mwen espere atik sa a te kite ou ak kèk bagay yo reflechi sou:
Eksitasyon pou masonry ak lòt karakteristik entènèt k ap vini yo. Kèk karakteristik entènèt ou ta ka vle kòmanse itilize. Kèk moso nan kòd koutim oswa 3yèm-pati ou ta ka kapab retire an favè karakteristik bati-an. Kèk fason pou kenbe tras de sa k ap vini ak enfliyanse fournisseurs navigatè yo.
Sa ki pi enpòtan, mwen espere ke mwen te konvenk ou nan benefis ki genyen nan sèvi ak platfòm entènèt la nan tout potansyèl li.
