Skip to content

FI 1.1 frontti

Jump to bottom
esitys edited this page Apr 28, 2021 · 3 revisions

Hacklab Helsinki #web-kehitys kurssi 21.4.2021 -

1 0:sta täyteen vauhtiin!

1.1 Frontti pilveen

Paketoidaan frontti

Vaihdetaan packages/app -sisarpakettiin:

$ cd ../app
$ npm install

Tuo lataus kestää kauemmin. Mukana tulee Cypress -testausalusta, jota käytämme myöhemmin kurssilla.

$ npm run build
...
vite v2.1.5 building for production...
✓ 47 modules transformed.
dist/aside-keys.js   17.85kb / brotli: 5.62kb
dist/aside-keys.js.map 28.60kb
dist/style.css       5.21kb / brotli: 1.43kb
dist/app.es.js       35.34kb / brotli: 8.90kb
dist/app.es.js.map   72.50kb
dist/vue-router.js   51.76kb / brotli: 11.49kb
dist/vue-router.js.map 169.75kb
dist/vue.js          130.09kb / brotli: 25.61kb
dist/vue.js.map      473.76kb

Näemme vitebox/dist-hakemistoon syntyneet EcmaScript-tiedostot ja niiden koot.

Sovelluksemme kokonaiskoko (poislukien .js.map-tiedostot) on tässä vaiheessa ~240 kB pakkaamattomana ja ~53 kB pakattuna.

Pelkästään pakattu koko ei vaikuta. Jutellaan jossain vaiheessa kurssia siitä, mikä kaikki tekee veppisovelluksesta käyttäjän kannalta napsakan ja miten sitä mitataan.

Tässä vaiheessa mukana ovat:

  • fronttimme logiikka ja olemus (ulkonäkö)
  • Vue.js 3 UI-kirjasto
  • muut käyttämämme kirjastot, paitsi Firebase

Firebase on käytössä tälläkin tasolla, mutta se jätetään tarkoituksella sivuun paketoinnista, koska myös app-deploy-ops tarvitsee sen ominaisuuksia. Jos paketoisimme sen mukaan, ei ylempi taso välttämättä saisi tarvitsemiaan funktioita, koska "tree shaking" karsii käyttämättömän koodin pois. Näin Firebase:n osalta paketointi (ja "tree shaking") tapahtuu siis vasta tuotantobuildissä.

Kahtiajako sovelluksen kehitykseen ja tuotantoon vientiin ei kurssin pitäjän käsityksen mukaan ole fronttipuolella kovin yleistä, vaan sovelluksen kehitys ja sen operointiin liittyvät asiat pidetään yleensä samassa koodissa. Tästä on kuitenkin haittaa. Pelkässä sovelluskehityksessä on jo ihan riittävästi "liikkuvia osia”. Jakamalla asiat eri aliprojekteihin saadaan vähennettyä kompleksisuutta - ja siitä ohjelmoinnissa oikeastaan aina pohjimmillaan on kyse! :)

Siirrytään siis frontin päällystykseen.

Päällystys ja tuotantoon vienti

$ cd ../app-deploy-ops
$ npm install

$ npm run build
...
./adapters/logging/proxy.worker.js → roll/out/worker...

FILE                      GZIP    BROTLI  
proxy.worker-eeb899bb.js  4.66KB  4.01KB  

created roll/out/worker in 606ms

./adapters/logging/proxy.worker.js → roll/out/worker...

FILE                           GZIP    BROTLI  
proxy.worker-796f0f36.iife.js  4.70KB  4.04KB  

created roll/out/worker in 604ms

./src/main.js → roll/out...

FILES                             GZIP      BROTLI    
main-e3c9e853.js                  2.34KB    1.94KB    
ops-3b277668.js                   0.74KB    0.62KB    
app/app.es-04497cfe.js            8.66KB    7.62KB    
firebase-b1583bf8.js              36.49KB   31.33KB   
app/vue-01885567.js               28.56KB   25.04KB   
app/aside-keys-2d7e1d4e.js        6.53KB    5.80KB    
app/vue-router-5519ae70.js        13.28KB   11.78KB   
adapters-6bee9400.js              1.37KB    1.15KB    
firebase-auth-3768ce19.js         39.63KB   32.29KB   
firebase-performance-a6703b48.js  14.24KB   12.08KB   
firebase-firestore-307d84bc.js    106.81KB  86.53KB   
tslib-9956b3d6.js                 0.70KB    0.55KB    
                                  259.35KB  216.71KB  

created roll/out in 10.3s

Osa nyt syntyneistä paketeista on jo nimeltään tuttuja. Lisäksi mukana on nyt:

  • main, joka käynnistää Firebase:n ja sen jälkeen sovelluskoodimme
  • ops, joka sisältää mm. keskitettyyn lokitukseen liittyvää koodia
  • firebase[-*], jotka sisältävät Firebase:n logiikkaa

Kokonaiskoko (Brotli-pakattuna) on nyt kasvanut 216 kB:uun.

Keskustellaan siitä, mikä kokoon vaikuttaa; mikä on "iso" ja mikä ei. Miksi sillä on merkitystä?

Kurssin pitäjä kertoo, miten ES-moduulit ja Rollup vaikuttavat siihen, että turhaa tavaraa ei pitäisi olla mukana. #treeShaking

$ npm run deploy
...
=== Deploying to 'groundlevel-160221'...

i  deploying hosting
i  hosting[groundlevel-160221]: beginning deploy...
i  hosting[groundlevel-160221]: found 33 files in roll/out
✔  hosting[groundlevel-160221]: file upload complete
i  hosting[groundlevel-160221]: finalizing version...
✔  hosting[groundlevel-160221]: version finalized
i  hosting[groundlevel-160221]: releasing new version...
✔  hosting[groundlevel-160221]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/groundlevel-160221/overview
Hosting URL: https://groundlevel-160221.web.app

Käydään tuolla (kunkin omalla) sovellussaitilla. Näkyykö siellä mitään?

Seuraavaksi: 1.2 Cloud Firestore tietomalli

Clone this wiki locally