Getting Into HNPWA with Next.js at Google I/O 2017 Extended in Seoul, Korea

Getting Into HNPWA with Next.js at Google I/O 2017 Extended in Seoul, Korea

Sharing my experience of making HNPWA with Next.js frameworks built on the top of react

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

July 03, 2017
Tweet

Transcript

  1. GETTING INTO

  2. None
  3. Hacker News is a social news website focusing on computer

    science and entrepreneurship. running by y combinator, Paul Graham, that have many of clones
  4. None
  5. None
  6. None
  7. CHECKPOINT pwa, w e b m a n i f

    e s t , s e r v i c e w o r k e r ... all of v i e w s (Top, New, Best ...) display 3 0 i t e m s per-page _ 9 0 / 1 0 0 _ s c o r e by lighthouse auditing first interactive in < 5 s by webpagetest
  8. AND MORE manual inspection by addy osmani application shell pattern

    (mandatory) best to work cross-browser (optional) supports offline caching of hn data (optional) server-side rendering (optional)
  9. None
  10. None
  11. most popular news site in tech simlple main view with

    list detail views trimmed data for offline
  12. None
  13. None
  14. None
  15. popular frameworks with r e a c t / p

    r e a c t production ready easy integration with own cloud simple, but powerful performance zero-configuration of code-splitting and ssr
  16. pwa features is not ready yet not in the list

    on hnpwa fan of zeti production
  17. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  18. None
  19. None
  20. yarn create next-app

  21. None
  22. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  23. None
  24. None
  25. None
  26. None
  27. HACKERNEWS API official api on Firebase unofficial restful-styled api

  28. None
  29. e x p o r t d e f a

    u l t c l a s s e x t e n d s R e a c t . C o m p o n e n t { s t a t i c a s y n c g e t I n i t i a l P r o p s ( { q u e r y , p a t h n a m e } ) { / / f i r e b a s e - h a c k e r n e w s , p r o m i s e a n d / / s e r v i c e w o r k e r f e t c h e v e n t m a n a g i n g s u p p o r t s c o n s t h n = h a c k e r n e w s . i n i t ( f i r e b a s e ) c o n s t s t o r i e s = a w a i t h n . s t o r i e s ( ' t o p ' ) r e t u r n { s t o r i e s } } }
  30. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  31. CUSTOM SERVER next.js supports server-side-rendering api in order to customize

    routes
  32. c o n s t e x p r e

    s s = r e q u i r e ( ' e x p r e s s ' ) / / i n c a s e o f e x p r e s s c o n s t n e x t = r e q u i r e ( ' n e x t ' ) c o n s t a p p = n e x t ( { D E V _ O R _ N O T } ) c o n s t h a n d l e = a p p . g e t R e q u e s t H a n d l e r ( ) / / c r e a t e a h a n d l e r a p p . p r e p a r e ( ) . t h e n ( ( ) = > { c o n s t s e r v e r = e x p r e s s ( ) s e r v e r . g e t ( ' * ' , ( r e q , r e s ) = > { r e t u r n h a n d l e ( r e q , r e s ) / / r e t u r n r e n d e r e d p a g e } ) s e r v e r . l i s t e n ( 3 0 0 0 , e r r = > { c o n s o l e . l o g ( ' > R e a d y o n h t t p : / / l o c a l h o s t : 3 0 0 0 ' ) } ) } )
  33. DEPLOYMENT WITH NOW cloud service, very friendly to node.js deployment

    with zero-configuration
  34. NOW COMMANDS # l i s t i n g

    n o w l s # r e m o v e a l l o f d e v e l o p m e n t v e r s i o n n o w r m m y a p p - - s a f e # d e p l o y m e n t a s o s s n o w - - n a m e = m y a p p - - p u b l i c
  35. None
  36. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  37. PWA FEATURES web manifest for installable webapp service worker for

    offline experience
  38. WEB MANIFEST n p m i n s t a

    l l - g @ p w a / m a n i f e s t p w a - m a n i f e s t . / s t a t i c . / s t a t i c / i c o n s - - i c o n s = . / a s s e t s / i c o n .
  39. None
  40. SERVICE WORKER < S e r v i c e

    W o r k e r > react component w o r k b o x , brand new service worker lib n e x t - p r e c a c h e , precache list for next.js
  41. i m p o r t S c r i

    p t s ( ' h t t p s : / / u n p k g . c o m / w o r k b o x - s w @ 0 . 0 . 2 ' ) c o n s t w o r k b o x S W = n e w W o r k b o x S W ( { c l i e n t s C l a i m : t r u e } ) / / p l a c e h o l d e r f o r p r e c a c h e s w o r k b o x S W . p r e c a c h e ( $ { p r e c a c h e } ) w o r k b o x S W . r o u t e r . r e g i s t e r R o u t e ( ' / ' , w o r k b o x S W . s t r a t e g i e s . s t a l e W h i l e R e v a l i d a t e ( ) )
  42. None
  43. next-precache supports u n i q u e s t

    y l e d r o u t i n g of next.js n e x t - p r e c a c h e - - s w = . / s e r v i c e - w o r k e r . j s
  44. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  45. AUDITING #sizematters w e b p a g e t

    e s t . o r g , test in emerging mobile env l i g h t h o u s e , ref point for modern webapp b u n d l e s i z e , analyze size of your package
  46. None
  47. None
  48. None
  49. None
  50. ANALYZING BUNDLE SIZE to reduce bundle size of critical route

    path. If there is downsizing for about 100kb, which the bytes will be estimated 1s in emerging mobile
  51. webpack-bundle-size-analyzer f i r e b a s e :

    6 1 8 . 7 3 K B ( 5 1 . 5 % ) r e a c t : 2 2 . 5 K B ( 3 . 8 2 % ) r e a c t - d o m : 1 2 7 . 2 4 K B ( 2 1 . 6 % ) n e x t : 9 3 . 9 3 K B ( 1 6 . 0 % )
  52. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  53. BEFORE YOU GO FOR OVER IT

  54. None
  55. None
  56. None
  57. None
  58. None
  59. OPTIMIZING IN NEXT.JS s s r , enhanced first meaningful

    time p a g e b a s e d c o d e - s p l i t t i n g p r e l o a d , to ensure fast delivery resources n e x t - p r e c a c h e , cache the pages splitted k i c k i n g m e g a b u n d l e
  60. KICKING MEGA BUNDLE pull back hacker package from the app

    lightweight javascript framework
  61. PULL BACK HACKERNEWS FROM THE APP / / s e

    r v i c e w o r k e r i m p o r t S c r i p t s ( ' h t t p s : / / . . . / f i r e b a s e j s / 4 . 1 . 2 / f i r e b a s e - a p p . j s i m p o r t S c r i p t s ( ' h t t p s : / / . . . / f i r e b a s e j s / 4 . 1 . 2 / f i r e b a s e - d a t a b a i m p o r t S c r i p t s ( ' h t t p s : / / . . . / f i r e b a s e - h a c k e r n e w s - s w . j s ' ) h a c k e r n e w s . i n i t ( f i r e b a s e , { w a t c h : t r u e } )
  62. PULL BACK HACKERNEWS FROM THE APP API CONT' / /

    u n i v e r s a l f e t c h i m p o r t n o d e F e t c h f r o m ' i s o m o r p h i c - f e t c h ' i f ( i n N o d e ) { f e t c h = n o d e F e t c h } c o n s t r e s = a w a i t f e t c h ( ` $ { h o s t } / h a c k e r n e w s / $ { p a t h n a m e } ` )
  63. None
  64. / / f i r e b a s e

    : 6 1 8 . 7 3 K B ( 5 1 . 5 % ) r e a c t : 2 2 . 5 K B ( 3 . 8 2 % ) r e a c t - d o m : 1 2 7 . 2 4 K B ( 2 1 . 6 % ) n e x t : 9 3 . 9 3 K B ( 1 6 . 0 % )
  65. None
  66. None
  67. None
  68. LIGHTWEIGHT JAVASCRIPT FRAMEWORK c o n f i g .

    r e s o l v e . a l i a s = { " r e a c t " : " p r e a c t - c o m p a t / d i s t / p r e a c t - c o m p a t " , " r e a c t - d o m " : " p r e a c t - c o m p a t / d i s t / p r e a c t - c o m p a t " , }
  69. PREACT / / f i r e b a s

    e : 6 1 8 . 7 3 K B ( 5 1 . 5 % ) p r e a c t : 1 9 . 9 8 K B ( 4 . 2 0 % ) / / r e a c t : 2 2 . 5 K B p r e a c t - c o m p a t : 1 6 . 7 5 K B ( 3 . 5 2 % ) / / r e a c t - d o m : 1 2 7 . 2 4 K B n e x t : 9 3 . 9 3 K B ( 1 9 . 8 % ) . . .
  70. None
  71. None
  72. None
  73. FURTHER MORE cleaned and optimized resources reactive ux, defer rendering

    in twitter mobile latest tools for bundling and javascript the cutting edge of features on the platform discover your secrets and share it
  74. None
  75. None