SlideShare a Scribd company logo
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Mobile apps
development for
Joomla
Learn | Connect | Share
Anibal Sánchez @anibal_sanchez
@extly
@joomgap
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Extly leading developer
● 15+ years dev experience
● Integrating Joomla since 2007
● Marketing Manager at Extensions
Directory (JED)
● Contributor at Joomla!
StackExchange (5000+)
● Contributor at Bug Squad
Aníbal Sánchez
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Abstract
Mobile web-based applications are the best choice for individual, small
and large businesses developers to provide a way to continue a website
experience. This alternative allows you to work directly in the mobile
environment with nothing but JavaScript and HTML / CSS, using
technologies such as PhoneGap, Ionic and AngularJS Framework. Thus, it
is possible to implement the technology stack most used and known in
the world to launch apps, simultaneously, on all major platforms, from
day one, with the same source code. In Joomla! context, web-based
mobile apps can be integrated with the content management system to
query or execute operations safely. In this session, we will discuss the
main topic , solutions, challenges and a case to introduce how to combine
available technologies for mobile development integrated with Joomla.
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Agenda
Welcome
Today’s stats
Definitions
JED Starter App
Talking to Joomla!
Conclusions
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Welcome to Joomorrowland
http://www.tomorrowland.com
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Welcome to Joomorrowland
● Joomla 4
● PHP 7
● Bootstrap 4
● Javascript ECMAScript 6
● AngularJS 2 (Typescript)
http://www.tomorrowland.com
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
… and we develop apps for Joomla!
http://www.joomgap.com/jwc15
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
WAIT….
WHAT ?
http://www.joomgap.com/jwc15
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Wait … what?
● Content navigation
● Search and browse
● Site management
● E-commerce apps
● Enterprise apps (MEAP)
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Today’s Stats
http://www.comscore.com/USMobileAppReport
The days of desktop dominance are over. Mobile has swiftly risen to become the leading
digital platform, with total activity on smartphones and tablets accounting for an
astounding 60 percent of digital media time spent in the U.S. The fuel driving mobile’s
relentless growth is primarily app usage...
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Today’s Stats
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Definitions
Joomla! is a platform to built websites
● A content management system.
● Evolving from desktop usage.
● Supports responsive design.
● And, already supports mobile apps.
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
JED Starter App - Objectives
A prototype to show content navigation (smallest app, 2MB).
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
JED Starter App - A prototype
http://www.joomgap.com/jwc15
● Fork JGJEDStarter repo
● Create an account (or log in) in
PhoneGap build
● Connect your github account and
create a new App
● Pull JGJEDStarter source code and
build
● Download the new App and test it!
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
A mobile web-based boilerplate
http://www.joomgap.com/jwc15
● Fork JGBoilerplate repo
● Create an account (or log in) in
PhoneGap build
● Connect your github account and
create a new App
● Pull JGBoilerplate source code and
build
● Download the new App and test it!
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
JED Starter App
● Mobile web-based app
● HTML, CSS and JavaScript
● Cordova - PhoneGap
● AngularJS Framework (optional)
● Ionic Framework (optional)
http://www.joomgap.com/jwc15
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Cordova - PhoneGap
Easily create apps using the
web technologies you know
and love: HTML, CSS and
JavaScript. (+Plugins)
Target multiple platforms with
one code base.
Free and open source.
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
AngularJS / Ionic Framework
HTML enhanced for web apps!
Create mobile apps with the web technologies
you love. Free and open source, Ionic offers a
library of mobile-optimized HTML, CSS and JS
components, gestures and tools for building
highly interactive apps. Built with Sass and
optimized for AngularJS.
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
A new utility belt for developers
● HTML / CSS / JS Editor
● Local Debugging
○ Chrome DevTools
○ FireBug
● Remote Debugging
○ Chrome DevTools
○ GapDebug
● Device simulation
… a Javascript world ruled by Node.js, npm, Grunt, Bower, etc, etc
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Local vs Remote Development
● Local Packaging
○ Android
○ Apple iOS *
● Remote Packaging
○ PhoneGap Build
○ AppGyver, trigger.io, etc.
● Other services
○ Firebase
○ AWS Mobile Hub
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Talking to Joomla!
Application Program Interface (API)
HTML (JED App) vs Structured Data
Atoms?
Molecules?
Particles?
Cubes?
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Talking to Joomla!
● Joomla Ajax Interface
● Custom APIs
● Joomla 3.6 - REST API
● Joomla 4 will be a mobile first CMS
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
… and we develop apps for Joomla!
https://www.extly.com/composer-app.html http://www.joomgap.com/
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Talking to Joomla! - Joocial App
AutoTweetNG and Joocial are our extensions for social content management. Composer
App is our new tool for social auto-publishing and content scheduling.
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
2-legged OAuth authentication
(No remote password)
Talking to Joomla! - Joocial App
OAuth API OAuth API
Token
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Conclusions
● Mobile web-apps are ready for
prime time
● Joomla offers a sound content
model and a mature framework
● Responsive web design is only a
part of the solution
● Mobile apps for Joomla offer a
new “relentless growth”
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Make It Happen
Are you interested Mobile Apps? Join to Mobile Apps Team
https://volunteers.joomla.org/working-groups/mobile-apps-team
The Mobile Apps working group is dedicated to people contributing to support mobile web-
enabled and native applications for Joomla that will be the best "mobile-first" CMS.
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
Questions and Feedback
#JWC15
Joomla! World Conference 2015
Bangalore, India Sheraton Hotel
November 6-8
JoomGap
Create amazing apps for Joomla!
http://www.joomgap.com

More Related Content

JWC 2015 - Mobile apps development for Joomla!

  • 1. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Mobile apps development for Joomla Learn | Connect | Share Anibal Sánchez @anibal_sanchez @extly @joomgap
  • 2. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Extly leading developer ● 15+ years dev experience ● Integrating Joomla since 2007 ● Marketing Manager at Extensions Directory (JED) ● Contributor at Joomla! StackExchange (5000+) ● Contributor at Bug Squad Aníbal Sánchez
  • 3. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Abstract Mobile web-based applications are the best choice for individual, small and large businesses developers to provide a way to continue a website experience. This alternative allows you to work directly in the mobile environment with nothing but JavaScript and HTML / CSS, using technologies such as PhoneGap, Ionic and AngularJS Framework. Thus, it is possible to implement the technology stack most used and known in the world to launch apps, simultaneously, on all major platforms, from day one, with the same source code. In Joomla! context, web-based mobile apps can be integrated with the content management system to query or execute operations safely. In this session, we will discuss the main topic , solutions, challenges and a case to introduce how to combine available technologies for mobile development integrated with Joomla.
  • 4. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Agenda Welcome Today’s stats Definitions JED Starter App Talking to Joomla! Conclusions
  • 5. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Welcome to Joomorrowland http://www.tomorrowland.com
  • 6. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Welcome to Joomorrowland ● Joomla 4 ● PHP 7 ● Bootstrap 4 ● Javascript ECMAScript 6 ● AngularJS 2 (Typescript) http://www.tomorrowland.com
  • 7. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 … and we develop apps for Joomla! http://www.joomgap.com/jwc15
  • 8. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 WAIT…. WHAT ? http://www.joomgap.com/jwc15
  • 9. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Wait … what? ● Content navigation ● Search and browse ● Site management ● E-commerce apps ● Enterprise apps (MEAP)
  • 10. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Today’s Stats http://www.comscore.com/USMobileAppReport The days of desktop dominance are over. Mobile has swiftly risen to become the leading digital platform, with total activity on smartphones and tablets accounting for an astounding 60 percent of digital media time spent in the U.S. The fuel driving mobile’s relentless growth is primarily app usage...
  • 11. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Today’s Stats
  • 12. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Definitions Joomla! is a platform to built websites ● A content management system. ● Evolving from desktop usage. ● Supports responsive design. ● And, already supports mobile apps.
  • 13. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 JED Starter App - Objectives A prototype to show content navigation (smallest app, 2MB).
  • 14. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 JED Starter App - A prototype http://www.joomgap.com/jwc15 ● Fork JGJEDStarter repo ● Create an account (or log in) in PhoneGap build ● Connect your github account and create a new App ● Pull JGJEDStarter source code and build ● Download the new App and test it!
  • 15. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 A mobile web-based boilerplate http://www.joomgap.com/jwc15 ● Fork JGBoilerplate repo ● Create an account (or log in) in PhoneGap build ● Connect your github account and create a new App ● Pull JGBoilerplate source code and build ● Download the new App and test it!
  • 16. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 JED Starter App ● Mobile web-based app ● HTML, CSS and JavaScript ● Cordova - PhoneGap ● AngularJS Framework (optional) ● Ionic Framework (optional) http://www.joomgap.com/jwc15
  • 17. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Cordova - PhoneGap Easily create apps using the web technologies you know and love: HTML, CSS and JavaScript. (+Plugins) Target multiple platforms with one code base. Free and open source.
  • 18. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 AngularJS / Ionic Framework HTML enhanced for web apps! Create mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
  • 19. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 A new utility belt for developers ● HTML / CSS / JS Editor ● Local Debugging ○ Chrome DevTools ○ FireBug ● Remote Debugging ○ Chrome DevTools ○ GapDebug ● Device simulation … a Javascript world ruled by Node.js, npm, Grunt, Bower, etc, etc
  • 20. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Local vs Remote Development ● Local Packaging ○ Android ○ Apple iOS * ● Remote Packaging ○ PhoneGap Build ○ AppGyver, trigger.io, etc. ● Other services ○ Firebase ○ AWS Mobile Hub
  • 21. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Talking to Joomla! Application Program Interface (API) HTML (JED App) vs Structured Data Atoms? Molecules? Particles? Cubes?
  • 22. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Talking to Joomla! ● Joomla Ajax Interface ● Custom APIs ● Joomla 3.6 - REST API ● Joomla 4 will be a mobile first CMS
  • 23. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 … and we develop apps for Joomla! https://www.extly.com/composer-app.html http://www.joomgap.com/
  • 24. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Talking to Joomla! - Joocial App AutoTweetNG and Joocial are our extensions for social content management. Composer App is our new tool for social auto-publishing and content scheduling.
  • 25. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 2-legged OAuth authentication (No remote password) Talking to Joomla! - Joocial App OAuth API OAuth API Token
  • 26. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Conclusions ● Mobile web-apps are ready for prime time ● Joomla offers a sound content model and a mature framework ● Responsive web design is only a part of the solution ● Mobile apps for Joomla offer a new “relentless growth”
  • 27. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Make It Happen Are you interested Mobile Apps? Join to Mobile Apps Team https://volunteers.joomla.org/working-groups/mobile-apps-team The Mobile Apps working group is dedicated to people contributing to support mobile web- enabled and native applications for Joomla that will be the best "mobile-first" CMS.
  • 28. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 Questions and Feedback
  • 29. #JWC15 Joomla! World Conference 2015 Bangalore, India Sheraton Hotel November 6-8 JoomGap Create amazing apps for Joomla! http://www.joomgap.com