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)

1. D7 + API + Angular
DrupalCamp Oslo 2013

2. Henrik Akselsen
Developer
Mostly backend
@FrontHenrik

3. Om Frontkom

4. Per André Rønsen
Marco Fernandes
CIO/Chief Innovation Officer
Senior Web developer
Fredrik Paus
Élio Cró
Jan-Helge Hansen
COO/Project Manager
Web Developer
Infrastructure / support
Thor André Gretland
Roberto Ornelas
Support & Training
CTO Senior developer
Fábio Neves
Geir Gulland
Hélder Mendes
Bruno Campos
CEO / Web strategist
Web Designer
Web developer
Frank Gjertsen
Elisabeth Gulland
Wilma
Web Designer
Accountant
QA Engineer ;)
Henrik Akselsen
JS/Mobile UX
Web developer

5. Våre kontorer
Fredrikstad, Norway
Funchal, Portugal

6. “Vi trenger en
webløsning for
magasinet vårt”
- Flere kunder

7. Case: Newsfront
= Frontend for magasiner

8. Prinsipper

9. KJAPP
GOD ADMIN
Prinsipper
ENKEL
THEMING
API

10. Drupal 7
GOD ADMIN
★ 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)

11. Decoupling
Rett verktøy til rett jobb

12. I’m backend!
I’m frontend!
Best of breed for hver del = Prinsippene
ivaretas + unngå SPOF*

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

14. Newsfront (v0.1)

15. API-basert!
Power to the client

16. Arkitektur backend
Decoupled, performant, stable & nice
Oh Yeah™
Admin
repo
Site 1
API
Site 2
Client repo

17. Whoops, vi har allerede
et API!
Solr som database

18. Solr som db: Why?
1.
2.
3.
4.
5.
6.
Brukes for søk, ingen ny teknologi
Stabil Drupal-integrasjon ut av boksen
Solr er rask
Skalerer (testet med benchmarks)
Enkel hosting med websolr.com
Viser seg at The Guardian har gjort noe
lignende
… vi gjorde noen POC, og: det funka!

19. JSON fra Solr

20. Frontend
Angular.js

21. 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

22. Hvorfor Angular?
1. Vi trengte ingen serverbasert løsning (en
annen app tar seg av betalingsmur etc)
2. “HTML for web apps”: Enkelt
3. 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

23. Markup med Angular

24. Speed

25. Speed

26. Frontend candy
Grunt!
Phantom.js!

27. Snacks

28. Admin

29. Drupal
Fokus på redaktør
Få moduler
Mange små features
Workbench
Scald
Drupal på sitt beste

30. Responsive preview, Drupal

31. Summa summarum

32. Resultat
Supersnappy
Lave serverutgifter
Enkel å videredesigne
No Varnish
API for tredjepart
Deilig Drupal backend
SaaS
Bonus: Frontend funker med WP++

33. One more thing….

34. Frontmag

35. THX
@frontkom
@fronthenrik
@perandre
www.newsfront.no
www.frontmag.no