Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a Single Page Shop with Multiple Teams

Building a Single Page Shop with Multiple Teams

Michael Geers

April 20, 2016
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. javascript framework Building a Single Page Shop with Multiple Teams

    is not enough Michael Geers @naltatis code.talks commerce 2016
  2. Artikelname Foto Beschreibung In den Warenkorb Shopname Preis 19,99 €

    Team Produkt Team Bestellen Warenkorb 3 Artikel Komposition
  3. PJAX history.pushState & ajax Content A Header Footer Content B

    1. Aufruf <a href="/b" pjax> 2. Aufruf example.com/a example.com/b GET /b
 X-PJAX: true
  4. Artikelname Foto Beschreibung In den Warenkorb Shopname Preis 19,99 €

    noch 5 verfügbar Team Produkt Team Bestellen Warenkorb 3 Artikel blau grün gelb Reco Reco Reco Reco Reco Kunden kauften auch ... Team Empfehlung lazy loading
  5. Client Side Include
 deklarativ | Custom Element <h-include src="/empfehlung?key=4711_blau"/> Gustaf

    Nilsson Kotte https://github.com/gustafnk/hinclude/tree/custom-element
  6. Browser Server HTML Netzwerk Template & Daten Anzeige Die Realität

    Anzeige'' API Daten Mini HTML Template Neue Ansicht HTML Modifikation Anzeige' UI State Change
  7. Browser Server HTML Netzwerk Template & Daten Anzeige Die Realität

    Anzeige'' API Daten Mini HTML Template Neue Ansicht HTML Modifikation Anzeige' UI State Change Template Template Template
  8. wonder.js v2.9 wonder.js v3.0b snow.js Framework Isolation
 using Custom Elements

    <empfehlung-detail product="4711" color="blau" /> <bestellen-minicart />
  9. Custom Elements
 Lifecycle Callbacks <empfehlung-detail product="4711" color="blau" /> http://grml.in/ https://github.com/WebReflection/document-register-element

    gremlins.create('empfehlung-detail', { initialize: function() {..}
 attributeDidChange: function (attr, prev, val) {..} destroy: function() {..} });
  10. tiger.js Page/Team Transitions Research needed! arrow.js Team Produkt Team Bestellen

    <produkt-detail /> <bestellen-cart /> https://github.com/patrick-steele-idem/morphdom pjax, morphdom? reload top level router? / -> <suche-homepage /> /p -> <produkt-detail /> /cart -> <bestellen-cart /> /account -> <konto-info />
  11. Slides: A Simpler Web App Architecture
 Gustaf Nilsson Kotte
 http://de.slideshare.net/GustafKotte/a-simpler-web-app-architecture-jdays-2016

    Talk: Wait, what!? Our microservices have actual human users?
 Stefan Tilkov
 https://www.youtube.com/watch?v=pU1gXA0rfwc Blog: Transklusion in Self-Contained Systems
 Till Schulte-Coerne
 https://www.innoq.com/en/blog/transklusion/ Mehr zum Thema
  12. Deraman Auskratzt - Water - https://flic.kr/p/kEWpjb
 Dave Gingrich - Threads

    - https://flic.kr/p/5bwju3
 slgckgc - Hand Weights - https://flic.kr/p/9i26WN
 Georgie Pauwels - Bags - https://flic.kr/p/pFLZzE
 Thomas Hawk - Where You Headed Joe? - https://flic.kr/p/fhyGL
 Susanne Nilsson - Taking a close up - https://flic.kr/p/nppBcE
 ᦸባ - d.c. tweetin’ - https://flic.kr/p/nQeTdF
 Susanne Nilsson - People with phones ... - https://flic.kr/p/qvSsqr
 Apionid - Holiday Snap 2: Tron - https://flic.kr/p/r23SxR
 bekassine… - leaky - https://flic.kr/p/kWQwcB
 Korb - 34/365 - https://flic.kr/p/8VtBLq
 Julio Martínez - Good bread - https://flic.kr/p/fP8AMj
 Jyoti Das - rolls - https://flic.kr/p/9mchd4
 Matt Martin - Recycle - https://flic.kr/p/9hJfzP Matt Martin - Recycle - https://flic.kr/p/9hJfzP
 pchow98 - HP C7000 BladeSystem - https://flic.kr/p/7AVF23
 Christian Hornick - Smartphone - https://flic.kr/p/oV8kWF
 John Griffiths - Tools - https://flic.kr/p/fipdcK
 Kai C. Schwarzer - Licht aus. - https://flic.kr/p/92LANm
 Dren Pozhegu - The wall - https://flic.kr/p/rmurHW
 Anthony Citrano - one - https://flic.kr/p/6m75z2
 cocoparisienne - baguette
 https://pixabay.com/photo-246424/
 Stig Nygaard - Copenhagen Metro escalators
 https://en.wikipedia.org/wiki/File:Copenhagen_Metro_escalators.jpg