SlideShare a Scribd company logo
1 of 14
Download to read offline
DRUPAL AND MOBILE
Separating the CMS from the UX
The UI is no longer a coat of paint, and the monolithic client/server web application is going away. Today, most web pages include as many as 50 sites, and web
services create more traffic between servers than between the clients and the server apps. Mobile applications will carry these changes even farther. The UX is being
separated from the server, and that is a good thing.
WHY DRUPAL?
• Packages LAMP and MVC
• Delivers Formatted Content
• Conceived as a Message Board During
the Early Days of REST & Mobile
• Themes Have Always Been an Issue,
even the AdminTheme i86 CPU, Ethernet, Internet
VM/Hypervisor
OS/File System
Web Server RDBMS
PHP Application
Drupal, like many LAMP CMS, has been a powerful and convenient tool for implementing traditional, monolithic web applications. Drupal combines the flexibility of a
framework with the reliability of a commercial product, and all-in-one solution.

The problem it solves, however, has bifurcated.
THE OTHER HALF
• jQuery,AngularJS, Backbone.js
• PhoneGAP, WSDL,Azure/AWS APIs
The worldwide web has always been a client/server model. The client side has its architecture, too. However, it was originally a very lightweight architecture, stateless
with two-dimensional heterogeneity.

Today, the client has far more power than the entire client/server system did when HTTP was conceived. Today, one datacenter is bigger than the Internet was in 1980.
Today’s web page often consists of content from more than a dozen web servers.

The model has adapted, and now it changes again.
THEME
Thanks to Jen Lampton (jenlampton.com)
theme()
Theme Hooks
Theme Hook
Suggestions
Theme
Registry
hook_theme()
Templates
Template Preprocess
Preprocess Functions
Process Functions
Theme
Functions
drupal_render()
Variables
hook_page_alter()
hook_theme_registry_alter()
render()
render_element
Theme Override
As the core of the UI, theming has been complicated. So much, that it created a new role in development, the themer.

Anything as involved as Drupal will have inherent complexity, and the organic nature of Drupal development has created a system that is difficult to characterize and
model. Therefore, it is harder to learn and use.
DRUPAL 8THEME INTEGRATION
• Classic is Deprecated
• Twig/Symfony Templating Engine &
PHP Framework
• Headless Drupal
Drupal 8 addresses this issue from the perspective of the Drupal developer by creating yet another abstraction layer. Twig provides a means to reduce the volume of
CSS (‘div hell’) but does not address the underlying problem — the ever-increasing depth and complexity of the client. For a Drupal developer, the mobile client is farther
from the server than any other. This is due to the nature of the device — size, orientation, and the gestures used to interact (the UX) — and, more importantly, the context
behind the user’s intent. Mobile may have the user anywhere doing anything (e.g., driving a car), which creates entirely new use cases and greater development
complexity.

Rather than add more complexity to address every use case, Drupal 8 formalizes an approach taken by several Drupal 7 modules that output content as JSON objects
instead of HTML/CSS formatted content. Referred to as ‘headless Drupal’, this makes Drupal a web services provider. The UX problem is solved by removing it. More
about this later.
SERVER-SIDE RESPONSIVE DESIGN
• A Compromise of UX and
Content Management
• Does not Accommodate
Mobile Apps or IoT
• Convolutes the Work of
Designer, Coder, andThemer
These server-side tools such as Twig try to manage the continuity of the content amidst the frenetic fashion of the User Experience (UX). They succeed only through the
frustrated efforts of the Coder, Themer, and Designer. 

The developer is forced to deal with a myriad of derivatives — the Baskin Robbins of content. The designer is forced to deal with the developer. And the ‘themer’ is
created to deal as an intermediary between the developer and the designer. Who wants to be a themer?

Responsive design works because many talented and hard working people make this awkward arrangement work. It has some advantages, too, such as potentially
optimizing network I/O. However, it still makes the web experience a monolithic design and implementation effort.
HEADLESS DRUPAL
• https://groups.drupal.org/headless-drupal
• JS - https://www.drupal.org/project/js
• Restful - https://www.drupal.org/node/1860564
• RestWS - https://www.drupal.org/project/restws
One way to deal with a problem is to delegate it away. By taking the client UX out of Drupal, it can move to where others may find opportunity in taking over that
development role.

Headless Drupal is an awkward metaphor for a web services application. A better metaphor would be Faceless Drupal. Even that is misleading. From the admin
perspective, everything is still there, and the intelligence of Drupal — content and user management — is even more prominent. Missing is the developer’s headache of
having to anticipate the UX. Call it headache-less Drupal. There are many efforts in this area:

• JS is a High performance JavaScript callback handler

• Restful, found on GitHub, github.com/gizra/restful

• RestWS, Restful Web Services, uses the Entity API to provide resources representations for all entity types.

I have talked to many developers, who quietly admit that the theme and UI are the biggest pains. Reducing client I/O to JSON objects would make many Drupal
development efforts idilic.
JSON OUTPUT FOR A UX
Backbone.JS - http://backbonejs.org
Addy Osmani
addyosmani.com
Backbone.js is a good example for a client-side UX. Actually, it does not reduce the complexity of the problem and still requires the web server to deliver the entire client.
However, it creates a clean division of content/user management and UX management. Issues between the Designer and the Developer come down to JSON object
structures and state maintenance. The trade-off for using Backbone is a larger initial payload.

Mobile applications address that trade-off.
WHY MOBILE?
• Closer to theTarget Audience
• Fashion - Branding and the User
Experience
• Fast Moving yet Sticky
• Better Security
• More ways to maintain State
Mobile goes beyond Backbone.js by dumping a HUGE payload on the client in the form of an app. In this case, the user expects it, as it is a one-time dump, known as
an app store download. This opens new horizons of UX with native development environments, compiled run-time code, device-specific tools & libraries, and huge
development ecosystems. Development objectives such as maintaining state, network connectivity, and security are better managed.

Mobile is where the users are, and mobile is hot. Mobile apps can provide a more intimate branding experience, and it can be fast and sticky at the same time. For the
Developer, apps are an easier way to maintain state and provide security.

Business-wise, there are many mobile developers and most are design-focused. They are looking for the best ways to bring content to their customers. See http://
blog.contractiq.com/top-50-custom-mobile-application-development-companies-a-curated-list-from-quora/
EXAMPLE
• NSJSONSerialization class
• E.g., http://github.com/CMDT/DrupalCMS
• Drupal 8 iOS & Android SDK — http://drupalsdk.com
• Kyle Browning’s Drupal iOS SDK for Drupal 7 — https://github.com/
kylebrowning/drupal-ios-sdk
http://crackberry.com/android
Until recently, Drupal and mobile apps were custom work, requiring REST code for both the clients and the server. This made the abstraction layer between the content
and the UX a custom design effort, which added time and cost to the development and led to ‘creative differences’ between the Drupal and the mobile developers.

Apple recently added JSON handling to iOS, eliminating the need for various 3rd party libraries or customer interfaces. The Drupal community is active in using this, too.
There are iOS and Android SDKs for Drupal 7 and 8.
WHY NOT MOBILE?
• Another Development Environment
• Another Development Environment
• Another Development Environment
Drupal packaged the web experience for developers to provide a stable and relatively secure framework. As long as the UX was secondary to the content, this worked.
Once the UX takes precedence, Drupal’s limitations become a developer’s dilemma. From the perspective of a monolithic development, this is a huge step function.
WHY NOTTRY?
• Another Development Partner
• Another Development Partner
• Another Development Partner
However, there are huge developer communities for mobile, far more than for Drupal. Mobile is a great opportunity for Drupal developers to partner with mobile. Mobile
developers tend to be focused on the UI and the UX and need the back end expertise to differentiate their products. In other words, they need you.
DRUPAL’S ROLE
• Content Modeling and ManagementTools
• Content Authoring and WorkflowTools
• Users, Roles, and Permissions
• Admin and ‘Classic User’ UIs
With Mobile, Drupal is now more powerful. As long as content needs to be managed, Drupal will provide the tools. Also, users much be managed and so must the site.
The current model still provides the classic PC browser UI, too.
–David Richo
“Things change, so get used to it.”
In three years, Drupal sites will be talking to more non-browser clients than traditional browser clients. Mobile has changed the market, and Drupal will change with it.

More Related Content

What's hot

Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentationcolberding
 
The Flash to HTML5 Opportunity
The Flash to HTML5 OpportunityThe Flash to HTML5 Opportunity
The Flash to HTML5 OpportunityThomas Burleson
 
Developing Apps with CA Plex + CM WebClient
Developing Apps with CA Plex + CM WebClientDeveloping Apps with CA Plex + CM WebClient
Developing Apps with CA Plex + CM WebClientCM First Group
 
JSF (ADF) Case Studies Paper
JSF (ADF) Case Studies PaperJSF (ADF) Case Studies Paper
JSF (ADF) Case Studies PaperMichael Fons
 
CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany CM First Group
 
J query mobile tech talk
J query mobile tech talkJ query mobile tech talk
J query mobile tech talkwoliverj
 
Optimizing Browser Rendering
Optimizing Browser RenderingOptimizing Browser Rendering
Optimizing Browser Renderingmichael.labriola
 
Den Multi Device Konsumenten zufrieden stellen …
Den Multi Device Konsumenten zufrieden stellen …Den Multi Device Konsumenten zufrieden stellen …
Den Multi Device Konsumenten zufrieden stellen …Connected-Blog
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Ivano Malavolta
 
CM WebClient for CA Plex
CM WebClient for CA PlexCM WebClient for CA Plex
CM WebClient for CA PlexCM First Group
 
CM WebClient Datasheet
CM WebClient DatasheetCM WebClient Datasheet
CM WebClient DatasheetCM First Group
 
AngularJS - A Powerful Framework For Web Applications
AngularJS - A Powerful Framework For Web ApplicationsAngularJS - A Powerful Framework For Web Applications
AngularJS - A Powerful Framework For Web ApplicationsIdexcel Technologies
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo MobileAndrew Ferrier
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 

What's hot (20)

The ABC of Joomla Community
The ABC of Joomla CommunityThe ABC of Joomla Community
The ABC of Joomla Community
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
The Flash to HTML5 Opportunity
The Flash to HTML5 OpportunityThe Flash to HTML5 Opportunity
The Flash to HTML5 Opportunity
 
Tech Stack - Angular
Tech Stack - AngularTech Stack - Angular
Tech Stack - Angular
 
Developing Apps with CA Plex + CM WebClient
Developing Apps with CA Plex + CM WebClientDeveloping Apps with CA Plex + CM WebClient
Developing Apps with CA Plex + CM WebClient
 
JSF (ADF) Case Studies Paper
JSF (ADF) Case Studies PaperJSF (ADF) Case Studies Paper
JSF (ADF) Case Studies Paper
 
CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany
 
J query mobile tech talk
J query mobile tech talkJ query mobile tech talk
J query mobile tech talk
 
Optimizing Browser Rendering
Optimizing Browser RenderingOptimizing Browser Rendering
Optimizing Browser Rendering
 
Drupal Center of Excellence
Drupal Center of ExcellenceDrupal Center of Excellence
Drupal Center of Excellence
 
Den Multi Device Konsumenten zufrieden stellen …
Den Multi Device Konsumenten zufrieden stellen …Den Multi Device Konsumenten zufrieden stellen …
Den Multi Device Konsumenten zufrieden stellen …
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 
Jd greece-2012-joomla-community-abc
Jd greece-2012-joomla-community-abcJd greece-2012-joomla-community-abc
Jd greece-2012-joomla-community-abc
 
CM WebClient for CA Plex
CM WebClient for CA PlexCM WebClient for CA Plex
CM WebClient for CA Plex
 
CM WebClient Datasheet
CM WebClient DatasheetCM WebClient Datasheet
CM WebClient Datasheet
 
AngularJS - A Powerful Framework For Web Applications
AngularJS - A Powerful Framework For Web ApplicationsAngularJS - A Powerful Framework For Web Applications
AngularJS - A Powerful Framework For Web Applications
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
 
iAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UXiAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UX
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 

Similar to Drupal for Mobile

Navigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksNavigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksSeasiaInfotech2
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx75waytechnologies
 
DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)
DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)
DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)DrupalCape
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022Katy Slemon
 
Drupal%2 c mobility and m2serve
Drupal%2 c mobility and m2serveDrupal%2 c mobility and m2serve
Drupal%2 c mobility and m2servelittleMAS
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxWhy Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxScala Code
 
Drupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docxDrupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docxMarketingsrijan
 
Drupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docxDrupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docxMarketingsrijan
 
Why Enterprises Choose Drupal for Futuristic Web App Development?
Why Enterprises Choose Drupal for Futuristic Web App Development?Why Enterprises Choose Drupal for Futuristic Web App Development?
Why Enterprises Choose Drupal for Futuristic Web App Development?Helios Solutions
 
Migrating a Vignette Website to Drupal: Story of Multnomah County
Migrating a Vignette Website to Drupal: Story of Multnomah CountyMigrating a Vignette Website to Drupal: Story of Multnomah County
Migrating a Vignette Website to Drupal: Story of Multnomah CountyAcquia
 
The Enterprise Case for Node.js
The Enterprise Case for Node.jsThe Enterprise Case for Node.js
The Enterprise Case for Node.jsNodejsFoundation
 
5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdfMverve1
 
JavaScript Frameworks Popularity
JavaScript Frameworks PopularityJavaScript Frameworks Popularity
JavaScript Frameworks PopularityAlbiorix Technology
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleIT Arena
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsRapidValue
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
Popular Web Frameworks for web Development
Popular Web Frameworks for web DevelopmentPopular Web Frameworks for web Development
Popular Web Frameworks for web DevelopmentChinmayee Behera
 
Future Trends of Drupal Development for 2024.pdf
Future Trends of Drupal Development for 2024.pdfFuture Trends of Drupal Development for 2024.pdf
Future Trends of Drupal Development for 2024.pdfJPLoft Solutions
 

Similar to Drupal for Mobile (20)

How backbone.js is different from ember.js?
How backbone.js is different from ember.js?How backbone.js is different from ember.js?
How backbone.js is different from ember.js?
 
Navigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksNavigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development Frameworks
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
 
DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)
DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)
DrupalCon Chicago 2011 ReportBack (11/03/30 - G. Bedford)
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022
 
Drupal%2 c mobility and m2serve
Drupal%2 c mobility and m2serveDrupal%2 c mobility and m2serve
Drupal%2 c mobility and m2serve
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxWhy Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptx
 
Drupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docxDrupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docx
 
Drupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docxDrupal 10 Compatibility with Emerging Tech.docx
Drupal 10 Compatibility with Emerging Tech.docx
 
Why Enterprises Choose Drupal for Futuristic Web App Development?
Why Enterprises Choose Drupal for Futuristic Web App Development?Why Enterprises Choose Drupal for Futuristic Web App Development?
Why Enterprises Choose Drupal for Futuristic Web App Development?
 
Migrating a Vignette Website to Drupal: Story of Multnomah County
Migrating a Vignette Website to Drupal: Story of Multnomah CountyMigrating a Vignette Website to Drupal: Story of Multnomah County
Migrating a Vignette Website to Drupal: Story of Multnomah County
 
The Enterprise Case for Node.js
The Enterprise Case for Node.jsThe Enterprise Case for Node.js
The Enterprise Case for Node.js
 
5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf
 
JavaScript Frameworks Popularity
JavaScript Frameworks PopularityJavaScript Frameworks Popularity
JavaScript Frameworks Popularity
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
Popular Web Frameworks for web Development
Popular Web Frameworks for web DevelopmentPopular Web Frameworks for web Development
Popular Web Frameworks for web Development
 
Future Trends of Drupal Development for 2024.pdf
Future Trends of Drupal Development for 2024.pdfFuture Trends of Drupal Development for 2024.pdf
Future Trends of Drupal Development for 2024.pdf
 

More from littleMAS

Drupal 8 Point 1 & Membership Survey
Drupal 8 Point 1 & Membership SurveyDrupal 8 Point 1 & Membership Survey
Drupal 8 Point 1 & Membership SurveylittleMAS
 
Automating Drupal Migrations
Automating Drupal MigrationsAutomating Drupal Migrations
Automating Drupal MigrationslittleMAS
 
Drupal 8 and iOS - an Open Source App
Drupal 8 and iOS - an Open Source AppDrupal 8 and iOS - an Open Source App
Drupal 8 and iOS - an Open Source ApplittleMAS
 
Drupal 8 Spinathon
Drupal 8 SpinathonDrupal 8 Spinathon
Drupal 8 SpinathonlittleMAS
 
Drupal 8 Beta on GoDaddy Notes
Drupal 8 Beta on GoDaddy NotesDrupal 8 Beta on GoDaddy Notes
Drupal 8 Beta on GoDaddy NoteslittleMAS
 
DrupalCon LA 2015 Review
DrupalCon LA 2015 ReviewDrupalCon LA 2015 Review
DrupalCon LA 2015 ReviewlittleMAS
 
iOS RESTful Library for Drupal 8
iOS RESTful Library for Drupal 8iOS RESTful Library for Drupal 8
iOS RESTful Library for Drupal 8littleMAS
 
Build Mobile Apps Using PhoneGap and Drupal by Tyler Frankenstein
Build Mobile Apps Using PhoneGap and Drupal by Tyler FrankensteinBuild Mobile Apps Using PhoneGap and Drupal by Tyler Frankenstein
Build Mobile Apps Using PhoneGap and Drupal by Tyler FrankensteinlittleMAS
 

More from littleMAS (8)

Drupal 8 Point 1 & Membership Survey
Drupal 8 Point 1 & Membership SurveyDrupal 8 Point 1 & Membership Survey
Drupal 8 Point 1 & Membership Survey
 
Automating Drupal Migrations
Automating Drupal MigrationsAutomating Drupal Migrations
Automating Drupal Migrations
 
Drupal 8 and iOS - an Open Source App
Drupal 8 and iOS - an Open Source AppDrupal 8 and iOS - an Open Source App
Drupal 8 and iOS - an Open Source App
 
Drupal 8 Spinathon
Drupal 8 SpinathonDrupal 8 Spinathon
Drupal 8 Spinathon
 
Drupal 8 Beta on GoDaddy Notes
Drupal 8 Beta on GoDaddy NotesDrupal 8 Beta on GoDaddy Notes
Drupal 8 Beta on GoDaddy Notes
 
DrupalCon LA 2015 Review
DrupalCon LA 2015 ReviewDrupalCon LA 2015 Review
DrupalCon LA 2015 Review
 
iOS RESTful Library for Drupal 8
iOS RESTful Library for Drupal 8iOS RESTful Library for Drupal 8
iOS RESTful Library for Drupal 8
 
Build Mobile Apps Using PhoneGap and Drupal by Tyler Frankenstein
Build Mobile Apps Using PhoneGap and Drupal by Tyler FrankensteinBuild Mobile Apps Using PhoneGap and Drupal by Tyler Frankenstein
Build Mobile Apps Using PhoneGap and Drupal by Tyler Frankenstein
 

Recently uploaded

Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样umasea
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...soniya singh
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxnada99848
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWave PLM
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 

Recently uploaded (20)

Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptx
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 

Drupal for Mobile

  • 1. DRUPAL AND MOBILE Separating the CMS from the UX The UI is no longer a coat of paint, and the monolithic client/server web application is going away. Today, most web pages include as many as 50 sites, and web services create more traffic between servers than between the clients and the server apps. Mobile applications will carry these changes even farther. The UX is being separated from the server, and that is a good thing.
  • 2. WHY DRUPAL? • Packages LAMP and MVC • Delivers Formatted Content • Conceived as a Message Board During the Early Days of REST & Mobile • Themes Have Always Been an Issue, even the AdminTheme i86 CPU, Ethernet, Internet VM/Hypervisor OS/File System Web Server RDBMS PHP Application Drupal, like many LAMP CMS, has been a powerful and convenient tool for implementing traditional, monolithic web applications. Drupal combines the flexibility of a framework with the reliability of a commercial product, and all-in-one solution. The problem it solves, however, has bifurcated.
  • 3. THE OTHER HALF • jQuery,AngularJS, Backbone.js • PhoneGAP, WSDL,Azure/AWS APIs The worldwide web has always been a client/server model. The client side has its architecture, too. However, it was originally a very lightweight architecture, stateless with two-dimensional heterogeneity. Today, the client has far more power than the entire client/server system did when HTTP was conceived. Today, one datacenter is bigger than the Internet was in 1980. Today’s web page often consists of content from more than a dozen web servers. The model has adapted, and now it changes again.
  • 4. THEME Thanks to Jen Lampton (jenlampton.com) theme() Theme Hooks Theme Hook Suggestions Theme Registry hook_theme() Templates Template Preprocess Preprocess Functions Process Functions Theme Functions drupal_render() Variables hook_page_alter() hook_theme_registry_alter() render() render_element Theme Override As the core of the UI, theming has been complicated. So much, that it created a new role in development, the themer. Anything as involved as Drupal will have inherent complexity, and the organic nature of Drupal development has created a system that is difficult to characterize and model. Therefore, it is harder to learn and use.
  • 5. DRUPAL 8THEME INTEGRATION • Classic is Deprecated • Twig/Symfony Templating Engine & PHP Framework • Headless Drupal Drupal 8 addresses this issue from the perspective of the Drupal developer by creating yet another abstraction layer. Twig provides a means to reduce the volume of CSS (‘div hell’) but does not address the underlying problem — the ever-increasing depth and complexity of the client. For a Drupal developer, the mobile client is farther from the server than any other. This is due to the nature of the device — size, orientation, and the gestures used to interact (the UX) — and, more importantly, the context behind the user’s intent. Mobile may have the user anywhere doing anything (e.g., driving a car), which creates entirely new use cases and greater development complexity. Rather than add more complexity to address every use case, Drupal 8 formalizes an approach taken by several Drupal 7 modules that output content as JSON objects instead of HTML/CSS formatted content. Referred to as ‘headless Drupal’, this makes Drupal a web services provider. The UX problem is solved by removing it. More about this later.
  • 6. SERVER-SIDE RESPONSIVE DESIGN • A Compromise of UX and Content Management • Does not Accommodate Mobile Apps or IoT • Convolutes the Work of Designer, Coder, andThemer These server-side tools such as Twig try to manage the continuity of the content amidst the frenetic fashion of the User Experience (UX). They succeed only through the frustrated efforts of the Coder, Themer, and Designer. The developer is forced to deal with a myriad of derivatives — the Baskin Robbins of content. The designer is forced to deal with the developer. And the ‘themer’ is created to deal as an intermediary between the developer and the designer. Who wants to be a themer? Responsive design works because many talented and hard working people make this awkward arrangement work. It has some advantages, too, such as potentially optimizing network I/O. However, it still makes the web experience a monolithic design and implementation effort.
  • 7. HEADLESS DRUPAL • https://groups.drupal.org/headless-drupal • JS - https://www.drupal.org/project/js • Restful - https://www.drupal.org/node/1860564 • RestWS - https://www.drupal.org/project/restws One way to deal with a problem is to delegate it away. By taking the client UX out of Drupal, it can move to where others may find opportunity in taking over that development role. Headless Drupal is an awkward metaphor for a web services application. A better metaphor would be Faceless Drupal. Even that is misleading. From the admin perspective, everything is still there, and the intelligence of Drupal — content and user management — is even more prominent. Missing is the developer’s headache of having to anticipate the UX. Call it headache-less Drupal. There are many efforts in this area: • JS is a High performance JavaScript callback handler • Restful, found on GitHub, github.com/gizra/restful • RestWS, Restful Web Services, uses the Entity API to provide resources representations for all entity types. I have talked to many developers, who quietly admit that the theme and UI are the biggest pains. Reducing client I/O to JSON objects would make many Drupal development efforts idilic.
  • 8. JSON OUTPUT FOR A UX Backbone.JS - http://backbonejs.org Addy Osmani addyosmani.com Backbone.js is a good example for a client-side UX. Actually, it does not reduce the complexity of the problem and still requires the web server to deliver the entire client. However, it creates a clean division of content/user management and UX management. Issues between the Designer and the Developer come down to JSON object structures and state maintenance. The trade-off for using Backbone is a larger initial payload. Mobile applications address that trade-off.
  • 9. WHY MOBILE? • Closer to theTarget Audience • Fashion - Branding and the User Experience • Fast Moving yet Sticky • Better Security • More ways to maintain State Mobile goes beyond Backbone.js by dumping a HUGE payload on the client in the form of an app. In this case, the user expects it, as it is a one-time dump, known as an app store download. This opens new horizons of UX with native development environments, compiled run-time code, device-specific tools & libraries, and huge development ecosystems. Development objectives such as maintaining state, network connectivity, and security are better managed. Mobile is where the users are, and mobile is hot. Mobile apps can provide a more intimate branding experience, and it can be fast and sticky at the same time. For the Developer, apps are an easier way to maintain state and provide security. Business-wise, there are many mobile developers and most are design-focused. They are looking for the best ways to bring content to their customers. See http:// blog.contractiq.com/top-50-custom-mobile-application-development-companies-a-curated-list-from-quora/
  • 10. EXAMPLE • NSJSONSerialization class • E.g., http://github.com/CMDT/DrupalCMS • Drupal 8 iOS & Android SDK — http://drupalsdk.com • Kyle Browning’s Drupal iOS SDK for Drupal 7 — https://github.com/ kylebrowning/drupal-ios-sdk http://crackberry.com/android Until recently, Drupal and mobile apps were custom work, requiring REST code for both the clients and the server. This made the abstraction layer between the content and the UX a custom design effort, which added time and cost to the development and led to ‘creative differences’ between the Drupal and the mobile developers. Apple recently added JSON handling to iOS, eliminating the need for various 3rd party libraries or customer interfaces. The Drupal community is active in using this, too. There are iOS and Android SDKs for Drupal 7 and 8.
  • 11. WHY NOT MOBILE? • Another Development Environment • Another Development Environment • Another Development Environment Drupal packaged the web experience for developers to provide a stable and relatively secure framework. As long as the UX was secondary to the content, this worked. Once the UX takes precedence, Drupal’s limitations become a developer’s dilemma. From the perspective of a monolithic development, this is a huge step function.
  • 12. WHY NOTTRY? • Another Development Partner • Another Development Partner • Another Development Partner However, there are huge developer communities for mobile, far more than for Drupal. Mobile is a great opportunity for Drupal developers to partner with mobile. Mobile developers tend to be focused on the UI and the UX and need the back end expertise to differentiate their products. In other words, they need you.
  • 13. DRUPAL’S ROLE • Content Modeling and ManagementTools • Content Authoring and WorkflowTools • Users, Roles, and Permissions • Admin and ‘Classic User’ UIs With Mobile, Drupal is now more powerful. As long as content needs to be managed, Drupal will provide the tools. Also, users much be managed and so must the site. The current model still provides the classic PC browser UI, too.
  • 14. –David Richo “Things change, so get used to it.” In three years, Drupal sites will be talking to more non-browser clients than traditional browser clients. Mobile has changed the market, and Drupal will change with it.