$30 off During Our Annual Pro Sale. View Details »

Getting Into HNPWA with Next.js at Google I/O 2...

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

Jimmy Moon

July 03, 2017
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

Transcript

  1. Hacker News is a social news website focusing on computer

    science and entrepreneurship. running by y combinator, Paul Graham, that have many of clones
  2. 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
  3. 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)
  4. most popular news site in tech simlple main view with

    list detail views trimmed data for offline
  5. 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
  6. pwa features is not ready yet not in the list

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

    pwa features, web manifest & service worker auditing optimization, #sizematters
  8. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  9. 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 } } }
  10. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  11. 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 ' ) } ) } )
  12. 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
  13. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  14. 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 .
  15. 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
  16. 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 ( ) )
  17. 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
  18. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  19. 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
  20. 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
  21. 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 % )
  22. create-next-app page layout & hackernews api custom server & deployment

    pwa features, web manifest & service worker auditing optimization, #sizematters
  23. 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
  24. 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 } )
  25. 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 } ` )
  26. / / 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 % )
  27. 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 " , }
  28. 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 % ) . . .
  29. 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