PWA s are the future!

Transcription

1

2 PWA s are the future!

3

4 Prediction Possible Fact

5 In the future, more people will visit our sites on mobile devices than desktops

6

7

8 Existing Projects: M1: in transition to M2 M2: live M2: being signed

9

10

11

12

13 Magento 2, Front-end Performance

14 94 / / 100

15 The great Magento 2 Pagespeed trick

16 TTFMMRI Time to first meaningful Magento related interaction

17

18 Lighthouse Auditing, performance metrics, and best practices for Progressive Web Apps

19

20

21 What s wrong with Magento 2 s FE? Ancient Javascript RequireJS is terrible Hundreds of Javascript files It s not React

22 mage/bootstrap jquery mage/apply/main Magento_Ui/js/lib/knockout/bootstrap /static/ jquery.min.js underscore jquery./scripts ko./template/engine knockoutjs/knockout-es5./bindings/bootstrap./extender/observable_array./extender/bound-nodes domready!

23 164 / kb / 812kb

24 HTTP2 to the rescue!!!

25

26 4 / kb / 524kb

27

28

29 Option 1 - Enable bundling in the admin Pros: None :( Cons No knowledge of AMD No knowledge of what code is used per page. Cannot minify/uglify correctly

30

31 Option 2 - Create your own Webpack bundler Pros: You could add additional features like pre-processing Could incorporate code-splitting Minification will be optimal Cons Relies on static analysis Will require a run-time for dynamically loaded modules Re-inventing what RequireJS already does

32 REQUIREJS OPTIMIZER is designed to be run as part of a build or packaging step after you are done with development and are ready to deploy the code for your users.

33 Option 3 - Manual creation of Requirejs Config

34

35

36

37

38

39 Option 3 - Manual creation of RequireJS Config Pros: Excellent performance Provides code-splitting configuration Cons Requires manual additions/removals Could include code you're not actually using Investigation needed to ensure items in the bundle will cause a cache-hit. Requires sync with Magento-generated RequireJS config file

40

41 Option 3 - Manual creation of Requirejs Config Pros: Excellent performance Provides code-splitting configuration Cons Requires manual additions/removals Could include code you're not actually using Investigation needed to ensure items in the bundle will cause a cache-hit. Requires sync with Magento-generated RequireJS config file

42 The final 10 / 20%

43 Option 4 - Automated creation of RequireJS Config

44

45

46

47

48

49

50

51

52

53

54

55

56 If you have these: Request Log (frontend modules) Magento Generated RequireJS Config Bundle config (parent->child mappings) then you can automatically generate RequireJS Config (for the Optimizer) JS code for loading additional bundles

57 Everything you need for the RequireJS optimizer

58 Code for loading additional bundles

59 This will allow you to pick up where you left off.

60

61 Option 4 - Automated creation of RequireJS Config Pros: Only bundle EXACTLY what you need, nothing more Supports mixins, dynamic files, basically anything that's loaded via RequireJS at run time, can be bundled Fine-grained control over parent-child relationships of bundles (for optimal usage) Code generation reduces human error and effort. Cons You still need to exercise the frontend, in the areas you care about.

62

63

64

65 (WIP)

66

67 wearejh.com egghead.io/instructors/shane-osbourne

68