Johdatus edistyneeseen web-kehitykseen. Juuso Lappalainen

Transkriptio

1 Johdatus edistyneeseen web-kehitykseen Juuso Lappalainen

2 Tällä kurssilla tehdyt sivut - Staattisia html-sivuja, joissa ei ole tiedon tallennusta, backendia tai mitään muutakaan ihmeellistä. - Käyttäjä näkee sivun joka kerta samalla tavalla, eli kaikki muutokset kirjoitetaan käsin lähdekoodiin. - Kun sivuun halutaan tehdä muutoksia: 1. Kehittäjän täytyy muokata sivun lähdekoodia 2. Kehittäjän täytyy korvata palvelimella oleva koodi uudella koodilla

3 Perinteinen flyeri

4 Perinteinen flyeri - Staattinen paperilappu - Ohikulkija näkee aina saman flyerin - Jos flyeriin halutaan tehdä muutoksia: - Flyerin tekijän täytyy muokata flyeria kuvankäsittelyohjelmalla - Uusia flyereita täytyy tulostaa - Vanhat flyerit täytyy käydä korvaamassa uusilla flyereilla.

5 Tällä kurssilla tehdyt sivut vs. perinteinen flyeri TL:DR; Aika lailla sama juttu

6 Edistyneemmät web-sovellukset - Verkkokaupat, uutispalvelut, sosiaalisen median sovellukset jne. - Automaattisesti tiettyjen sääntöjen mukaan generoituja sivuja - Interaktiivisuutta: käyttäjä voi kirjautua sisään ja muokata sivujen sisältöä - Kun sivu on kerran tehty, on jopa mahdollista että sitä ylläpitää täysin eitekninen henkilö ilman että hän kirjoittaa riviäkään koodia (tietysti ylläpito ja tekniset päivitykset ovat asioita erikseen)

7 Edistyneemmät web-sovellukset Rakentuu karkeasti seuraavalla tavalla: Frontend mitä käyttäjä näkee Backend päättää, mitä käyttäjälle näytetään Tietokanta säilyttää kaiken sivulle tallennetun sisällön

8 Esimerkkinä reddit.com

9 1. Käyttäjä kirjoittaa selaimen osoiteriville reddit.com 2. Selain pyytää redditin palvelimilta etusivun sisältöä 3. Redditin backend päättää, minkälaiset julkaisut etusivulla näytetään kyseiselle käyttäjälle, ja pyytää niitä tietokannasta. 4. Tietokanta lähettää backendiin listan sen pyytämästä sisällöstä 6. Backendissä rakennettu htmlkoodi saapuu käyttäjän selaimeen, ja käyttäjälle näytetään redditin etusivu. 5. Backend rakentaa tietokannasta saamiensa julkaisujen perusteella etusivun html-koodin dynaamisesti

10 Edistyneen web-kehityksen työkalut

11 Avainsanoja Komentorivi ja siihen liittyvät työkalut (Joita ei kannata pelätä) Esiprosessorit (Scss, ) Dynaamiset web-sovellukset ja siihen liittyvät frameworkit (Angular.js, ) Backend (Node.js, Ruby on Rails, ) Tiedon tallennus (Sql, MongoDB, )

12 Css-esiprosessorit - Sallii paremman ja helpomman syntaksin käyttämisen css:n kirjoittamiseen - Selain kuitenkin ymmärtää vain tavallista css:ää, joten kivempi syntaksi täytyy koneellisesti kääntää tavalliseksi css:ksi - Esimerkiksi Scss - Syntactically Awesome Stylesheets

13 Scss - Syntactically Awesome Stylesheets

14 Scss ominaisuuksia - Nesting Tavallinen css: Sama scss:llä

15 Scss ominaisuuksia - Laskuoperaattorit - Yhteenlasku, kertolasku ja jakaminen - Tarjoaa paljon valmiita funktioita, joilla voi esimerkiksi laskea tarkasti 100% / 3

16 Scss ominaisuuksia - Muuttujat (Variables) - Yleisesti käytettyjä värejä, mittoja tai muita arvoja voi tallentaa muuttujiin, joita voi tämän jälkeen käyttää kaikkialla koodissa.

17 Scss ominaisuuksia - Mixinit - Turhaa ja toisteista koodia, ns. Boilerplate-koodia, voi vähentää mixineillä. Tämä on hyödyllistä, kun esimerkiksi halutaan käyttää css: ää, johon pitää lisätä tuki eri selaimille (box-shadow, border-radius jne.). Kun kyseisen boilerplaten on kerran kirjoittanut mixiniin, sitä voi käyttää helposti uudestaan muualla koodissa.

18 Scss ominaisuuksia - mixinit Css Scss

19 Scss:n asennus ja käyttö Käyttöönotto vaatii hieman kikkailua komentorivillä, mutta pienen esityön jälkeen kaikki on sen arvoista. Komentoriviä ei kannata pelätä, ja siltä ei voi välttyä. Kun sen käytön kerran opettelee, se on todella luontevaa ja helppoa. Komentorivin kautta tapahtuvaan Scss-asennukseen menee noin minuutti. Tämän jälkeen scss:n käyttöönottoon projektissa menee ensikertalaiselta noin 5 minuuttia.

20 1 / 3 Asenna Ruby Windows Mac Linux 1. Lataa ja asenna ruby installer http: //rubyinstaller.org/ 2. Kun se on asennettu, käynnistä windowsin komentorivisovellus Command Prompt 1. Ruby on jo asennettu ja kaikki vain toimii. Käynnistä Macin komentorivisovellus Terminal. 1. Jos käytät muutenkin linuxia, et varmaankaan tarvitse näitä ohjeita.

21 2 / 3 Asenna Scss komentorivillä Windows/Mac/Linux Komentorivin pitäisi näyttää kutakuinkin tältä (Mac): 1. Kun olet avannut komentorivin, kirjoita siihen gem install sass 2. Jos käsky antaa virheen, kirjoita sudo gem install sass 3. Käsky saattaa kysyä salasanaasi, jolloin siihen pitää syöttää se salasana, jolla kirjaudut tietokoneellesi ja painaa enter. Jos sinulla ei ole salasanaa, voit vain painaa enter.

22 2 / 3 Asenna Scss komentorivillä Windows/Mac/Linux Komentorivin pitäisi näyttää nyt kutakuinkin tältä (Mac): Tarkista, että asennus on onnistunut kirjoittamalla komentoriville sass -v Komentoriville pitäisi tulostua asennetun version nimi ja versionumero. Jos jostain syystä asennus epäonnistui, palaa edelliseen kohtaan ja asenna se uudestaan.

23 3 / 3 Scss:n käyttö projektissa Onnittelut, scss on nyt asennettu tietokoneellesi! Seuraavaksi ohjeet siihen, miten scss:ää käytetään uudessa projektissa. Näiden ohjeiden avulla voit ehkä myös päätellä, miten scss otetaan käyttöön olemassaolevassa projektissasi. Sen käyttäminen on todella helppoa. Luo kansio projektillesi, ja luo siihen kansioon kansiot nimeltä css ja scss Projektisi rakenne voi näyttää vaikka tältä:

24 3 / 3 Scss:n käyttö projektissa Seuraavaksi hieman haastavampi kohta: projektikansioon täytyy navigoida komentorivin kautta. Pikaohjeet komentorivin käyttöön: Tiettyyn kansioon siirtyminen: cd + kansion nimi Ylempään kansioon siirtyminen: cd.. Nykyisen kansion sisällön listaaminen: ls (Mac, Linux), dir (Windows)

25 3 / 3 Scss:n käyttö projektissa 1. Avaa komentorivi ja kirjoita siihen dir (Windows) tai ls (Mac, Linux). Tämän pitäisi tulostaa nykyisen kansion sisällöt komentoriville. 2. Riippuen siitä, mihin olet luonut / tallentanut oman projektikansiosi, siirry sinne käyttämällä cd komentoa. Oma projektikansioni löytyy työpöydältä, joten itse käyttäisin cd Desktop. Tämän jälkeen voit tarkistaa taas mitä nykyisessä kansiossasi on kirjoittamalla ls tai dir

26 3 / 3 Scss:n käyttö projektissa 3. Siirry tällä tavalla liikkuen omaan projektikansioosi. Oma projektikansioni on nimeltään test, joten kirjoittaisin äskeisessä näkymässä cd test. Tämän jälkeen voin tarkistaa olevani oikeassa kansiossa kirjoittamalla ls. Jos olet luonut kansion aiemman ohjeistuksen mukaan, komentoriville pitäisi tulostua jotain tämän näköistä: 4. Tämän jälkeen voit käynnistää scss:n kirjoittamalla sass --watch scss:css. Jos olet nimennyt kansiosi jollain muulla tavalla, kirjoita sass --watch scss-kansion-nimi:css-kansion-nimi 5. Komentorivillä käynnistyy tämän jälkeen scss:n suoritus, ja voit pienentää komentorivin (huom. Älä sulje sitä) ja avata projektikansiosi tekstieditorilla.

27 3 / 3 Scss:n käyttö projektissa Nyt olet valmis käyttämään scss:ää projektissasi. 1. Avaa projektisi haluamallasi tekstieditorilla, ja lisää siinä olevaan scss-kansioon yksi.scss tiedosto, vaikkapa styles.scss 2. Kirjoita tiedostoon muutama rivi scss-koodia, ja tallenna se: 3. Jos katsot nyt komentoriviäsi, se ilmoittaa havainneensa muutoksen koodissasi, ja että se on luonut projektiisi uusia tiedostoja css-kansioon

28 3 / 3 Scss:n käyttö projektissa Sass siis tarkkailee scss-kansiossa olevia tiedostoja, ja kirjoittaa niiden perusteella vastaavia tiedostoja css-kansioosi. Aina kun teet muutoksen scss-tiedostoon, sass kirjoittaa sitä vastaavan css-koodin sitä vastaavaan css-tiedostoon. Tehdään hieman lisää muutoksia: styles.scss styles.css

29 3 / 3 Scss:n käyttö projektissa Nyt voit linkittää html-tiedostoosi sassin automaattisesti generoiman css-tiedoston, ja kaiken pitäisi toimia. Profit. Tämä oli luonnollisesti vasta pintaraapaisu kaikkiin scss:n mahtaviin ominaisuuksiin, ja niitä kannattaa tutkia lisää scss:n virallisilta sivuilta ja dokumentaatiosta:

30 Angular JS Angular JS on frontend-kirjasto, jolla voi dynaamisesti luoda sivulle sisältöä. Sitä ei käydä tarkemmin tällä luennolla läpi, mutta se on yksi käytetyimmistä frontend kirjastoista ja helpottaa valtavasti monimutkaisten ja interaktiivisten sivujen kehitystä. Kannattaa tutustua siihen osoitteessa: tai katsomalla youtubesta lyhyt tutorial-video (12 min), jossa rakennetaan angularilla todo-lista: com/watch? v=wuihuzq_cg4&list=pl173f1a311439c05d&context=c48ac877advjvqa1ppcfonnl4q5x8hqvt 6tRBTE-m0-Ym47jO3PEE%3D

31 Kiitos! Kyssäreitä?