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