'A Headed goal for SSE Airtricity League with Headless Drupal' - Monsoon Consulting

1
A HEADED GOAL FOR
SSE AIRTRICITY LEAGUE
WITH HEADLESS DRUPAL!

Our Headless Journey
Daniel Walsh
Solution Architect
Archie Vasyatkin
Drupal Developer
Ross McHugh
Angular Developer

PROJECT BACKGROUND
Promote, Enhance, Attendances, Interest

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

Key Challenges
•Aggressive Deadline
•Parallel Development
•Expertise Challenge
•Content Challenge
•Logistics Challenge

Why Headless for LOI?
•Multiple data sources
•Unique frontend
•Responsiveness and Real Time
•Scalability for traffic peaks
•Roadmap & Reusability

Football Management
System
- Competitions
- Clubs
- Teams
- Players
- Officials
- Matches
- Statistics
- Tables
Multiple data sources
Content Management
System
- News
- Videos
- Pages
- Instagram
- Match Previews
- Match Reports

FMS Web Services - Analysis
• data.service::getAmateurTable
• data.service::getAmateurTables
• data.service::getClubFixtures
• data.service::getClubTeamsByClubId1
• data.service::getClubsBySearch1
• data.service::getCompetitionsByTeam
• data.service::getFairPlayTable
• data.service::getGroupsAndRoundsOfTournament1
• data.service::getMasterData
• data.service::getMatchById1
• data.service::getMatchDaysAndMatchesByMatchday2
• data.service::getMatchReportAndTickerInfos2
• data.service::getMatchesForLeaguesAll
• data.service::getMatchesForRoundOrGroup1
• data.service::getPlayerProfile
• data.service::getPreviouseXAndNextYMatchesOfTeam1
• data.service::getScorerTable
• data.service::getSubscribedCompetitions
• data.service::getTeamFixtures1
• data.service::getTeamProfileBase
• data.service::getTeamSquadForSeason
• data.service::getTicker

Interface Design
“Potentially” set UI designers &
front-end developers free!

AngularJS - What & Why
A JavaScript MVC Framework used to
create single page, data driven applications.
● Multiple Data Sources
● Live Match Centre
● Mobile App

Some AngularJS Features
● MVC
● Routing
● Services
● Templates - <h1>{{$scope.pageTitle}}</h1>
● Data-binding
● Directives
● Filters
● Dependency Injection
● Modular

AngularUI Bootstrap
● Bootstrap components written in pure AngularJS
by the AngularUI Team.

<html ng-app="loi">
<head>
...
<script src="//cdn.com/../angular.js"></script>
<script src="/lib/../angular-route.js"></script>
</head>
<body ng-controller="mainController">
<header ng-include="'/partials/header.html'"></header>
<input ng-model="yourName" />
<h1>{{yourName}}</h1>
</body>
</html>
Sample Code
GETTING STARTED...

loi.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/view/home.html',
controller: 'homeController'
})
.when('/competition/:seoName/id-:compId', {
templateUrl: 'views/comp.html',
controller: 'compCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Sample Code
ROUTING...

<div ng-repeat="item in items">
<img ng-if="item.imgUrl" src="{{item.imgUrl}}"
alt="{{item.title}}">
</div>
<matches-table matches-data="compCtrl.matches"
fixtures="true" results="true"
full-table="true"></matches-table>
Sample Code
DIRECTIVES

Common AngularJS Gotchas...
● CORS - enable-cors.org
● Dependency Injection & code minification
app.controller("MyCtrl", function($scope){...
app.controller("MyCtrl", ['$scope', function($scope){...
● Pretty URLs
http://example.com/#/about

Common AngularJS Gotchas
● Using jQuery?
● SEO & Social Sharing
prerender.io
github.com/prerender/prerender
● Aggressive browser caching - deployments
example.com/assets/template.html?1030201017

Headless Drupal
Standard Content Management Capabilities
News, Videos, Pages, Instagram, Match Previews & Reports
● CMS Editing
● ACL, Users & Authentication

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.

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.

CMS REST Services
● Retrieving Data
● Retrieving Aggregated Data
● Content create/update/delete

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

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.

Useful links
● https://www.drupal.org/docs/8/core/modules/rest/over
view

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

Headless Architecture Learnings
• Headless for the right scenario
• Same level of effort, different problems!
•Relationships between foreign entities an
architectural challenge
• Cache is key

'A Headed goal for SSE Airtricity League with Headless Drupal' - Monsoon Consulting

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 'A Headed goal for SSE Airtricity League with Headless Drupal' - Monsoon Consulting

Similar to 'A Headed goal for SSE Airtricity League with Headless Drupal' - Monsoon Consulting (20)

Recently uploaded

Recently uploaded (20)

'A Headed goal for SSE Airtricity League with Headless Drupal' - Monsoon Consulting