• / Blog
  • / Folio je CMS a E-shop od Sinfin.digital

Publikováno: 26. březen 2019

Folio je plnohodnotné open-source CMS, kterým vybavujeme každý nový web od microsite, přes prezentační webové stránky až po komplexní webové aplikace. Díky plné integraci s e-shopovým řešením Spree s námi můžete realizovat téměř jakýkoliv webový záměr.

Prvotní inspirací pro vývoj byl projekt Suspender pro rychlý rozjezd aplikací od známého amerického studia thoughtbot. Postupem času se rozrostl do plnohodnotného CMS s přívětivou administraci stromové struktury stránek, podporu SEO a komplexní správou médií.

Folio představuje souhrn těch nejlepších postupů, které jsme ověřili v praxi u mnoha předchozích projektů (k březnu 2019 máme na Gitu 220 webů a webových aoplikcí ;).

CMS Folio a e-shop Spree
Pohled na správu stránek v CMS Folio a integrované e-shop řešení Spree.

Vlastnosti CMS Folio

  • správa libovolné stromové struktury stránek (články, kategorií, atp)
  • integrace s e-shopovým řešením Spree do jednoho celku
  • pokročilý WYSIWYG editor Redactor.js
  • symetrický i výběrový překlad webu do libovolného jazyka
  • integrace datových modelů na míru do administrace (katalogy produktů, adresáře osob atp)
  • publikování stránek přepínačem a/nebo k datu a hodině
  • správa uživatelských účtů a oprávnění k různým typům obsahu
  • možnost výběru šablony pro libovolnou stránku
  • neomezený počet dílčích šablon pro sestavení libovolého obsahu (střídání textu, obrázků, leadových formulářů, detailu výrobku, …)
  • lazyload obrázků a optimalizace javascriptu - web je přístupnější a rychlejší
  • správa meta atributů pro SEO (meta title a description, og pole pro Facebook)
  • sitemap.xml včetně rozšíření pro obrázky a videa
  • asynchronní a pravidelné úlohy (exporty, importy, hromadné zpracování dat)
  • vlastní sledování návštěv a akcí uživatele pro efektivní propojení s externími analytickými nástroji
  • správa více různých menu (např. pro hlavičku  a patku)
  • optimalizovaný přístup k databázi a optimalizace backend kódu pro rychlejší běh webu
  • možnost škálování na neomezený počet serverů a na více procesů a vláken v rámci stejného serveru

Správa médií

  • správa médií s možností vložení obrázku na více stránek
  • automatické změnšování a ořezu na formát daný šablonou
  • podpora hi-dpi obrázků pro front-end s fallbackem na standardní velikost
  • souborové přílohy stránek
  • zmenšování obrázků probíhá jako proces na pozadí a nezdržuje administraci, ani běh webových stránek
Správa obrazových souborů ve Folio CMS
Správa obrázků s možností filtrovat podle jména souboru, tagu a přiřazení k stránce.

Leadové formuláře a zápis do newsletteru

  • od začátku je připraven Lead form pro sběr poptávek a kontaktů z webu
  • zápis do newsletteru napojený na Mailchimp

Technologie

Webový framework Ruby on Rails 5, jazyk Ruby 2.6, databáze PostgreSQL, asynchronní úlohy ActiveJob a Sidekiq na db Redis, šablony responzivní HTML5 Bootstrap psané ve Slim, Haml a Erb. Javascript preprocesor CoffeeScript, CSS Sass. Turbolinks pro akceleraci přechodů mezi stránkami. Správce obrázků je napsaný jako samostatný modul / single-page aplikace v React.js za použití Redux. Hosting médií a příloh v rychlých a bezpečných Amazon S3 bucketech.

Webové stránky postavené na Foliu jsou nasazeny na oddělených serverech pro aplikaci, pro asynchronní úlohy i databázi. Deploy probíhá pomocí Capistrana ze zdrojového kódu umístěného v Gitu (Bitbucket nebo Github). Aplikační servery běží na workerech Puma za webovým serverem Nginx. Stav všech vrstev aplikace kontroluje Monit a případné chyby padají do Sentry, kde si je vyzvedneme pro případ, že nám unikla chyba na produkci.

Pro šifrování webů používáme SSL certifikáty od Letsencrypt s automatickou obnovou, nebo ještě raději umisťujeme weby za rychlou CDN Cloudflare, která poskytuje SSL certifikáty v ceně služby.

Každý web postavený na Folio CMS si nadále uchovává vlastnosti Ruby on Rails aplikace s možností dalšího rozšiřování a úprav.

Pokud si chcete prohlédnout zdrojový kód, vyzkoušet Folio na vlastním projektu, nebo poslat pull request pokračujte na https://github.com/sinfin/folio.

Sinfin.digital // http://sinfin.digital // [email protected]