Newsfront: Et CMS for avis og magasin blir til

Mobilopplevelsen må være som en flytur på første klasse; en praktisk-estetisk nytelse.

Hva vi ønsket å løse

Vi ønsket å skape en plattform for digital publisering av nyheter. Hvorfor finne opp hjulet for hver ny kunde? Alle magasiner og aviser har overlappende behov, men vi så at vanlige CMS-er ofte kommer til kort på ett eller flere områder.

Drupal har sine styrker, WordPress har andre. Rammeverk som Rails og Symfony2 har sterke utviklingsmessige fordeler, men mangler modne admin-egenskaper. Hvordan kan vi gjøre valget enkelt for mediehusene, og servere en proffløsning som bare fungerer?

I god open source ånd, var det likevel aldri aktuelt å bygge noe proprietært fra grunnen av. Vi visste at verktøyene var der; det som gjenstod, var å sy løsningene sammen til en pakketert helhet. Visjonen Newsfront var født.

Det alle trenger

Elementene alle spurte etter, var stort sett no-brainers:

  • En mobilvennlig frontend med stor fleksibilitet
  • Høy ytelse
  • Diverse backendbehov for proffmarkedet
  • API for eksterne applikasjoner
  • Stabil hosting
  • Ferdige designelementer, for rask implementering

Til arbeid!

CMS publiseringsløsning for avis og magasiner (Drupal / Wordpress)

Inspirasjon

Brukeropplevelsen ble til ved å hente inspirasjon fra en rekke medier: BBC, NRK, Aftenposten, Dagbladet, Newsweek, Time, Medium og diverse Read Later-tjenester.

Viktige vurderinger vi gjorde, gikk på leservennlighet (innholdet i fokus!), fleksibilitet i navigasjon, bruk av bilder, klikkvennlighet, med mer. Vi la vekt på at mobilopplevelsen skulle oppleves som en flytur på første klasse; en praktist-estetisk nytelse.

Responsive vs mobilside

Selv nyere avisrammeverk i Norge, har satset på to -eller tredeling av frontend, basert på skjermtype. Dette skyldes hovedsakelig to ting: Måten desktopversjonen deskes på (Dr. Front og lignende), og formater for annonser. Med full kontroll over vår egen pakke, så vi at begge disse aspektene lot seg løse i en moderne responsiv løsning.

JavaScript-løsninger for å hente inn innhold dynamisk basert på skjermbredde, var allerede utbredt for bildehåndtering; samme teknikk benyttet vi for annonser og andre snippets. Med en streng “mobil først”-tilnærming, sikret vi at ingenting lastet unødig. Ytelse var vårt kriterium nummer én fra start. Frontend ytelse er så målbart, og målbarhet er gøy!

Decoupling

Tilbake til CMS-verden. Vi elsker verktøyene vi får nærmest ut av boksen fra spesielt Drupal og Wordpress, men i denne sammenheng uffet vi oss over mangelen på mer klassisk MVC-inndeling av kode, og en mer hands-on prosess for å bygge frontend. Kort fortalt: Vi ønsket ikke å lage Drupal/WP themes! Vi ønsket noe kjappere, enklere, og mer HTML-basert.

For oss var valget enkelt: Google’s Angular.js; en naturlig utvidelse av HTML-standarden, og i våre øyne selve vinneren av JS-rammeverkskrigen. Men: Tør vi bygge markup i nettleseren, og ikke på server? Metoden var fristende, men det ville kreve en svært solid tjeneste bak.

Vår største innovasjon i Newsfront-produktet, ligger nettopp i arkitekturen mellom frontend og backend. Vi spurt oss selv: Hva slags løsning benytter man allerede i Drupal og WP i dag, når man ønsker raske, dynamiske sideoppdateringer? Vi kunne bygd et API i MongoDB, eller et lage utenpå Redis; begge aktuelle kandidater. Men; dette ville være å bygge relativt mye infrastruktur utenfor CSM-et, på en måte som fort ville skape flere problemer enn det løste. Fantes det ingen løsning som allerede var i produksjon? Jovisst!

Hva er det «alle» bruker for søk? Apache Solr. Hva slags format får vi fra Solr? XML og JSON. Er det vanskelig å manipulere output fra Solr? Nei. Finnes det stabile integrasjoner tilgjengelige? Ja. Problem: Løst.

Fun fact: Først etter vår proof-of-concept, så vi at The Guardian har testet et lignende oppsett. Resten er historie, se produktsiden vår Newsfront.no

Vi ønsket noe kjappere, enklere, og mer HTML-basert.

Teknisk lærdom

Sjelden har et utviklingsløp godt så smertefritt som dette; de innovative områdene, viste seg å gi oss en solid plattform. Noen viktige småting måtte imidlertid løses: For å oppretteholde god SEO med Angular, må man vedlikeholde en statisk versjon. De verktøyene man på dette tidspunktet hadde for slikt, feilet når man ikke hadde JS på i nettleseren. Vi bestemte oss for å støtte nettlesere uten JavaScript (i brukervennlighetens navn!), og lagde et bibliotek for dette.

Problemer som ble mer tidkrevende, var implementasjonen av medieoppsettet i Drupal backend. Verken Scald eller Media-modulen gir en førsteklasses utvikleropplevelse. Her ønsker vi å bidra mer på sikt. I våre tester med WordPress som backend, fant vi at det var mer jobb å gjøre på Solr-fronten, og mindre tweaks i backend.

Et annet tilbakevendende tema, var datamodellskjema for Solr; hvordan skal vi indeksere objekter som ikke ligner på artikler eller sider? Vi endte med å heller benytte flere ulike indekser for meta data. Da kan én indeks tømmes uten at det påvirker andre, og strukturen i Solr forblir logisk.

Oppsummert

Vi ser fram til å videreutvikle produktet, og lager nå alt fra spennende spesialmaler, til hippe sosiale integrasjoner. Kombinasjonen med et solid CMS i bunnen en super rask frontend, har gjort produktet til en fryd å bygge!

For å sjekke ut Newsfront med standardoppsett, ta en titt på webmagasinet Frontmag.

Dersom du er interessert i å bruke Angular.js med Solr, sjekk ut integrasjonsmodulen vår: Solstice.

Per April 2016 har vi nå 12 norske magasiner og aviser på løsningen - og mange interesserte. Synes du dette er interessant? 

Vår kompetanse - din fordel!

Erfaringen fra arbeid med spesialbygged annonseplattform for Schibsted - og nært samarbeid med flere aviser og magasiner gjør at du som kunde hos oss drar nytte av mange års arbeid og opparbeidet kompetanse. 

bjerknes-browser.png