Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

35
D7 + API + Angular DrupalCamp Oslo 2013

description

Presentasjon av Newsfront, en publiseringsløsning for aviser og magasiner bygget for lynkjapp navigering på mobile enheter.

Transcript of Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Page 1: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

D7 + API + AngularDrupalCamp Oslo 2013

Page 2: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Henrik Akselsen

DeveloperMostly backend@FrontHenrik

Page 3: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Om Frontkom

Page 4: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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 ;)

Page 5: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Våre kontorer

Fredrikstad, Norway Funchal, Portugal

Page 6: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

“Vi trenger en webløsning for

magasinet vårt”- Flere kunder

Page 7: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Case: Newsfront= Frontend for magasiner

Page 8: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Prinsipper

Page 9: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Prinsipper

KJAPP

GOD ADMIN

APIENKEL THEMING

Page 10: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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

Page 11: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

DecouplingRett verktøy til rett jobb

Page 12: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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

I’m frontend!

I’m backend!

Page 13: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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

Page 14: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Newsfront (v0.1)

Page 15: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

API-basert!Power to the client

Page 16: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Arkitektur backend

Decoupled, performant, stable & nice

Site 1Admin repo

Site 2

APIClient repo

Oh Yeah™

Page 17: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Whoops, vi har allerede et API!

Solr som database

Page 18: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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!

Page 19: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

JSON fra Solr

Page 20: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

FrontendAngular.js

Page 21: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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

Page 22: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

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

Page 23: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Markup med Angular

Page 24: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Speed

Page 25: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Speed

Page 26: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Frontend candyGrunt!

Phantom.js!

Page 27: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Snacks

Page 28: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Admin

Page 29: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

DrupalFokus på redaktør

Få modulerMange små features

WorkbenchScald

Drupal på sitt beste

Page 30: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Responsive preview, Drupal

Page 31: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Summa summarum

Page 32: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

ResultatSupersnappy

Lave serverutgifterEnkel å videredesigne

No VarnishAPI for tredjepart

Deilig Drupal backend SaaS

Bonus: Frontend funker med WP++

Page 33: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

One more thing….

Page 34: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

Frontmag

Page 35: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr

THX@frontkom

@fronthenrik@perandre

www.newsfront.nowww.frontmag.no