FrontEnd: Tantangan dan Strategi

FrontEnd: Tantangan dan Strategi

Situasi:

saya mempunyai system yang cukup kompleks {link}

• lebih dari 500 table
• FrontEnd mempunyai Tantangan tersendiri

Secara garis besar, ada 2 Team:

• Team A
  • Design - Business Process
    • file Dokumentasi
  • Design - UI, menggunakan:
    • figma.com
    • moqups.com
• Team X
  • Developer

catatan: saya menulis artikel ini, dengan semangat Menulis untuk ‘Future of Me’

Strategi

Untuk membuat irama kerja yang smooth, saya memerlukan suatu pedoman:

• membuat beberapa Task Besar, dengan tujuan yang spesifik
• CI / CD {Continuous Improvement / Continuous Development}

FrontEnd

• HTML
  • convert Design - UI ke HTML
  • bisa dengan menggunakan Tools di atas
  • atau Request: ke AI secara efektif dan efisien {Tone yang tepat}
• JavaScript
  • bagian untuk handle HTML
  • bagian untuk connect ke end-point di BackEnd

BackEnd

• Part 1: Read Data
  • data Simple {contoh: data untuk Dropdown}
  • data berupa Tabular
  • menggunakan teknik sesuai artikel Data Model part 2 - DTO {Data Transfer Object}
• Part 2: CRUD
  • data Simple
  • data Header - Detail
  • data dengan kolom berupa JSON format
• Part 3:
  • bagian BackEnd yang merupakan implementasi Design - Business Process

catatan untuk BackEnd:

• masing-masing Part dibuat untuk menghindari “stuck” pada BackEnd – secara keseluruhan
• bisa dimulai dari yang paling mudah:
  • seringkali yang urgent diperlukan: bagian BackEnd untuk “Read Data” saja
  • sedangkan bagian BackEnd yang lebih kompleks {implementasi Design - Business Process}, bisa dibuat berikutnya

GOAL: untuk User / Client

Pada akhirnya, semua hal teknis diatas untuk satu tujuan:

sebuah Product yang benar-benar berfungsi — untuk User/Client yang menggunakannya.

Itulah GOAL-nya.
Ketika ragu dalam mengambil keputusan, kembali ke GOAL tersebut.

Checklist

Task	Status
A. Document
o Design — Business Process
o Design — UI
B. Development
o FrontEnd
x HTML
x JavaScript
o handle HTML
o connect to end-point of BackEnd
o BackEnd
x part 1: Read Data
x part 2: CRUD
x part 3: implement the Design — Business Process

Reminder - SDR:

S {Situation → Specific → Simple → Speed → Shipment}
D {Define → Document → Design → Develop → Delivery}
R {Realistic → Refine → Result}