Reusable functions

Reusable functions

Express Summary: Organize complex logic by creating reusable functions for cleaner code.

Problem: Complex and repetitive logic

Just like visual elements with components, we need to organize algorithmic elements with functions. This makes logic cleaner and allows reusing certain functionalities like "get number of completed tasks".

1. Create a function script

New script

1. Right-click � New Script
2. Name the script "fonction" or "functions"
3. Important: Change scope to Frontend

The three available scopes

• Frontend: client-side user interface logic
• Backend: server-side logic
• Shared: functions usable everywhere (frontend + backend)

Why not put everything in Shared?

• Performance: user only loads client, not server
• Security: certain logic (connection, etc.) shouldn't be exposed client-side
• Architecture: avoid circular dependencies

2. Create the getTotalTasks function

Function configuration

1. Name the function getTotalTasks
2. Check Export to import it elsewhere
3. � Attention: only check Export if really necessary (avoid circular dependencies)

Migrate logic

1. From Main page, copy all total task calculation logic:
   • get store � spread � get property (cards) � Map � Sum
2. Paste into getTotalTasks function
3. Connect input to beginning of chain (map)
4. Add an output named "totalTasks" of type number
5. Connect result (sum) to output

3. Create the getFinishTasks function

Same principle

1. Create function getFinishTasks
2. Check Export
3. Migrate completed task calculation logic:
   • get store � spread � get property (cards) � Filter � hat[0] � get property (tasks) � get length

Configure inputs/outputs

1. Connect input to filter
2. Add "finishTasks" output of type number
3. Connect result to output

4. Use functions in Main

Clean old logic

1. Return to Main page
2. Delete all complex calculation blocks
3. Keep only division, multiplication, and rounding blocks

Import and use new functions

1. Add getTotalTasks to logic
2. Add getFinishTasks to logic
3. Connect execution: computed � getTotalTasks � getFinishTasks
4. Connect results:
   • totalTasks � "total" input of division
   • finishTasks � "completed" input of division

Advantages of this approach

Cleaner code

• Main logic readable and concise
• Separation of responsibilities
• Explicit function names

Reusability

• Functions available throughout application
• Avoids code duplication
• Centralized maintenance

Performance

• Optimized loading by scope
• Avoids unnecessary dependencies

Best practices

When to use Export?

• Only if function will be reused elsewhere
• Avoid systematic export to not overload application

Scope organization

• Frontend: interface calculations, formatting, client-side validations
• Backend: authentication, database, sensitive business logic
• Shared: common utilities, constants, helpers

Function structure

1. Input: entry parameters
2. Logic: data processing
3. Output: typed and named result

Final result

The percentage still works perfectly, but with much more organized and maintainable code. Functions can now be reused in other parts of the application.

Tests and validation

1. Test functions independently: each function can be tested individually
2. Verify reusability: import functions in other components
3. Performance: loading optimized thanks to appropriate scopes

Architecture summary

Final project structure

• Pages: user interface and display logic
• Components: reusable elements with properties
• Scripts/Functions: business logic organized by scope
• Types: data structure definitions
• Store: global application state

Congratulations! You now have a functional Trello application with clean and maintainable architecture.