Exploring PEMPA Architecture on Dicoding.com

Transcript

1. Exploring PEMPA Architecture on Dicoding.com Rizqy Hidayat Tech Lead, Dicoding Indonesia
2. https://www.epicweb.dev/the-webs-next-transition
3. Revisiting MPA & SPA
4. Multi Page Application • Simple mental model ◦ Navigating between pages by clicking links ◦ Send data by submitting a form • The very basic HTTP request-response • Full-page reload for each request
5. Single Page Application • No full-page reload, instant feeling of page change • Animated page transitions • Seamless, natural interaction
6. Migrating to SPA? Wait… • Small team with many backlogs to work with • SPA means rewriting app from scratch + creating new API endpoint • Maintaining 2 projects at the same time is hard
7. Alright, then how?
8. 1 Use new architecture on new projects
9. 2 Progressively Enhancing Dicoding.com
10. PEMPA what?
11. PEMPA Progressively Enhanced Multi Page Application
12. Progressive Enhancement Progressive Enhancement is the idea that our web applications should be functional and accessible to all web browsers and then leverage whatever extra capabilities the browser has to enhance the experience.
13. JavaScript Sprinkles ✨ • Some people mention it as JavaScript sprinkles • Using JS to enhanced user experience
14. You might already used it as a developer • Vanilla.js • jQuery • AJAX • Custom interactive UI • Client-side form validation • etc.
15. You might already experienced it as Dicoding user • Navigating learning path and filtering courses • Submitting answer on interactive video module • Load more comments on discussion page • Voting on discussion’s comment • Filtering Elite contributors • Adding inline comment on student submission • etc.
16. Who’s (still) using this architecture?
18. Implementation journey
20. 1 Good ol’ jQuery (or Vanilla.js) • Used to handle most of user interactions ◦ Custom select ◦ Validating form ◦ Conditional form field • Getting/sending data with AJAX
21. $('form').on('submit', event <> { event.preventDefault() $('.loading').show() $.post('/increase-temp') .then(response <> { $('.temp').text(`${response.data.value} celcius`) $('.loading').hide() }) })
22. const $table = `<div class="table-responsive"> <table>${$dataRows}</table> </div>`; let $info = 'Maaf, Anda <b>Tidak Lulus</b> pada Ujian ini, dengan detail sebagai berikut:'; if (parseInt(data.info.is_passed) <<= 1) { $info = 'Selamat, Anda <b>Lulus</b> pada Ujian ini, dengan detail sebagai berikut:'; } $alertDialog.find('.js-detail').html(sanitize($table)); $alertDialog.find('.js-info').html(sanitize($info));
23. jQuery is Very Helpful, But… • The codes grow and became harder to maintain • Component scope in unclear • Sometimes we need to render HTML inside JS ◦ It means template duplication • Sometimes problematic when working with dynamically inserted element • It’s huge, ~90kb minified
24. 2 • Clear component scope ◦ It’s called `controller` • Augment existing HTML ◦ Keep the HTML outside the JS • Working fine with dynamically inserted element
25. 3 • Enhance existing pages navigation behaviour with no to minimal JS to write • Turbo Drive: navigate links or submit forms without full-page reload • Turbo Frames: chunk some parts of UI into fragments, with capability to eager/lazy load them • Turbo Streams: deliver changes from server seamlessly
26. Other Inspirations
27. • Phoenix LiveView • Leveraging websocket for communication <div> <button phx-click="increase_temp"> Increase temperature </button> <h1> Current temperature: <%= @temperature %> </h1> </div>
28. • Built on Laravel ecosystem • Fully SSR • State is fully managed on server <div> <button wire:click="increment"> To the moon </button> <h1>{{ $count }}</h1> </div>
29. • Server-side agnostic • Support HTTP, WS, SSE to communicate with server <div> <button hx-post="/increase-temp" hx-target="temperature" > Increase temperature </button> <span id="temperature"></span> </div>
30. It’s Demo Time!
31. What Next?
32. • View Transitions API standard • Using view libraries for some specific pages, not as SPA • Micro-frontend miniature
33. At The End
34. Talking About DX • It might be a quiet street, sometimes it’s harder to find resources • We’re still gonna work with different language for the backend and the frontend
35. It depends~ • Choose architecture which best suits your current organization ◦ Remember they’re just tools to help your company success • DX is as important as UX, but if you have to choose, then the end user is the highest priority • Keep updated with current trends, not only on how might we used it, but learn the idea behind it
36. Thank you @rizqyhi