20th Oct 2017 - Daniel Walsh, Ross McHugh & Archie Vasyatkin present on our project with the SSE Airtricity League.
Video - https://youtu.be/UqWF_eeE9jw
Through the implementation of 25 REST web services within an AngularJS Service Architecture, the SSE Airtricity League delivers a lightning fast experience for Irish football fans around the globe.
Scalability is crucial with “Live Scores” in place for all games, ensuring fans are updated minute by minute on match progress with the help of Varnish caching servers.
Powering the dynamic AngularJS frontend is a Drupal 8 instance which allows journalists to publish news, videos, galleries, Instagram posts and content to fans. A ‘Football Management System’ implemented by the Germany FA for the FAI delivers all content related to competitions, matches, clubs, teams, players, statistics and live scores.
The end result is a seamless integration of the two data sources, providing supporters all the information they need in one place to keep up to date on their favourite teams!
5. Digital Vision & Roadmap
• FAI strategic implementation of a Football
Management System (FMS) built by the
German FA
• Roadmap to onboard SSE Airtricity League,
Continental Women’s National League and
Third Level Football and develop websites
• Roadmap to create mobile apps in the future
15. AngularJS - What & Why
A JavaScript MVC Framework used to
create single page, data driven applications.
● Multiple Data Sources
● Live Match Centre
● Mobile App
25. Why Drupal for Service Driven
Applications
Benefits
● One of the best solutions for content management on
market.
● All required features coming out of the box.
● Doesn’t require any programming skills for simple
sites.
● Easily adjustable for multiple purposes.
● Can be easily converted into full site.
● Built-in cache.
26. How to configure Headless
Drupal
● Create needed content types.
● Enable core “RESTful Web Services” module.
● Create view and view display of type “REST Export”.
● Create needed view exposed filters.
● Configure permissions.
27. CMS REST Services
● Retrieving Data
● Retrieving Aggregated Data
● Content create/update/delete
28. 1. Gets rows properly if rendering view programmatically.
$view->execute();
foreach ($view->result as $row_index => $row) {
$view->row_index = $row_index;
$rows[] = $view->rowPlugin->render($row);
}
2. Returns JSON formatted response
$content['relatedNews'] = loi_page_controllers_get_view(
'news',
'rest_export_2',
[implode('+', $related_news_ids)],
3,
0);
return new JsonResponse($content);
3. Sets redirect back to angular on node submission.
if (isset($form['#back_to_angular_url'])) {
$response = new TrustedRedirectResponse($form['#back_to_angular_url']);
$form_state->setResponse($response);
}
Sample Code
29. Common Headless
Drupal Gotchas
● Use views cache.
● Filter (whitelist) any parameters you accepting with
GET requests.
● Properly configure access to site sections.
● Aggregate results together where possible.
● Unify where possible.
● Create documentations.
● Use front-end links for linking CMS and Front-end.
44. Results
• Site went live on schedule ahead of first game of
season
• In the 6 months since the site launched, there have
been over 2 million unique pageviews and
consistently strong engagement with content
across premier and first division leagues.
•High traffic peaks during games for live scores
45. Headless Architecture Learnings
• Headless for the right scenario
• Same level of effort, different problems!
•Relationships between foreign entities an
architectural challenge
• Cache is key