Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleeding edge

61 vues

Publié le

Qu’est-ce qu’une application web à l’état de l’art en 2018 ?

En évolution constante, les standards changent d’année en année et il faut régulièrement se mettre à jour sous peine d’être à la traîne. Si vous n’avez pas encore surfé sur la vague Progressive Web App, Server-Side Rendering ou encore Code Splitting, ce talk est pour vous. Il vous fera découvrir les pratiques et les outils d'une stack web moderne.

Par Anthony Giniers, Software Engineer chez Xebia

Toutes les informations et vidéos sur xebicon.fr

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

XebiCon'18 - La Web App d'aujourd'hui et de demain : état de l'art et bleeding edge

  1. 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. 2. @Xebiconfr #Xebicon18 @aginiers Qui suis-je ? Anthony Giniers Software Engineer @aginiers 2
  3. 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. 4. @Xebiconfr #Xebicon18 @aginiers Sommaire Ca ne sera pas : ● Une guerre des frameworks 4
  5. 5. @Xebiconfr #Xebicon18 @aginiers 5
  6. 6. @Xebiconfr #Xebicon18 @aginiers SPA (Single-Page Application) 6
  7. 7. @Xebiconfr #Xebicon18 @aginiers SPA 7 Home.html P1.html Sessions
  8. 8. @Xebiconfr #Xebicon18 @aginiers SPA 8 /article GET /comments State JSON
  9. 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. 10. @Xebiconfr #Xebicon18 @aginiers Progressive Web Apps (PWA) 10
  11. 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. 12. @Xebiconfr #Xebicon18 @aginiers SSR (Server-Side Rendering) Les prémisses 12
  13. 13. @Xebiconfr #Xebicon18 @aginiers SSR Mélanger SPA et SSR, ça voulait dire ... 13
  14. 14. @Xebiconfr #Xebicon18 @aginiers SSR Méthode 1 14 .jsp Rerender
  15. 15. @Xebiconfr #Xebicon18 @aginiers SSR Méthode 2 (prerender) 15 / /articles /search home.html articles.html search.html
  16. 16. @Xebiconfr #Xebicon18 @aginiers Universal JavaScript 16
  17. 17. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 17
  18. 18. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 18 Contexte (url, user…) State <html> ... </html>
  19. 19. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 19 <script> window.__MY_APP_STATE__ = state; </script>
  20. 20. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 20 <html> ... </html> State+ hydratation
  21. 21. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 21
  22. 22. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 22
  23. 23. @Xebiconfr #Xebicon18 @aginiers Code Splitting 23
  24. 24. @Xebiconfr #Xebicon18 @aginiers Code Splitting 24 /home /articles/1 Article.js Home.js SPA classique
  25. 25. @Xebiconfr #Xebicon18 @aginiers Code Splitting 25 Article.js Home.js App.js chunk1.js chunk2.js chunk3.js
  26. 26. @Xebiconfr #Xebicon18 @aginiers Code Splitting 26
  27. 27. @Xebiconfr #Xebicon18 @aginiers Prefetching/Precaching 27
  28. 28. @Xebiconfr #Xebicon18 @aginiers Precaching prefetch et preload : 28 <link rel="prefetch" href="chunk1.js"> <link rel="preload" href="chunk2.js">
  29. 29. @Xebiconfr #Xebicon18 @aginiers Precaching Mode offline ? 29
  30. 30. @Xebiconfr #Xebicon18 @aginiers Service Workers 30
  31. 31. @Xebiconfr #Xebicon18 @aginiers main Service Workers 31 sw1.js sw2.js
  32. 32. @Xebiconfr #Xebicon18 @aginiers Service Workers 32 sw fetch /chunk1.js cache chunk1.js
  33. 33. @Xebiconfr #Xebicon18 @aginiers Service Workers Offline + Code Splitting ? 33
  34. 34. @Xebiconfr #Xebicon18 @aginiers Service Workers 34 sw cache
  35. 35. @Xebiconfr #Xebicon18 @aginiers Service Workers sw-precache github.com/GoogleChromeLabs/sw-precache 35
  36. 36. @Xebiconfr #Xebicon18 @aginiers Service Workers 36
  37. 37. @Xebiconfr #Xebicon18 @aginiers Service Workers 37
  38. 38. @Xebiconfr #Xebicon18 @aginiers Service Workers Offline + SSR ? (dynamique) 38
  39. 39. @Xebiconfr #Xebicon18 @aginiers App Shell Model 39
  40. 40. @Xebiconfr #Xebicon18 @aginiers App Shell Model 40
  41. 41. @Xebiconfr #Xebicon18 @aginiers App Shell Model 41 /home sw /shell
  42. 42. @Xebiconfr #Xebicon18 @aginiers App Shell Model 42 /home sw
  43. 43. @Xebiconfr #Xebicon18 @aginiers 43
  44. 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. 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. 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. 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. 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. 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
  50. 50. @Xebiconfr #Xebicon18 @aginiers 50
  51. 51. @Xebiconfr #Xebicon18 @aginiers Push notifications 51
  52. 52. @Xebiconfr #Xebicon18 @aginiers Push notifications 52 URL + Message Message /URL Push Service
  53. 53. @Xebiconfr #Xebicon18 @aginiers Push notifications 53 sw
  54. 54. @Xebiconfr #Xebicon18 @aginiers Push notifications 54
  55. 55. @Xebiconfr #Xebicon18 @aginiers Merci Questions ? 55
  56. 56. @Xebiconfr #Xebicon18 @aginiers SSR 56
  57. 57. @Xebiconfr #Xebicon18 @aginiers React ? Vue.js ? Angular ? 57
  58. 58. @Xebiconfr #Xebicon18 @aginiers React ? Vue.js ? Angular ? 58
  59. 59. @Xebiconfr #Xebicon18 @aginiers React ? Vue.js ? Angular ? ● React : 94% ● Vue : 91% ● Angular : 66% 59
  60. 60. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 60 { "timeline": [ {...tweet1}, {...tweet2}, {...tweet3} ] }
  61. 61. @Xebiconfr #Xebicon18 @aginiers SSR (Universal JavaScript) 61 ???

×