presentation of newsfront. case study using drupal, angular and solr
DESCRIPTION
Presentasjon av Newsfront, en publiseringsløsning for aviser og magasiner bygget for lynkjapp navigering på mobile enheter. Bygget på Angular og Drupal og tilgjengelig som Software As A Service (SaaS)TRANSCRIPT
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