Add-On Development:
 EE Expects that Every
Developer will do his Duty
          Paul Burdick, Lead Developer
             ...
Summary of Talk
•   What are Add-Ons?
    •   The Three Types of Add-Ons in EE
    •   Overview of Accessories in EE 2.x
•...
Summary of Talk
•   What are Add-Ons?
    •   The Three Types of Add-Ons in EE
    •   Overview of Accessories in EE 2.x
•...
I.
What are Add-Ons?
Three Types of Add-Ons in
      EE 1.x and 2.x

        • Extensions
        • Modules
        • Plugins
Extensions
• Extends the base functionality of
  ExpressionEngine

• Allows developers to interpose their own
  code into EE's codeba...
• More and more Third Party developers are
  adding hooks to their own code, allowing
  extensions for Third Party Add-Ons...
function settings()
{
	   $settings = array();
	
	   $settings['butter']     = "Quite Tasty";
	   $settings['buttery']    ...
Modules
• The Mighty Workhorses of EE
• Complete and expansive Control Panels.
• Database Tables
• Template Tags
• Own extensions ...
Plugins
• No settings, no tables, no CP, no install
• Text manipulation either via Template Tags
  or Custom Fields

• Or, functio...
Add-On Quantities @ devot-ee.com
            18 October 2009




                              Extensions:   170
         ...
Examples of Extensions
•   Edit Tab AJAX - AJAX enabled search for
    Control Panel's Edit area

•   FieldFrame - Easily ...
Examples of Modules
•   Structure - Create Static and Listing pages,
    editable via a tree sitemap

•   Tag - Folksonomy...
Examples of Plugins
•   EE Gravatar - Global Avatars for site members

•   Image Sizer - Resizes and caches images on the
...
Accessories
 in EE 2.0
•   Accessories provide tools, references, or
    abilities at the bottom of your EE Control
    Panel in ExpressionEngine...
II.
    Add-On
Development Skills
PHP
• Duh...
• PHP: Hypertext Preprocessor. You really
  have to love recursive acronyms.

• Server side programming language....
• PHP files contain code, but they can also
  have HTML, JS, XML, et cetera inside them.

• Extremely widespread on hosting...
PHP Learning References

PHP Docs: http://php.net/manual/

W3C Tutorial: http://www.w3schools.com/PHP/php_intro.asp

Zend ...
SQL
• Required for advanced Add-On development
• Active Record only *helps* build queries
MySQL
•   Popular, open-source, relational database.

•   Simple to setup and administrate.

•   Fast for reading, decent ...
MySQL Learning References
 •   MySQL Docs: http://dev.mysql.com/doc/

 •   Buy a book. ( O'Reilly Books are well done )

 ...
HTML/CSS
View Files
•   Essentially HTML files with PHP inside for
    outputting data

•   Part of ExpressionEngine 2.0 by default
...
<?php echo $this->view('header.html');?>
	
<h4 class="alertHeadingCenter"><?php echo $LANG->line('error');?></h4>

<div cl...
User Interfaces
•   Build in static HTML, CSS, JS files before converting
    to View files.

•   Easier development.

•   E...
jQuery/JavaScript
• jQuery available in EE 1.x via an extension
  (not enabled by default)

• jQuery available in EE 2.x with no additional
...
global $EXT;

if ( ! isset($EXT->version_numbers['Cp_jquery']))
{
	   return $OUT->show_user_error('general', $LANG->line(...
III.
Developing Add-Ons
in ExpressionEngine
Never, Ever Just
 Start Coding!
Research
• Previous Approaches
• Required Features
• Alternative Approach in ExpressionEngine?
 •   Can this be done in EE...
Tell a Story
•   How will Person A do Task 1?

•   Question Previous Approaches.

    •   Is X Really the BEST way to do i...
Map Out Features
• Major
 •   Functionality required for module to serve
     its market/purpose
• Minor
 •   Not Necessar...
Database Structure
• Tables for your Major and Minor Features
• Normalization: Eliminate Data Duplication
  • http://en.wi...
Tags Structure
•   The Naming and Functionality of Template tags
•   For Each Tag
    •   Describe
    •   Name
    •   Pa...
Tags Structure: Describe

•   Descriptions for each Tag, Parameter, and Variable.
•   Explain what each one does.
Tags Structure: Tag Name

•   Simple and Obvious
•   No Abbreviations, No Ambiguity
    •   {exp:module:g_entries} vs
    ...
Tags Structure: Parameters

•   Prefix?
    •   form:id="" or form_id=""
•   Use prefixes to break up parameters into
    "g...
Tags Structure: Variables
•   No Ambiguity, No Abbreviations
    •   {group}{/group} vs
        {category_group}{/category...
Tags Structure:
    Show to Other People

•   Get Feedback
•   Revise until the Spec feels solid.
Building a
Control Panel
Workflow Module’s CP
Control Panel:
        Break Up into Sections
•   Data Adding, Deleting, and Manipulation
    •   Create/Modify/Delete Ite...
KISS:
Keep It Simple, Stupid
Control Panel: Design
•   Build an HTML/CSS/JS mockup first
•   Put into a View file
•   PHP into HTML, Not HTML into PHP
  ...
Time Wasted on IE6
Making Software Support IE6   vs.   Upgrading Users
Time Wasted on IE6
Making Software Support IE6   vs.        Upgrading Users




            92%                     8%
Have Goals,
Even Milestones,
Never Deadlines
IV.
Writing Code
Follow the EllisLab
        Development Guidelines!

http://expressionengine.com/docs/development/guidelines/index.html
"Prolific and informative commenting
    using proper comment style"

 •   We want to know your thinking! Why this way?
 • ...
Sanitize and Escape Everything
•   Be Paranoid! Nothing is Immune! Constant
    Vigilance!

•   If you DID NOT set or get ...
Abstraction

•   Use Twice, Write Once
•   Create Libraries!
•   Reduces Work and Mistakes
•   Purpose of Hermes
Simplify,
Simplify,
Simplify
Simplify: Reduce Code Work
 •   Do the Least Amount of Effort to produce results
 •   Bail Out First, Work Second
     •  ...
Simplify: Reduce DB Work
•   Performing Multiple Queries are OK.
•   Validate, Check Pagination, Then Retrieve Data
Simplify: Models
•   Abstract common SELECTs into separate methods
•   INSERTs/UPDATEs for a DB Table in one method
•   He...
Per Page Load Caching
•   Use $SESS->cache
•       Suggested:
    •    $SESS->cache['modules']['module_name']['some_cache'...
Weblog Module Class
• Very powerful code, no need to write your own.
• Code was written so that it could be used elsewhere...
require_once PATH_CORE.'core.typography'.EXT;
require_once PATH_MOD.'/weblog/mod.weblog'.EXT;

$TMPL->tagparams['entry_id'...
Provide Tools for Keeping
      Things Tidy
• Removal of Old Data.
• Removal of Old Caches
• Optimize Tables - Reduce DB O...
V.
   Debugging and
Improving Performance
Consider Performance
an Aspect of Add-On
     Debugging
Turn on PHP Debugging
• Insure Display Errors Setting is On in php.ini
• Error Reporting is E_ALL
• No PHP Errors! Ever!
•...
Turn on SQL Queries
• Admin => System Preferences => Output and Debugging
• Queries appear on both CP and User side of EE
...
Turn on SQL Queries
• Are Certain Queries Necessary on EVERY load?
  • Settings/Preferences
  • Caching (Checks, Re-cachin...
Turn on SQL Queries
•   De-Normalization.
    •   Duplicating Data or Grouping It to Reduce Work
    •   http://en.wikiped...
SuperSearch SQL Queries
Turn on Template Debugging
 • Admin => System Preferences => Output and Debugging
 • Outputs Elapsed Time during Add-On pr...
Vanilla Template Log
SuperSearch Processing
Knowing is Half the Battle!
Automated Actions
• Example: Caching or Retrieving Remote Data
• Can Seriously Slow Down an Add-On
• Try AJAX
Deprecated Code
• Consider using trigger_error()
• trigger_error('Favorites Module: The Favorites Count
  tag has been dep...
Ask for Help
• Plenty of EE, PHP, SQL Knowledge out there. Use it.
• Often just discussing a problem will lead to a soluti...
V.
Presentation Over, So
      Let's Talk
Add-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his Duty
Add-On Development: EE Expects that Every Developer will do his Duty
Upcoming SlideShare
Loading in …5
×

Add-On Development: EE Expects that Every Developer will do his Duty

16,742 views

Published on

Add-Ons are what make ExpressionEngine the flexible powerhouse that it is today. Being able to write your own simple plugins or incredibly expansive modules allows you to mold ExpressionEngine to nearly any task that your website might require. However, with that power comes a great responsibility to insure that your code is not slowing down the entire site or unduly stressing the server through bad code architecture.

There are simple tools already built into ExpressionEngine and PHP that you can use to see precisely what your Add-On is doing during page processing and where it might be doing more work than is absolutely necessary. Every developer should use these to optimize their work from the very beginning of development, prior to release. This workshop will explain these tools and how you can use them effectively. It will also delve deeper into optimization techniques and tricks that will keep your code light and clean, while finding a balance between functionality and performance.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,742
On SlideShare
0
From Embeds
0
Number of Embeds
12,777
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Add-On Development: EE Expects that Every Developer will do his Duty

  1. 1. Add-On Development: EE Expects that Every Developer will do his Duty Paul Burdick, Lead Developer solspace http://solspace.com/downloads/eeci2009/presentation.txt
  2. 2. Summary of Talk • What are Add-Ons? • The Three Types of Add-Ons in EE • Overview of Accessories in EE 2.x • Add-On Development Skills • Developing Add-Ons in ExpressionEngine • Writing Code • Debugging & Improving Performance
  3. 3. Summary of Talk • What are Add-Ons? • The Three Types of Add-Ons in EE • Overview of Accessories in EE 2.x • Add-On Development Skills • Developing Add-Ons in ExpressionEngine • Writing Code • Debugging & Improving Performance
  4. 4. I. What are Add-Ons?
  5. 5. Three Types of Add-Ons in EE 1.x and 2.x • Extensions • Modules • Plugins
  6. 6. Extensions
  7. 7. • Extends the base functionality of ExpressionEngine • Allows developers to interpose their own code into EE's codebase. • Restrained by where hooks are placed in the code and what arguments are sent with the extension call
  8. 8. • More and more Third Party developers are adding hooks to their own code, allowing extensions for Third Party Add-Ons. Pretty darn cool. • Typically no DB tables, but there are always exceptions • Settings Form CP
  9. 9. function settings() { $settings = array(); $settings['butter'] = "Quite Tasty"; $settings['buttery'] = array('r', array('yes' => "yes", 'no' => "no"), 'no'); // Complex: // [variable_name] => array(type, values, default value) // variable_name => short name for setting and key for language file variable // types: t - textarea // r - radio buttons // s - select // ms - multiselect // f - function calls // values: can be array (r, s, ms), string (t), function name (f) // default: name of array member, string, nothing // // Simple: // [variable_name] => 'Butter' // Text input, with 'Butter' as the default. return $settings; }
  10. 10. Modules
  11. 11. • The Mighty Workhorses of EE • Complete and expansive Control Panels. • Database Tables • Template Tags • Own extensions possible
  12. 12. Plugins
  13. 13. • No settings, no tables, no CP, no install • Text manipulation either via Template Tags or Custom Fields • Or, functionality "plugged" into your Templates.
  14. 14. Add-On Quantities @ devot-ee.com 18 October 2009 Extensions: 170 Modules: 73 Plugins: 248
  15. 15. Examples of Extensions • Edit Tab AJAX - AJAX enabled search for Control Panel's Edit area • FieldFrame - Easily create new custom field types for ExpressionEngine. • LG Add Sitename - Site Label in upper left of your CP
  16. 16. Examples of Modules • Structure - Create Static and Listing pages, editable via a tree sitemap • Tag - Folksonomy functionality for Weblog and Gallery Entries • User - EE's Member Functionality in Templates
  17. 17. Examples of Plugins • EE Gravatar - Global Avatars for site members • Image Sizer - Resizes and caches images on the fly • Markdown - Markdown formatting in EE Custom Weblog Fields
  18. 18. Accessories in EE 2.0
  19. 19. • Accessories provide tools, references, or abilities at the bottom of your EE Control Panel in ExpressionEngine 2.0 • No CP page for each Accessory • Can have own DB tables • View files! Lovely lovely View files!
  20. 20. II. Add-On Development Skills
  21. 21. PHP
  22. 22. • Duh... • PHP: Hypertext Preprocessor. You really have to love recursive acronyms. • Server side programming language. Processed at runtime. • No Compiling! Viewable Source!
  23. 23. • PHP files contain code, but they can also have HTML, JS, XML, et cetera inside them. • Extremely widespread on hosting environments.
  24. 24. PHP Learning References PHP Docs: http://php.net/manual/ W3C Tutorial: http://www.w3schools.com/PHP/php_intro.asp Zend Tutorial: http://devzone.zend.com/article/627
  25. 25. SQL
  26. 26. • Required for advanced Add-On development • Active Record only *helps* build queries
  27. 27. MySQL • Popular, open-source, relational database. • Simple to setup and administrate. • Fast for reading, decent for writing • Dominant on hosted environments
  28. 28. MySQL Learning References • MySQL Docs: http://dev.mysql.com/doc/ • Buy a book. ( O'Reilly Books are well done ) • Learn JOINs • http://www.informit.com/articles/article.aspx? p=30875&seqNum=5 • http://en.wikipedia.org/wiki/Join_(SQL)
  29. 29. HTML/CSS
  30. 30. View Files • Essentially HTML files with PHP inside for outputting data • Part of ExpressionEngine 2.0 by default • Available in ExpressionEngine1.x using Hermes or custom include code
  31. 31. <?php echo $this->view('header.html');?> <h4 class="alertHeadingCenter"><?php echo $LANG->line('error');?></h4> <div class='defaultCenter' > <div class="box"> <strong><?=$error_message?></strong> <br /><br /> <strong> <a href='javascript:history.go(-1)'>« <?=$LANG->line('back')?></a> </strong> </div> </div> <?php echo $this->view('footer.html'); ?>
  32. 32. User Interfaces • Build in static HTML, CSS, JS files before converting to View files. • Easier development. • Easier bug testing. • No need to create data variables/objects first. • UI developer does not need to understand PHP.
  33. 33. jQuery/JavaScript
  34. 34. • jQuery available in EE 1.x via an extension (not enabled by default) • jQuery available in EE 2.x with no additional work • Relatively easy to add other libraries or custom JS if need be.
  35. 35. global $EXT; if ( ! isset($EXT->version_numbers['Cp_jquery'])) { return $OUT->show_user_error('general', $LANG->line('cp_jquery_requred'))); }
  36. 36. III. Developing Add-Ons in ExpressionEngine
  37. 37. Never, Ever Just Start Coding!
  38. 38. Research • Previous Approaches • Required Features • Alternative Approach in ExpressionEngine? • Can this be done in EE in any other way? • Is a Module required? Could an Extension do it? • Could a Plugin output weblog data in the way you need?
  39. 39. Tell a Story • How will Person A do Task 1? • Question Previous Approaches. • Is X Really the BEST way to do it? • What Would Apple Do? • Eliminate Steps, Make Process Intuitive. • Follow your instincts.
  40. 40. Map Out Features • Major • Functionality required for module to serve its market/purpose • Minor • Not Necessarily Required. • Features are cuttable for a 1.0 release. • Icing • For specific clients or users • Think and consider them
  41. 41. Database Structure • Tables for your Major and Minor Features • Normalization: Eliminate Data Duplication • http://en.wikipedia.org/wiki/Database_normalization • Indexes! • Specific, Sensical Field Names • 'event_title' vs 'event' • 'event_short_name' vs 'name'
  42. 42. Tags Structure • The Naming and Functionality of Template tags • For Each Tag • Describe • Name • Parameters • Variable Pairs and Single Variables • Consider this a precursor to your documentation
  43. 43. Tags Structure: Describe • Descriptions for each Tag, Parameter, and Variable. • Explain what each one does.
  44. 44. Tags Structure: Tag Name • Simple and Obvious • No Abbreviations, No Ambiguity • {exp:module:g_entries} vs {exp:module:gallery_entries}
  45. 45. Tags Structure: Parameters • Prefix? • form:id="" or form_id="" • Use prefixes to break up parameters into "groups" of functionality. • notify:admin_email="" • notify:user_email=""
  46. 46. Tags Structure: Variables • No Ambiguity, No Abbreviations • {group}{/group} vs {category_group}{/category_group} • {title} vs {event_title} • Prevent collisions in nested tags • Underscores recommended
  47. 47. Tags Structure: Show to Other People • Get Feedback • Revise until the Spec feels solid.
  48. 48. Building a Control Panel
  49. 49. Workflow Module’s CP
  50. 50. Control Panel: Break Up into Sections • Data Adding, Deleting, and Manipulation • Create/Modify/Delete Items • Ex: Calendar, Wiki, Forum • Build only one main interface • Preferences/Settings/Permissions • Per Site, Per Weblog, Per Member Group, Per X • Actions • Ex: Recount, Re-Cache, Clear Caches • Version Number and Documentation Link
  51. 51. KISS: Keep It Simple, Stupid
  52. 52. Control Panel: Design • Build an HTML/CSS/JS mockup first • Put into a View file • PHP into HTML, Not HTML into PHP • documentDOM in Hermes - Builds HTML in PHP, specifically form fields • Ignore IE6 • EE 2.x no longer supports it • Solspace no longer supports it • Neither should you.
  53. 53. Time Wasted on IE6 Making Software Support IE6 vs. Upgrading Users
  54. 54. Time Wasted on IE6 Making Software Support IE6 vs. Upgrading Users 92% 8%
  55. 55. Have Goals, Even Milestones, Never Deadlines
  56. 56. IV. Writing Code
  57. 57. Follow the EllisLab Development Guidelines! http://expressionengine.com/docs/development/guidelines/index.html
  58. 58. "Prolific and informative commenting using proper comment style" • We want to know your thinking! Why this way? • Expect people to learn from your code. • Helps you understand your *own* logic
  59. 59. Sanitize and Escape Everything • Be Paranoid! Nothing is Immune! Constant Vigilance! • If you DID NOT set or get data yourself, assume it is tainted, even EE variables • If you DID set or get yourself, but not within ten lines of code, assume it is tainted. • Sanitize and Escape at the Query • No Security Exceptions for SuperAdmins
  60. 60. Abstraction • Use Twice, Write Once • Create Libraries! • Reduces Work and Mistakes • Purpose of Hermes
  61. 61. Simplify, Simplify, Simplify
  62. 62. Simplify: Reduce Code Work • Do the Least Amount of Effort to produce results • Bail Out First, Work Second • Invalid variable type? Bail. • No Permissions? Bail. • Error? Bail. • Don’t Do Serious Work Until You Know You Have Work To Do
  63. 63. Simplify: Reduce DB Work • Performing Multiple Queries are OK. • Validate, Check Pagination, Then Retrieve Data
  64. 64. Simplify: Models • Abstract common SELECTs into separate methods • INSERTs/UPDATEs for a DB Table in one method • Hermes has per Add-On model caching caching built into it. • Speaking of caching...
  65. 65. Per Page Load Caching • Use $SESS->cache • Suggested: • $SESS->cache['modules']['module_name']['some_cache'] = array(); • Alternative: • $SESS->cache['Solspace']['module_name']['some_cache'] = array() • Try a Reference! • $this->cache =& $SESS->cache['modules']['module_name']; • $this->cache[‘some_cache’] = array();
  66. 66. Weblog Module Class • Very powerful code, no need to write your own. • Code was written so that it could be used elsewhere. • Returns Results based on tag parameters • You can modify $TMPL->tagparams!
  67. 67. require_once PATH_CORE.'core.typography'.EXT; require_once PATH_MOD.'/weblog/mod.weblog'.EXT; $TMPL->tagparams['entry_id'] = '1|2|3|4'; $TMPL->tagparams['dynamic'] = 'off'; $TMPL->tagdata = $TMPL->assign_relationship_data( $TMPL->tagdata ); $TMPL->var_single = array_merge( $TMPL->var_single, $TMPL->related_markers ); $weblog_object = new Weblog; $weblog_object->fetch_custom_weblog_fields(); $weblog_object->fetch_custom_member_fields(); $weblog_object->fetch_pagination_data(); $weblog_object->create_pagination(); $weblog_object->build_sql_query(); if ($weblog_object->sql == '') return $this->return_data = $TMPL->no_results(); $weblog_object->query = $DB->query($weblog_object->sql); if ($weblog_object->query->num_rows == 0) return $this->return_data = $TMPL->no_results(); $weblog_object->TYPE = new Typography; $weblog_object->fetch_categories(); $weblog_object->parse_weblog_entries(); $weblog_object->add_pagination_data(); return $this->return_data = $weblog_object->return_data;
  68. 68. Provide Tools for Keeping Things Tidy • Removal of Old Data. • Removal of Old Caches • Optimize Tables - Reduce DB Overhead
  69. 69. V. Debugging and Improving Performance
  70. 70. Consider Performance an Aspect of Add-On Debugging
  71. 71. Turn on PHP Debugging • Insure Display Errors Setting is On in php.ini • Error Reporting is E_ALL • No PHP Errors! Ever! • Remove All Deprecated PHP Functions.
  72. 72. Turn on SQL Queries • Admin => System Preferences => Output and Debugging • Queries appear on both CP and User side of EE • Review Queries • Check the Add-On's CP • Extensions: Check areas of usage in CP • Check EVERY single tag in a Template. • Eliminate Duplicates!
  73. 73. Turn on SQL Queries • Are Certain Queries Necessary on EVERY load? • Settings/Preferences • Caching (Checks, Re-caching, Emptying) • Statistics • Evaluate Queries for Performance • Run in phpMyAdmin or similar • Try Making the Query More Efficient • Add a WHERE clause on indexed field • Remove Extraneous JOINs when possible
  74. 74. Turn on SQL Queries • De-Normalization. • Duplicating Data or Grouping It to Reduce Work • http://en.wikipedia.org/wiki/Denormalization • Best example? Statistics: Hit count. • Abstract methods for data consistency (i.e. correct values) • Learn About Optimizing MySQL • MySQL Performance Blog • http://mysqlperformanceblog.com
  75. 75. SuperSearch SQL Queries
  76. 76. Turn on Template Debugging • Admin => System Preferences => Output and Debugging • Outputs Elapsed Time during Add-On processing • What Code is Taking the Longest to Process? • $TMPL->log_item() • $TMPL->log_item('Freeform Module: Run Query'); • Disable Processing • Disable Parameter ( disable="feng_shui" ) • Auto-detect Variables and Remove Queries and Processing
  77. 77. Vanilla Template Log
  78. 78. SuperSearch Processing
  79. 79. Knowing is Half the Battle!
  80. 80. Automated Actions • Example: Caching or Retrieving Remote Data • Can Seriously Slow Down an Add-On • Try AJAX
  81. 81. Deprecated Code • Consider using trigger_error() • trigger_error('Favorites Module: The Favorites Count tag has been deprecated. Use the Entry Count tag instead'); • Don't Leave It Around Forever, Discontinue Support, Then Remove It
  82. 82. Ask for Help • Plenty of EE, PHP, SQL Knowledge out there. Use it. • Often just discussing a problem will lead to a solution.
  83. 83. V. Presentation Over, So Let's Talk

×