MARIA KERN SENIOR FRONTEND ARCHITECT FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS Schwierigkeiten im Frontend?!

SCHWIERIGKEITEN IM FRONTEND?! MANGELNDER ÜBERBLICK 3

SCHWIERIGKEITEN IM FRONTEND?! TEAM-ARBEIT KONFLIKTE Gleichzeitig an einem Frontend arbeiten? Internes Beispiel: diese Überschrift wurde im Projektverlauf 3 mal gestylt 6

SCHWIERIGKEITEN IM FRONTEND?! SPEZIELL IN MAGENTO Die Frage am Anfang: Welche Styles werden verwendet? Wie gehe ich ran? Laden und Überschreiben der Magento-Styles? Nur eigene Styles? Kopieren und Ändern der Magento-Styles? seit RWD-Theme und in Magento 2 nun besser möglich Enormer Umfang an Seiten im Frontend bleibt nichts beim Standard anders als im Backend [ ] Content-Pflege, Inline-Javascripts, Übersetzungen Jeder Shop ist individuell. Im Frontend hängt vieles seitenübergreifend zusammen. Wie kann man so arbeiten, dass man projektübergreifend immer effektiver wird? 7

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS Herausforderung: Wiederverwendbarkeit!

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Herangehensweise: Magento als Frontend-Framework Als solches nutzen Weiterentwickeln 9

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Im Backend ist die Modul-Entwicklung alltäglich Zend Framework Magento Eigene Module Übernahme in anderem Projekt Wenn möglich: Unabhängige Module! Beispiel: N98_InfoFiles 10

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Module auch im Frontend! Problem: Jeder Shop hat individuelles Aussehen Abstraktes Denken was von diesem Modul ist allgemein gültig, was ist kunden- oder projektspezifisch? Nutzen der Präprozessoren Styling-Bausteine durch Variablen/Mixins abstrakt halten (Erst das Einsetzen der Werte machen diese individuell) Klassen-Namen, Funktions-Namen, Variablen-Namen Denkweise immer auf Wiederverwendbarkeit gepolt 11

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK 12

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Search Navigation Hero List of links Highlight http://daverupert.com/2013/04/responsive-deliverables/ 13

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Voraussetzung: Materie genau kennen und verstehen! Frontend-Module von Magento erkennen und als solche nutzen 14

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Voraussetzung: Materie genau kennen und verstehen! Frontend-Module von Magento erkennen und als solche nutzen 15

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Styles-Verteilung: Gemeinsamkeiten, Positionierung, Abstände:.add-to-links li Farbe: a Icon:.link-wishlist:before Der Wishlist-Link muss auch außerhalb der Liste funktionieren 16

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Vorgeschmack auf Magento 2 Modularer Aufbau zieht sich komplett durch Es ist unerlässlich, das System zu verstehen und damit zu arbeiten Proaktives Nutzen der Variablen und Mixins Initial hoher Aufwand, aber langfristiger Nutzen 17

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Als Framework nutzen Und Weiterentwickeln Eigenes Framework wiederverwenden? 18

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Beispiel für ein eigenes Frontend-Boilerplate Twitter Bootstrap Composer Paket Magento Templates (RWD-Theme) Boilerplate Projekt-Styles Projektübergreifende Styles Modul-Styles werden im Boilerplate hinzugefügt und können im nächsten Projekt verwendet werden Ähnlicher Ansatz von Webcomm : https://github.com/webcomm/magento-boilerplate 19

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Bootstrap (und andere Frameworks) netz98 Standard Style Definitionen kundenspezifische Style Definitionen 20

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Einbindung der Bootstrap Dateien Einige Dateien nur als Referenz Styles und Mixins nur zur Verwendung innerhalb von Less Keine Einbindung in CSS-Datei (reference) gibt es in SASS nicht 21

HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! MAGENTO ALS FE-FRAMEWORK Es geht nicht darum, ein fertiges Theme zu erstellen, sondern sich eine wiederverwendbare Arbeitsgrundlage zu schaffen Themes gibt es genug Bootstrap Theme Beispiele: http://magenticians.com/7-magento-bootstrap-themes http://www.magentocommerce.com/magentoconnect/bootstrap-responsive-theme.html 22

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS Werkzeuge: Präprozessoren Sass / Less

WERKZEUGE: PRÄPROZESSOREN SASS / LESS HILFSMITTEL NUTZEN Grunt Generieren der CSS-Datei aus Sass oder Less (minifiziert + development mode mit map Datei) Separate Datei für ältere IE + Bless Task (wegen Rules Limit) Autom. Generieren von Image Sprites (inkl. Mixins) JS-Files zusammenfassen und minifizieren File Watcher Livereload + Cache Flush bei bestimmten Dateien n98-magerun Compass Task Runner / CLI Tools 24

WERKZEUGE: PRÄPROZESSOREN SASS / LESS HILFSMITTEL NUTZEN Emmet Plugin Text-Editor Plugins 25

WERKZEUGE: PRÄPROZESSOREN SASS / LESS HILFSMITTEL NUTZEN http://sassmeister.com/ http://lesscssismore.com/ Vorschau Präprozessoren in CSS 26

WERKZEUGE: PRÄPROZESSOREN SASS / LESS FALLSTRICKE VON SASS / LESS nicht gewollt http://lesscssismore.com/ 27

WERKZEUGE: PRÄPROZESSOREN SASS / LESS KONVENTIONEN EINFÜHREN Zur eigenen Sicherheit, Sauberkeit und für bessere Teamarbeit Namenskonventionen (siehe Magento 2) prefix.abs- (from abstract) für Extend class names '@' + '_' + 'object' + '-' + 'property' + '-' + 'state' = @_object-property-state @_link-color-hover Frontend-Styleguide erstellen Module außerhalb der Shopseiten auflisten greifen die Styles überall? Zur Kontrolle aber auch zum Nachschlagen für andere Entwickler Wird während oder sogar vor der Umsetzung erstellt Man zwingt sich, modular zu Denken Dateiablagen / -Gruppierungen / Dateinamen Magento 2 UI Library 28

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS NACHLESEN Weiterführende Links Magento 2 http://devdocs.magento.com/ http://devdocs.magento.com/guides/v1.0/frontend-dev-guide/css-topics/theme-ui-lib.html https://github.com/magento/magento2 http://magerun.net/ http://sassmeister.com/ http://lesscssismore.com/ http://gruntjs.com/getting-started http://docs.emmet.io/cheat-sheet/ http://styletil.es/ 29

FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS VIELEN DANK! FRAGEN? 30