Building abof.com

Slides for my talk at JSFoo about building the new version of abof.com from scratch using React.

More info at https://blog.alarisprime.com/e-commerce-case-study-building-faster-listing-pages-on-abof-com-part-1-cb99231a1e8a

Transcript

1. building abof.com
   ankur sethi
   ankur@alarisprime.com
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. >20 seconds
   before something showed up on the screen on a 3g
   connection
   

   View Slide

7. View Slide

8. time to first paint
   

   View Slide

9. View Slide

10. abof’s numbers
    

    View Slide

11. time to first paint on 3g
    time in seconds
    0
    5
    10
    15
    20
    before after
    2.6s
    20s
    

    View Slide

12. page load time on 3g
    time in seconds
    0
    7
    14
    21
    28
    before after
    9.4s
    27s
    

    View Slide

13. http://bit.ly/2bBESNF
    

    View Slide

14. three principles
    

    View Slide

15. be impatient
    start painting to the screen as early as possible
    

    View Slide

16. be lazy
    do as little work on the device as possible
    

    View Slide

17. set quotas
    for payload size, number of requests, memory use
    pretty much all your computing resources
    

    View Slide

18. tech stack
    

    View Slide

19. speed payload tooling
    server
    rendering
    people
    react
    ✅ ⚠ ✅ ✅ ✅
    angular2
    ✅ ⚠
    vue
    ✅ ✅ ⚠ ⚠
    riot
    ✅ ✅ ⚠ ⚠
    

    View Slide

20. redux
    webpack
    babel
    gulp
    and others
    

    View Slide

21. architecture
    

    View Slide

22. View Slide

23. page load strategy
    http://www.abof.com/women/clothing/dresses
    

    View Slide

24. stage 1: html
    

    View Slide

25. View Slide

26. stage 2: javascript
    which then loads images, account information, etc.
    asynchronously
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. stage 3: everything
    else
    third party scripts, analytics, etc.
    

    View Slide

31. View Slide

32. stage 1: html
    

    View Slide

33. why?
    

    View Slide

34. perception of speed
    

    View Slide

35. View Slide

36. first 12 products
    measure to discover what works best for you
    

    View Slide

37. how?
    

    View Slide

38. universal rendering
    or isomorphic rendering
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. react-dom
    

    View Slide

43. react-native
    

    View Slide

44. renderToString()
    

    View Slide

45. stage 2: javascript
    which then loads images, account information, etc.
    asynchronously
    

    View Slide

46. why?
    

    View Slide

47. prioritize user intent
    user wants to look at dresses, not account information
    

    View Slide

48. how?
    

    View Slide

49. first react takes over
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. then it fills in the blanks
    • product images
    • account information
    • loved products
    • bag items
    • site footer
    

    View Slide

56. stage 3: everything
    else
    third party scripts, analytics, etc.
    

    View Slide

57. why?
    

    View Slide

58. progressive
    enhancement
    and good old fashioned respect
    

    View Slide

59. analytics
    

    View Slide

60. queue analytics events
    

    View Slide

61. redux middleware
    

    View Slide

62. View Slide

63. View Slide

64. phew
    

    View Slide

65. View Slide

66. app performance
    talk to me!
    

    View Slide

67. testing load times
    webpagetest, pagespeed insights, and your eyeballs
    get drunk on 12th main
    

    View Slide

68. testing app
    performance
    test on real devices
    

    View Slide

69. questions?
    

    View Slide

70. ankur@alarisprime.com
    

    View Slide

71. hi@alarisprime.com
    

    View Slide