Uncategorized

React alkuun, kaverina Yeoman

Ilmeisesti jokin tällainen fetissi lyödä useita kärpäsiä yhdellä kertaa vaivaa allekirjoittanutta, joten teen hommat Yeoman:lla.

Jatketaan React-sovelluksen tekemistä. Tavoitteena käyttää JSX:ää ja tehdä pieni esimerkkiohjelma, joka toimii web-selaimella.

Tässä osassa (3) päästään luomaan React-projektin pohja, ja tutustutaan miten projekti on organisoitu ja mitä komentoja sen käsittelyyn löytyy. Vielä ei siis varsinaista koodausta. Se tulee neljännessä osassa.

Sisältö

  1. Asennetaan Yeoman
  2. Asennetaan reseptitiedosto Reactille
  3. Asennetaan valmis pohjaprojekti käyttäen ylläolevia
  4. Kehitetään hieman omaa koodia
  5. Seurataan, miten live-serveri tarjoaa uuden sisällön samantien
  6. Sananen testauksesta
  7. Esimerkkiprojektin rakenne

Siis mitä React ?!

Jos tipahdit tälle sivulle aivan satunnaisesti, hyvin lyhyt konteksti:

kerron, miten pääset alkuun web-sovelluksen tekemiseen Facebookin avoimen lähdekoodin ReactJS :ää käyttäen. Kyseessä on suht suosittu, uudenlainen lähestymistapa komponenttipohjaiseen JavaScript-ohjelmointiin. React ei ole niinkään “uusi” ohjelmointikieli, vaan eräs JavaScriptin johdannainen. React on kohtuullisen voimakkaasti “opinionated” eli se sisältää myös joukon suosituksia, kuinka ratkaista yleisesti kohdattuja ongelmakohtia webin maailmassa. Se, mitä tämä artikkeli ei lainkaan käsittele, on React Native (älypuhelimille suunnattu ohjelmointiympäristö).

Asennetaan Yeoman (eli ‘yo’)

Voit katsella taustoitusta ja ohjeita osoitteesta yeoman.io

Pari keskeistä asiaa:

  1. Ohjelman nimi on Yeoman, mutta se on käytössä (ja npm-pakettina) nimellä ‘yo’
  2. Yeoman itsessään ei vielä sisällä mitään pohjia; ne asennetaan npm:llä kuten mikä tahansa paketti. Pohjat alkavat aina ‘generator-‘ etuliitteellä.

Siispä meidän tapauksessa ajetaan nämä komennot:

sudo npm install -g yo

Yo tarvitsee vielä projektipohjan (generaattorin)

sudo npm install -g generator-react-webpack

Projektipohja tallennetaan globaaliksi, ts. “pois projektikohtaisesta” kansiosta. Tarvitset siksi superkäyttäjän oikeudet (sudo).

React-projektin alustus yo:lla

Yeoman on yleistyökalu erilaisten valmiiden kehikkojen (alustan) käyttöönottoon. Sillä voi suurinpiirtein samanlaisella reseptillä siis valmistaa webbikoodia, olipa käytössä mikä hyvänsä alusta. Nyt meillä on siis alustana tämä ReactJS.

Pääset tarvittaessa alkuun pelkän React:in kanssa jos asentelet käsin työkalut ja tiedostot. Se, ottaako React kantaa tiedostojen tai kansioiden nimeämiseen – en suoraan sanoen tiedä.

Alla teen Reactin käyntiin polkaisun tosiaan Yeomanilla – joka käynnistyy komennolla  ‘yo’

npm install --save generator-react-webpack

yo react-webpack

Anna Yeomanin rauhassa hoitaa tarvittavat jutut. Omalla koneella homma kesti noin 1 minuutin.

Voit katsella, paljonko levyä kului asennusten jäljiltä:

du -h

Älä ihmettele, jos näet noin 200 megatavua. Itse tärkein src/ -puu on kuitenkin aika pieni. Tästä src :stä käännetään lopulta tuotantoon menevät fileet, joten työkalujen tilankulutus ei haittaa.

Mitä asennuksen jäljiltä löytyy?

src/

./actions
./components
./config
./images
./sources
./stores
./styles

Valmis pohja suosittelee ylläolevaa järjestystä. Se on suht yksinkertainen.

Luntataan komennot

Kehitystä varten jokaisella on usein omat mielikomennot, joilla voidaan mm. suorittaa CSS/LESS/whatever tiedostojen prosessointia ja kaikenlaista tärkeätä oheistoimintaa. npm pulttaa nämä kätevästi talteen tuohon aiemmin mainittuun konfigurointitiedostoon. Luntataan:
less ./package.json

Komennot löytyvät scripts -osiosta.

Testataan! Serveri käyntiin

npm run serve

Nyt tuotos pyörii paikallisesti koneellasi!

Katso selaimella:

http://localhost:8000/

Kun haluat sammuttaa paikallisserverin, painele Ctrl-C terminaalissa.

Seuraavaksi, osassa 4, React -koodia.

Uncategorized

The Iceberg (Gimp + watercolor)

art-bjpp_iceberg

The powerful team (red boat) feels safe, heading over rough waters with the aid of a sonar.

The iceberg is part of the metaphor, related to software security. Iceberg communicates the futility of technological tools that only look in one direction (bottom). The future should be gauged as well. In another perspective, the small tip of the same iceberg that stops the boat (lest it change its direction), can be seen as something the team has – in everyday crave of speedy development – resorted to, without thinking of the “cost” of carrying around a big chunk of code.

Uncategorized

No Blue Capsule needed: This is Future!

Imagine waking up in the Future.

Not like you would have landed in a strange forest of the future world, having arrived with a glowing blue capsule – no. But instead you had just sensed, perhaps during the last year or so, that something had changed.

I’ve lived long enough now (40 years) and having born very close the home computer revolution, which took place during the early 1980s, that I’ve seen “the whole” of consumer electronics evolution. Home computers were kind of geeky rarity in the early 1980s, but the computers had in Finland a very strong reception. Soon I found myself to be in the first grade of elementary school, age 7, and having quite a large vocabulary of English – because I read manuals both to the Commodore 64 home computer and to various games. I played a lot of simulators, some of which were very accurately modeled
after real world. Take Pirates! – a game of high-seas swashbuckling: 80 pages to read.

The Signs?

You were being marketed 3D-objects over the net.
“50% discount for Christmas”.

Say WHAT? 3D-objects?! Who would purchase such? Indeed, there’s
a whole universe and market for 3D objects.

Sign 2: smalltalk about a game’s defense strategy

You were buying virtual weapons and talking about
the strategy of defending – yes, not your own Real
home, but your virtual Headquarters in a mobile phone game.

Sign 3: Your fan-post in email is mostly made by robots

25% of your email consisted of actually notifications
sent by mail robots. They were telling you the latest
moves throughout the world, concerning – well, software
libraries!


"New release of webpack (2.2.0-rc.2) on npm"
"New release of lodash (4.17.3) on npm"

What on earth is this all about?

It’s actually a description, not far from exact truth, of
the very few last days of 2016, and it’s my real email inbox
we’re talking about.

Had they already known of email technology (and computers), what would the 17th century people receive as notifications?

It would probably be something similar, albeit perhaps with a relaxed frequency. A new way to weave sails? Or something to do with the printing press? I guess during Gutenberg’s reign there wasn’t such an active and vocal crowd of hipsters
declaring a coup in design every week, but still… 😉

javascript, programming, webdevelopment

Miksi React? Mitä se tarjoaa?

React, kuten mikä tahansa kirjasto tai kehikko, tarvitsee hissipalopuheen. Joskus valinta saattaa yksinkertaisesti hoitua kauniisti sanoen “automaagisesti”, eli projektissa on jo
valittu teknologia(t), tai et ole se, joka päättää arkkitehtuurista.

Joka tapauksessa JavaScript/web-devaus -maailma on täynnä teknologioita, ähkyyn asti, joten uuden esittelyyn ja suosion saavuttamiseen usein halutaan tiivistetty kuvaus.

Reactin avainpointit

  • paino fronttikehityksessä (“View” MVC:stä)
  • nopea (mm. virtuaali-DOM)
  • React on suosittu, taustalla iso talo
  • avointa lähdekoodia täysin
  • modulaarinen

Haemme hieman työkalujen valinnassa samaa, kuin maanviljelijä leikkuupuimurista: ei haittaa, jos laite on hieman monimutkainen, kunhan se tekee itse työnsä tehokkaasti. Toisaalta, Occamin periaate eli Occamin partaveitsi, jota myös noudatetaan usein teknologian kanssa, kuuluu: ‘kilpailevista, yhtä selitysvoimaisista teorioista tulisi valita yksinkertaisin.’ Jos kaksi teknologiaa ajavat saman asian, ota yksinkertaisempi.

Ennenwanhaan varsinkin näillä asioilla oli paljon merkitystä: oli turha pitää ylimääräisiä kilo- tai megatavuja tuotteessa, koska sen levitys (käytettiinpä levykkeitä tai Internetiä), oli aina kalliimpaa mitä enemmän tuotteella oli kokoa. Nykypäivänä rajoitus on löytänyt muotonsa lähinnä tuotteen turhan kompleksisuuden karsimisessa siksi, että kehittäjien pää täyttyy liiasta monimutkaisuudesta ja näin heikentää työtehoa. Toinen asia, jolla vielä kuitenkin on merkitystä, on mobiiliverkkojen rajoitettu nopeus (kaistanleveys): kannattaa pitää Javascript-tiedostot vaikkapa 100 -kilotavuisena, kuin antaa niiden kasvaa 2000 kilotavuun puhtaasti välinpitämättömyydestä.

Seuraavassa, osassa 3, aletaan rakentaa esimerkkiä.

 

Uncategorized

CatB

Avoimen ohjelmistokehityksen legendaarisimpia tekstejä on CatB eli “Cathedral and the Bazaar“, joka kuvaa kahden erilaisen prosessin pääpiirteet. Katedraalissa valmistetaan ohjelmistoa keskusjohtoisesti ja hallitusti, kun basaarissa ohjelmisto valmistuu ottamalla erilaisia palasia sieltä täältä. Jälkimmäinen tapa on nostanut ainakin päätään viime vuosina – tilastoista en mene sanomaan mitään.

Open source on nykypäivänä useasti rivimääräisesti laskettuna helposti noin 90% ohjelmistosta. Toisin sanoen jos ohjelmistoprojekti on 20000 riviä koodia, niin riippuen laskentatavasta tuon 20000 rivin lisäksi softassa on kirjastoina 400000 riviä extraa, tai tuosta 20000 rivistä vain 1000 riviä on itse ohjelmoitu talon sisällä.

Olisi mielenkiintoista oikeasti vertailla numeerisesti eri metodien ominaisuuksia.

Luin ensimmäisen kerran Raymondin esseen muistaakseni 1999, opiskellessani TKK:lla tietotekniikkaa. Otin teollisuushistorian kurssin (2 ov.), jonka lopputyönä kirjoitin itse tulevaisuuteen katsahtavan esseen Linuxista.

Katedraali-mallin katsotaan jossain määrin kuuluvan historiaan. Se on aikakautta, jolloin firmoilla oli suuret ohjelmistodivisioonat ja suhteellisen suljettu ekosysteemi. Ohjelmistot eivät olleet missään määrin pääroolissa kuluttajalle päin.

Suomessa katedraalia ovat kenties edustaneet muutamat suuret (henkilöstömäärältään > 1000 henkeä) teknologiayritykset. Mielenkiintoisella tavalla voisi olla jotain viitettä siitä, että B2B -yritykset voivat kenties pysyä menestyvinä, vaikka ovat enemmän katedraalin rakentajia: yritykset voivat silti sopia toistensa kanssa sopimuksia joissa ohjelmistojen käyttö- ja muokkausoikeuksista päästään sellaiseen ymmärrykseen, että ohjelmistokehityksen sulkeutuneisuus ei muodostu ongelmaksi.

B2C -yritykset, kuten matkapuhelimia ja muita kuluttajaelektroniikkaa valmistavat yritykset, tuntuisivat olevan kovaa vauhtia matkalla basaarimalliin, jolleivat jo ole siellä. Myös Microsoft on viime vuosina alkanut ammentaa basaarista. IBM on siirtynyt strategisesti vuosikymmenten saatossa varsin suljetusta laitetoimittajasta konsultointiyritykseksi, jonka eräs strategian kulmakivi on tuottaa ja tukea avoimen lähdekoodin ohjelmistoja.

Basaarimallia edustavia yrityksiä on Suomessakin sen sijaan varmasti useita satoja; koska katsoisin, että jo yhden miehen toiminimi tai freelancer voi olla basaarissa tuottajana. (Suomessa on noin 200000 yritystä tai toiminimeä).

Open source on noussut ohjelmistokehityksen vankaksi rungoksi. JavaScript-puolella näin asian viimeisen kahden vuoden aikana, jolloin hämmästyin, miten aktiivista kehitys itse asiassa on. Ja minkäänlaista loppua ei todellakaan vielä näy!

Uncategorized

ReactJS

React on Facebookin kehittämä alusta, jota yritys käyttää heidän
oman päätuotteensa (Facebook -portaali) rakentamiseen. React on
täysin avointa lähdekoodia, ja se on levinnyt nopeasti teollisuuteen
käyttöön.

React “rikkoo” perinteistä Javascript-syntaksia, ja vaatii tekstieditoriin
oman lisätuen, jos haluaa pitää syntax highlightit kunnolla
toimimassa. Kun syntaksiin on tottunut, useat koodaajat sanovat että
se on kompakti ja selkeä. Lienee kyseessä siis tottumus.

Olen tehnyt tähän mennessä hyvin vähän hommia Reactilla. Nyt tätä
kirjoittaessa tutustun Reactin perusominaisuuksiin, ja teen projektin
“alusta” asti, eli toisinsanoen katson myös mitä työkaluja (tools)
tarvitaan.