frontend entwicklung in magento: less/sass · pdf filemagento als fe-framework . 11 | netz98...
TRANSCRIPT
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
MARIA KERN | SENIOR FRONTEND ARCHITECT
Schwierigkeiten im Frontend?!
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 3 |
MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 4 |
MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 5 |
TEAM-ARBEIT KONFLIKTE SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 6 |
Gleichzeitig an einem Frontend arbeiten?
Internes Beispiel: diese Überschrift wurde im Projektverlauf 3 mal gestylt…
• 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
SPEZIELL IN MAGENTO
netz98 new media GmbH www.netz98.de [email protected] 7 |
SCHWIERIGKEITEN IM FRONTEND?!
Jeder Shop ist individuell. Im Frontend hängt vieles seitenübergreifend zusammen. Wie kann man so arbeiten, dass man projektübergreifend immer effektiver wird?
Herausforderung: Wiederverwendbarkeit!
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 9 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Herangehensweise: Magento als Frontend-Framework
Als solches nutzen
Weiter-entwickeln
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 10 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Im Backend ist die Modul-Entwicklung alltäglich
Zend Framework Magento Eigene
Module
Wenn möglich: Unabhängige Module!
Übernahme in anderem Projekt
Beispiel: N98_InfoFiles
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 11 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
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
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 12 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 13 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Search Navigation Hero List of links Highlight
http://daverupert.com/2013/04/responsive-deliverables/
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 14 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Voraussetzung: Materie genau kennen und verstehen!
„Frontend-Module“ von Magento erkennen und als solche nutzen
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 15 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Voraussetzung: Materie genau kennen und verstehen!
„Frontend-Module“ von Magento erkennen und als solche nutzen
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 16 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
• 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
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 17 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
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
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 18 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Eigenes „Framework“ wiederverwenden?
Als Framework nutzen
Und Weiter-entwickeln
Composer Paket
Beispiel für ein eigenes Frontend-Boilerplate
Projektübergreifende Styles – Modul-Styles werden im Boilerplate hinzugefügt und können im nächsten Projekt verwendet werden
netz98 new media GmbH www.netz98.de [email protected] 19 |
MAGENTO ALS FE-FRAMEWORK HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
Magento Templates (RWD-Theme)
Twitter Bootstrap
Boilerplate
Projekt-Styles
Ähnlicher Ansatz von Webcomm : https://github.com/webcomm/magento-boilerplate
netz98 new media GmbH www.netz98.de [email protected] 20 |
MAGENTO ALS FE-FRAMEWORK HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
netz98 Standard Style Definitionen
kundenspezifische Style Definitionen
Bootstrap (und andere Frameworks)
netz98 new media GmbH www.netz98.de [email protected] 21 |
MAGENTO ALS FE-FRAMEWORK HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
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
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 22 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
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/magento-
connect/bootstrap-responsive-theme.html
Werkzeuge: Präprozessoren Sass / Less
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
HILFSMITTEL NUTZEN
netz98 new media GmbH www.netz98.de [email protected] 24 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
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
HILFSMITTEL NUTZEN
netz98 new media GmbH www.netz98.de [email protected] 25 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
Emmet Plugin
Text-Editor Plugins
HILFSMITTEL NUTZEN
netz98 new media GmbH www.netz98.de [email protected] 26 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
http://sassmeister.com/ http://lesscssismore.com/
Vorschau Präprozessoren in CSS
FALLSTRICKE VON SASS / LESS
netz98 new media GmbH www.netz98.de [email protected] 27 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
http://lesscssismore.com/
nicht gewollt
KONVENTIONEN EINFÜHREN
netz98 new media GmbH www.netz98.de [email protected] 28 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
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
NACHLESEN
netz98 new media GmbH www.netz98.de [email protected] 29 |
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
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/
VIELEN DANK!
netz98 new media GmbH www.netz98.de [email protected] 30 |
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
?
FRAGEN