Weekly Progress 4 — How React-Redux works in User Management and Print Pages and Software Architecture
What Have I Done ?
Pada minggu ke 11 perkuliahan PPL ini saya lebih mendalami mengenai react-redux dengan membaca beberapa artikel dan mengimplementasikannya kepada User Management dan Print pages.
React cenderung lebih sulit dipahami dibandingkan dengan framework javascript lainnya seperti vue ataupun angular dikarenakan cara berpikirnya yang berbeda. React juga memerlukan learning curve yang cukup tinggi karena banyak sekali modul yang harus dipelajari pada react, salah satunya adalah redux yang akan melakukan data flow management pada component. Untuk lebih jelasnya mari kita belajar bagaimana react diimplementasikan pada user management dan print pages step by step sesuai dengan “Thinking in react” pada website official react.
Step 1: Start with A Mock, Break the UI into A component Hierarchy
Salah satu prinsip react yang paling penting adalah memulai dengan mock up. Hal ini diperlukan karena konsep dari react adalah render by component, oleh karena itu sangat penting bagi kita untuk mendesain component yang baik . Salah satu teknik untuk mendesain component adalah Single Responsibility Principle, yaitu idealnya sebuah component hanya melakukan satu hal. Apabila component tersebut berkembang maka komponen tersebut harus direfactor dan dibagi menjadi subcomponent yang lebih kecil.
Pada ketiga mock up diatas dapat kita lihat bahwa ketiga buah pages tersebut memiliki step-progress, navbar dan footer yang sama sehingga ketiga pages tersebut dapat buat hierarkinya seperti berikut
PrintPage Container
— Navbar Component
— Print Component
— —Preview Component
— —Payment Component
— —Done Component
— Footer component
Step 2 : Build A Static Version in React
Coding time!, Let’s make our hands dirty
Seakarang saatnya kita mengimplementasikan komponen yang telah kita definisikan diatas kedalam kode react. Pada tahap ini komponen yan dibuat masih berupa statik, sehingga tidak ada interaktifitas antara user dengan komponen. Komponen terdiri dari props dan tanpa menggunakan state.
Step 3: Identify The Minimal (but complete) Representation of UI State
Prinsip yang dapat mempermudah mengidentifikasi state adalah dengan menjawab 3 pertanyaan berikut
- Is it passed in from a parent via props? If so, it probably isn’t state.
- Does it remain unchanged over time? If so, it probably isn’t state.
- Can you compute it based on any other state or props in your component? If so, it isn’t state.
pada print komponen step, isLoading dan error bukan state karena merupakan props yang di pass dari parent. Selain itu tidak terdapat juga komponen yang selalu berubah-ubah berdasarkan waktu (selain step, isLoading dan error yang sudah di representasikan sebagai props) sehingga pada print page component terluar ini tidak memerlukan state dan merupakan stateless component.
Step 4: Identify Where Your State Should Live
Salah satu prinsip penting dari react adalah bisa melakukan passing state dari parent component menjadi props pada child component. Oleh karena itu, sangat penting untuk mengidentifikasikan dimana state seharusnya hidup pada child atau parent component. Pada print page diatas karena tidak ada state pada parent component maka kita akan mengabaikan step ini.
Step 5: Add Inverse Data Flow
Pada beberapa kasus, react membutuhkan passing state ke parent component. Contohnya seperti yang terdapat pada artikel thinking in react, component Filterable ProductTable merupakan sebuah parent component yang membutuhkan informasi callback dari child componentnya yaitu SearchComponent. Hal ini bisa dilakukan dengan inverse data flow atau dapat juga menggunakan redux yaitu library javascript yang dapat menangani data flow dengan cara menyimpannya pada sebuah global store (redux-store) yang kemudian dapat diakses bersama-sama dengan melakukan dispatching dan akan diatur kembalian statenya oleh reducer.
What have I learnt ?
- Redux in depth
- Styled-Component
- Data-Flow in Redux
- Redux Store management
- React-Router
What problem did I encounter ?
Masalah yang saya dapatkan pada minggu ke 11 ini adalah belum mahirnya saya dalam mendesain state pada komponen sehingga perlu banyak berkonsultasi dengan teman front-end saya gunawan.
What am I going to do next?
Membuat halaman history print dan notifikasi. Minggu selanjutnya juga saya akan sharing mengenai redux in depth :)
Software Architecture
Dari desain arsitektur diatas akan didapatkan software scalability yang baik karena memiliki sifat low coupling pada setiap servicenya, sehingga apabila terdapat perubahan arsitektur dan pengguna yang semakin banyak, refactoring tidak akan terlalu banyak dibutuhkan.
gambar diatas menggunakan pattern layered patern sebagai software architecture layer . Terdapat frontend sebagai UI layer, Backend dan microservice sebagai Application Layer, DB Server sebagai persistence layer
Sumber literature https://towardsdatascience.com/10-common-software-architectural-patterns-in-a-nutshell-a0b47a1e9013
Have a nice day!
