Das Shop Frontend der nächsten Generation

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

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
7. Full Stack Developer = Applikation
8. 2007 Mobile Web
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
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
29. User Experience
30. Reload
31. Browser Server HTML Netzwerk Template & Daten Template & Daten Klick HTML Anzeige Anzeige'
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
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
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
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