My presentation on J And Beyond 2012: Using an IDE for Joomla Development - Best practice and Tips using the PHP-IDE phpStorm

1. Using an IDE for
Joomla Development
Best practice and Tips using the PHP-IDE phpStorm
Thomas Kahl
J And Beyond 2012, 19th May 2012 - Bad Nauheim, Germany

2. About Me
...just in case you don‘t know me
✤ Born - yes, but a long, long time ago - in 1966
✤ I live in Elmshorn (30 km north of Hamburg)
✤ Owner of a Webdevelopment Company since 2004
✤ Part of Virtuemart-Team for a long time
Known as Virtuemart Expert - visit vm-expert.com
✤ Part of all German Joomladays (Organizer & Speaker)
and Speaker on international Joomladays and Conferences

3. BTW: JD12DE
✤ The next German Joomladay
will be in Berlin, 5th & 6th
October 2012
✤ Interested in Sponsoring?
✓ You are welcome!

4. About VMX|Pro
some shameless Selfpromotion
✤ Developing Extensions for Mambo/Joomla since 2004
✤ Specialized in Joomla Ecommerce
✤ Offering Virtuemart Extension development and support
at www.vm-expert.com
✤ We build
Websites & Online-Shops
Joomla & Virtuemart Extensions
Ecommerce Accounting Software for Joomla
✤ Wordwide Joomla Ecommerce Consulting

5. About this session
✤ Answer the question why it is useful to use an IDE for Joomla
development
✤ Short overview about good PHP IDE‘s
✤ How to set up a project in phpstorm
✤ Useful tools within the IDE
✤ Combination with external tools
✤ Tips, Questions, Examples...

6. Before we start...
✤ There is not „THE“ way to work! The things i want to show you are
„MY“ way. Maybe there are better ways (I‘m sure there are) - so
please tell me if you have other ideas, workflows, tools, ...
✤ Though my examples use phpStorm, i am no affiliate, staff-member of
Jetbrains (the company behind phpStorm) - I‘m just a happy user...
✤ Yes, other than for example Netbeans, phpStorm is not OpenSource
(unfortunately). But they offer free licences when you can proove that
you are a member of an OpenSource-Team (i did that when i was
member of the Virtuemart-Team... it works)

7. Do you still use an Editor?
✤ Fast
✤ Small
✤ Easy to learn
(Really?)
✤ Available for different
platforms

8. Advantages using an IDE
✤ Project Management
GIT/SVN/CVS
Deployment / Synchronization with Server
✤ Code Parsing / Framework Support
Auto Completion (Methods, Variables, ...)
Combination of technologies (PHP, HTML, JS, CSS, ...)
Display of Errors
✤ Development Tools
Debugger (!!!!!)
Profiler, Refactoring, Diff-Tool

9. Good IDE‘s
✤ Netbeans
✤ Eclipse / PHPeclipse
✤ Zend Studio
Based on Eclipse
✤ PHPStorm
✤ List of IDE‘s with free licences
for OpenSource-Developers:
http://www.fromdev.com/2012/05/top-7-open-source-
free-php-ide-for.html

10. Learning Curve
✤ Yes, getting familiar with an
IDE can take some time
✤ A wide range of features to
discover and learn
✤ Features require special
settings or project
configuration
✤ Changes in the workflow

11. Learning Curve

12. Learning Curve

13. Hardware?
✤ You will need a large monitor
✤ Memory is important
✤ An up to date CPU might help

14. How to set up a Joomla Project

15. 3 (or more) different Ways
1. just create the extensions- or template directories you need for your
project and add the Joomla libraries as external files
2. copy the „non-standard“ directories from the live site and add the
Joomla libraries as external files
3. create the project directory as an exact copy of the live site or as local
document-root. This is required, if you want to use the debugger.

16. 1. Extension or Template Directory
✤ add Joomla libraries as external files
✤ configure deployment server mapping with automatic upload to
testserver

17. How to include external files

18. 2. Non-Joomla Directories
✤ This is the structure we normally create when we have VM-Expert
support projects. We copy the Virtuemart Stuff and all corresponding
extensions and templates to our project directory.
✤ Then we add the corresponding Joomla libraries as external files to
the project.
✤ We have full code completion, lookup, classes, ...

19. 3. Full Site
✤ Tip: add an additional directory
level under your projects tree (i
always name it „src“) where
you put the site.
This way, you can have other
project files (phing, profiler,
sass, ...) in an additional
directory above the site.

20. Tools
Work smarter

21. Debugger
how could you ever live without it?!?

22. Debugger - the Setup
✤ Before you can benefit from the help of the debugger, you have to
install and configure all parts: local Server, xDebug, PHP and IDE
✤ As far as i can see, this is the hardest part when you configure your
workspace :( but it is worth the hard work
✤ Other than for example in Visual Studio, the different parts of your
development environment are not integrated. You will have to „tell“
each of them how to communicate by configuring hosts, ports, paths
and trigger.

23. Debugger - it works!

24. Profiler
Why is your code slow?

25. Profiler
✤ The Profiler logs all calls to
classes, functions, ... and the
time that was spent.
✤ phpStorm offers different
views to analyze the logfile
✤ a profiler gives great insight of
how the code is executed
✤ xDebug is used for profiling

26. Profiler
✤ The Profiler logs all calls to
classes, functions, ... and the
time that was spent.
✤ phpStorm offers different views
to analyze the logfile
✤ a profiler gives great insight of
how the code is executed
✤ xDebug is used for profiling

27. Tip: Helpers in the Browser
✤ There are Browser-AddOns available for Firefox and Chrome that
make it easy to switch on and off the debugger- and profiler session.
✤ It is also possible to start and stop the session with a
„bookmarklet“ (small Javascript Code added to a Bookmark). The
code for the bookmarklet should look similar to this:
✤ xDebug Start Session:
javascript:(function() {document.cookie = "XDEBUG_SESSION=PHPSTORM; path=/;";})()
✤ xDebug Stop Session:
javascript:(function() {document.cookie = "XDEBUG_SESSION=; expires=Mon, 05 Jul 2000 00:00:00 GMT;path=/;";})
()

28. CSS-X-Fire
The missing link

29. CSS-X-Fire - a phpStorm Plugin
✤ CSS-X-Fire is a plugin for
phpStorm and Firefox with
Firebug (anyone who doesn‘t
know Firebug???)
✤ All changes you do in the CSS-
Tool of Firebug are „recorded“
in phpStorm and can be applied
to the project files.
✤ Edit in Firebug, save & upload
in phpStorm

30. CodeSniffer
Stick To Coding Standards

31. CodeSniffer
✤ phpStorm supports
Codesniffer
✤ You can import
Joomla Coding Styles
✤ phpStorm reminds you of
keeping coding standards

32. CodeSniffer

33. BTW: Inspections
✤ Inspections in phpstorm are great - but as you can imagine, parsing
the code for each rule in the inspections is eating performance.
✤ It is a good idea to take the time and go through the Inspections
settings to disable all inspections you don‘t need

34. Tips and other things...

35. Working with Scopes
✤ The „Scopes“ Feature filters the Project-Tree
For example: all our extensions are named vmx* - so we can create a
scope to filter the project tree and show only our extensions

36. Working with ToDo‘s
✤ You can configure your own „ToDo-Patterns“. It does not need to be
real ToDo‘s - you can use it for everything you want to have quick
access to. I mark all changes, hacks, bugfixes that are not accepted yet
with a special comment. Here you can see the settings and the result:

37. Working with external Tools
✤ The „external Tools“ settings allow you to add functionality to the
IDE by configuring the calls and the area where they should be
available. You can use phpStorm variables (called Macros)

38. Ooops, no Code Completion
Sometimes (not very often) it
might happen, that the code
completion doesn‘t work. In
this case, you can tell
phpStorm the classname to
use by adding a comment

39. Important Notes
✤ All Images „royalty free“ from stock.xchng www.sxc.hu
except:
burning Firebug-Bug from getfirebug.com/img/firebug-large.png
Netbeans and Zend Screenshots from their Product Pages