Magento 2 Development for PHP Developers

As one of the most popular eCommerce platforms in the world, the demand for Magento developer is at an all-time high. In this tutorial, I’ll introduce you to developing for Magento 2 and help you get up to speed quickly so that you’re ready to support and extend existing Magento 2 sites.

Presented as a 3.5 hour tutorial at php[world] 2016.

Transcript

1. View Slide

2. @JoshuaSWarren #phpworld
   Magento 2 Development
   for PHP Developers
   

   View Slide

3. @JoshuaSWarren #phpworld
   Is Your Environment
   Ready?
   

   View Slide

4. @JoshuaSWarren #phpworld
   MageScotch
   • How many of you downloaded it in advance?
   • Anyone need help?
   • If you haven’t installed it, follow the instructions at bit.ly/
   2eYkhon
   

   View Slide

5. @JoshuaSWarren #phpworld
   About Me
   

   View Slide

6. @JoshuaSWarren #phpworld
   About Me
   • PHP-Based Ecommerce Developer Since 1999
   • Magento Developer Since 2008; Magento 2 Developer Since
   2014
   • Magento Master
   • Founder & CEO of Creatuity Corp, Magento Enterprise
   Solution Partner
   

   View Slide

7. @JoshuaSWarren #phpworld
   About This Tutorial
   

   View Slide

8. @JoshuaSWarren #phpworld
   Assumptions
   • You’re a PHP developer
   • You have little-to-no experience with Magento 1 or 2
   • You have a laptop and a desire to learn about Magento 2
   

   View Slide

9. @JoshuaSWarren #phpworld
   Goals
   • Knowledge of the basics of M2 development
   • A clear path to learn more
   • An invitation to the Magento development community
   

   View Slide

10. @JoshuaSWarren #phpworld
    Style
    • Light-hearted & open - have fun + don’t hesitate to be blunt
    • Interactive - do not hold questions to the end
    • Customized - want more code? More theory? Just ask!
    

    View Slide

11. @JoshuaSWarren #phpworld
    About You
    

    View Slide

12. @JoshuaSWarren #phpworld
    About You
    • Any Magento 1 experience?
    • Any Magento 2 experience?
    • PHP 7 experience?
    

    View Slide

13. @JoshuaSWarren #phpworld
    About You
    • Experience with other frameworks?
    • Composer?
    • Namespaces?
    

    View Slide

14. @JoshuaSWarren #phpworld
    About You
    • Dependency injection?
    • Service layers?
    

    View Slide

15. @JoshuaSWarren #phpworld
    

    View Slide

16. @JoshuaSWarren #phpworld
    About You
    • Looking for detailed code examples?
    • Want to get your hands dirty with some code today?
    • Interested more in theory?
    

    View Slide

17. @JoshuaSWarren #phpworld
    Useful Tools & Sites
    

    View Slide

18. @JoshuaSWarren #phpworld
    Useful Sites for a New M2 Dev
    • Magento DevDocs - devdocs.magento.com
    • Magento Stack Exchange - magento.stackexchange.com
    • github.com/Creatuity/LearningMagento2
    • Alan Storm’s Sites - alanstorm.com + magento-
    quickies.alanstorm.com
    

    View Slide

19. @JoshuaSWarren #phpworld
    Social Media for a New M2 Dev
    • Twitter - hashtag #realmagento
    • Magento’s Developer Evangelist - @benmarks
    • Alan Storm - @alanstorm
    • And many, many others…
    

    View Slide

20. @JoshuaSWarren #phpworld
    Useful Tools for a New M2 Dev
    • IDE: PHPStorm
    • Magicento or JetBrains Magento 2 Plugin
    • A Vagrant or Docker image for local development
    • Sample code: github.com/magento/magento2-samples
    

    View Slide

21. @JoshuaSWarren #phpworld
    Useful Tools for a New M2 Dev
    • Magento 2 is a constantly evolving platform. Keep your
    skills up to date and keep an eye out for new tools to assist
    you.
    

    View Slide

22. @JoshuaSWarren #phpworld
    Technical Architecture of
    Magento 2
    

    View Slide

23. View Slide

24. @JoshuaSWarren #phpworld
    Beginner’s Mind
    • If you have experience with Magento 1, try to set it aside
    • Magento 2 rewards Shoshin - a beginner’s mind
    • Start with the basic architectural concepts in Magento 2
    

    View Slide

25. @JoshuaSWarren #phpworld
    Composer
    • Magento 2 is built on top of Composer
    • Each module/extension can and should be a Composer
    module
    • This includes each core module in the Magento 2 core
    

    View Slide

26. @JoshuaSWarren #phpworld
    PSR’s All The Way Down
    • PSR-0 thru PSR-4 (Autoloader)
    

    View Slide

27. View Slide

28. @JoshuaSWarren #phpworld
    phpunit, Selenium, JMeter,
    Jasmine and more all built in
    

    View Slide

29. @JoshuaSWarren #phpworld
    Advanced Front-end Tech
    • LESS CSS (And SASS*)
    • jQuery
    • RequireJS
    • Gulp.js
    • Magento UI Library
    

    View Slide

30. @JoshuaSWarren #phpworld
    Layers upon layers…
    

    View Slide

31. @JoshuaSWarren #phpworld
    Layers
    • Presentation layer
    • Service Layer
    • Domain Layer
    • Persistence Layer
    

    View Slide

32. View Slide

33. @JoshuaSWarren #phpworld
    Dependency Injection
    • Dependencies are injected into objects that need them
    • “Don’t call us, we’ll call you”
    • Instead of building an object in your class, it’s passed in via
    your constructor, automatically.
    

    View Slide

34. @JoshuaSWarren #phpworld
    Dependency Injection
    • Reduces dependencies
    • Promotes loose coupling
    • Improves testability
    

    View Slide

35. @JoshuaSWarren #phpworld
    Dependency Injection
    • Magento 2 uses the Constructor Injection pattern of DI
    • Automatic Dependency Injection
    • Handled in Magento 2 via XML files
    

    View Slide

36. @JoshuaSWarren #phpworld
    Without Dependency Injection
    public function getFormattedPrice($sku)

    {

    $db = new DBHandler;

    $row = $db->query('SELECT price FROM products WHERE sku = ?', $sku);

    $formatter = new PriceFormatter;

    return $formatter->asDollars($row['price']);

    }
    

    View Slide

37. @JoshuaSWarren #phpworld
    With Dependency Injection
    public function getFormattedPrice($sku, $db, $formatter)

    {

    $row = $db->query('SELECT price FROM products WHERE sku = ?', $sku);

    return $formatter->asDollars($row['price']);

    }
    

    View Slide

38. @JoshuaSWarren #phpworld
    Interceptors
    • Calls to almost any module can be intercepted and altered
    • Possible to intercept before, after or around a function
    

    View Slide

39. @JoshuaSWarren #phpworld
    Helpful Less-Technical M2 Concepts
    • Magento can power multiple websites on one installation
    • Websites -> Stores -> Store Views
    • Translation & currency exchange system built in
    

    View Slide

40. @JoshuaSWarren #phpworld
    Helpful Less-Technical M2 Concepts
    • Built-in CMS system
    • Static Blocks
    • Widgets
    

    View Slide

41. @JoshuaSWarren #phpworld
    Helpful Less-Technical M2 Concepts
    • Modular product & customer attributes
    • Pre-made extensions available on
    marketplace.magento.com
    • Two editions - Community Edition & Enterprise Edition
    

    View Slide

42. @JoshuaSWarren #phpworld
    A Few Cautions
    • Magento 2 is a work in progress
    • Service contracts are incomplete
    • Not all core code has been refactored
    • Best practices are still being determined
    • Check devdocs, Stack Exchange best-practice tag, blogs &
    presentations
    

    View Slide

43. @JoshuaSWarren #phpworld
    Thoughts & Questions So Far?
    

    View Slide

44. @JoshuaSWarren #phpworld
    Setting Up a New
    Magento 2 Site
    

    View Slide

45. @JoshuaSWarren #phpworld
    Multiple Options
    • Easy Install: Download zip file, run web installer
    • System Integrator: Composer-based, run web or CLI installer
    • Contributing Developer: Clone Magento 2 repository
    

    View Slide

46. @JoshuaSWarren #phpworld
    Start with a Virtual Machine
    • MageScotch follows the contributing developer approach to
    Magento 2 development
    • Magento 2 repository is checked out to /opt/magento2
    • It’s then copied to /var/www/public/magento2
    

    View Slide

47. @JoshuaSWarren #phpworld
    Start with a Virtual Machine
    • Starting with a VM simplifies the process and ensures you
    have a working environment
    • Provides you with the additional tools you need such as the
    proper PHP version (7) and Composer
    

    View Slide

48. @JoshuaSWarren #phpworld
    Starting an M2 Project
    • Understand your end goal for the project
    • Take time to map business requirements to existing
    Magento 2 functionality and modules
    • Complete as much as you can in the admin panel
    

    View Slide

49. @JoshuaSWarren #phpworld
    Starting an M2 Project
    • Any business logic customizations should be completed via
    a Magento 2 module
    • Purely cosmetic changes should take place as a custom
    theme
    • Whatever you do, don’t edit core files
    

    View Slide

50. @JoshuaSWarren #phpworld
    Writing a Magento 2 Module
    

    View Slide

51. @JoshuaSWarren #phpworld
    Magento 2 Modules
    • Magento 2 modules can do anything
    • Provide new shipping methods & payment gateway
    integrations
    • Implement entirely new ordering workflows
    • Make simple, minor changes to functionality
    

    View Slide

52. @JoshuaSWarren #phpworld
    Magento 2 Modules
    • Magento 2 modules can be implemented within your
    existing codebase - magento2/app/code/Namespace/
    Module
    • Magento 2 modules can also be freestanding modules with
    their own Git repository you install using Composer
    

    View Slide

53. @JoshuaSWarren #phpworld
    Magento 2 Modules
    • All Magento 2 modules have a few things in common
    • composer.json
    • registration.php
    • etc/module.xml
    • Most also have etc/di.xml
    

    View Slide

54. @JoshuaSWarren #phpworld
    composer.json
    {
    "name": "magento/sample-module-minimal",
    "description": "A minimal skeleton Magento 2 module",
    "type": "magento2-module",
    "version": "1.0.0",
    "require": {
    "php": "~5.5.0|~5.6.0|~7.0.0"
    },
    "autoload": {
    "files": [ "registration.php" ],
    "psr-4": {
    "Magento\\SampleMinimal\\": ""
    }
    }
    }
    

    View Slide

55. @JoshuaSWarren #phpworld
    registration.php
    \Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magento_SampleMinimal',
    __DIR__
    );
    

    View Slide

56. @JoshuaSWarren #phpworld
    etc/module.xml
    
    xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/
    etc/module.xsd">
    
    
    
    

    View Slide

57. @JoshuaSWarren #phpworld
    etc/di.xml
    
    xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    
    
    
    
    Creatuity\BlackfireCommands\Console\Command\WriteYamlCommand
    
    
    Creatuity\BlackfireCommands\Console\Command\ProfileCategoryCommand
    
    
    
    
    
    

    View Slide

58. @JoshuaSWarren #phpworld
    Interesting Examples
    • github.com/magento/magento2-samples/tree/master/
    sample-module-modifycontent
    • github.com/magento/magento2-samples/tree/master/
    sample-module-interception
    • github.com/magento/magento2-samples/tree/master/
    sample-module-payment-gateway
    • github.com/creatuity/magento2-blackfire-commands
    

    View Slide

59. @JoshuaSWarren #phpworld
    Recommendations
    • When building a new site, write many simple modules for
    each distinct customization, not one large module
    • Name modules in a logical manner based on the
    functionality they provide
    • Don’t reinvent the wheel. Use libraries on Packagist and
    open source modules where possible.
    

    View Slide

60. @JoshuaSWarren #phpworld
    Questions?
    

    View Slide

61. @JoshuaSWarren #phpworld
    Designing Magento 2 Sites
    

    View Slide

62. @JoshuaSWarren #phpworld
    Themes, Layouts and Templates
    • A Magento website runs a theme
    • Magento fully supports parent/child theme relationships
    • Don’t edit the core theme. Create a new child theme that
    inherits from the core Luma or Blank themes.
    

    View Slide

63. @JoshuaSWarren #phpworld
    Themes, Layouts and Templates
    • A theme consists of layouts and templates
    • Layouts are XML files that explain what blocks and
    containers appear on a page
    • Templates are PHTML files that contain HTML markup for a
    specific page or section of a page
    

    View Slide

64. @JoshuaSWarren #phpworld
    Stylesheets & Preprocessing
    • Magento 2 utilizes the LESS CSS preprocessor
    • LESS allows you to use variables, mixins and rules in your
    CSS
    • Modify LESS files and then compile them into CSS. Don’t
    modify CSS files directly.
    

    View Slide

65. @JoshuaSWarren #phpworld
    Sample
    • https://github.com/ubertheme/crafts-magento-2-theme
    

    View Slide

66. @JoshuaSWarren #phpworld
    Questions?
    

    View Slide

67. @JoshuaSWarren #phpworld
    Deploying Magento 2 Sites
    

    View Slide

68. View Slide

69. @JoshuaSWarren #phpworld
    No, seriously, hold on…
    

    View Slide

70. @JoshuaSWarren #phpworld
    The official Magento 2 documentation
    on deploying to production…
    

    View Slide

71. View Slide

72. View Slide

73. @JoshuaSWarren #phpworld
    One Option…
    • Upload all files to your server
    • bin/magento setup:upgrade
    • bin/magento setup:di:compile
    • bin/magento deploy:mode:set production
    • bin/magento setup:static-content:deploy
    

    View Slide

74. @JoshuaSWarren #phpworld
    Check Your Infrastructure
    • Magento Enterprise supports Varnish out of the box - use it
    • Please don’t deploy on $5/month hosting
    • Configure Magento to use Redis for cache storage
    

    View Slide

75. @JoshuaSWarren #phpworld
    Questions?
    

    View Slide

76. @JoshuaSWarren #phpworld
    Examples & Exercises
    

    View Slide

77. @JoshuaSWarren #phpworld
    Real World Examples
    • http://panhandleww.com/
    • http://stickyholsters.com
    

    View Slide

78. @JoshuaSWarren #phpworld
    Exercises
    • What do you want to try in Magento 2?
    

    View Slide

79. @JoshuaSWarren #phpworld
    Next Steps
    

    View Slide

80. @JoshuaSWarren #phpworld
    php[world] sessions
    • Magento 2 Performance Talk
    • Wednesday, 3PM, Ash Grove C
    • Automating Your Workflow With Gulp.js
    • Thursday, 11:30AM, Great Falls
    • Magento 2 Development Best Practices
    • Friday, 10AM, Ash Grove A
    

    View Slide

81. @JoshuaSWarren #phpworld
    Future Events
    • Magento 2 Performance Training - January 18th-20th in
    Orlando with Ivan Chepurnyi - http://bit.ly/2eAo8cz
    • Magento Imagine 2017 - April 3rd-5th in Las Vegas -
    imagine.magento.com 

    

    View Slide

82. @JoshuaSWarren #phpworld
    Stay in Touch
    • Never hesitate to ask questions via Twitter -
    @JoshuaSWarren or on Stack Exchange
    • Questions today?
    

    View Slide

83. @JoshuaSWarren #phpworld
    Go build something awesome!
    

    View Slide