Što nam donosi JavaScript kao budućnost WordPressa?

Što nam donosi JavaScript kao budućnost WordPressa?

JavaScript je tražen jezik. Na TIOBE ljestvici balansira pri samom vrhu, a spustite li se pak prema dubinama weba, skriva se u NodeJS kutku gdje nepovezano priča s NoSQL bazama. I Google ga je prigrlio kao mršavog klinca te od njega razvio slojevitog AngularJS momka. Najvažnije, front-end developeri ga cijene, i kao defacto “web programski jezik”, ali i kao taskrunner pomoćnike imena...

…Gulp i Grunt!

JavaScript je, inače, stric ActionScripta, programskog jezika koji se koristio u izradi Flash aplikacija. Sintaksa im je klonirana pa su developeri verzirani na JavaScript slobodno mogli koristiti svoje znanje u izradi tada popularnih “bogatih” aplikacija. Razlog sličnosti je njihova cijela familija – ECMA standard. Razvoj ECMA standarda tijesno je vezan uz razvoj JavaScripta, a Santa Barbara bi se posramila zapleta odigranih u ECMA familiji. Trakavica im je, zgodno za znatiželjne, dostupna na Stackoverlfowu!

Povijest se, naravno, ponovila i to s velikim dečkima – Apple je 2014. godine objavio programski jezik Swift koji slijedi odabrane JS paradigme i ECMA standarde. Prevedeno, ako ste dugo razvijali na JavaScriptu, relativno lako se možete prebaciti na Swift te početi pisati nativne iOS aplikacije, a uz NodeJS, to je skoro pa cijeli digitalni ekosustav – server, web i native!

Brent je JS developer, no u slobodno vrijeme “moonshajna” Swift aplikacije na Macu

Bilo je samo pitanje vremena kada će JavaScript zaraziti i najpopularniju web platformu, WordPress. Matt Mullenweg je odgovoran za pokretanje kotačića svojim govorom “State of the WordPresss” (2015.) U njemu je promišljeno izrekao da je upravo JavaScript budućnost WordPressa (dio govora počinje oko 45:40 i traje do 51: 52).

Taj evolucijski događaj bio je nastavak već uhodanih kuloarskih tema – jQuery je u WordPressu od verzije 2.2.0, Underscores i BackboneJS je standardni dio WP corea od verzije 3.4.1 (2012), a Andrew Nacin je čak i prije Matta Mullenwega nagovijestio val promjena…

I think [WordPress 3.5] actually signifies a shift from PHP land to JavaScript land for pretty much everything we’re going to do in the future” ~ WP 3.5 Lead Developer Andrew Nacin, on WPCandy, Feb 4 2013

Trenutno se oko JavaScripta u WordPressu vrti puno priča, a prva dva članka iz ovog serijala imaju opširniji uvod u cijelu temu (uz osvrt na #WCEU i #WCNYC). Valovi su se proširili i na WordCamp Split #WCHR – Noel Tock je govorio o dosadašnjem iskustvu pri izradi modernih WP aplikacija, a Tomislav Ljeljak je pokazao realne implementacije REST API-ja i ajaksoidnih poziva. Cijeli osvrt na WordCamp Split pročitajte na opširnom blogu (autor: Ivan Blagdan), a galeriju doživljaja pogledajte (i podijelite <3) na Neuralabovom blogu.

Ovakvih članaka i konferencija na temu je puno, i to s razlogom… Nemamo više prepreka u učitavanju kompleksnih 3D modela, live-stream videa, slojevitih navigacija ili animiranih-interaktivnih prezentacija sadržaja. Na primjer, u spomenutom drugom članku serijala je opisano kako slobodno možete napraviti 3D web igru koja kao “backend” ima WordPress REST API.


Kralj džungle uživa u JavaScriptu, zašto ne bi i vaši korisnici?

No nije lako otvoriti Pandorinu JavaScript kutiju i prebaciti PHP teme u punokrvne JavaScript WordPress aplikacije. Zamrzavanje browsera, nejasne interakcije i komplicirana sučelja pokazala su da imamo još puno žganaca za pojesti. Četiri glavna problema su prisutna, a WP zajednica predlaže određene trikove i savjete:

1. Šareni JavaScript svijet

React, Redux, Backbone, Underscores, Angular, Ember… Nepregledna šarena polja JavaScripta na trenutke postaju i halucinogena. Teško se odlučiti za bilo koji od JS frameworka, a kada se i odlučite, svaki ima svoj način razvoja, dokumentacije i održavanja aplikacija.

Inače, zamor Javacriptom je već dugo prisutan u branši, a sljedeći trikovi će vam olakšati svakodnevni front-end život:

  • Počnite s BackBoneom – framework je već uključen u sam WP core te je pomoću njega napravljen i cijeli media library.
  • Kada se odlučite za framework, dajte mu šansu i dobro ga savladajte. Generalno možete napraviti sve vrste aplikacija i pomoću Angulara, i pomoću Backbonea, a i pomoću Reacta.
  • Pročitajte odličnu prezentaciju i video Adama Whitea na temu Backbone programiranja za WordPress.

2. Dizajneri interaktivnijih medija

I web dizajneri su zasuti mnoštvom alata – Sketch, PS, AI pa sada i novi xD. Povrh njih još Invision, Marvell, Framer, Figma, Canva, Muse… Od novopečenih kreativaca se očekuje da još vladaju i HTML/CSS/JS-om te da uz sve to educiraju klijente, developere i vlasnike projekata. Doista zahtjevna vremena (i vrlo slična JS svijetu developera iz točke 1). Šuma alata i novih tehnika dovodi do gomilanja funkcija, animacija i generalnog kaosa među interaktivnim rješenjima, ubijajući vjerojatno sva pravila Dietera Ramsa.

Dizajner developeru: slajdaj mi hamburger menu, nakon 3 sekunde otvaraš box, čekaš pojavljivanje iksića, nakon toga ga rotiraš ze 45 stupnjeva, mičeš iksić, loadaš dodatnu overlay ikonicu pa zatim tek…

Moderan WP web dizajn kompliciran je i nezreo, no WordPress zajednica i ovdje ima nekoliko savjeta za kreiranje interaktivnog iskustva:

  • U animacijama i interaktivnosti, manje je više.
  • Kreirajte pomalo i gradite na razrađenim temeljima dizajna.
  • Detalji, detalji detalji! Ako vam animacija traje i sekundu previše, nećete imati dobro korisničko iskustvo. Ako UI element nema brzi odziv, korisnik možda neće percipirati sljedeću potrebnu interaktivnost. Pazite na detalje!
  • Komunikacija s developerima mora biti stalna, debela i prisutna od početka do kraja projekta. Koristite razne formate i vrste sastanaka iz Atlassian PlayBooka (više pod točkom 3).
  • Educirajte klijenta da pravilno unosi sadržaj, fotografije, oEmbed ili video materijal kroz CMS.
  • Koristite Invision & framerJS za izradu prototipa.
  • Važno: dizajnirajte i “fallback” rješenje za korisnike koji nemaju omogućen JavaScript.

3. Napregnuti backend

AJAX pozivi prema bazi podataka mogu zagušiti i najjače portale. Uzmite WooCommerce kao primjer – jedna Add to cart akcija napravi cca 40 updatea na bazu podataka. Ako na jednom sučelju imate više widgeta, izbornika i sekcija sadržaja, svaki od njih će zatražiti sadržaj iz baze podataka te opteretiti cijeli backend.

Pazite s tempiranim pozivima na bazu, timerima i eventima koji ovise o animacijama.

Par savjeta i alata oko izrade JavaScript WP tema:

4. RESTful klijenti

Prve tri točke vezane su uz vaše znanje i ekipu s kojom radite. Klijenti i vlasnici web aplikacija drugačiji su par rukava i benefiti JavaScripta na WordPress ekosustav nisu njihova niti najmanja briga. Ono što njih interesira je krajnji korisnik, konverzija proizvoda, čitanost (ili iskustvo online kupnje) no to već sigurno znate. 🙂

Upravo im na tim poljima objasnite prednosti nove moderne web aplikacije:

  • Uključite klijenta (što ranije) u projekt izrade web sjedišta (s njima radite arhitekturu informacija i jedinica sadržaja). Standardni kick-off meeting je krucijalan, no kontinuirana suradnja će biti prevaga uspješnosti projekta – Goals, signals i measures radionica pomaže pri takvim scenarijima.
  • Educirajte klijente oko unosa sadržaja i načina rada WP administracije. Neka se odmah po startu projekta upozna sa svim potrebnim radnjama za održavanje JS WP aplikacije.
  • Nastavno na točku 2… prototipirajte često i rano. Invision je odličan alat upravo pri takvim scenarijima gdje je nužno da klijent ostavi realan feedback na željeno rješenje.
Iznenađenja kod web projekata (uglavnom) nisu cool 🙂

Ove četiri točke nisu jedini izazovi pri produkciji interaktivnih JavaScript aplikacija. Koncepti njihove razrade su dosta mladi i neuhodani. Iskoristite to za eksperimentiranje, isprobavanje i dorade vlastitih procesa. Potencijala je puno, neistraženih područja još više, no smjer otvorenog browser weba je jasan i nezaustavljiv, pogotovo u WordPress zajednici!

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Tehnologija

Probao sam robotsku kosilicu – mnogo je više od “Roombe za travnjake”

Imati robota koji vam kosi travu je super ideja, ali koliko je realizacija zapravo jednostavna i uspješna?

Kultura 2.0

Prva prepreka za elektroničko glasanje je digitalna nepismenost

Kako je situacija s pandemijom koronavirusa digitalizirala i digitalno transformirala dobar dio i privatnog i javnog sektora, aktualiziralo se i pitanje o elektroničkom glasanju. O temi spremnosti na taj oblik glasanja, i s tehnološke i društvene strane, razgovarala sam s osobom koja je razvila jedan takav sustav, Ivanom Hendijom iz FairVotesa.

Kultura 2.0

Kako igrifikacijom poboljšati izlaznost na hrvatskim parlamentarnim izborima?

Čak i prekrižiti listić je bolje nego uopće ne izaći na izbore, a opet, mnogim hrvatskim građanima se za naredne 4 godine ne da izdvojiti ni tih 20-ak minuta na biračkim mjestima. I to je posve razumljivo ako pogledamo da biračima izbori ne nude nikakvu opipljivu nagradu... ako ne potporom za stranke koje će voditi državu u budućnosti, čime nas se onda može motivirati?

Što ste propustili

Startupi i poslovanje

Kakva je budućnost hibridnog rada u Hrvatskoj i regiji?

U Netokraciji već desetljeće radimo 'hibridno', malo od doma, malo iz ureda, ali kako će izgledati tržište rada u kojem i velike tvrtke i startupi rade tako - gdje to nije ni opcija, nego osnova posla?

Startupi i poslovanje

Kako mentorirati kolege na daljinu: Više planiranja, manje spontanosti, a pomaže i humor

Svi znamo koliko je izazovno raditi u ovo korona vrijeme "kućnog ureda", a sad zamislite da ste mladi zaposlenik koji tek čini svoje prve karijerne korake i potreban mu je mentor, a ne može ga naći u uredu ( i zasigurno ne u svojem dnevnom boravku).

Društvene mreže

Analiza: HDZ odabrao “tepih-bombardiranje” taktiku oglašavanja, Most dominira Facebook videima

Ovih dana niste mogli izbjeći HDZ-ove oglase na YouTubeu ili na portalima? Nije ni čudno kad pogledate koliko se potrošilo na Google Display Network koji je postao dominantan kanal u predizbornoj kampanji.

Kultura 2.0

Prva prepreka za elektroničko glasanje je digitalna nepismenost

Kako je situacija s pandemijom koronavirusa digitalizirala i digitalno transformirala dobar dio i privatnog i javnog sektora, aktualiziralo se i pitanje o elektroničkom glasanju. O temi spremnosti na taj oblik glasanja, i s tehnološke i društvene strane, razgovarala sam s osobom koja je razvila jedan takav sustav, Ivanom Hendijom iz FairVotesa.

Startupi i poslovanje

Što nude izborni programi vodećih stranaka za tehnološku zajednicu?

Provjerili smo kako se HDZ, Restart koalicija, Domovinski pokret, MOST nezavisnih lista i platforma Možemo! planiraju posvetiti tehnološkoj industriji i zajednici u svom mandatu ako ga dobiju. Evo što smo saznali...

Digitalni mediji

Vanja Šebek: Uz rješavanje dominacije velikih platformi, hrvatski mediji trebaju počistiti svoje dvorište

Od prvih tjedana pandemije u Hrvatskoj sudjelovao sam u nekoliko rasprava o stavovima preusmjeravanja ulaganja u digitalno oglašavanje s velikih oglašivačkih platformi na hrvatske medijske portale. U principu, tu nema ništa sporno, osim što je sve sporno.