Slide 1

Slide 1 text

2016 2016

Slide 2

Slide 2 text

@JoshuaSWarren #phpworld Magento 2 Development for PHP Developers

Slide 3

Slide 3 text

@JoshuaSWarren #phpworld Is Your Environment Ready?

Slide 4

Slide 4 text

@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

Slide 5

Slide 5 text

@JoshuaSWarren #phpworld About Me

Slide 6

Slide 6 text

@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

Slide 7

Slide 7 text

@JoshuaSWarren #phpworld About This Tutorial

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@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!

Slide 11

Slide 11 text

@JoshuaSWarren #phpworld About You

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@JoshuaSWarren #phpworld

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@JoshuaSWarren #phpworld Useful Tools & Sites

Slide 18

Slide 18 text

@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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

@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.

Slide 22

Slide 22 text

@JoshuaSWarren #phpworld Technical Architecture of Magento 2

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

@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

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@JoshuaSWarren #phpworld Layers upon layers…

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

@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.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

@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']);
 }

Slide 37

Slide 37 text

@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']);
 }

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@JoshuaSWarren #phpworld Thoughts & Questions So Far?

Slide 44

Slide 44 text

@JoshuaSWarren #phpworld Setting Up a New Magento 2 Site

Slide 45

Slide 45 text

@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

Slide 46

Slide 46 text

@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

Slide 47

Slide 47 text

@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

Slide 48

Slide 48 text

@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

Slide 49

Slide 49 text

@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

Slide 50

Slide 50 text

@JoshuaSWarren #phpworld Writing a Magento 2 Module

Slide 51

Slide 51 text

@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

Slide 52

Slide 52 text

@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

Slide 53

Slide 53 text

@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

Slide 54

Slide 54 text

@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\\": "" } } }

Slide 55

Slide 55 text

@JoshuaSWarren #phpworld registration.php

Slide 56

Slide 56 text

@JoshuaSWarren #phpworld etc/module.xml

Slide 57

Slide 57 text

@JoshuaSWarren #phpworld etc/di.xml Creatuity\BlackfireCommands\Console\Command\WriteYamlCommand Creatuity\BlackfireCommands\Console\Command\ProfileCategoryCommand

Slide 58

Slide 58 text

@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

Slide 59

Slide 59 text

@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.

Slide 60

Slide 60 text

@JoshuaSWarren #phpworld Questions?

Slide 61

Slide 61 text

@JoshuaSWarren #phpworld Designing Magento 2 Sites

Slide 62

Slide 62 text

@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.

Slide 63

Slide 63 text

@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

Slide 64

Slide 64 text

@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.

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

@JoshuaSWarren #phpworld Questions?

Slide 67

Slide 67 text

@JoshuaSWarren #phpworld Deploying Magento 2 Sites

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

@JoshuaSWarren #phpworld No, seriously, hold on…

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

@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

Slide 74

Slide 74 text

@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

Slide 75

Slide 75 text

@JoshuaSWarren #phpworld Questions?

Slide 76

Slide 76 text

@JoshuaSWarren #phpworld Examples & Exercises

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

@JoshuaSWarren #phpworld Next Steps

Slide 80

Slide 80 text

@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

Slide 81

Slide 81 text

@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 


Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

@JoshuaSWarren #phpworld Go build something awesome!