React mit Magento 2

Erweiterung eines bestehenden Projekts mit ReactJS

Einleitung

Als Frontend-Entwickler stößt man heutzutage sehr oft auf die gehypte Javascript Library React. Die extreme Popularität der "Javascript-Bibliothek zum Erstellen von Benutzeroberflächen" (https://reactjs.org/) ist ungebrochen und wächst mit der immer größer werdenden Verbreitung von Web-Apps stetig. So setzt auch das vor kurzem veröffentlichte Magento PWA-Studio zur Erstellung einer Progressive Web App für Magento2 komplett auf die Bibliothek. Allerdings wird React mittlerweile sehr häufig nur noch mit Single-Page-Applikationen (SPA) in Verbindung gebracht, was aber einen großen Vorteil komplett unterschlägt: React wurde von Grund auf dahin konzipiert und optimiert, es als Erweiterung für bestehende Projekte zu verwenden. Hier zeigt sich auch, warum React als Bibliothek und nicht als Framework bezeichnet wird.

Im Entwickler-Alltag ist es oft eben nicht der Fall, dass man ein komplett neues Frontend (als SPA) erstellen soll, sondern ein bestehendes Projekt weiterentwickelt. Hier ist es oft schwierig, kostet zu viele Ressourcen oder ist komplett unnötig die gesamte Applikation zu einer SPA umzubauen. Gleichzeitig möchte man als Entwickler aber die Vorteile, die eine neue Technologie wie z.B. React bietet, nutzen.

Dieser Artikel soll also zeigen, wie React sehr einfach in ein bereits bestehendes Frontend integriert oder einzelne Komponenten ausgetauscht werden können. Im Folgenden werden einige grundlegende React-Kenntnisse vorausgesetzt.

Demo

Das im Folgenden beschriebene Beispiel-Setup und -Projekt ist als Demo-Code unter https://github.com/mothership-gmbh/react-demo verfügbar.

Setup/Installation

In diesem Beispiel wird ein möglichst einfaches Setup ohne Module-Bundler wie Webpack o.ä. gezeigt. Es wird einzig und allein eine Kompilierung von JSX zu Javascript aufgesetzt, hier über den Task Runner Gulp, der in vielen Projekten schon vorhanden sein könnte und entsprechend nur noch erweitert werden müsste.

Voraussetzungen:

Nachdem beides installiert ist, kann im Root-Verzeichnis folgende package.json erzeugt werden.

package.json

{
  "name": "mothership-react-demo",
  "version": "1.0.0",
  "description": "Wir integrieren React in eine bestehende App",
  "main": "index.js",
  "author": "Mothership GmbH",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-react-jsx": "^7.0.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0-beta.2"
  }
}

Nach dem Ausführen des Befehls npm install ist das Grundsetup schon fertig. Nun fehlt nur noch die Konfiguration von Gulp, damit die JSX-Syntax in valides Javascript kompiliert wird. Dazu legen wir die Datei gulpfile.js mit folgendem Inhalt an.

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');

// JSX-Task um JSX in Javascript zu kompilieren
gulp.task('jsx', () => {
    return gulp.src('web/js/react/src/**/*.js')
        .pipe(babel({
            plugins: ['@babel/plugin-transform-react-jsx']
        }))
        .pipe(gulp.dest('web/js/react/dist'));
});

// Watch-Task um Änderungen am JSX automatisch zu kompilieren
gulp.task('watch', function () {
    gulp.watch('web/js/react/src/**/*.js', {ignoreInitial: false}, gulp.series('jsx'));
});

// Default Task von Gulp
gulp.task('default', gulp.parallel(['watch']));

Die Dateistruktur sieht in diesem Beispiel also wie folgt aus: Alle React-spezifischen Dateien befinden sich im Ordner js/react, um eine möglichst einfache Abgrenzung von evtl. bereits existierendem Javascript-Code zu schaffen. Die JSX-Quelldateien werden in web/js/react/src abgelegt, die fertig kompilierten Dateien sind in web/js/react/dist zu finden.

app
├── gulpfile.js
├── package-lock.json
├── package.json
└── web
    ├── css
        ├── mothership.css
        └── styles.css
    ├── index.html
    └── js
        └── react
            ├── dist
            │   └── modal.js
            ├── src
            │   └── modal.js
            └── vendor
                ├── react-dom.js
                └── react.js

Hiermit ist das Setup vollendet. Um die React-Komponenten in valides Javascript zu kompilieren, kann der Befehl gulp jsx ausgeführt werden. Um während der Entwicklung nicht bei jeder Änderung diesen Befehl erneut manuell ausführen zu müssen, kann stattdessen gulp watch verwendet werden. Hier wird ein Watcher gestartet, der bei Änderungen an den Quelldateien automatisch den JSX-Task ausführt.

React Komponente entwickeln und in bestehender Seite verwenden

Um das Beispiel möglichst einfach zu halten, soll eine simple Modal-Komponente entwickelt werden, die sich durch den Klick eines Buttons aufrufen lässt.

Zuerst muss auf der Seite, die die React-Komponente enthalten soll (hier: index.html), die React-Bibliothek eingebunden werden. Dazu braucht es zwei Dateien, react.js und react-dom.js. Diese können z.B. über ein CDN geladen werden, im Beispiel werden sie lokal bereitgestellt. Zu beachten ist, dass diese beiden Dateien vor dem Javascript der späteren Komponente eingebunden werden.
Im Folgenden wird nun die React-Komponente erstellt und in die Seite integriert. Dazu braucht es ein Container-Element im DOM, hier mit der ID react-modal.

index.html

<html>
  <head>...</head>
  <body>
    ...
    <!-- Container-Element für die React-Komponente -->
    <div id="react-modal"></div>
    ...
    <script type="text/javascript" src="js/react/vendor/react.js"></script>
    <script type="text/javascript" src="js/react/vendor/react-dom.js"></script>
    <!-- Einbinden der Modal-Komponente -->
    <script type="text/javascript" src="js/react/dist/modal.js"></script>
  </body>
</html>

Die React-Komponente ist sehr simpel gehalten. Da das Modal zuerst einmal ausgeblendet sein soll, wird der initiale State isOpen auf false gesetzt. Über die Funktion toggleOpen kann dieser Status gewechselt werden.
Gerendert wird das Modal so, dass sowohl bei Klick auf den Button "Modal öffnen" als auch bei Klick auf den Hintergrund (bei geöffnetem Modal) toggleOpen aufgerufen wird, sodass sich das Modal entsprechend öffnet, bzw. schließt.
Zuletzt wird die Komponente in den zuvor beschriebenen DOM-Container mit der ID react-modal eingefügt.

js/react/dist/modal.js

'use strict';

class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          isOpen: false
        };
        this.toggleOpen = this.toggleOpen.bind(this);
    }

    toggleOpen() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    render() {
      var className = 'modal';
      className += this.state.isOpen ? ' open' : '';
        return <div>
            <button className='button-open' onClick={this.toggleOpen}>Modal öffnen</button>
            <div className={className}>
              <div className='content'>
                <button className='close-button' onClick={this.toggleOpen}>X</button>
                <div>
                  <h2>Ich bin das Modal</h2>
                  <div>Man kann mich über das X schließen, aber auch über einen Klick außerhalb</div>
                  <iframe src="https://giphy.com/embed/xT77XWum9yH7zNkFW0"
                          width="480"
                          height="270"
                          frameBorder="0"
                          className='giphy-embed'
                          allowFullScreen>
                  </iframe>
                  <p>
                      <a href="https://giphy.com/gifs/9jumpin-wow-nice-well-done-xT77XWum9yH7zNkFW0">via GIPHY</a>
                  </p>
                </div>
              </div>
              <button className='background' onClick={this.toggleOpen}/>
            </div>
          </div>
    }
}

const e = React.createElement;
const domContainer = document.querySelector('#react-modal');
ReactDOM.render(e(Modal), domContainer);

Fazit

Obwohl React meist in einem Atemzug mit Single-Page-Applikationen genannt wird, eignet es sich auch hervorragend, um ein bereits bestehendes Frontend mit einigen dynamischen Elementen modular zu erweitern. So müssen Frontend-Entwickler nicht auf den Einsatz dieser modernen Technologie verzichten, ohne einen kompletten Relaunch/Rewrite des Frontends nötig zu machen. React-Neulinge haben des Weiteren so die Möglichkeit, schon jetzt mit wenig Aufwand Erfahrung mit der Bibliothek zu sammeln, um so für zukünftige Aufgaben (z.B. die Umsetzung einer Magento2 PWA-Storefront) gewappnet zu sein.

markiert mit Social Network

26. Magento-Stammtisch München - 5. Dezember 2018

Am 5. Dezember 2018 findet der 26. Magento Stammtisch München statt. Hierzu lädt Mothership (https://www.mothership.de/) in die Elvirastraße 25 in 80636 München https://goo.gl/maps/85HHnDZUH9x ein.

Der Stammtisch richtet sich an alle die sich für Magento oder E-Commerce interessieren oder damit arbeiten. Ob Magento Entwickler, Shopbetreiber oder Start-up – beim Magento-Stammtisch in München ist jeder willkommen.

Geboten werden neben Erfrischungsgetränken und Fingerfood auch Talks und eine freundliche Gesprächsrunde.

AGENDA:

  • 19:00 - Get-Together
  • [15-30min] Kategorieübergreifendes Upselling im E-Commerce mit Data Mining - Ludwig Wacker (Mothership GmbH)
  • [15-30min] - Magento 2 REST API - Alexander Turiak (Adobe)

ANFAHRT:

Mit dem ÖPNV: Das Büro erreicht man unkompliziert mit den öffentlichen Verkehrsmitteln. Hierzu wird empfohlen die U1 bis zur Maillingerstraße zu nehmen, das Büro befindet sich ca. 5 Fußminuten von der U-Bahn Station im 2. OG des Rückgebäudes.

Mehr Infos uns die Anmeldung finden Sie hier:

https://www.meetup.com/magento-e-commerce-meetup-muenchen/events/256149265/

oder hier

https://www.xing.com/events/26-magento-stammtisch-munchen-5-dezember-2018-2015084

markiert mit Social Network

Magento Module Developing, QA and Testing for Experts :)

Am 10. Juni 2015 fand in München der 17. Magento Stammtisch (http://www.meetup.com/de/magento-e-commerce-meetup-muenchen/) im Büro der Venture Stars (http://www.venture-stars.com/) statt. Gekommen waren ca. 20 Magento Interessierte, darunter hauptsächlich Entwickler. Der Vortrag von Bosco van Hoi beschreibt einen Teil unseres Arbeitsworkflows

Varnish, populärer Proxy für Magento in Version 4.0 veröffentlicht

Varnish der populäre Transparent-Proxy für Magento ist heute in der Version 4.0 erschienen. Stark frequentierte Webprojekte wie große und bekannte Magento Stores setzen Varnish vor den Webserver um Rechenlast vom Server zu halten und dem User schnelle Zugriffszeiten zu ermöglichen, da Inhalte durch Varnish gecachted ausgeliefert werden, eine Berechnung oder Verarbeitung des Requests bei einer vollgecachten Seite geht also nicht mehr über PHP/MySQL oder den Webserver.

In diesem Video wird die Funktionsweise anschaunlich erklärt:


Die größten Änderungen von Varnish 4.0 sind:

  • Varnish unterstützt nun vollständig das Streaming von Inhalten
  • Das Sicherheitskonzept wurde grundsätzlich geändert, es gibt nun zum Beispiel Read-Only Einstellungen, welche nicht mehr über die Konsole überschrieben werden können. Standardmäßig wurde nun auch die Ausführung von C-Code in der Konfiguration deaktiviert
  • Das Loggin von Varnish wurde Grundlegend überarbeitet, dadurch soll das Debuggen von Websiten erleichtert werden
  • Erleichterung in der Einrichtung einer Loadbalacing Lösung
  • Das Threading wurde komplett überarbeitet, es wurde dafür vorbereitet, dass künftig parallele ESI Requests möglich sind oder HTTP 2.0

Varnish 4.0 kann ab sofort hier https://www.varnish-cache.org/releases herunter gelanden werden. Wir freuen uns bereits Tests im Umgang mit Magento vorzunehmen.

markiert mit Social Network

Magento 1.8 Entwickler Kochbuch – Review

TL;DR

Solides, aber nicht perfektes englischsprachiges Buch für Einsteiger in der Magento Entwicklung.

Jeder Magento Neuling kennt das Problem, es gibt im Internet jede Menge Information und Anleitungen zu bestimmten Problemen, leider kann man als Neueinsteiger oft nicht unterscheiden ob die Information sinnvoll ist, auch fehlt es oft an Zusammenhängen.

Genau diese Lücke will Packt mit dem Buch „Magento 1.8 Development Cookbook“ http://bit.ly/1feMySA schließen, die Autoren Bart Delvaux und Nurul Ferdous haben hier eine 274 Seiten Sammlung an Fallbeispielen mit konkreten Problemlösungen geschaffen.

Das Magento Entwickler Buch ist wie folgt aufgebaut:

  • Kapitel 1: Getting Started with Magento
  • Kapitel 2: Theming
  • Kapitel 3: Working with Products
  • Kapitel 4: Creating a Module
  • Kapitel 5: Database Concepts
  • Kapitel 6: Databases and Modules
  • Kapitel 7: Magento Backend
  • Kapitel 8: Event Handlers and Cronjobs
  • Kapitel 9: Creating a Shipping Module
  • Kapitel 10: Creating a Product Slider Widget
  • Kapitel 11: Performance Optimization
  • Kapitel 12: Debugging and Unit Testing

An vielen Stellen wäre ich ehrlich gesagt ein weniger anderer Meinung, zum Beispiel geht meine Empfehlung in Sachen Magento Entwickler IDE ganz klar an JetBrains PhpStorm http://www.jetbrains.com/phpstorm/ mit der Erweiterung Magicento http://plugins.jetbrains.com/plugin/7089

Oder würde ich nicht dazu raten meine Magento Entwicklungs-Umgebung „händisch“ aufzusetzen oder mit MAMP oder WAMP sondern mit einer auf Magento optimierten Vagrant Instanz wie https://github.com/mothership-gmbh/vagrant_magento

Das CLI Tool Wiz https://github.com/classyllama/Wiz wird hier außerdem besprochen, bevorzugen würde ich persönlich aber https://github.com/netz98/n98-magerun da aus meiner Sicht mächtiger.

Insgesamt fehlt mir ab und an die Tiefe in ein Thema, oder der Hinweis, dass das Problem eventuell auch anders gelöst werden könnte, oder auf welche Stolperfallen beachten werden müssen.

Zusammenfassend würde ich das Buch aber trotzdem mit 4 von 5 Sternchen bewerten, einem Magento Neuling kann man es empfehlen, auch wenn man nicht alles 1 zu 1 so übernehmen sollte.

markiert mit Social Network

Mothership bei der Magento Live 2013 in München

Am 12. November 2013 fand in München im Westin Grand Hotel die Magento Live in Deutschland statt, an der Mothership als Münchner Magento Agentur natürlich teilgenommen hat. Zahlreiche Aussteller aus den Bereichen Magento Implementierung und Intregration, Magento Hosting, oder Magento Mobile Lösungen fand man in der Launch des Hotels, in der es intressante Gespräche und gutes Essen gab.

Kommende Magento Features 2013 bis 2014
Die Keynote wurde tradionell von Roy Rubin gehalten, hier wurde besonders auf den Einsatz von Mobile hervorgehoben und der Zeitplan der Releases von Magento 1.x vorgestellt.

Auf dieser Magento Konferenz hört man ingesamt sehr oft Themen zu Magento Mobile Lösungen, es wurde sehr oft darüber gesprochen wie wichtig die Optimierung auf Mobiltelefone ist.

Neben einem Vortrag zu "richtigen Entscheidungen" von dem Ex-Schiedrichtsrichter Dr. Markus Merk
dr-markus-merk.jpg
wurden zahlreiche Magento Shops vorgestellt.

markiert mit Social Network

10. Münchener Magento Entwickler Stammtisch

Zum 10. mal fand am 13. November 2013 im Zoozies in der Wittelsbacher Str. 15 ein Magento Stammtisch statt. Geladen waren Magento Entwickler, Shopbetreiber oder Gründer von Start-ups. In geselliger Runde wurde während dem konsumieren von bodenständigen Kaltgetränken über Magento und das PHP bzw. Web Umfeld philosophiert.
Magento Entwickler aus München
Zentral wurde die Veranstaltung auf der Xing organisiert, für den nächsten Magento Stammtisch gibt es bereits ein Xing Event. Über reges Interesse und zahlreiche Magento interessierte Besucher würden wir uns sehr freuen :-)

markiert mit Social Network

Magento Hackathon im Oktober 2013 in München

Dieses Jahr fand erneut der Magento Hackathon in München statt. Bei einem Hackathon handelt es sich um Treffen von meist sehr erfahrenen Entwickler, die an einem Wochenende einfach Spaß daran haben, ein wenig zu programmieren. Natürlich wurde die Veranstaltung mit einem entsprechenden Vorprogramm am Freitag Abend im Wirtshaus Weinbauer gestartet. Zur Freude aller Teilnehmer waren die Nationen sehr vermischt, unter Anderem hatten wir Entwickler aus Frankreich, der Schweiz und den Niederlanden, so dass gemütlich bei Wein und Bier nette Gespräche ausgetauscht wurden. Unter Anderem wurden auch schon die bevorstehenden Projekte am Samstag diskutiert.

Der Hackathon-Samstag

Der Münchner Hackathon fand in den Räumlichkeiten der Jarlssen GmbH statt. Hierzu ein herzliches Danke Schön! Das Büro liegt mitten in Schwabing und war für alle Teilnehmer sehr einfach erreichbar. Bereits um 10 Uhr fanden sich die ersten Entwickler ein und kurz vor 12 wurde auch schon die bevorstehende Agenda ausgearbeitet. So weit ich mich noch erinnern kann, handelte es sich hierbei um folgende Projekte:

  • Reindex-Prozess visualisieren
  • Extend-Inline Translations
  • Installer
  • eComdev PHP-Unit verbessern
  • Magento mit Casper.JS testen
  • Non-Spy Chart

Unser Hackathon-Projekt: Casper.JS

Casper.JS bietet die Möglichkeit, eine Webseite mit Hilfe von JavaScript programmatisch zu testen. Das Ziel von solchen Tests ist die Reduzierung des Wartungsaufwand bei späteren Änderungen im Code. Insbesondere im E-Commerce-Umfeld ändert sich die Software stetig, so dass dieses Thema für uns besonders interessant war. Wir haben uns also den Hut des Projektleiters aufgesetzt und uns das Framework genauer angeschaut. Initiiert wurde diese Idee von Jacques Bodin-Hullin, der auch nebenbei das interessante Installer-Projekt betreut.

> CasperJS is an open source navigation scripting & testing utility written in Javascript for the PhantomJS WebKit headless browser.

Sowohl die Installation als auch die Konfiguration der Entwicklungsumgebung war schnell erledigt. Zum Beispiel mit den vordefinierten Puppet-Skripte. Zusätzlich ist die Installation von Casper.JS und Phantom.JS notwendig. Eine genauere Anleitung haben wir unter unserem Repository verfasst. Aber jetzt erst mal ein kleines Codebeispiel:

casper.test.begin('Homepage', function suite(test) {

    // Start page
    casper.start(url, function () {

        this.printTitle();

        test.info('Testing Homepage');

        /**
* User this command to get the url from the command line.
*/
        test.info('Target URL: ' + url);

        test.assertTitle('Home page');
        test.assertExists('.page .header-container .header h1.logo a[href="' + url + '"]');
        test.assertExists('.box table td:first-child a[href="' + url + 'sony-vaio-vgn-txn27n-b-11-1-notebook-pc.html"]')
    })

    .run(function () {
        test.done();
    });
});

Dieser einfacher Test zeigt, wie sich sehr einfach Tests anhand von DOM-Selektoren schreiben lassen und orientiert sich dabei stark an den bekannten Selenium-Tests. Leider bietet Casper.JS keine Möglichkeit, DOM-Elemente interaktiv zu selektieren. Dies wird auch in einem anderen Blog-Beitrag bemängelt. Jedoch fühlt sich Casper.JS mehr nach programmieren an und die API kennt sehr umfangreiche Methoden zur Steuerung und Testen einer Webseite. Wir hatten auf jeden Fall sehr viel Spaß damit. Folgendes einfaches Code-Beispiel nimmt nach jeden Test-Case ein Screenshot von der Webseite auf:

// Capture the current test page
var captures_counter = 0;
casper.capturePage = function (debug_name) {
    var directory = 'captures/' + casper.test.currentSuite.name;
    if (captures_counter > 0) {
        var previous = directory + '/step-' + (captures_counter-1) + '.jpg';
        if (debug_name) {
            var current = directory + '/step-' + captures_counter + '-' + debug_name + '.jpg';
        } else {
            var current = directory + '/step-' + captures_counter + '.jpg';
        }
        casper.capture(current);

        // If previous is same as current (and no debug_name), remove current
        if (!debug_name && fs.isFile(previous) && fs.read(current) === fs.read(previous)) {
            fs.remove(current);
            captures_counter--;
            casper.log('Capture removed because same as previous', 'warning');
        }
    }
    captures_counter++;
};

Das Ergebnis sind eindrucksvolle Screenshots:

step-1_.jpg
step-2.jpg
step-3.jpg
step-4.jpg
step-5.jpg

Fazit

Wir hatten bei dem Hackathon sehr viel Spaß und freuen uns, die Veranstaltung als Getränkesponsor unterstützen zu dürfen.

markiert mit Social Network

Das war die Meet Magento 2013

Die diesjährige Meet Magento fand vom 3. - 4. Juni 2013 fand wieder im dieses Jahr vom Hochwasser geplagten Leipzig statt. Wie jedes Jahr trafen sich einige Entwickler zu einer Preparty im Spizz in der Leipziger Innenstadt ein.

Dieses Jahr wurden bei der Keynote zu unserem erfreuen wichtige Entwickler des Firegento Projekt geehrt und reicht damit der Magento Community die Hand.
Firegento Magento

Wie jedes Jahr gab es jede Menge interessanter Magento Entwickler Talks.
Einige Entwickler Vorträge

markiert mit Social Network