JavaScript.fi()

JavaScript uutiset suomeksi

6 notes &

CAAT, monipuolisia animaatioita JavaScriptillä

CAAT (github) on JavaScript-kirjasto animaatioiden ja interaktiivisten web-sovellusten / pelien luomiseen.

Suurin etu muihin vastaaviin kirjastoihin löytyy renderöinnin puolelta. CAAT taitaa renderöinnin niin Canvaksen, WebGL:n kuin CSS:nkin avulla, kaikki ilman muutoksia koodiin.

Viimeisimmässä versiossa on myös parannettu tukea tablettien kosketuksille (touch events).

Kokeilin esimerkkejä iPad ykkösellä ja suurin osa toimi riittävällä ruudunpäivityksellä. Pelidemo sen sijaan pätki melkoisesti Canvas-renderöinnillä ja CSS-renderöinnillä iOS5:n Safari jätti piirtämättä suurimman osan pelialueesta :)

Kehitettävää siis vielä on, mutta työpöytäselaimilla kaikki toimii jo erittäin sujuvasti.

Demo-sivuilla on esitelty monipuolisesti kirjaston useita ominaisuuksia. Siellä on myös linkit esimerkkipeliin kaikilla kolmella renderöinnillä.

Dokumentaatio on erittäin kattava koodi-esimerkkeineen ja inline-demoineen.

Filed under animaatio css canvas webgl

4 notes &

Derby

Derby on uudenlainen JavaScript MVC-framework. Se pyrkii helpottamaan reaaliaikaisten ja useita yhtäaikaisia käyttäjiä tukevien sovellusten luontia.

Derbyn ytimenä toimii Racer niminen kirjasto, joka vastaa datan automaattisesta synkronoinnista selaimen, palvelimen ja tietokannan välillä.

Frameworkin tavoitteena on vähentää saman koodin toistoa palvelimella ja selaimessa. Esimerkiksi näkymät (view/template) tarvitsee kirjoittaa vain kertaalleen.

Ensimmäisellä sivunlatauksella haetaan kokonaan palvelinpuolella luotu sivu, joten avausnäkymä saadaan nopeasti ilman näkymien luontia selaimessa. Monissa muissa JavaScript MVC-freimeissa etusivu luodaan selainpuolella palvelimelta ladatusta JSON:ista, mikä saattaa isommilla tietomäärillä aiheuttaa pientä viivettä (ja latausanimaation lisäämisen).

Näkymiin voidaan lisätä sidoksia malleihin (model), joiden avulla näkymien osia päivitetään reaaliajassa aina kun tieto muuttuu. Tämä eroaa normaalista tavasta, jossa koko näkymä renderöidään uudelleen tiedon muuttuessa. Synkronointi Derbyssä selaimen ja palvelimen välillä hoidetaan suositun Socket.io-kirjaston avulla.

Kyseessä on vielä erittäin aikaisessa vaiheessa oleva projekti (versio 0.10 ja ei aktiivisuutta githubissa ensimmäisen viikon jälkeen), joten sen tulevaisuutta on vaikea ennustaa. Idea on kuitenkin loistava ja dokumentointiakin on kiitettävästi näin alkuvaiheessa olevalle projektille.

Negaativisena asiana täytyy lopuksi mainita esimerkkisovelluksen (ainakin /examples/todos/) koodin organisointi, samassa tiedostossa on sekaisin reititystä, mallin käsittelyä sekä selainpuolen skriptien alustusta. Itse ainakin kaipaisin niille selkeämpää jaottelua eri tiedostoihin.

Filed under coffeescript socket.io node.js

0 notes &

CoffeeScript-resursseja

Näin kuukauden tauon jälkeen on hyvä palata kehiin kahvittelun merkeissä, eli tässä teille pieni annos CoffeeScript tietoisuutta.

CoffeeScript Cookbook on yhteisön ylläpitämä kokoelma CoffeeScript esimerkkitoteutuksia, jotka ovat nimetty selkeästi ja järjestelty hyvin eri otsikoiden alle.

The Little Book on CoffeeScript on pikaopas CoffeeScriptin saloihin JavaScript-osaajille. Kannattaa kuitenkin tarkistaa opas, vaikka JS ei olisikaan vielä täydellisesti hallussa, se on hyvin kirjoitettu ja sen läpilukuun ei mene kauaa.

JS -> Coffee muuntaa nimensä veroisesti JavaScript koodin CoffeeScriptiksi (ja päinvastoin). Se on kätevä työkalu mm. entisten JS-kirjastojen muuntamiseen CoffeeScriptiksi. Muunto tapahtuu suoraan selaimessa, joten työkalua uskaltaa kokeilla ilman pelkoa koodin karkaamisesta ulkopuolisille.

Filed under coffeescript

0 notes &

Hyödyllisiä JavaScript-oppaita

Ajattelin näin viikon aluksi koota pienen listan JavaScript-oppaista, jotka olen kokenut hyödyllisiksi vuosien mittaan.

JavaScript Garden on tiivis opas JavaScriptin parhaista käytänteistä. Mukana runsaasti “Tee näin, älä näin” tyylisiä koodiesimerkkejä.

Learning Advanced JavaScript on kokoelma lyhyitä, edistyneen tason koodiesimerkkejä. Kaikissa esimerkeissä on mukana testit, joten opit samalla myös JS-yksikkötestausta.

Eloquent JavaScript on erittäin kattava JavaScript perusopas, joka on saatavilla myös paperiversiona. Mukana runsaasti pieniä harjoitustehtäviä.

Essential JavaScript Design Patterns For Beginners, Volume 1. on listaus JS-ohjelmoijien yleisimmin käyttämistä suunnittelumalleista. Jokainen tapaus on selitetty selkeästi, pohtien samalla kunkin tavan parhaita käyttökohteita.

Filed under oppaat

0 notes &

contracts.coffee

contracs.coffee on CoffeeScriptin laajennus, jonka avulla on helppo varmistaa funktioiden oikeaoppinen käyttö. Contracts tarkistaa, että funktion parametrit ja vastaus ovat oikeassa muodossa. Mikäli sanottavaa löytyy, contracts palauttaa selkeän virheen.

Esimerkkinä annettu id :: (Num) -> Num varmistaa, että id -funktiolle annetaan numeerinen arvo parametrina ja että se myös palauttaa sellaisen.

Contracts-funktiot kiinnitetään tarkistettaviin funktioihin kutsumalla use -funktiota. Tarkistukset suoritetaan funktioita kutsuttaessa, joten sinänsä tämän kirjaston käyttö ei itsessään poista väärien syötteiden mahdollisuutta. Se kuitenkin tekee vääräntyyppisten muuttujien havaitsemisen paljon helpommaksi, sekä automatisoiduissa testeissä, että sovellusta normaalisti testattaessa.

Ainoa miinuspuoli tällä hetkellä on, että esim. npm:llä (Node Package Manager) asennettua CoffeeScriptiä ei voi käyttää contracts-funktioita sisältävän .coffee-tiedoston kääntämiseen, vaan siihen tarvitaan contractsin mukana tuleva erikoisversio CoffeeScriptistä.

contracts.coffee, dokumentaatio & lataus
Contracts.coffee - Contracts for JavaScript and CoffeeScript, opastava blogikirjoitus
contracts.coffee@github

Filed under coffeescript

9 notes &

Uutta JS-maailmassa, osa 1

batman.js
http://batmanjs.org/

Batman.js on uusi, hauskasti nimetty MVC (Model-View-Controller) -kirjasto Shopifylta. Kirjasto on kehitetty yksinkertaistamaan selainpohjaisten sovellusten luontia. Batman.js on ensisilmäyksellä hyvin samankaltainen kuin Backbone.js. Suurimmat erot ovat näkymissä (View), jotka batman.js hanskaa ilman erillistä template-kirjastoa. MVC-jako muistuttaa myös enemmän Ruby on Railsia kuin Backbonen Model-Collection-View-Templates jako.

Näkymät voi helposti sitoa yhteen mallien (Model) kanssa, eli jonkun arvon muuttuessa mallissa näkymä päivittyy automaattisesti. Lomakkeiden kanssa muutos on kaksisuuntainen, eli lomakkeeseen tehdyt muutokset voidaan haluttaessa päivittää automaattisesti malliin. 

Koko dokumentaatio on kirjoitettu CoffeeScriptillä, joka on periaatteessa paranneltu(?) syntaksi JavaScriptille. CS:ssä on korjattu monta JS:n heikkoutta ja se voidaan kääntää normaaliksi JavaScriptiksi kääntäjällä tai haluttaessa hitaammin ajonaikaisesti selaimessa. Batman.js:n sivut mainitsevat, että kehitys onnistuu toki myös normaalilla JavaScriptillä, mutta ohjeistus on silloin itse sovellettava CS:stä.

Sivuilla ei ole vielä muita sovellusesimerkkejä kuin JS-piireissä lähes perinteeksi muodostunut TODO-sovellus, mutta voisin veikata, että lisää sovelluksia on tulossa lähiaikoina.

Kaiken kaikkiaan batman.js vaikuttaa erittäin lupaavalta selainpuolen kirjastolta, johon kannattaa tutustua jos on luomassa JSON:ia syövää/sylkevää sovellusta palvelinpuolen tallennuksella.

Mongoose 2.0
http://mongoosejs.com/

Mongoose on ORM (Object Relational Mapper), jonka avulla voi helposti hallita MongoDB tietokantoja node.js -sovelluksissa. 

Versio 2.0:n suurin uudistus on DBRef:ien lisäys. Niillä pystytään viittaamaan toisiin dokumentteihin ja viitattava dokumentti voidaan hakuvaiheessa helposti hakea käytettäväksi populate-funktiolla. Ne ovat siis ikäänkuin vanhan kunnon relaatiomallin viitteiden avulla haettavia tietueita.

Mongoose vaikuttaa changelogin perusteella jo varsin hiotulta projektilta, toisin kuin suurin osa node.js kirjastoista. 

Jos olisin kehittämässä node.js sovellusta, kallistuisin tietokannan valinnassa melko varmasti juuri MongoDB:hen. Tässä tapauksessa Mongoose olisi ensimmäisenä kokeilemani kirjasto tietokannan käsittelyn helpottamiseen. 

Filed under uutta coffeescript node.js mongodb

0 notes &

Twitter

Ajattelin näin aluksi koota listaa JavaScript-osaajista, jotka ovat mielestäni seuraamisen arvoisia henkilöitä Twitterissä. Suluissa nimi ja projekti, joista henkilö on tunnettu.

@tunnusta klikkaamalla pääsee suoraan henkilön Twitter-sivulle.

@anutron (Aaron Newton, clientcide)

@diegoperini (Diego Perini, NWMatcher)

@dalmaer (Dion Almaer, FunctionSource)

@DmitryBaranovsk (Dmitry Baranovskiy, Raphaël)

@getify (Kyle Simpson, LABjs)

@hakimel (Hakim El Hattab, Textify.it)

@jashkenas (Jeremy Ashkenas, CoffeeScript)

@jdalton (John-David Dalton, FuseJS)

@jeresig (John Resig, jquery)

@joehewitt (Joe Hewitt, Firebug)

@kamicane (Valerio Proietti, mootools)

@kangax (Juriy Zaytsev, Fabric.js)

@paul_irish (Paul Irish, Modernizr)

@rauchg (Guillermo Rauch, socket.io)

@ryah (Ryan Dahl, node.js)

@slightlylate (Alex Russell, dojo)

@souders (Steve Souders, YSlow)

@sstephenson (Sam Stephenson, prototype)

@stoyanstefanov (Stoyan Stefanov, JavaScript Patterns)

@thomasfuchs (Thomas Fuchs, script.aculo.us)

@tjholowaychuk (TJ Holowaychuk, Express)


Olen varma, että unohdin ainakin muutaman tekijämiehen listalta, mutta näillä päässee hyvään alkuun :)

Filed under twitter

0 notes &

Tervetuloa JavaScript.fi() blogiin

Blogin tavoitteena on kertoa ajankohtaisista JavaScript-projekteista ja -tapahtumista, niin Suomen kuin muun maailmankin osalta.

Aikomuksena on myös kirjoittaa artikkeleita, joissa pohditaan esimerkiksi JavaScriptin parhaita käytänteitä ja opastetaan eri kirjastojen käytössä.

Tarkoituksena on perehtyä tarkemmin mm. CoffeeScriptin, Backbone.js:n ja node.js:n kaltaisten projektien saloihin.

Toivottavasti tämä blogi pystyy herättämään innostusta JavaScriptiin, joka tuntuu olevan Suomessa erittäin aliarvostettu ohjelmointikieli muuhun maailmaan verrattuna.

Tervetuloa,
Lari Hoppula
@hoppula