Magento

It is with a great pleasure that the Magento Core Team published a public version of the development Magento 2 and information about it. This new version is still in development and will be available when stability, code quality, features and documentation will be finished. It is expected in one year (end 2012). Lots of lack blamed for version < Magento 2 are going to be history (we hope).

The target of this new version is to provide a better documentation (a complete wiki for store owner, developer, system administrator or designer target public is available and still in progress), an improvement of the performance / security / scalability (EAV still exists), PHPUnit Tests and Automatic Static Code Analysis Tests (including PHP Detector Copy/Paste, PHP Code Sniffer, PHP Mess Detector), easier and better support of multilanguage, etc.

But don't worry dear Magento 1.x developers, not everything has been changed. At the program,  refactoring of some classes, naming convention and templating and skin folders restructuration have been done at the moment. We will see some changes in this first article and how to handle it to upgrade your extensions. Remember, it's still in development, so the information are there just to keep you informed. I will try to prvovide you up to date information until the official release on this website.

If you are a third party developer, you should follow the recommandations and best practises based on Zend Framework Best Practises and Magento Best Practises (Licenses and category/package/author tags in the docblock of class' header) to migrate your extensions.

You will find all necessary links about the Magento 2 development version (documentation, svn, tools) at the bottom of this article. But first, I did for you, a resume of the significant changes done between Magento 1.x and 2.x based on the documenation available in the Magento 2 Wiki.

FILE STRUCTURE CHANGES FROM 1.X TO 2.X

New folders:

/dev internal tools and tests. Previously: /shell, /tests, /tools to /dev/shell, /dev/tests, /dev/tools
/pub All public content: /pub/images, /pub/jslib, /pub/skin, /pub/error - Fallback/Materialized files are stored in this folder

Removed folders:

/includes Compiler feature is removed
/downloader Folder removed but the Magento Connect feature is moved to /app/code/core/Mage/Connect/

Template / Layout folders

One of the main changes is that base theme files and folders (layout, template) are moved to each module folder in a folder named "view". It means you will get for your module the following structure app / code / <code_pool> / <Namespace> / <Module> / view / <area> / *

  • Namespace = your company name or else
  • Module = module name ;-)
  • code pool = core, local or community
  • area = frontend or backend
  • package
  • theme

Here are some examples of the migrated folders:

  • for emails template, FROM app / locale / en_US / emails / * .html TO app / code / <code pool> / <Namespace> / <Module> / view / *.html
  • for skin files of a specific module in adminhtml area (js, css, skin images), FROM skin / adminhtml / default / default / * TO app / code / <code pool> / <Namespace> / <Module> / skin / adminhtml / *
  • for skin files of a specific module in frontend area (js, css, skin images), FROM skin / frontend / default / default / * TO app / code / <code pool> / <Namespace> / <Module> / skin / frontend / *
  • for layout and template files (*.phtml), FROM app / design / frontend / default / default / layout (or template) / * TO app / code / <code pool> / <Namespace> / <Module> / view / layout.xml as a convention (or path/to/file/*.phtml)

And non-base theme files (confer Magento wiki: theme files that overlap base files in modules) are structured as follow:

  • An overwritten template file, FROM app / design / frontend / <package> / <theme> / template / <module_alias> / path / to / template.phtml TO app / design / frontend / <package> / <theme> / <Namespace_Module> / path / to / template.phtml

A Module directory structure will lookt at this:

__/app/code/<Pool>/<Namespace>
|__/<Module>
|__/Block
| |-- Sample.php
|__/view
| |__/adminhtml
| |__/frontend
| | |-- layout.xml
| | |-- sample.phtml
| |__/install
| |-- contact_email.html
|__/skin
|__/adminhtml
|__/frontend
|__/images
| |-- image.jpg
|-- favicon.ico
Source Magento Wiki Module View

Fallback/Materialization mechanism

The fallback mechanism still exists and if you want to overwrite a template or layout file, you still need to use the folder structure app / design / <area> / <package> / <theme> / <Namespace_Module> / layout.xml (or path / to / template.phtml). Layout and template folders doesn't anymore exist but you will notice that you need to use the combination Namespace and Module as a folder name for the layout and template files.
All public content are stored in the folder /pub, it contains static files like images, javascript or css and are copied from the module skin folder. They will be automatically redundantly saved once or after an update, following its folder structure in the module view folder, to the /pub folder to keep only this folder visible to public and make skin modular too.

You will get the following structure for the static files:

  • / pub / skin / <area> / <package> / <theme> /  *
  • / pub / skin / <area> / <package> / <theme> / <Namespace_Module> / *
For the fallback mechanism, you can still use a design package folder structure:
__/design
|__/frontend
|__/<packageName>
|__/<themeName>
|__/layout
|__/skin
| |__/<skinName>
|   |__/css
|   |__/images
|   | |--image.jpg
|   |__/locale
|     |__/<localeCode>
|       |--translate.csv
|
|__/<Namespace_Module>
|--layout.xml
|--sample_template.phtml
For a more information about module view, you can check the Magento Wiki Module View

Skin File Duplication Option

This option, if enabled, creates automatically a copy of static files which is not locale dependant to all other locale store View. For example, you have a file logo.png for the locale en_US, the file be copied automatically to the fr_FR locale folder of the / pub / skin / <area> / <package> / <theme> / default / locale folder.
To enabled it, you have to edit the file app / code / <code_pool> / <Namespace> / <Module> / etc / config.xml and provide this xml code:

<default>
        <design>
            <theme>
                <allow_skin_files_duplication>1</allow_skin_files_duplication>
            </theme>
	</design>
</default>

Conclusion

Here were some few examples of the new features and way how will go our preferred open source commerce. And it will stay like that, Open Source, even if Magento has been bought by eBay. I don't know yet what will be exactly the next steps but I make a new article about the framework and his new behaviour and coding practises. If your impatient, well, you can still visit the links below to show you more information and detailed explanation of what we see here.

Magento 2 links (some are working in progress):

New modules version for Magento 1.6
All modules I did has been rewritten to improve and set it compatible with MAgento 1.6 if necessary. As reminder, you will find a list of the modules with a short description:
  • Add Information to Sales Email : you can add in the sales email (invoice, order, credit memo) complementary information about the products which are ordered by your customers.
  • Zopim Chat: display and customize per Store View the Chat service from Zopim. It's not an official module of Zopim.
  • Joomla Integration: it helps you to integrate Joomla modules into Magento, you will need Jfusion. Documentation is available on this website.
  • JS/CSS Compression & Minify (UIOptimization): compress and monify your css et javascript files to improve Magento performance. Several methods are available to suit your system.
  • Username support: accept your customer to login or create an account thanks to an email and a username

The Zopim Chat (unofficial) module for Magento has been updated and it's free. This update should improve the performance of Zopim calls and add some new small feature. It follows the available API from the zopim.com website. The Core Team has changed the javascript code.

Please, feel free to download it at the Magento Connect.

zopim

Profiling

As promised, I provide you below the statistic of compression and ratio by using the different libraries with the help of my UI Optimization module that you can find into Magento Connect

Compressed/Minified file statistic and comparison by using default Magento template, sample data, configuration for Rissp User Interface Optimization module is for all by default. Only the method to compress/minify is changed. 
Merging file has no influence on compression but has influence on number of HTTP requests which is also an important point.

**** JS compression (analyzed with YSlow):

- no compression, no miniying, no merging:  329.8 Kb

- JSMin (unmerged, no gzip): total 230.4Kb (31% of compression)
- JSMin (merged, no gzip): total 230.4Kb
- JSMin (merged, gzip): total 56.8Kb (compression 83%)

- YUI compressor (unmerged, no gzip): total 193.6 Kb (compression 41%)
- YUI compressor (merged, no gzip): total 193.6 Kb
- YUI compressor (merged, gzip): total 52.6 Kb (compression 84%)

- Packed (unmerged, no gzip): total 133.5 Kb (compression 59%)
- Packed (merged, no gzip): total 133.5 Kb
- Packed (merged, gzip): total 44.5 Kb (compression 86.5%)

**** CSS compression (analyzed with YSlow):

- no compression, no miniying, no merging, no gzip: 95.9 kb

- CSS Tidy (unmerged, no gzip): total 79.8 Kb (compression 17%)
- CSS Tidy (merged, no gzip): total 79.8 Kb
- CSS Tidy (merged, gzip): total 14.7 Kb (compression 85%)

- YUI compressor (unmerged, no gzip): total 82.7 Kb (compression 14%)
- YUI compressor (merged, no gzip): total 82.7 Kb
- YUI compressor (merged, gzip): total 14.5 Kb (compression 85%)

- Google Minify (unmerged, no gzip): total 79.9 Kb (compression 17%)
- Google Minify (merged, no gzip): total 79.9 Kb
- Google Minify (merged, gzip): total 14.9 Kb (compression 84.5%)

CONCLUSION:
- for JS: 1) YUICompressor 2) JSMin 3) Packed (for compatibility problem with Magento)
- for CSS: 1) CSSTidy 2) Google Minify (almost good as CSSTidy) 3) YUICompressor

In next release of this module, I will offer HTML minifying