Fylgir frá gamla blogginu mínu.
Fyrst gefið út 26. mars 2016
Þegar ég settist niður og forritaði fyrstu vefsíðuna mína var ég 17 ára og hafði aldrei séð línu af kóða áður. Það fyrsta sem ég gerði var að fara inn á Youtube og rétt eins og sá sem ekkert veit sló ég inn ansi ómerkilegan leitarstreng: Ecommerce website tutorial.
Hér að neðan er myndbandið sem ég að lokum valdi. 400k+ views, slatti af kommentum og ég gat auðveldlega sótt kóðan hans ef eitthvað fór úrskeiðis. Hvernig gæti þetta verið eitthvað annað en hinn heilagi kaleikur vefforritunar?
Þegar ég horfi til baka á ég erfitt með að trúa því hversu hrikalega illa skrifuð vefsíða Nomo.is var. Hún leit ágætlega út, enda hef ég svo sem ágætt auga fyrir slíku, en það þurfti ekki mikla tölvunarfræðiþekkingu til þess að sjá að allt annað var algjört stórslys.
Hver einasta mappa var stútfull af spagettíkóða og ég hikaði ekki við að geyma hreinan PHP kóðann beint fyrir ofan <head> taggið. <?php … og allt það.
Á þessum sama tíma var mér boðið örlítið hliðarverkefni, og uppfullur af sjálfstrausti hins ómeðvitaða tók það mig ekki langan tíma að samþykkja boðið. Verfkefnið: að forrita tímabókunarkerfi fyrir hárgreiðslustofur. Það átti að vera nýstárlegt, átti að geta sent sms skilaboð til þess að minna gleymna viðskiptavini á klippinguna sína og átti að geta gefið starfsmönnum greinagott yfirlit um gengi rekstursins. Verkefnið var nefnt Tímatal og árið var 2014.
Sjálfur hélt ég vitaskuld að ég væri færasti forritari landsins og ætlaði ég mér að nýta allt það sem ég hafði lært af því að skrifa Nomo.is og ég lagði upp með stórkostlega hugdettu: ég ætlaði að búta alla lógík niður eins mikið og mögulega hægt væri, bless bless herra Spagettí.
Ó, hve harkalega mér getur skjátlast.
Ég setti upp mitt eigið MVC kerfi með einu index.php skjali sem innihélt a.m.k 25 switch cases.
Inni í HTML skjölunum var ég að kalla í PHP breytur sem voru ekkert annað en erfðabreytt markup skrímsli sem voru fjöldaframleidd í lítilli möppu sem ég svo yfirborðslega kallaði Controllers. Í sannleika sagt höfðu þeir ekki stjórn á neinu.
Þetta endaði svo hrikalega að ég þurfti að setja screenshots af þessu hérna til hliðar því ég hefði brotið Medium code-block valmöguleikann ef ég hefði reynt að líma þetta beint inn í greinina sjálfa. Ég vissi ekki einu sinni hvað ForEach var á þessum tíma. Í staðinn while-aði ég allan fjandann.
Það tók mig um það bil mánuð, en að lokum kláraðist verkið þó. Mörg þúsund línum af hreinum PHP kóða seinna endaði ég uppi með vefkerfi sem þó sinnti öllum sínum hlutverkum prýðilega. Starfsmenn gátu bókað tímapantanir og skráð frítíma sína, allir viðskiptavinir fengu sms skeyti degi áður en þeir áttu að mæta og ChartJs hjálpaði mér að gefa starfsmönnum greinagott yfirlit yfir störf sín (þótt mér hafi alltaf fundist það vera undarlegt að breyta sql niðurstöðum í array til þess svo að setja inn í JavaScript Library).
Tvær eða þrjár hárgreiðslustofur ákváðu að nota kerfið og saman bókuðu þær yfir 11.000 tímapantanir fyrir rétt rúmlega 3.000 viðskiptavini sína. Önnur mikilvægari verkefni ollu því svo að ég gleymdi því að Tímatal var eitthvað sem ég hafði nokkurntíman komið nálægt. Þangað til fyrir 3 mánuðum.
Hinn yndislegi heimur JavaScript
Þá liðu tvö ár og í millitíðinni fengum ég og tveir félagar mínir inngöngu inn í viðskiptahraðalinn Startup Reykjavík með sprotafyrirtækið Study Cake. Ég ætla mér svo sem ekkert að koma með lyftu-ræðuna, en fyrir samhengið er mikilvægt að vita að við erum að búa til hugbúnað sem börn geta notað á símum og spjaldtölvum.
Það var því augljóst að ég og Kristján Ingi Geirsson gátum ekki haldið áfram að skrifa í PHP svo við skönnuðum landslagið og prufuðum okkur áfram. Fyrir algjöra tilviljun varð Angular JS & Mean Stackið fyrst fyrir valinu og voru það fyrstu kynni okkar að Server side JavaScript kóða. Við skrifuðum lítinn Node.js bakenda sem talaði við Angular framendan okkar og urðum ástfangnir að teygjanleika no-sql gagnagrunna. JSON varð besti vinur okkar. Það tók okkur þó ekki langan tíma að átta okkur á að við þyrftum að gefa út smáforrit en ekki bara vef, og því myndi Angular ekki duga okkur lengur.
Meteor.js kemur til bjargar
Við vorum 2 forritarar, höfðum 3 mánuði og þurftum að gefa út glænýtt app fyrir bæði Android og iOS, sem myndi einnig tala við stjórnkerfi á vefnum þar sem hægt væri að búa til spurningapakka og bækur. Við gátum þess vegna strax útilokað möguleikann á því að skrifa tvö Native öpp (ath. þetta var rétt áður en að React teymið kynnti til sögunnar React Native fyrir Android).
Kristján Ingi hjá Watchbox (já þeir heita báðir Kristján Ingi, og já það hefur valdið mér ómældum höfuðverkjum) kom til okkar þegar við vorum í Startup Reykjavík og heyrði af þessari krísu okkar. Það er ekki furða að maðurinn sjái um JS Reykjavík Meetup-in (S/O á JSConfIceland) því hann veit bókstaflega allt um það sem er að gerast í hinum síhreyfanlega heimi JavaScript, og hann benti okkur á Meteor.js.
Meteor er 100% JavaScript App platform sem stærir sig af reactivity og einfaldleika. Með tveimur skipunum gátum við núna búið til öpp fyrir bæði iOS og Android.
## iOS
meteor run ios-device —- mobile-server xxxx.studycake.com
## Android
meteor run android-device --mobile-server xxxx.studycake.com
… og ekki nóg með það, heldur gátum við skrifað vefstjórnborðið okkar með nánast alveg sama kóða. Auðvitað gjöldum við fyrir þægindin með smávægilegum UX fórnarkostnaði, en sannleikurinn er sá að við hefðum annars aldrei náð að gefa út tvö öpp á svona jafn stuttum tíma sem núna fullnægir þörfum rúmlega 7.000 notenda Study Cake.
##Tímatal 2.0
Út frá mínum eigin stjórnunarprinsippum er ég mjög hlynntur því að forritarar taki reglulega að sér lítil hliðarverkefni sem þrýsta þeim út fyrir þægindahringinn og neyða þá til þess að læra eitthvað nýtt. Ég trúi þessu svo innilega að ég tileinka mér þetta sjálfur, og það er þess vegna sem ég og Kristján ákváðum að gefa Tímatalinu smá andlitslyftingu í Desember 2015.
Við ætluðum að gefa þessu eina helgi, taka allan upprunalega spagettíkóðan og henda honum yfir í Meteor.js. Reynslan hafði sýnt okkur að vefþróun í Meteor var eins og að sigla á sléttum sjó og allt útlitið var nú þegar til, sem er oft stór hluti vinnunar.
Mér hefur oft verið sagt að margfalda alla forritunarlega tímaramma með π til þess að fá rétta niðurstöðu. Í þessu tilfelli hefðum við þó þurft að margfalda þessa tvo daga með π í veldinu π til þess að fá eitthvað nálægt því sem þetta tók þegar horft er til baka.
Að færa lógík frá PHP yfir í JavaScript var ekki það erfiða. Í rauninni gekk það stórvel og var í þokkabót virkilega skemmtilegt. Ég ætla ekki að kafa of djúpt í þá sauma hér, en stikla þó á stóru.
Meteor kemur út úr boxinu með HTML templating kerfi sem kallast Blaze og það býður upp á kærkomna hjálp þegar kemur að því að ítra í gegnum niðurstöður eða búa til skilyrðisbundið (if/else) markup. Blaze talar svo við svokallaða Helpers sem eru geymdir í .js file-um og sjá um að láta okkur hafa öll þau gögn sem núverandi View
## //Home.html
{{#each employees}}
<div class="col-wrap">
// Hér kemur HTML markup sem birta þarf með öllum starfsmönnum
</div>
{{/each}}
## // Home.js
Template.home.helpers({
employees: function () {
// Finnum alla starfsmenn sem þessi notandi hefur stofnað
var employees = Employees.find(
{userId: Meteor.userId()},
{sort: {"profile.order": 1}}
);
// Skilum þeim til baka inn í HTML skjalið
return employees;
}
)}
Þar að auki er síðan virkilega einfalt að taka fyrstu skrefin og setja upp testing umhverfi með hjálp Meteor. Þegar ég ætlaði að keyra eitthvað verkefni í gang í PHP umhverfi, þá studdist ég við tól eins og MAMP til þess að búa til lókal vefþjóna. Oft á tíðum reyndist þetta mér mjög illa, og þá sérstaklega ef ég var að vinna í mörgum verkefnum í einu. Með Meteor, þá cd-a ég mig inn í möppu verkefnisins og skrifa einfaldlega „meteor”.
$ cd projects/studycake
$ meteor
Þetta hendir vefnum upp á localhost:3000 Ef þú vilt síðan vera með mörg verkefni opin í einu þá flaggaru bara annað port.
$ cd projects/studycakeApp
$ meteor --port 3001
Vandræðin byrjuðu hins vegar að láta sjá sig þegar kom að því að færa gögn frá gamla kerfinu yfir í hið nýja. Eins og flest PHP kerfi studdist fyrsta útgáfa Tímatalsins við SQL gagnagrunn sem ég sýslaði oft með í gegnum phpmydamin (eitt af mörgu í PHP heiminum sem ég mun aldrei sakna). Þótt Meteor styðji vitaskuld SQL gagnagrunna, þá finnst mér svo eðlilegt að vinna með blöndu af MongoDB og JavaScript að ég ákvað að við þyrftum að flytja gögnin yfir.
Það tókur ekki langan tíma að finna tólið Mongify sem lofaði okkur að gera þetta ferðalag eins auðvelt og hægt væri.
Dagsetningar urðu okkur að falli
Sama hvað við reyndum, þá fengum við ekki dagsetningarnar frá gamla gagnagrunninum til þess að færa sig yfir í Mongo. Það komu alltaf upp villur og eftir 16 tölvupósta á milli okkar og Andrew (mjög vingjarnlegur náungi & höfundur Mongify), gáfumst við upp á að reyna að láta þetta virka. Við fundum engin önnur ókeypis tól sem litu jafn vel út og Mongify. Góð ráð urðu allt í einu rándýr og við fengum okkur göngutúr og tvo bjóra.
Við ákváðum að lokum að breyta öllum dagsetningum í strengi, færa þær yfir þannig og nota síðan hið stórkostlega tól MomentJs til þess að breyta þessum strengjum í alvöru dagsetningar eftir á.
stringToDate: function() {
var events = Events.find({}).fetch();
for (var i = 0; i < events.length; i++) {
Events.update({_id: events[i]._id}, {$set:{
eventDate: moment(events[i].eventDate).toISOString()
}});
}
console.log(“All strings successfully converted to dates”);
}
Þessi ódýra og einfalda lausn virkaði vitaskuld fullkomlega og restin heyrir sögunni til. Tímatal er nú í dag þrefalt hraðara en áður fyrr, með socket tengingu fyrir real-time uppfærslur þegar þær eiga sér stað og á miklu betri stað þegar kemur að því að viðhalda kóðabasanum og koma inn nýjum fítusum.
Eftir á að hyggja horfi ég á þetta litla hliðarævintýri með hýrum augum, því það kristallar mína þróun sem sjálflærður forritari. Það minnir mig í sífellu á að leita eilíft að nýjum leiðum til þess að leysa þau verkefni sem frammi fyrir mér standa og stoppa aldrei í sömu sporunum of lengi. Ég fæ ónotatilfinningu af tilhugsuninni um að vera ennþá að forrita í PHP — jafnvel þó PHP sé í sjálfu sér ekkert endilega slæmt tungumál.
Mér finnst bara svo mikilvægt að vera sífellt að leitast eftir því að breikka sjóndeildarhringinn og prufa eitthvað nýtt, og það er þess vegna sem ég horfi bjartsýnn á hluti eins og React Native, sem mun líklega spila stórt hlutverk í þróun Study Cake til lengri tíma litið… og horfandi enn lengra, þá mun ég alltaf vilja læra á hluti eins og Python og Ruby og hvað svo sem hökkurum heimsins dettur í hug næst.
Að lokum vil ég því hvetja þig til þess að spyrja sjálfa/n þig reglulega:
Hversu lengi hef ég setið í sömu sporunum og hvað er langt síðan ég lærði eitthvað alveg nýtt?