Changement de paradigme: de l'app HTML à l'app JavaScript

Transcript

1. WAQ <3
2. Marketing Social dans un univers cloud-mobile à l’aube du Web 3.0 #waq-social-cloud-web3
3. SPA vrai…
4. CHANGEMENT DE PARADIGME de l’app HTML à l’app JavaScript
7. &
10. Comment faire des apps JavaScript sans se faire mal
11. ATTENTION Peut contenir des traces d’opinions
12. ATTENTION Peut contenir des traces d’opinions
13. SPA == App JavaScript Client == Browser == Navigateur Terminologie == App Frontend API == Backend
14. Plan de match ‣ C’est quoi une SPA? ‣ Frameworks & outils ‣ Structure d’applications ‣ Design d’API ‣ Tests
15. SPA C’est quoi?
16. C’est quoi une app JavaScript (SPA)? App web où le client est en charge de gérer les différents états sans recharger la page.
17. SPA vs app HTML ‣ Aucun chargement après le chargement initial ‣ Conserve l’état entre les différentes parties de l’application ‣ Le UI (HTML?) est généré par le client ‣ Beaucoup de JavaScript
18. Simuler une application Desktop
19. Les SPA, awesome pour ‣ Gérer plusieurs états en simultanément ‣ Apps offline ‣ Des UI très interactifs & complexes ‣ Packager pour mobile / desktop
22. Les SPAs ne remplacent pas les documents hypertextes
23. Une SPA c’est aussi deux applications
24. bien plus beau mais bien plus difficile
25. Les prérequis
26. l’ami, tu connais?
27. $(document).ready(function() { $('.bxslider').bxSlider(); $('.tooltip').tooltipster(); }); X
28. $(document).ready(function() { $('.bxslider').bxSlider(); $('.tooltip').tooltipster(); }); X
29. var a, b; (function () { var a = b = 'TEST'; })() console.log(a, b); // => ?
30. Le web, l’ami, tu connais?
31. SPA Quel Framework choisir?
33. (page blanche)
34. MVC browser != MVC serveur Macération de Viande de Cerf
35. MVC browser != MVC serveur Macération de Viande de Cerf
36. Build tool prenez en un. Broccoli Gulp Grunt
37. SPA Structurer 2 applications
38. App JavaScript index.html API Serveur JSON via HTTP
39. App JavaScript index.html API Serveur JSON via HTTP App iOS App Android
40. Un .git? Deux .git? Quarante-deux .git?
41. Un repo tant que ça fonctionne
42. Un repo tant que ça fonctionne ‣ Simplicité pour : ‣ Synchroniser les versions API <-> web app ‣ Déploiement atomiques
43. app/ adminjs/ -> app/assets/javascripts/admin jsapp/ -> app/assets/javascripts/discourse bin/ config/ db/ docs/ lib/ log/ public/ script/ spec/ test/ vendor/
44. client/ # SPA server/ # API Procfile README.md Structure alternative
45. Servir 2 apps
46. Servir 2 apps en dev 1) Builder la SPA dans public/ de l’app serveur
47. Servir 2 apps en dev 2) Build tool + proxy vers l’API + Foreman var Proxy = require('http-proxy'); app.use('/', function(req, res, next){ proxy.web(req, res, { target: BACKEND_URL }); });
49. Servir 2 apps en prod
50. SPA Design d’API
51. API expérience utilisateur →
52. Écrivez d’abord la Documentation
55. Utopique en réflexion Pragmatique en implémentation
56. REST REpresentational State Transfer
57. REST PUT /users/1 POST /users GET /users GET /users/1 DELETE /users/1
58. RPC Remote Procedure Call
59. RPC PUT /users/1/ban
60. REST ou RPC ? LES DEUX
61. Considérez les conventions de vos outils
62. Ressources « flat »
63. Ressources « flat » /threads/1/posts /users/1/posts
64. Ressources « flat » /threads/1/posts /users/1/posts ↳ /posts ?thread_id={id} ?user_id={id}
65. Agnostique de la session* * En restant pragmatique
66. Agnostique de la session* * En restant pragmatique PUT /user
67. * En restant pragmatique PUT /user PUT /users/1 → Agnostique de la session*
68. * En restant pragmatique POST /messages { thread_id: 33, message: "Jamón" } Agnostique de la session*
69. * En restant pragmatique POST /messages { thread_id: 33, message: "Jamón" } { user_id: 1337 thread_id: 33, message: "Jamón" } → Agnostique de la session*
70. Relations — it’s complicated
71. Relations Inclure ou référencer?
72. Relations - Inclure { post: { message: "APIs, pffft.", created_at: "2015-03-18T19:15:09Z", user: { id: 1337 name: "Bilbo" } } }
73. Relations - Référencer { post: { message: "APIs, pffft.", created_at: "2015-03-18T19:15:09Z", user_id: 1337 } }
74. Relations - Référencer { post: { message: "APIs, pffft.", created_at: "2015-03-18T19:15:09Z", links: { user: "https://ton.app/api/users/1337" } } }
75. Inclure ou référencer?
76. LES DEUX Inclure ou référencer?
77. représentation
78. jsonapi.org
79. Soyez smath
83. Soyez smath def publish(post_id) post = Post.find(post_id) if post.published raise AlreadyPublishedError end post.publish render(post) end
84. Soyez smath def publish(post_id) post = Post.find(post_id) if !post.published post.publish end render(post) end def publish(post_id) post = Post.find(post_id) if post.published raise AlreadyPublishedError end post.publish render(post) end
85. Clients deviennent désynchronisés
86. API, recap ‣ Documentation ‣ Pragmatisme avant tout ‣ Une représentation par ressource ‣ URL flats ‣ Soyez smath
87. SPA Tests automatisés
88. Tests automatisés
89. Quels sont les objectifs ?
90. Faciliter le développement Assurer la pérennité de l’application
91. Test unitaires Backend Frontend
92. Test API
93. Payload documenté
94. Payload documenté → /api/endpoint
95. Payload documenté → /api/endpoint → → Effets de bord documentés Réponse documentée
97. Tester l’interaction utilisateur
98. // Test Publish message
99. // Test Publish message mockEndpoints();
100. // Test Publish message mockEndpoints(); visit('messages/new')
101. // Test Publish message mockEndpoints(); visit('messages/new') fillIn('#message', 'Hello WAQ')
102. // Test Publish message mockEndpoints(); visit('messages/new') fillIn('#message', 'Hello WAQ') submit('#save-message')
103. // Test Publish message mockEndpoints(); visit('messages/new') fillIn('#message', 'Hello WAQ') submit('#save-message') equal(App.posts.length, 1) equal(App.posts[0], 'Hello WAQ')
105. Rouler plusieurs suites de tests ./client/tests && ./server/tests
106. SPA TLDR;
107. Le résultat d’une SPA peut être incroyable
108. Y’en aura pas de facile
109. Restez critique
110. Restez pragmatique
111. Merci.