presentation of newsfront. case study using drupal, angular and solr

D7 + API + AngularDrupalCamp Oslo 2013

Henrik Akselsen

DeveloperMostly backend@FrontHenrik

Om Frontkom

Per André RønsenCIO/Chief Innovation Officer

Fredrik PausCOO/Project Manager

Thor André GretlandSupport & Training

Geir GullandCEO / Web strategist

Frank GjertsenWeb Designer

Élio CróWeb Developer

Roberto OrnelasCTO Senior developer

Hélder MendesWeb Designer

Elisabeth GullandAccountant

Henrik AkselsenJS/Mobile UX

Jan-Helge HansenInfrastructure / support

Fábio NevesWeb developer

Marco Fernandes Senior Web developer

Bruno CamposWeb developer

WilmaQA Engineer ;)

Våre kontorer

Fredrikstad, Norway Funchal, Portugal

“Vi trenger en webløsning for

magasinet vårt”- Flere kunder

Case: Newsfront= Frontend for magasiner

Prinsipper

Prinsipper

KJAPP

GOD ADMIN

APIENKEL THEMING

Drupal 7

★ God på admin/backend. The best.™

★ Avhengig av caching for å være kjapp // Finnes bedre verktøy for API // Ikke sterk på kjapp theming (no Twig)

GOD ADMIN

DecouplingRett verktøy til rett jobb

Best of breed for hver del = Prinsippene ivaretas + unngå SPOF*

I’m frontend!

I’m backend!

Flat HTML?WGET + RSYNC (tenk: Jekyll møter Boost)

Newsfront (v0.1)

API-basert!Power to the client

Arkitektur backend

Decoupled, performant, stable & nice

Site 1Admin repo

Site 2

APIClient repo

Oh Yeah™

Whoops, vi har allerede et API!

Solr som database

Solr som db: Why?

1. Brukes for søk, ingen ny teknologi2. Stabil Drupal-integrasjon ut av boksen3. Solr er rask 4. Skalerer (testet med benchmarks)5. Enkel hosting med websolr.com6. Viser seg at The Guardian har gjort noe

lignende

… vi gjorde noen POC, og: det funka!

JSON fra Solr

FrontendAngular.js

Rammeverk: Angular.js

MVC for frontend!

Når velger vi Angular.js?

● For moderne frontend-heavy prosjekter● Kan brukes direkte mot API● Ekstrem fleksibilitet, men enkelt● Når man allerede har en backend

Hvorfor Angular?

1. Vi trengte ingen serverbasert løsning (en annen app tar seg av betalingsmur etc)

2. “HTML for web apps”: Enkelt3. Angular har sterk community backing (+

Google)4. Ser ut til å “vinne” over Ember.js. Smartere

enn Backbone for store apps.5. Kjent og kjært: Vi har allerede brukt Angular

for andre ting

Markup med Angular

Speed

Speed

Frontend candyGrunt!

Phantom.js!

Snacks

Admin

DrupalFokus på redaktør

Få modulerMange små features

WorkbenchScald

Drupal på sitt beste

Responsive preview, Drupal

Summa summarum

ResultatSupersnappy

Lave serverutgifterEnkel å videredesigne

No VarnishAPI for tredjepart

Deilig Drupal backend SaaS

Bonus: Frontend funker med WP++

One more thing….

Frontmag

THX@frontkom

@fronthenrik@perandre

www.newsfront.nowww.frontmag.no