Das Shop Frontend der nächsten Generation

457365e2e75c27f3e1c3a3744f5c5e4b?s=47 Michael Geers
November 03, 2016

Das Shop Frontend der nächsten Generation

Vortrag auf dem neuland Fachtag 2016
https://neuland-bfi.de/fachtag-2016

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

November 03, 2016
Tweet

Transcript

  1. Das Shop-Frontend der nächsten Generation Michael Geers @naltatis neuland Fachtag

    2016
  2. Michael Geers Frontend Entwickler naltatis auf Twitter & GitHub

  3. was bisher geschah «

  4. 2000 - HTML & CSS* * kann ggf. Spuren von

    DHTML enthalten
  5. my first e-commerce

  6. 2005

  7. Full Stack Developer = Applikation

  8. 2007 Mobile Web

  9. 2008

  10. Responsive Design 2011

  11. 53% der Besucher einer mobile Seite warten max. 3 Sekunden

    Google DoubleClick, 2016 Bis zu 2% bessere Konversion für jede Sekunde schnellere Ladezeit. Walmart, 2013 100ms schnellere Homepage Ladezeit resultieren in 1,11% besserer Konversion. Im Bestellweg sind es 1,55%. Mobify, 2016 Performance! .org
  12. <sitenote>

  13. Content Navigation App Werbung Fremde Werbung Abo Werbung Finde den

    Content
  14. Ad-Blocker mit

  15. None
  16. Die Butter vom Brot nehmen lassen

  17. http://requestmap.webperf.tools/

  18. </sitenote>

  19. Applikation

  20. Backend Frontend

  21. Was unterscheidet Frontend & Backend?

  22. Runtime

  23. Tools

  24. CSS HTML JS Frontend Tools heute «

  25. HTML Frontend Backend Struktur Daten & Template

  26. Server Rendering

  27. HTML Frontend Backend Daten & Template

  28. None
  29. User Experience

  30. Reload

  31. Browser Server HTML Netzwerk Template & Daten Template & Daten

    Klick HTML Anzeige Anzeige'
  32. None
  33. 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
  34. None
  35. Progressive Enhancement

  36. <a href="/b" pjax>

  37. PJAX =
 Nicer Reloads

  38. Browser Server HTML Netzwerk Template & Daten Template & Daten

    Klick HTML ohne Header & Footer Anzeige Anzeige' kein Reload
  39. 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
  40. HTML Frontend Backend Daten & Template HTML' Template Duplicate Code

  41. UI Performance

  42. The RAIL Performance Model https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

  43. Sichtbares Ergebnis in unter einer Sekunde https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

  44. Reaktion auf Nutzeraktion in unter 100ms https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

  45. Client Side Rendering

  46. https://ar.al/notes/the-documents-to-applications-continuum/ von Aral Balkan Appify the Web?

  47. Client Side Frameworks

  48. None
  49. Browser Server Rumpf HTML & JS Netzwerk Anzeige Anzeige' Anzeige''

    Daten Template Client Side Rendering API Daten Static Template API UI State Change
  50. What's the fallback?

  51. Client Side Rendering Server Side & Isomorphic JavaScript

  52. Client Side Rendering Server Side & JavaScript Universal

  53. HTML HTML Frontend Backend Template & Daten Template

  54. Browser Server Initiales HTML & JS Netzwerk Anzeige Anzeige' Anzeige''

    Daten Template Server & Client Side Rendering API Server Side Renderer Template Daten API UI State Change Neue Ansicht
  55. Optimistic UI http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation

  56. Skeleton Screens http://www.lukew.com/ff/entry.asp?1797

  57. Ladezyklus einer Komponente komplett geladen Artikeldaten & Vorschaubild noch keine

    Daten vorhanden
  58. None
  59. https://ar.al/notes/the-documents-to-applications-continuum/ von Aral Balkan The Documents‐to‐ Applications Continuum https://ar.al/notes/the-documents-to-applications-continuum/ Aral

    Balkan
  60. Architektur

  61. Monolith

  62. Backend Frontend

  63. Microservices

  64. Microservices Frontend Product Pay Reco User Stock Mail Cart Teaser

    ERP Media
  65. Self-Contained Systems

  66. Self-Contained Systems Product Pay Reco User Stock Mail Cart Teaser

    ERP Media
  67. Empfehlungen Produkt Bestellen Mein Konto Self-Contained Systems

  68. Cross Functional Team = Produkt

  69. Artikelname Foto Beschreibung In den Warenkorb Shopname Preis 19,99 €

    Team Produkt Team Bestellen Warenkorb 3 Artikel Komposition
  70. wonder.js v2.9 wonder.js v3.0b snow.js Framework Neutralität
 Web Components <empfehlung-detail

    product="4711" color="blau" /> <bestellen-minicart /> Custom Element
  71. Time to First Tweet https://blog.twitter.com/2012/improving-performance-on-twittercom

  72. Time to Cart? 20 s

  73. Kurzgesagt https://www.youtube.com/watch?v=zmpdSSROus0

  74. #perfmatters

  75. o Frontend Monolith

  76. baut Rolltreppen!

  77. Vielen Dank! Michael Geers Frontend Entwickler naltatis auf Twitter &

    GitHub speakerdeck.com/naltatis
  78. 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
 Pierre - Emergency - https://flic.kr/p/ec8B8u
 Brad Frost - Devices - https://flic.kr/p/cfQwL7
 Leap Key - Ford Mustang Fastback - https://flic.kr/p/5c9qaV
 ctrlaltdileep - Did you just use a flash on me? - https://flic.kr/p/nKnRB7
  79. Server Side Server Side
 & JavaScript Server Side
 & mehr

    JavaScript Client Side Universal
 Client & Server Side Erster Seitenaufruf ! ! ! " ! Seitenwechsel " ! !! !!! !!! Progressive Enhancement # # # ⛔ # Wartbarkeit % & ' ( ) Rendering Cheat Sheet