FrontEnd: Challenges and Strategy

FrontEnd: Challenges and Strategy

Situation:

I have a fairly complex system {link}

• more than 500 tables
• FrontEnd has its own set of Challenges

At a high level, there are 2 Teams:

• Team A
  • Design - Business Process
    • Documentation files
  • Design - UI, using:
    • figma.com
    • moqups.com
• Team X
  • Developer

note: I wrote this article with the spirit of Writing for ‘Future of Me’

Strategy

To create a smooth working rhythm, I need a set of guidelines:

• define several Big Tasks, each with a specific goal
• CI / CD {Continuous Improvement / Continuous Development}

FrontEnd

• HTML
  • convert Design - UI to HTML
  • can be done using the tools above
  • or Request: to AI effectively and efficiently {the right Tone}
• JavaScript
  • the part that handles HTML
  • the part that connects to the end-point on the BackEnd

BackEnd

• Part 1: Read Data
  • simple data {example: data for Dropdown}
  • data in Tabular
  • using guideline as written in article Data Model part 2 - DTO {Data Transfer Object}
• Part 2: CRUD
  • Simple data
  • Header - Detail data
  • data with columns in JSON format
• Part 3:
  • the BackEnd part that implements the Design - Business Process

notes for BackEnd:

• building each Part separately helps avoid getting “stuck” on the BackEnd as a whole
• start from the easiest part first:
  • often what’s urgent is only the BackEnd for “Read Data”
  • while the more complex BackEnd part {implementing Design - Business Process} can be built next

GOAL: for the User / Client

At the end of the day, all this technical work is built for one purpose:

a Product that actually works — for User/Client who use it.

That’s the GOAL.
When in doubt about a decision, come back to that GOAL.

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}