Š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

Startupi i poslovanje

Je li ovaj developer otkrio golu istinu o Bellabeatu (ili tek boljke mnogih startupa)?

iOS developer Božidar Ševo, nekadašnji zaposlenik Bellabeata, sinoć je objavio video o tom razvikanom domaćem startupu gdje u gotovo 40 minuta prepričava razne propuste koje je ta tvrtka napravila dok je u njoj radio, što izaziva popriličnu pažnju na društvenim mrežama. No, nakon odgledanog videa, ne mogu se ne zapitati - jesu li ti propusti relativno uobičajene boljke brzorastućih startupa ili ukazuju na nešto ozbiljnije?

Startupi i poslovanje

Shoutem se gasi: Apple novim pravilima “pokosio” platforme za izgradnju tipskih aplikacija

Zahvaljujući Appleovoj novoj regulativi Shoutem i mnogi slični servisi uskoro zatvaraju svoja vrata, a više o tome, ali i planovima za budućnost ispričao nam je njegov CEO, Viktor Marohnić.

Zabava i zanimljivosti

Digitalne usluge zbog kojih ćete prestati “škrtariti” i početi plaćati pretplatu

Čim čujem za neku novu zanimljivu online uslugu ili program, otvorim Google i u tražilicu upišem naziv servisa, tip usluge ili alata te mu dodam nezaobilazan sufiks "free". Da, kao i većina drugih korisnika interneta, strašno sam razmažena po pitanju (ne)plaćanja za digitalne proizvode, ponajprije radi brojnih besplatnih i kvalitetnih alternativa. Unatoč tome, u prošlosti sam plaćala, trenutno plaćam i razmišljam o skorom plaćanju pretplate na ove digitalne servise.

Što ste propustili...

Kultura 2.0

Savršena poslovno-blagdanska plata slaže se uz Pinterest, Instagram i blogove…

Što sadrži savršena blagdanska plata kojom ćete na poslovnim druženjima zadiviti kolege i poslovne partnere? Kako ju pripremiti, i gdje pronaći inspiraciju i ideje? Ako pitate digitalce, takva plata slaže se na internetu, a kako točno, saznali smo od food blogera Natalie Knezić i Darka Kontina.

Startupi i poslovanje

Kako smo iskoristili Kickstarter za plasman Modulosa i što smo iz toga naučili

Kada smo prije gotovo tri godine počeli ozbiljno razmišljati o pretvaranju našeg koncepta - potpuno modularnog radnog stola, u proizvod oko kojega bi gradili tvrtku, odmah smo pomislili kako bi Kickstarter bio idealan za prikupljanje sredstava i plasman na tržište. Naposlijetku, koliko teško može biti postaviti kampanju na neku tamo web stranicu i malo shareati?

Zabava i zanimljivosti

Koliko je Hearthstone zapravo besplatan?

Hearthstone igraju milijuni, ali tisuće se i žale kako je možda malo pretežak ako ne date prave novce. Koliko je to istina, nastojao sam saznati u razgovoru s ponajboljim regionalnim igračem, Stefanom Đukićem.

Zabava i zanimljivosti

Riješi kviz i doznaj koji si ‘digitalac’ iz popularnih serija!

Jesi li rođeni hustler kao Erlich Bachman iz serije Silicijska dolina? Proračunat kao Tyrion Lannister iz Igre prijestolja? Imaš li moć upravljanja zajednicom koja vjeruje u tvoju ideju kao Kareem Said iz Oza? Ili si hladnokrvni poslovnjak kao Pam iz Okusa krvi? Ili ipak trebaš razmisliti o promjeni karijere i životnog puta prije no što završiš kao Nate Fisher dva metra pod zemljom? Bez brige, ovaj brzi kviz otkrit će ti sve!

Startupi i poslovanje

Hrvatski ‘kardiolog u džepu’, vHeart, ušao u program londonskog Startupbootcampa

Tim je krajem prošlog tjedna ušao u program InsurTech Startupbootcampa u Londonu, gdje je odabran među 11 startupa od čak 1000 prijavljenih. Riječ je o projektu vHeart, platformi za praćenje pacijenata koji boluju od kardiovaskularnih bolesti, koju je osmislila znanstvenica Nina Šesto i kojoj su se u timu pridružili drapovci, kako kažu, svim srcem.

Društvene mreže

Twitteraška godina iza nas: Objave i profili koji su obilježili 2017.

Na kraju godine svi rezimiramo protekla iskustva, osvrćemo se na neke dobre i loše trenutke, a danas se svega lakše prisjetiti uz društvene mreže. U suradnji s Httpoolom donosimo vam objave i profile koji su obilježili 2017. godinu na Twitteru.