frontend entwicklung in magento: less/sass · pdf filemagento als fe-framework . 11 | netz98...
TRANSCRIPT
![Page 1: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/1.jpg)
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
MARIA KERN | SENIOR FRONTEND ARCHITECT
![Page 2: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/2.jpg)
Schwierigkeiten im Frontend?!
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
![Page 3: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/3.jpg)
MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 3 |
![Page 4: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/4.jpg)
MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 4 |
![Page 5: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/5.jpg)
MANGELNDER ÜBERBLICK SCHWIERIGKEITEN IM FRONTEND?!
netz98 new media GmbH www.netz98.de [email protected] 5 |
![Page 6: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/6.jpg)
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…
![Page 7: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/7.jpg)
• 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?
![Page 8: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/8.jpg)
Herausforderung: Wiederverwendbarkeit!
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
![Page 9: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/9.jpg)
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
![Page 10: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/10.jpg)
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
![Page 11: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/11.jpg)
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
![Page 12: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/12.jpg)
MAGENTO ALS FE-FRAMEWORK
netz98 new media GmbH www.netz98.de [email protected] 12 |
HERAUSFORDERUNG: WIEDERVERWENDBARKEIT!
![Page 13: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/13.jpg)
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/
![Page 14: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/14.jpg)
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
![Page 15: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/15.jpg)
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
![Page 16: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/16.jpg)
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
![Page 17: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/17.jpg)
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
![Page 18: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/18.jpg)
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
![Page 19: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/19.jpg)
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
![Page 20: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/20.jpg)
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)
![Page 21: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/21.jpg)
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
![Page 22: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/22.jpg)
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
![Page 23: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/23.jpg)
Werkzeuge: Präprozessoren Sass / Less
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
![Page 24: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/24.jpg)
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
![Page 25: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/25.jpg)
HILFSMITTEL NUTZEN
netz98 new media GmbH www.netz98.de [email protected] 25 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
Emmet Plugin
Text-Editor Plugins
![Page 26: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/26.jpg)
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
![Page 27: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/27.jpg)
FALLSTRICKE VON SASS / LESS
netz98 new media GmbH www.netz98.de [email protected] 27 |
WERKZEUGE: PRÄPROZESSOREN SASS / LESS
http://lesscssismore.com/
nicht gewollt
![Page 28: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/28.jpg)
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
![Page 29: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/29.jpg)
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/
![Page 30: FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS · PDF fileMAGENTO ALS FE-FRAMEWORK . 11 | netz98 new media GmbH info@netz98.de . HERAUSFORDERUNG: WIEDERVERWENDBARKEIT! Module auch](https://reader030.vdocuments.net/reader030/viewer/2022032711/5a78997a7f8b9ae91b8cac1a/html5/thumbnails/30.jpg)
VIELEN DANK!
netz98 new media GmbH www.netz98.de [email protected] 30 |
FRONTEND ENTWICKLUNG IN MAGENTO: LESS/SASS
?
FRAGEN