Theory
Users જે જુએ તે build કરવું
Planning અને design પૂરાં થયા પછી હવે તમે build કરો છો. Development સામાન્ય રીતે બે ભાગમાં વહેંચાય છે: front end, જે users જુએ અને interact કરે છે, અને back end, જેમાં server-side logic હોય છે. આ lesson front end વિશે છે.
Front-end development તમારા wireframesને chosen framework, જેમ કે Angular, React અથવા mobile toolkit, વડે real working screensમાં ફેરવે છે. અહીં UI/UX design code બને છે જેને user ખરેખર touch કરે છે. Front end design પ્રમાણે, clean structure સાથે અને backend સાથે connected રીતે બનાવો, જેથી interface દેખાવમાં પણ સાચું હોય અને કાર્ય પણ કરે.
Theory
Front end સારી રીતે કેવી રીતે build કરવું
થોડા practices front-end development smooth બનાવે છે.
Design પરથી build કરો: wireframes અને user flow implement કરો. Coding કરતી વખતે layout improvisation ન કરો. Reusable components બનાવો: card, form અથવા navigation bar જેવા pieces એક વાર બનાવો અને reuse કરો, જેમ તમે web અને mobile coursesમાં શીખ્યા છો. Input અને validation handle કરો: user input મેળવો, validate કરો અને clear feedback આપો. Backend સાથે connect કરો: API callsથી data fetch અને send કરો, જેથી interface static નહીં પણ live બને.
અને incrementally build કરો: આગળની screen અથવા feature પર જતાં પહેલાં એક screen અથવા feature સંપૂર્ણ working અને tested બનાવો. બધું એકસાથે code કરીને અંતે debuggingનો મોટો problem ન બનાવો.
Formula
Front end એટલે UX અને codeનું મિલન
Front end શું છે તે યાદ રાખો: તે systemનો user's entire experience છે. Backend અને database કેટલાંય સારા હોય, user માત્ર front end જુએ છે. તેથી તેની usability અને correctness project વિશે userનો આખો judgement shape કરે છે.
Front end userને ધ્યાનમાં રાખીને બનાવો: UX designને faithful રાખો, responsive અને clear interface આપો અને mistakes માટે forgiving feedback આપો. UI/UX planningનું સાચું પરિણામ એવી interface છે જે pleasant અને સરળતાથી વાપરી શકાય. Solid backend ઉપર clean, working front end complete projectનું ચિહ્ન છે. Users માટે front end તમારા આખા projectનો face છે.
Quiz
Projectના front end develop કરતી વખતે કઈ practice સારી છે?
- Wireframes ignore કરીને codeમાં layout improvise કરવો
- Wireframes અને design પરથી build કરવું, reusable components બનાવવાં, input અને validation handle કરવાં, અને incrementally test કરવું
- બધી screens એકસાથે code કરીને અંતે debug કરવું
- Backend connection skip કરવું
Show the answer
Wireframes અને design પરથી build કરવું, reusable components બનાવવાં, input અને validation handle કરવાં, અને incrementally test કરવું
Good front-end practiceમાં wireframes અને design પરથી faithful build કરવું, reusable componentsમાં UI structure કરવું, input validation અને clear feedback આપવું તથા one screen અથવા feature at a time incrementally test કરવું સામેલ છે. Option A design work બગાડે છે અને inconsistent interface બનાવે છે. Option C અંતે tangled અને મોટો debugging problem બનાવે છે. Option D ખોટું છે: backend connection વગર front end real data બતાવી અથવા real work કરી શકતું નથી. Designથી build કરો, components reuse કરો, input validate કરો અને incremental progress કરો.
Think first
એક વખતે એક feature build કરવું કેમ સારું છે?
આગળ વધતાં પહેલાં એક screen સંપૂર્ણ working કેમ ન બનાવવી? આખું front end પહેલા build કરીને પછી test કરવું વધુ ઝડપી નથી? પછી tap.
Show the answer
કારણ કે એક વખતે એક feature build અને verify કરવાથી problems SMALL અને LOCALISED રહે છે. Bug આવે ત્યારે હમણાં બનાવેલા નાના ભાગમાં શોધી શકાય છે. આખું front end test કર્યા વગર build કરશો તો અનેક intertwined bugs એકસાથે સામે આવશે અને તેને untangle કરવું મુશ્કેલ બનશે.
એક screen અથવા feature complete કરીને test કરવાથી bugનું location સ્પષ્ટ રહે છે અને foundation working છે તેની ખાતરી થાય છે. Progress પણ visible અને motivating રહે છે. સમય ઓછો પડે તો half-built wholeને બદલે તમારી પાસે finished featuresનો set હશે.
વિપરીત રીતે, ઘણા screens, forms અને interactions એકસાથે build કરીને અંતે run કરશો તો bugsની flood આવશે. Bugs એકબીજા સાથે interact કરશે; કયો problem કયા symptomનું કારણ છે તે સમજવું મુશ્કેલ બનશે. એક bug fix કરતાં બીજો બહાર આવી શકે છે.
Incremental development backend integrationને પણ feature by feature test કરવાની તક આપે છે. Front end અને back end વચ્ચેનો mismatch વહેલો મળી જાય છે. આ agile developmentની core professional practice છે: small, complete અને tested stepsમાં કામ કરો. તે slower નથી; problems pile up ન થાય તેથી faster અને safer છે.
Summary
Key takeaways
- Developmentમાં front end usersને દેખાય છે અને back end server-side logic રાખે છે.
- Front-end development wireframesને chosen frameworkમાં working screensમાં ફેરવે છે.
- Layout codeમાં improvise કરવાને બદલે design, wireframes અને user flow પરથી build કરો.
- UIને reusable componentsમાં structure કરો, input અને validation handle કરો અને clear feedback આપો.
- API callsથી backend સાથે connect કરો જેથી interface real data અને real actions સાથે કામ કરે.
- Incrementally build કરો: એક screen અથવા feature working અને tested થયા પછી આગળ વધો.
- Memory hook: design પરથી build કરો, components reuse કરો, input validate કરો, backend connect કરો અને એક સમયે એક tested feature બનાવો.