XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleeding edge
•
2 gostaram•580 visualizações
The document discusses modern web application architectures like single-page applications (SPAs), progressive web apps (PWAs), server-side rendering (SSR), code splitting, precaching, and service workers. It provides an overview of each technique including benefits, examples, and how they can work together. Specific topics covered include using SSR to improve SEO for SPAs, code splitting to reduce bundle size, precaching to enable offline use, and how service workers can cache assets to improve performance.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleeding edge
Semelhante a XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleeding edge (20)
Mais de Publicis Sapient Engineering
Mais de Publicis Sapient Engineering (20)
Último
Último (20)
XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleeding edge
- 1. @Xebiconfr #Xebicon18 @aginiers Build the future La web app d'aujourd'hui et de demain : état de l'art et bleeding edge Anthony Giniers 1
- 2. @Xebiconfr #Xebicon18 @aginiers Qui suis-je ? Anthony Giniers Software Engineer @aginiers 2
- 3. @Xebiconfr #Xebicon18 @aginiers Sommaire ● Single-Page Applications (SPA) ● Progressive Web Apps (PWA) ● Server-Side Rendering (SSR) ● Code splitting ● Precaching ● Service Workers ● Push notifications (bonus) 3
- 4. @Xebiconfr #Xebicon18 @aginiers Sommaire Ca ne sera pas : ● Une guerre des frameworks 4
- 6. @Xebiconfr #Xebicon18 @aginiers SPA (Single-Page Application) 6
- 8. @Xebiconfr #Xebicon18 @aginiers SPA 8 /article GET /comments State JSON
- 9. @Xebiconfr #Xebicon18 @aginiers SPA VS rendu serveur : 9 ➔ Premier rendu lent ➔ SEO ➔ Taille du javascript beaucoup plus grande ...Et on reste loin d’une expérience native
- 10. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps (PWA) 10
- 11. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps ➔ Rapide ➔ Fiable ◆ mode offline ➔ Engageante ◆ ajout au Home Screen ◆ expérience fullscreen ◆ splash screen customisé ◆ notifications ◆ …. 11
- 12. @Xebiconfr #Xebicon18 @aginiers SSR (Server-Side Rendering) Les prémisses 12
- 13. @Xebiconfr #Xebicon18 @aginiers SSR Mélanger SPA et SSR, ça voulait dire ... 13
- 14. @Xebiconfr #Xebicon18 @aginiers SSR Méthode 1 14 .jsp Rerender
- 15. @Xebiconfr #Xebicon18 @aginiers SSR Méthode 2 (prerender) 15 / /articles /search home.html articles.html search.html
- 16. @Xebiconfr #Xebicon18 @aginiers Universal JavaScript 16
- 17. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 17
- 18. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 18 Contexte (url, user…) State <html> ... </html>
- 19. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 19 <script> window.__MY_APP_STATE__ = state; </script>
- 20. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 20 <html> ... </html> State+ hydratation
- 21. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 21
- 22. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 22
- 23. @Xebiconfr #Xebicon18 @aginiers Code Splitting 23
- 24. @Xebiconfr #Xebicon18 @aginiers Code Splitting 24 /home /articles/1 Article.js Home.js SPA classique
- 25. @Xebiconfr #Xebicon18 @aginiers Code Splitting 25 Article.js Home.js App.js chunk1.js chunk2.js chunk3.js
- 26. @Xebiconfr #Xebicon18 @aginiers Code Splitting 26
- 28. @Xebiconfr #Xebicon18 @aginiers Precaching prefetch et preload : 28 <link rel="prefetch" href="chunk1.js"> <link rel="preload" href="chunk2.js">
- 29. @Xebiconfr #Xebicon18 @aginiers Precaching Mode offline ? 29
- 30. @Xebiconfr #Xebicon18 @aginiers Service Workers 30
- 31. @Xebiconfr #Xebicon18 @aginiers main Service Workers 31 sw1.js sw2.js
- 32. @Xebiconfr #Xebicon18 @aginiers Service Workers 32 sw fetch /chunk1.js cache chunk1.js
- 33. @Xebiconfr #Xebicon18 @aginiers Service Workers Offline + Code Splitting ? 33
- 34. @Xebiconfr #Xebicon18 @aginiers Service Workers 34 sw cache
- 35. @Xebiconfr #Xebicon18 @aginiers Service Workers sw-precache github.com/GoogleChromeLabs/sw-precache 35
- 36. @Xebiconfr #Xebicon18 @aginiers Service Workers 36
- 37. @Xebiconfr #Xebicon18 @aginiers Service Workers 37
- 38. @Xebiconfr #Xebicon18 @aginiers Service Workers Offline + SSR ? (dynamique) 38
- 39. @Xebiconfr #Xebicon18 @aginiers App Shell Model 39
- 40. @Xebiconfr #Xebicon18 @aginiers App Shell Model 40
- 41. @Xebiconfr #Xebicon18 @aginiers App Shell Model 41 /home sw /shell
- 42. @Xebiconfr #Xebicon18 @aginiers App Shell Model 42 /home sw
- 44. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps 44 Expérience native : - Ajout au Home Screen - Splash Screen - Cacher l’url - Changer la couleur de la status bar et de la toolbar - Notifications - ...
- 45. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps 45 { "short_name": "MyApp", "name": "My App", "icons": [ { "src": "/static/favicon-96x96.png", "sizes": "96x96 72x72 64x64 48x48 16x16", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#4169E1", "background_color": "#ffffff" } manifest.json
- 46. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps 46 { "short_name": "MyApp", "name": "My App", "icons": [ { "src": "/static/favicon-96x96.png", "sizes": "96x96 72x72 64x64 48x48 16x16", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#4169E1", "background_color": "#ffffff" } manifest.json Nom de l’application
- 47. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps 47 { "short_name": "MyApp", "name": "My App", "icons": [ { "src": "/static/favicon-96x96.png", "sizes": "96x96 72x72 64x64 48x48 16x16", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#4169E1", "background_color": "#ffffff" } manifest.json Icônes
- 48. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps 48 { "short_name": "MyApp", "name": "My App", "icons": [ { "src": "/static/favicon-96x96.png", "sizes": "96x96 72x72 64x64 48x48 16x16", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#4169E1", "background_color": "#ffffff" } manifest.json Cacher l’url
- 49. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps 49 { "short_name": "MyApp", "name": "My App", "icons": [ { "src": "/static/favicon-96x96.png", "sizes": "96x96 72x72 64x64 48x48 16x16", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#4169E1", "background_color": "#ffffff" } manifest.json Couleur de la status bar
- 51. @Xebiconfr #Xebicon18 @aginiers Push notifications 51
- 52. @Xebiconfr #Xebicon18 @aginiers Push notifications 52 URL + Message Message /URL Push Service
- 53. @Xebiconfr #Xebicon18 @aginiers Push notifications 53 sw
- 54. @Xebiconfr #Xebicon18 @aginiers Push notifications 54
- 57. @Xebiconfr #Xebicon18 @aginiers React ? Vue.js ? Angular ? 57
- 58. @Xebiconfr #Xebicon18 @aginiers React ? Vue.js ? Angular ? 58
- 59. @Xebiconfr #Xebicon18 @aginiers React ? Vue.js ? Angular ? ● React : 94% ● Vue : 91% ● Angular : 66% 59
- 60. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 60 { "timeline": [ {...tweet1}, {...tweet2}, {...tweet3} ] }
- 61. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 61 ???