Presentasjon av Newsfront. Case study med Drupal, Angular og Solr
-
Upload
frontkomnorway -
Category
Technology
-
view
1.507 -
download
3
description
Transcript of Presentasjon av Newsfront. Case study med Drupal, Angular og Solr
![Page 1: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/1.jpg)
D7 + API + AngularDrupalCamp Oslo 2013
![Page 2: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/2.jpg)
Henrik Akselsen
DeveloperMostly backend@FrontHenrik
![Page 3: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/3.jpg)
Om Frontkom
![Page 4: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/5.jpg)
Våre kontorer
Fredrikstad, Norway Funchal, Portugal
![Page 6: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/6.jpg)
“Vi trenger en webløsning for
magasinet vårt”- Flere kunder
![Page 7: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/7.jpg)
Case: Newsfront= Frontend for magasiner
![Page 8: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/8.jpg)
Prinsipper
![Page 9: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/9.jpg)
Prinsipper
KJAPP
GOD ADMIN
APIENKEL THEMING
![Page 10: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/10.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/11.jpg)
DecouplingRett verktøy til rett jobb
![Page 12: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/12.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/13.jpg)
Flat HTML?WGET + RSYNC (tenk: Jekyll møter Boost)
![Page 14: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/14.jpg)
Newsfront (v0.1)
![Page 15: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/15.jpg)
API-basert!Power to the client
![Page 16: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/16.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/17.jpg)
Whoops, vi har allerede et API!
Solr som database
![Page 18: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/19.jpg)
JSON fra Solr
![Page 20: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/20.jpg)
FrontendAngular.js
![Page 21: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/21.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/22.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/23.jpg)
Markup med Angular
![Page 24: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/24.jpg)
Speed
![Page 25: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/25.jpg)
Speed
![Page 26: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/26.jpg)
Frontend candyGrunt!
Phantom.js!
![Page 27: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/27.jpg)
Snacks
![Page 28: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/28.jpg)
Admin
![Page 29: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/29.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/30.jpg)
Responsive preview, Drupal
![Page 31: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/31.jpg)
Summa summarum
![Page 32: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/32.jpg)
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](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/33.jpg)
One more thing….
![Page 34: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/34.jpg)
Frontmag
![Page 35: Presentasjon av Newsfront. Case study med Drupal, Angular og Solr](https://reader031.fdocuments.ec/reader031/viewer/2022020122/54919bd7ac795953288b4599/html5/thumbnails/35.jpg)
THX@frontkom
@fronthenrik@perandre
www.newsfront.nowww.frontmag.no