otevrenamesta/bbb-vue-web

bbb - basic building block web

Manažerské shrnutí

bbb je web řešení na bázi jamstack. Přoč je tento směr budoucností a jaké přináší výhody oproti tradičním se píše např. zde. Základní myšlenky udržitelného systému pro správu webu:

• maximální oddělení:
  • visualní styl (S) (CSS)
  • template (T) = jaký HTML kód se bude generovat
  • data (D) = struktura komponent tvořících jednotlivé stránky a jejich texty
• data v textových souborech, aby se dali verzovat a rychle servírovat přes CDN.
• web jako JS aplikace konzumujici data z ruznych zdroju
• možnost generovat statický web pro uživatele s vypnutým JS nebo crawlery

web jako lepidlo open dat z ruznych zdroju, ktere ty data hezky vyrenderuje.

Znamená to, že moderní web se aktualizuje sám díky tomu, že prostě pouze vykresluje otevřená data, která v jiných systémech už beztak vznikají.

Web data - slozka statickych textovych souboru

Pro příklad web OM

• data (D) - jednotlive stranky jsou ve forme yaml souboru - nejuspornejsi a nejjednossi zpusob, jak definovat hierarchickou strukturu. Kazdy yaml soubore = 1 stranka. Jeho path na webu odpovida path ve strome slozky. Kazdy ma:
  • zakladni meta-atributy (title, desc, ...)
  • layout: jaky layout se pro stranku pouzije
  • children = pole komponent, ze kterych se sklada (ty se mohou opet skladat pomoci buildin componentu composition jako napr. zde).
• templates (T) + style (S): v extra podslozce _service:
  • layouts: vue.js template jak se vyrenderuje stranka
  • components: vue.js komponenty, ktere obsahuji jak template, tak mohou obsahovat slozitejsi logiku (nacitani dat, filtrace, ...). Specialni component composition je pro komplexnejsi kompozice. Atribut class muze obsahovat znaky ">" ktere zpusobi vyrenderovani zanorenych div elementu. Tedy napr. container>columns vyrenderuje:

  <div class="container">
    <div class="columns">
      children ... 
    </div>
  </div>
  

  • style: sass based custom style (momentalne bootstrap a bulma.io). Main soubor je custom.scss ktery importuje vse potrebne pro cely styl webu.

V repositari nejsou zadne assety. Ty jsou v udrzitelnem reseni hostovany mimo (CDN) a web na ne pouze odkazuje.

Backend

Backend je volitelna soucast, Web ho nutne nepotrebuje. Je potreba jako nastroj pro editaci, nebo pro automaticke pregenerovavani generovanych soucasti (napr. stylu). Vice v repozitari.

Development

Run dev mode:

DATA_FOLDER=/path/to/your/bbb-web npm start